2024.09.22本記事はプロモーションが含まれています。こんにちは、ENGかぴです。Webサーバーを実装しクライアントからのレスポンスデータにchart.jsライブラリを組み込むことでデータをグラフ表示することができます。温湿度センサであるSHT35-DISを使って取得したデータをグラフ表示する方法をまとめています。IDEで開発を行います。AE-SHT35(秋月電子)を使用しています。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カードのようにアクセスできるように構成されています。Ver2.1.1では使用できません。使用する場合は旧バージョンを使用する必要があります。Upload」を追加します。GitHub-arduino-esp32fs-プラグインのダウンロードダウンロードしたファイルをArduinoフォルダに追加します。ダウンロードしたファイルを解凍すると「ESP32FS」フォルダが生成されます。Arduinoのスケッチブックの保存場所に指定しているフォルダ内で「tools」フォルダを作成してtoolsファルダー内にESP32FSをコピー(移動)します。環境設定でスケッチブックの保存場所を確認することができます。初期のままであればドキュメント内のArduinoフォルダが指定されています。例ではC:\WorkSpace\Arduinoを指定しています。Upload」が追加されます。UploadをクリックするとFlashにデータを書き込むことができますがFlashにデータを書き込む前に書き込むファイルを準備する必要があります。Arduinoファイルが保管されているフォルダに「data」フォルダを作成します。Flashに書き込むファイル例ではArduinoファイルが「wifi-sht35-webs-chat」フォルダにあります。このフォルダ内に「data」フォルダを作成しChatr.min.jsとファビコンのアイコン(アイコン指定しない場合は不要)を追加しています。ファビコンはページのアイコンですが指定しない場合はデフォルトのアイコンとなります。Uploadをクリックすると書き込みが開始します。"/chart.min.js");SPIFFSライブラリを使用するためにSPIFFS.hをインクルードします。SPIFFS.begin()でSPIFFSに関する初期化を行います。WebサーバーライブラリにおいてserverStatic()でFlashに保管したライブラリやファビコンをSPIFFSを使って参照できるようにします。humi;}Chart.jsで表示するための配列を生成します。SHT35-DISから取得したデータを配列の先頭に新しいデータが更新されるように格納します。memmove()で配列の先頭から配列の最後尾よりも-1した範囲を配列の1つ分だけずらすことで配列の先頭を空けてから最新のデータを配列の先頭に格納します。この処理をSHT35-DISから取得したタイミングで繰り返すことで配列の先頭から降順にデータが古くなり配列の先頭には常に最新のデータが格納されます。"</head>";HTMLデータを作成してブラウザに表示します。HTMLデータの<head>部分にファビコンを使用する場合は使用するファイルを指定します。<script>でchart.min.jsを読み込む指定を行います。{";Chart.jsはHTTPファイルと関連付けられた配列であればX軸やY軸の値を配列名で指定するとグラフ表示ができますが、温湿度の履歴はESP32のRAMに格納しているため関連性がなく配列名を直接指定することができません。10~15行目のように配列を文字列で追加してグラフのデータをセットする必要があります。例のようにdata[]に配列のデータを追加してHTMLデータを生成しています。Chromeで開いて表示できることを確認しておくとよいでしょう。ESP32のString型は65535バイト分(2バイト)までしか対応していないため文字の増やし過ぎには注意が必要です。回路図ESP32-WROOM-32EとSHT35-DISの配線例を示しています。-WROOM-32Eの左上を1ピンとした時反時計回りにピンを数えた場合の番号としています。番号横の()内の番号はシルク印刷されているピンの名称です。ChromeでIPアドレス「192.168.11.2」を入力しリクエストを送るとESP32-WROOM-32Eからスマホに返信し温湿度データと時間経過による温湿度情報がグラフ表示されました。Foundが表示されることも確認しています。スマホで温湿度情報をグラフで表示することは他のセンサーの動作情報を視覚的に確認することができるため応用範囲が広がりそうです。以下のソースコードはコンパイルして動作確認をしております。コメントなど細かな部分で間違っていたりやライブラリの更新などにより動作しなくなったりする可能性があります。参考としてお使いいただければと思います。"/chart.min.js");//chart.jsのバージョンが4.0.0以上ならchart.umd.jsを使用します。//テキストファイルであることを示している。Uploadを使ってフラッシュ領域に書き込んでおく必要があります。chart.jsのバージョンが4.0.0以上ならchart.umd.jsを使用します。関連リンクArduinoのライブラリを使って動作確認を行ったことを下記リンクにまとめています。XIAOで学べるソフト開発と標準ライブラリの使い方ESP32-WROOM-32Eで学べるソフト開発と標準ライブラリの使い方PR:技術系の通信教育講座ならJTEX最後まで、読んでいただきありがとうございました。組み込みエンジニアArduinoでデジタル加速度センサーの情報を取得ArduinoのWire(SPI)を使用すると加速度センサー(ADXL345)の加速度やタップ情報などを取得することができます。ADXL345のライブラリを流用して加速度センサーの情報をFIFO機能を使用して取得する方法をまとめました。組み込みエンジニアPICマイコン(PIC16F1827)でコンパレータを実装するPIC16F1827はコンパレータ機能を持っており基準電圧に対して入力電圧が高いか低いかを判断した結果を出力することができます。MCCでCMP実装し基準電圧にFVRを使う方法とDACを使う方法の2通りの動作確認を行いました。組み込みエンジニアエナジーハーベスト技術がIoT社会実現に必須になりえる理由エナジーハーベストは自然エネルギーを利用して発電する技術です。IoT社会の実現のためにIoTモジュールを動作させるための電源が必要になります。IoTモジュールと親和性が高いと考えられるエナジーハーベストについて記事にしました。組み込みエンジニアトワイライト(TWELITE)のソフト開発と無線通信でできることZigBeeモジュールであるトワイライト(TWELITE)はシリアル通信・タイマ(PWM)・I2C・SPI・AD変換など各種機能を備えておりセンサーと組み合わせながら無線通信ができるためIoTモジュールとして様々な用途に応用できます。XIAO31ESP32-WROOM-32E37TWELITE(トワイライト)26PIC16F182731PIC12F67522ノウハウ(体験談)36趣味と生活29その他6タグオペアンププロフィールENGかぴ当ブログの運営者のENGカピです。組み込みエンジニアとして10年以上の経験を活かしてセンサーモジュール等の動作確認したことをまとめています。広告、アフィリエイト収益で当ブログを運営させていただいております。defined.")}))})()タイトルとURLをコピーしました。