MENU

ESP32:センサーの値をブラウザにてリアルタイムで表示させる

記事の内容
  • ESP32にブラウザからアクセスして値を表示させる方法
  • センサーの値を用いてChart.jsでのグラフ化
  • 詰まったところ解説
こんな人向け
  • センサーで取得した値をブラウザで表示させたい
  • センサーの値をブラウザ上でリアルタイムにグラフ化したい
目次

つくったもの

外観、ブラウザ表示

回路図

コード

dataフォルダに設置するファイル

Chart.min.js:下記URLの最下部にあります。

GitHub
Release Version 2.8.0 · chartjs/Chart.js Documentation: http://www.chartjs.org/docs/2.8.0/ Deprecations #5868 Deprecate Chart.{Type} classes #6022 Deprecate configMerge and scaleMerge helpers Enhance...

favicon.ico:下記URLで適当に作って下さい。

ファビコン作成。favicon.ico 無料...
ファビコン作成。favicon.ico 無料で半透過マルチアイコンが作れます。 ファビコン(ファブアイコン)faviconを作ろう!。16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。作成したファビコンの画像はプレビューで確認できます。プ...

dataフォルダの書き込み方法

Arduino IDEを使用する場合
あわせて読みたい
ESP32でHTMLをファイルシステムに保存する - テクノベインズ ブログ ESP32(ESP-WROOM-02)のSPIFFS機能を使ってHTML,CSS,JSファイルをファイルシステムに保存する方法
PratformIOを使用する場合
* いしのなかにいる * :工兵のラ...
PlatformIOでSPIFFSにファイルアップロードできる模様 | * いしのなかにいる * :工兵のラボ なんかPlatformIOにSPIFFSへのファイルアップロード機能があるみたいなのでちょっとググってみました。 ESP32 with VS Code and PlatformI...

コードの挙動

  1. Web ServerとWeb Sockets Serverを立ち上げる。
  2. Web Sockets Serverにてセンサーの値を1秒ごとに送信。(OELDにも表示させる)
  3. ブラウザでアクセス時WebServerにて、「index.html.c」に記載しているhtmlを表示させる。
  4. ブラウザ上にてWeb Socketsで受け取ったデータを用い、Chart.jsでグラフをリアルタイムで描写。

参考サイト様

AI / IoT センサのしくみを知ろう
ESP32: Webサーバ上でリアルタイムグラフ表示(Chart.js) - AI / IoT センサのしくみを知ろう ESP32:Cart.jsを使ったグラフ表示 公開講座(春夏)「AI/IoTセンサのしくみを知ろう」の補足です。 ESP32のウェブサーバ上で,センサで取得したデータをグラフ表示します。...
あわせて読みたい
こじ研(ESP ファイル操作編)

詰まったところ

C++

他言語と比べ、記述ルールが厳密

上からしか読み込まないので、関数の宣言は使う前に行う必要あり。

ポインタや変数の使い回しは理解に時間がかかりそうだったので、今回は回避した。

あわせて読みたい
C++の超基本 - PukiWiki

R”===()===”

エスケープ文字を不要とする「生文字列」を表現。

htmlやJSON等、記号を多く含む文字列を用いる場合に用いる。

===の箇所は左右対称になっていればOKなので、 「R”***()***”」 とかでもOK。

cpprefjp - C++日本語リファレンス
生文字列リテラル - cpprefjp C++日本語リファレンス `R`プレフィックスを付けた文字列リテラル内の丸カッコ`( )`で囲まれた部分は、エスケープシーケンスが無視される。この機能を「生文字列リテラル (Raw string literals)」...

snprintf_P

snprintf_P (変数名, MAXの文字数, フォーマットの文字列, 代入する変数1[, 代入する変数2…])

第3引数からはpythonでいうformatとだいたい同じ。

Arduinoクックブック IoT 温度セ...
ESP32入門 通信機能が標準搭載されたマイコン・ボード (9)の補足説明 | Arduinoクックブック IoT spresense Arduino IDE LED Lチカ

PROGMEM

変数を保管するメモリには限りがあるので、比較的広い領域のメモリを使う際に使用する。らしい。

jumbleat
PROGMEMを使う Arduinoでは、変数の数値はSRAMにキープされます。

PlatformIO

platformio-ide.showhome not found

PratformIOのVerを2.3.3から2.3.2に戻すことで解決。

自動アップデートによりバージョンアップが行なわれたのが原因でした。

異常が出た場合、まずはGithub等の本家を確認する癖をつけたほうがいいね。

GitHub
GitHub - platformio/platformio-vscode-ide: PlatformIO IDE for VSCode: The next generation integrated... PlatformIO IDE for VSCode: The next generation integrated development environment for IoT - GitHub - platformio/platformio-vscode-ide: PlatformIO IDE for VSCode...

これを機に、開発環境のアップデートを手動に変更。

マゴトログ シュミニイキル
VisualStudioCodeの自動更新を止める方法 「Visual Studio Code」の自動更新をキャンセルする手順を備忘録的に投稿しておきます。

dataフォルダの書き込みボタン

選択項目が何処にあるのか理解できなかった。

わかりにくいね😥

まとめ

先人のネット記事や知見、ライブラリを組み合わせるだけで作れてしまった。知の巨人に感謝。

次は複数のWeb Serverから、各センサーのデータをcsv形式で収拾するロガーを作成予定。

データ取得時間の同期、データ保存領域、言語、画面出力等を考えると、RaspberryPiで作るのが良いかな?

シェアしてくださいな
目次
閉じる