ESP32-WROOM-32Eで温湿度データをグラフで表示する

こんにちは、ENGかぴです。

Webサーバーを実装しクライアントからのレスポンスデータにchart.jsライブラリを組み込むことでデータをグラフ表示することができます。温湿度センサであるSHT35-DISを使って取得したデータをグラフ表示する方法をまとめています。

ESP32-WROOM-32E開発ボード（秋月電子）を使用しArduino IDEで開発を行います。また、AE-SHT35（秋月電子）を使用しています。

ESP32-WROOM-32Eを使って動作確認したことをまとめています。

ESP32-WROOM-32Eで学べるソフト開発と標準ライブラリの使い方

温湿度データをグラフで表示する
動作確認
ソースコード全体
関連リンク

温湿度データをグラフで表示する

温湿度データの取得方法及びWebサーバーを実装する方法を下記記事にまとめています。

ESP32-WROOM-32EでWebServerを実装する

Chart.jsを使ってブラウザー上にグラフ表示する方法を下記記事まとめています。

Chart.jsを使ってデータをブラウザー上でグラフ表示する

ChartライブラリをESP32-WROOM-32EのFlashに書き込む

ESP32-WROOM-32Eでグラフ表示するためにはHTMLデータを生成する箇所でChart.jsのライブラリを読み込む必要があります。

Chart.jsのライブラリの参照URLを外部のリンクにする方法はESP-WROOM-32Eとリンクが取れないためESP-WROOM-32E内にライブラリを実装する必要があります。

ESP32-WROOM-32EではSPIFFSライブラリを使用することでFlash領域をデータ領域として使用することができます。SPIFFSはFlashの一部をデータ領域として使用できるようにしてSDカードのようにアクセスできるように構成されています。

ESP32 Sketch Data Uploadを追加する手順

手順1
SPIFFSのプラグインをダウンロード
手順2
Arudinoスケッチ保存場所にtoolsフォルダを作成
手順3
toolsフォルダにダウンロードしたファイルを解凍して移動（コピー）

PR：わからないを放置せず、あなたにあった最低限のスキルを身に着けるコツを教えるテックジム　「書けるが先で、理解が後」を体験しよう！

SPIFFSにファイルを書き込む

下記に紹介している「ESP32 Sketch Data Upload」はArduino IDE Ver2.1.1では使用できません。使用する場合は旧バージョンを使用する必要があります。

SPIFFSプラグインをダウンロードしてArduino IDEのツールに「ESP32 Sketch Data Upload」を追加します。

GitHub-arduino-esp32fs-プラグインのダウンロード

ダウンロードしたファイルをArduinoフォルダに追加します。ダウンロードしたファイルを解凍すると「ESP32FS」フォルダが生成されます。Arduinoのスケッチブックの保存場所に指定しているフォルダ内で「tools」フォルダを作成してtoolsファルダー内にESP32FSをコピー（移動）します。

環境設定でスケッチブックの保存場所を確認することができます。初期のままであればドキュメント内のArduinoフォルダが指定されています。例ではC:\WorkSpace\Arduinoを指定しています。

toolsフォルダにESP32FSを追加した後でArduino IDEを起動するとツール欄にESP32 Sketch Data Upload」が追加されます。

ESP32 Sketch Data UploadをクリックするとFlashにデータを書き込むことができますがFlashにデータを書き込む前に書き込むファイルを準備する必要があります。Arduinoファイルが保管されているフォルダに「data」フォルダを作成します。

例ではArduinoファイルが「wifi-sht35-webs-chat」フォルダにあります。このフォルダ内に「data」フォルダを作成しChatr.min.jsとファビコンのアイコン（アイコン指定しない場合は不要）を追加しています。ファビコンはページのアイコンですが指定しない場合はデフォルトのアイコンとなります。

「data」フォルダにファイルを追加しツール内のESP32 Sketch Data Uploadをクリックすると書き込みが開始します。

PR：RUNTEQ（ランテック）- マイベスト３年連続1位を獲得した実績を持つWebエンジニア養成プログラミングスクール

SPIFFSからデータを取得する

#include <SPIFFS.h>
WebServer Wserver(80);

SPIFFS.begin();
Wserver.serveStatic("/myfavicon.ico",SPIFFS,"/myfavicon.ico");
Wserver.serveStatic("/chart.min.js",SPIFFS, "/chart.min.js");

SPIFFSライブラリを使用するためにSPIFFS.hをインクルードします。SPIFFS.begin()でSPIFFSに関する初期化を行います。

WebサーバーライブラリにおいてserverStatic()でFlashに保管したライブラリやファビコンをSPIFFSを使って参照できるようにします。

