はじめに
前回（#4 LCD表示編）でLCDにCO2濃度を表示できるようになりました。
今回はESP32でWebサーバーを立てて、ブラウザで CO2濃度をグラフ表示 します。
なぜWebサーバー・グラフをつけるのか
LCDでは「今の数値」しかわかりません。
CO2濃度が時間とともにどう変化したかをグラフで見られれば、分析がしやすくなると考えました。
例えば「何時頃に濃度が上がるのか」「換気でどれくらい下がるのか」が一目でわかります。
仕組み
ESP32自身がWebサーバーになり、ブラウザからアクセスするとグラフページを返します。
1. [ブラウザ] からESP32にアクセス
2. [ESP32] がCO2データ付きHTMLを返す
3. [ブラウザ] がグラフを表示
グラフの描画には Chart.js という無料のライブラリを使います。
使用ライブラリ
-
WiFi（ESP32標準） -
WebServer（ESP32標準）
Chart.jsはインターネットから読み込むのでインストール不要です。
コード
#include <HardwareSerial.h>
#include <MHZ19.h>
#include <WiFi.h>
#include <WebServer.h>
#include "secrets.h"
MHZ19 myMHZ19;
HardwareSerial mySerial(2);
int co2Value = 0;
int co2History[20] = {0};
int historyIndex = 0;
unsigned long lastTime = 0;
const char* ssid = SECRET_SSID;
const char* password = SECRET_PASSWORD;
WebServer server(80);
void handleRoot() {
String dataPoints = "";
for (int i = 0; i < 20; i++) {
int index = (historyIndex + i) % 20;
dataPoints += String(co2History[index]);
if (i < 19) dataPoints += ",";
}
String html = "<!DOCTYPE html><html>";
html += "<head><meta charset='UTF-8'>";
html += "<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>";
html += "</head><body>";
html += "<h1>CO2 Monitor</h1>";
html += "<p>現在のCO2: " + String(co2Value) + "ppm</p>";
html += "<canvas id='chart'></canvas>";
html += "<script>";
html += "var ctx = document.getElementById('chart').getContext('2d');";
html += "var chart = new Chart(ctx, {";
html += "type: 'line',";
html += "data: { labels: Array.from({length: 20}, (_, i) => i + 1),";
html += "datasets: [{ label: 'CO2 (ppm)', data: [" + dataPoints + "],";
html += "borderColor: 'rgb(75, 192, 192)', tension: 0.1}] },";
html += "options: { scales: { y: {beginAtZero: false } } }";
html += "});";
html += "setInterval(function() { window.location.reload(); }, 5000);";
html += "</script>";
html += "</body></html>";
server.send(200, "text/html", html);
}
void setup() {
Serial.begin(115200);
mySerial.begin(9600, SERIAL_8N1, 13, 14);
myMHZ19.begin(mySerial);
myMHZ19.autoCalibration(false);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("Wi-Fi接続成功!");
Serial.print("IPアドレス:");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.begin();
}
void loop() {
server.handleClient();
unsigned long currentTime = millis();
if (currentTime - lastTime >= 5000) {
lastTime = currentTime;
co2Value = myMHZ19.getCO2();
co2History[historyIndex] = co2Value;
historyIndex = (historyIndex + 1) % 20;
Serial.print("CO2: ");
Serial.println(co2Value);
}
}
使い方
- 書き込んだらSerial Monitorを開く
- 表示されたIPアドレス（例：192.168.1.50）を確認
- 同じWi-FiのスマホやpcのブラウザでそのIPアドレスにアクセス
グラフが表示されます。
一番ハマったポイント
ずっとリロードされてグラフが表示されない
最初、ブラウザがずっと再読み込みを繰り返すだけで、グラフがいつまでも表示されませんでした。
原因は loop() の中で delay(5000) を使っていたことでした。
delay() の間、ESP32は完全に停止します。その間ブラウザからのアクセスに応答できず、ページが正しく返せていなかったのです。
解決方法：delay()をやめてmillis()を使う
// 悪い例：delay()で5秒止まる
delay(5000);
// 良い例：millis()で時間を測る
unsigned long currentTime = millis();
if (currentTime - lastTime >= 5000) {
lastTime = currentTime;
// 5秒ごとの処理
}
millis() はESP32が起動してからの時間をミリ秒で返します。
これを使えばESP32を止めずに「5秒経ったか」を判定できるので、その間もブラウザに応答し続けられます。
この修正でグラフが無事表示されました。
コードのポイント
① 過去のデータを配列に保存
int co2History[20] = {0};
過去20件のCO2データを配列に保存し、グラフに表示しています。
② リング状にデータを保存
historyIndex = (historyIndex + 1) % 20;
% 20 で、20件を超えたら古いデータから上書きしていきます。
まとめ
- ESP32でWebサーバーを立てた
- Chart.jsでCO2をグラフ表示できた
- delay()をやめてmillis()にしたらリロード問題が解決した
delay() の落とし穴は初心者がハマりやすいポイントだと思います。同じ問題で困っている人の参考になれば嬉しいです。
次回はNTPで時刻を取得してグラフのX軸に表示します！
#6 NTP時刻編へ続く