1. 概要 |
パソコンやスマートホンとUSB接続またはBluetooth接続した温湿度センサの計測値を、ブラウザに表示します。
温湿度あるいは熱中症指数を大きいモニタに表示できるので、教室やさまざまな会場で、熱中症対策に利用できます。
以下のブラウザおよびマイコンで動作します。マイコンとセンサの接続の詳細は付録1をご覧ください。
USB接続の場合(パソコン) | Bluetooth接続の場合(パソコン・スマホ) | |
---|---|---|
ブラウザ | Windows版Chrome, Edge など (Web MIDI API 対応ブラウザ) |
Windows版Chrome, Edge, Android版Chrome など (Web MIDI APIおよび Web Bluetooth 対応ブラウザ) |
マイコン | Arduino Leonardo / ProMicro, Wio, XIAO samd21, XIAO RP2040 など (webio2.inoを書き込んでおく) |
XIAO ESP32, XIAO ESP32S3, ATOM lite, ATOM S3 lite など (webio2.inoを書き込んでおく) |
温湿度センサ | 温湿度センサユニット(M5 ENV3) または 温湿度センサSHT31 |
下の写真は M5ATOM lite と M5 ENV3 の組み合わせです。
ブラウザで「温湿度計のページ」を表示するだけで、操作は必要ありません。
上記の温湿度計アプリの作り方を紹介します。
th.html:
|
HTMLファイルの6行目でwebio2.jsを読み込んでいます。
19~20行目が温度と湿度が表示される箇所(TEMPとHUMI)です。
setupMidi関数は、Midi接続後に呼び出されます。その中で、1秒(1000ms)毎にmeasure()を呼び出すようにしています。
measure関数が呼び出されると、TEMPpinの測定値(温度)をTEMPの箇所に表示し、HUMIpinの測定値(湿度)をHUMIの箇所に表示します。
Arduino Leonardo/ProMicro, XIAO samd21, XIAO ESP32, ATOM lite などのマイコンが利用できます。マイコンにはWebIOのスケッチ(webio2.ino)を書き込んでおきます。
温湿度センサユニット(M5 ENV3)または、温湿度センサ(SHT-31)を上記のマイコンに接続します。
パソコンと USB接続 |
Arduino Leonardo |
|
---|---|---|
Arduino Leonardo |
||
Arduiino ProMicro |
||
Arduiino ProMicro |
||
XIAO samd21 |
||
パソコンやスマホと Bluetooth接続 |
XIAO ESP32C3 / ESP32S3 |
|
M5ATOM C3 lite / S3 lite |