グラフ表示用のデータを準備する

float tempdat[CHART_SZ];
float humiddat[CHART_SZ];

void charDataSet(void){

  memmove( &tempdat[1], &tempdat[0],(CHART_SZ-1)*sizeof(float));
  memmove( &humiddat[1], &humiddat[0],(CHART_SZ-1)*sizeof(float));
  tempdat[0] = temp;
  humiddat[0] = humi;
}

Chart.jsで表示するための配列を生成します。SHT35-DISから取得したデータを配列の先頭に新しいデータが更新されるように格納します。

memmove()で配列の先頭から配列の最後尾よりも-1した範囲を配列の１つ分だけずらすことで配列の先頭を空けてから最新のデータを配列の先頭に格納します。

この処理をSHT35-DISから取得したタイミングで繰り返すことで配列の先頭から降順にデータが古くなり配列の先頭には常に最新のデータが格納されます。

HTMLデータの生成

void HtmlSet(void){
  String str = "";

  str += "<head>";
  str += "<link rel='shortcut icon' href='/myfavicon.ico' />"; //ファビコンを指定
  str += "<script src = '/chart.min.js'></script>"; //chart.min.jsを読み込み 
  str += "</head>";

HTMLデータを作成してブラウザに表示します。HTMLデータの<head>部分にファビコンを使用する場合は使用するファイルを指定します。<script>でchart.min.jsを読み込む指定を行います。

String str="";
 
str += "datasets: [{";
str += "label: '温度',";
str += "fill: false,";
str += "borderColor: 'red',";
str += "borderWidth: 1,";
str += "pointRadius: 0,";
str += "pointHoverBorderWidth: 10,";
str += "data: [";
  for(uint16_t i = 0; i< CHART_SZ; i++ ){
    str += tempdat[i]; 
    if(i != CHART_SZ-1 )str += ",";
  }
str += "]";
str += "}, {";

Chart.jsはHTTPファイルと関連付けられた配列であればX軸やY軸の値を配列名で指定するとグラフ表示ができますが、温湿度の履歴はESP32のRAMに格納しているため関連性がなく配列名を直接指定することができません。

10～15行目のように配列を文字列で追加してグラフのデータをセットする必要があります。例のようにdata[]に配列のデータを追加してHTMLデータを生成しています。

例）文字列追加の様子
配列の一番目を追加：data[25.03,
配列の二番目を追加：data[25.03,25.05,
配列のN番目を追加：data[25.03,25.05,・・・,25.07,
配列の追加が完了：data[25.03,25.05,・・・,25.07,・・・,25.04]

一文字でも間違うと表示できなくなるためテキストファイルなどでHTML形式で文章を生成しGoogle Chromeで開いて表示できることを確認しておくとよいでしょう。

ESP32のString型は65535バイト分（２バイト）までしか対応していないため文字の増やし過ぎには注意が必要です。スタックオーバーの原因にもなるので可能な限り文字列を少なくする工夫が必要です。

PR：スキマ時間で自己啓発！スマホで学べる人気のオンライン資格講座【スタディング】まずは気になる講座を無料で体験しよう！

動作確認

ESP32-WROOM-32EとSHT35-DISの配線例を示しています。回路図の番号はESP32 -WROOM-32Eの左上を1ピンとした時反時計回りにピンを数えた場合の番号としています。ピン番号横の（）内の番号はシルク印刷されているピンの名称です。

スマホのGoogle ChromeでIPアドレス「192.168.11.2」を入力しリクエストを送るとESP32-WROOM-32Eからスマホに返信し温湿度データと時間経過による温湿度情報がグラフ表示されました。

IPアドレス「192.168.11.2/ti」と存在しないURLを指定するとFile Not Foundが表示されることも確認しています。

スマホで温湿度情報をグラフで表示することは他のセンサーの動作情報を視覚的に確認することができるため応用範囲が広がりそうです。

ソースコード全体

ソースコードは記事作成時点において動作確認できていますが、使用しているライブラリの更新により動作が保証できなくなる可能性があります。また、ソースコードを使用したことによって生じた不利益などの一切の責任を負いかねます。参考資料としてお使いください。

リンクからZIPファイル形式のファイルをダウンロードし、任意の場所に展開していただくとテキストファイルが生成されます。

ソースコードをダウンロード

本ソースコードでグラフ表示するためにChart.jsライブラリをESP32 Sketch Data Uploadを使ってフラッシュ領域に書き込んでおく必要があります。また、chart.jsのバージョンが4.0.0以上ならchart.umd.jsを使用します。