Roon ROCK を外部から、温度とファンノイズの両面でモニタリングするSTBを構想中。
一挙に解に辿り着くのではなく、あえて遠回りしながら一歩ずつ、じっくり学習を進めています。その方がESP32を使った設計制作に理解が深まるからです。
最終的な構成は、
- 温度センサとマイクがROCKの状態を収集する
- それをESP32が収集しデータ蓄積する
- ESP32の中でそれら情報がウェブダッシュボード化されている。
- 私はブラウザ経由で、そのウェブページへアクセスし、状態を知る
このため、次の一手として選んだのは「ESP32の中にウェブサーバーを立ち上げる」でした。
ここまで出来てしまえば、あとは外部情報を取得したり、センサー情報を取得したり、それを分析しテキスト化したりして、ウェブ上へ展開する。残すはそれだけとなります。
つまり、ウェブを立ち上げて状態監視システムとする、そこまで出来てしまえば後はいかようにも展開が可能です。今回はそこまでをゴールとします。

今回、準備したコードは下記のとおりです。
今回のポイントのひとつとして WebServer.h というライブラリをロードしている。これでウェブサーバーが立ち上げられるというわけですね。
#include <WiFi.h>
#include <WebServer.h>
// ===== WiFi設定 =====
const char* ssid = "あなたのSSID";
const char* password = "あなたのパスワード";
// ===== Webサーバー =====
WebServer server(80);
// トップページ
void handleRoot() {
String html;
html += "<html>";
html += "<head>";
html += "<title>ESP32 Monitor</title>";
html += "<meta http-equiv='refresh' content='5'>";
html += "</head>";
html += "<body>";
html += "<h1>ESP32 Status</h1>";
html += "<p>Micro Web Server is Running</p>";
html += "<p>IP ADDRESS: ";
html += WiFi.localIP().toString();
html += " </p>";
html += "<p>Uptime : ";
html += String(millis() / 1000);
html += " sec</p>";
html += "<p>RSSI : ";
html += String(WiFi.RSSI());
html += " dBm</p>";
html += "<p>FREE HEAP : ";
html += String(ESP.getFreeHeap());
html += " byte</p>";
html += "</body>";
html += "</html>";
server.send(200, "text/html", html);
}
void setup() {
Serial.begin(115200);
delay(3000);
Serial.println();
Serial.println("BOOT OK");
// ===== WiFi接続 =====
WiFi.mode(WIFI_STA);
Serial.println("CONNECTING...");
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println();
Serial.println("WiFi CONNECTED");
Serial.print("IP ADDRESS: ");
Serial.println(WiFi.localIP());
// ===== Webサーバー設定 =====
server.on("/", handleRoot);
server.begin();
Serial.println("WEB SERVER STARTED");
}
void loop() {
// Webアクセス処理
server.handleClient();
}
最初はウェブ上で「Web Server Running」と表示するだけの単純なものでしたが、徐々に欲が出て、ESP32の内部状態を取得して表示する、内部ダッシュボードになりました。
さらにここでポイントになるのが、
html += "<title>ESP32 Monitor</title>"; ...
などのコードです。本来なら、サーバー上に index.html / style.css などを設置してウェブ表示をしますが、ここでは簡易的に、コードの中にhtmlを埋め込んで、それを投影するような形にしているのです。
確かにhtmlをサーバー転送するのが王道ですが、こちらなによりダイレクトにデバッグが容易になります。実験や手習にはこれで十分。
さて、これを走らせてみた結果がコチラ。

上図は、ブラウザの画面です。ブラウザで自宅の [http://192.168.3.xxx] へアクセスして観たもの。
お見事。IPアドレス、動作時間、WiFi電波強度、それからメモリー空き容量などが情報表示されていて、5秒に1回リフレッシュがかかるようになっている。
前回同様、こんなにカンタンにサーバーを立ち上げることが出来た…というところが感慨深いです。厄介で凄い処理は、ほぼほぼ「ライブラリ」群で実現できているからこそ、つまり、先達の膨大な資産があるからこそ、我々はこんなに勘弁に複雑な処理を実現/享受できているわけですね。感謝感激。
さあ次回。次回はいよいよ、ESP内部ではなく。外部装置であるROCKにアクセスしてみたり、はたまた外部接続デバイスへのアクセスを試みたいと思います。

シリコンパワー ノートPC用メモリ DDR4-2400(PC4-19200) 8GB×1枚 260Pin 1.2V CL17 SP008GBSFU240B02
Synology NASを拡張した時に入れたメモリーがコレ!永久保証の上、レビューも高評価。もちろん正常に動作しており、速度余裕も生まれて快適です。

フィリップス 電動歯ブラシ ソニッケアー 3100シリーズ (軽量) HX3673/33 ホワイト 【Amazon.co.jp限定・2024年モデル】
歯の健康を考えるのならPhilipsの電動歯ブラシがお勧めです。歯科医の推奨も多いみたいです。高価なモデルも良いですが、最安価なモデルでも十分に良さを体感できる。