すっさんぽ
  1. Posts/

ESP32とBME280で、温湿度計を作った

·

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

温湿度をスマホに表示

概要 #

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

回路側 #

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

ESP32とBME280の接続

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

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

プログラム側 #

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

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

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

スマホでアクセスしたときのスクショ

スマホからアクセスしたとき

PCでアクセスしたときのスクショ

PCからアクセスしたとき

実装 #

雑感と参考資料 #

Webサーバの実装 #

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

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()でピン番号を指定できるとは知らなかった……。

NTPで時刻同期 #


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