ESP32（Arduino）とBME280（温湿度センサ）をつかって、部屋の温湿度をスマホに表示するダッシュボードを実装しました。

概要 #

ESP32にWebサーバを立てて、BME280で測定した部屋の温湿度をWebページとして表示し、スマホやPCで見られるようにします。

回路側 #

BME280とESP32を接続するだけの、シンプルな実装です。 センサーとの接続は、I²Cにしました。BME280とESP32の接続は、SCK - 22番、SDI - 21番で接続しています。

ESP32の開発ボードは、ESP32-DevKit-C-32E（ESP-WROOM-32E）を使用しています。 32D以下は、2021年現在、利用が推奨されていないそうです。

ESP32-WROOM-32Eについて、従来品との違い

プログラム側 #

Arduinoで動かしているプログラムには、大きく4つの機能を実装しました。

• WebサーバとしてスマホやPCからのリクエストに応答（Webページのレンダリング）
• mDNSに対応（.localのアドレスでアクセスできるようにする）
• BME280からセンサーの値を取得
• NTPで時刻を同期

こんな画面が表示されるようにしました。

実装 #

雑感と参考資料 #

Webサーバの実装 #

いくつかのサイトを参考にしながら実装しました。

• https://qiita.com/nayuki_eng/items/dc04b2082724ad22d042
• https://qiita.com/mine820/items/01d5b7dbf65296c6f6e8
• https://iot.keicode.com/esp8266/esp8266-webserver.php
  • 8266の例ですが、includeが変わるくらいでほとんど一緒

mDNSが超便利 #

ESP32はマルチキャストDNSに対応しています。これにより、ESP32に割り振られたIPアドレスを調べずとも、ブラウザから「http://esp32.local」のようにアドレスを入力するだけでアクセスできます。

https://lipoyang.hatenablog.com/entry/2020/03/25/112815

ページスタイル #

以下のフレームワークを使いました。

• Tailwind CSS
• Font Awesome
• Google Fonts

Tailwind CSSは初めて使用しましたが、ドキュメントがよく整備されているので、HTMLめったにやらない私でもサクッとスタイルをつけることができました。

ページの自動リロード #

1分で自動リロードするようにしたのですが、こちらのサイトが参考になりました。
https://designsupply-web.com/media/programming/4431/

<meta http-equiv="refresh" content="60; URL=./">

I2C #

Wire.begin()でピン番号を指定できるとは知らなかった……。

• https://qiita.com/T-YOSH/items/be0be9d66da85fb6a001

NTPで時刻同期 #

• https://qiita.com/BotanicFields/items/f1e28af5a63e4ccf7023

今回の記事とは関係ないけど、 https://tool-lab.com/ というサイトに遭遇した。 電子工作関連の情報がまとまっていて、勉強になりそう……。