×

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にアクセスしてみたり、はたまた外部接続デバイスへのアクセスを試みたいと思います。


フィリップス 電動歯ブラシ ソニッケアー 3100シリーズ (軽量) HX3673/33 ホワイト 【Amazon.co.jp限定・2024年モデル】

歯の健康を考えるのならPhilipsの電動歯ブラシがお勧めです。歯科医の推奨も多いみたいです。高価なモデルも良いですが、最安価なモデルでも十分に良さを体感できる。

シリコンパワー ノートPC用メモリ DDR4-2400(PC4-19200) 8GB×1枚 260Pin 1.2V CL17 SP008GBSFU240B02

Synology NASを拡張した時に入れたメモリーがコレ!永久保証の上、レビューも高評価。もちろん正常に動作しており、速度余裕も生まれて快適です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

投稿者

KeroYon

関連投稿

最近のお買い物etc.

なにを買ったのかとか、あまり意味のない備忘録的な記事です。 セカンドバイク用に買った、サイクルライト...

DEN (2)サブモニターも整備

DEN(男の隠れ家)その後です。 その後、仕事部屋に、趣味の作業にと、けっこう快適に利用しています。...

YAMAHA AX-10 (7)回路アナリティスクス-その3. 回路の改造ノードを同定する

さぁー、改造後のアンプの姿が見えてきた。回路図も書き終えた。 あとは、プリント基板のどの箇所からどの...

YAMAHA AX-10 (6)回路アナリティスクス-その2. 改造後のスキームを策定

YAMAHA AX-10魔改造シリーズ〜。 前回、分解から回路解析、パターン解析により回路詳細とブロ...

オーディオヘルスモニター (10)ついに最終実装形態へ、LANケーブルと真打センサー

オーディオシステムモニター編。 前稿ではWiiM (Linkplay) のUPnP配信の受信に成功し...

YAMAHA AX-10 (5)回路アナリティクス-その1

YAMAHA AX-10の魔改造シリーズ。 前回までのおさらい。AX-10を我が物にし、世界に一台の...