ブラウザに表示する温湿度計

更新

ブラウザに表示する温湿度計

小山智史

目次
1. 概要 2. 動作環境 3. アプリの操作 4. アプリの作り方 (付録1) マイコンとセンサの接続温湿度計のページへのリンク

1. 概要

　パソコンやスマートホンとUSB接続またはBluetooth接続した温湿度センサの計測値を、ブラウザに表示します。

　温湿度あるいは熱中症指数を大きいモニタに表示できるので、教室やさまざまな会場で、熱中症対策に利用できます。

2. 動作環境

　以下のブラウザおよびマイコンで動作します。マイコンとセンサの接続の詳細は付録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 の組み合わせです。

3. アプリの操作

　ブラウザで「温湿度計のページ」を表示するだけで、操作は必要ありません。

4. アプリの作り方

　上記の温湿度計アプリの作り方を紹介します。

th.html:

<!DOCTYPE html> <html><head> <meta charset="utf-8"> <style>span{font-size:80pt}</style> <title>温湿度計</title> <script src=webio2.js></script> <script> function setupMidi(){ pinMode(TEMPpin, INPUT_ANALOG); pinMode(HUMIpin, INPUT_ANALOG); setInterval("measure()",1000); } function measure(){ $("TEMP").innerHTML=analogRead(TEMPpin)+"℃"; $("HUMI").innerHTML=analogRead(HUMIpin)+"%RH"; } </script> </head><body> <span id=TEMP></span><br> <span id=HUMI></span> </body> </html>

　HTMLファイルの6行目でwebio2.jsを読み込んでいます。

　19～20行目が温度と湿度が表示される箇所(TEMPとHUMI)です。

　setupMidi関数は、Midi接続後に呼び出されます。その中で、1秒(1000ms)毎にmeasure()を呼び出すようにしています。

　measure関数が呼び出されると、TEMPpinの測定値(温度)をTEMPの箇所に表示し、HUMIpinの測定値(湿度)をHUMIの箇所に表示します。

(付録1) マイコンとセンサの接続

　Arduino Leonardo/ProMicro, XIAO samd21, XIAO ESP32, ATOM lite などのマイコンが利用できます。マイコンにはWebIOのスケッチ(webio2.ino)を書き込んでおきます。

　温湿度センサユニット(M5 ENV3)または、温湿度センサ(SHT-31)を上記のマイコンに接続します。

	Arduino Leonardo
パソコンと USB接続	Arduino Leonardo
	Arduiino ProMicro
	Arduiino ProMicro
	XIAO samd21
パソコンやスマホと Bluetooth接続	XIAO ESP32C3 / ESP32S3
パソコンやスマホと Bluetooth接続	M5ATOM C3 lite / S3 lite