ESP8266とWebSocketで温湿度センサーの情報をリアルタイムに表示する

このコードはArduino wifiモジュールのESP8266でAM2320をWebグラフ化するものです。 AM2320センサーをドライヤーで温めており、それがリアルタイムに表示されています。

ソースコードは以下で公開しています。(MITライセンス)

shiguregaki/AM2320-WebGraph

目次
概要
必要なこと
使い方
関連情報

概要

WebSocketでクライアント端末にデータを送信して、ブラウザ上でリアルタイムに表示する処理のコーディング練習用に本コードを作成しました。

ESP8266に接続しているAM2320という温湿度センサーの情報をリアルタイムにクライアント端末側のブラウザで表示させます。

このコードはESP8266の動作として、アクセスポイントモード(AP-Mode)とステーションモード(ST-Mode)をサポートしています。デフォルトではAP-Modeとなります。 ST-Modeで使用したい場合は、コード内にある"myssid"と"mypassword"にご自分のアクセスポイントの情報を入れてください。起動時に指定されたアクセスポイントがあれば自動で接続します。

※ESP8266が11b/g/nしかサポートしていないため、接続先のアクセスポイントは2.4GHz帯のものに接続する必要があります。

必要なこと

必要なデバイス

Arduino wifi module(ESP8266)

日本での購入なら、以下のボード上で動作します。

Digital Temperature and Humidity Sensor(AM2320)

日本での購入なら、秋月電子通商で購入できます。

温湿度センサモジュールＡＭ２３２０

グローバルなサイトで購入なら、AlibabaやBanggood.comなどでも購入できます。

その他の部品

部品	型番	個数
ブレッドボード	-	1
ジャンパーピン(オス-メス)	-	4

インストールが必要なソフトウェア

Arduino IDE

開発用のPCにArduino IDEをインストールします。
https://www.arduino.cc/en/Main/Software

(tool) ESP8266 core for Arduino

Arduino IDEのデフォルト設定では、ESP8266ボードはサポートされていません。そのため、ESP8266 core for ArduinoをArduino IDEにインポートする必要があります。
ESP8266 core for Arduino

(tool) Arduino ESP8266 filesystem uploader

Arduino ESP8266用のファイルアップローダーです。以下のサイトからダウンロードできます。
Arduino ESP8266 filesystem uploader

(library) Links2004/arduinoWebSockets

Arduino向けのWebSocketライブラリーです。以下のサイトからダウンロードできます。
Links2004/arduinoWebSockets

(library) PaulStoffregen/Time

Arduino上で時刻管理するためのライブラリーです。以下のサイトからダウンロードできます。
PaulStoffregen/Time

(library) hibikiledo/AM2320

AM2320センサーを制御できるライブラリーです。温度や湿度情報を取得できます。
hibikiledo/AM2320

利用しているソフトウェア

以下のソフトウェアはソースコード内に組み込まれています。そのため、インストールは必要はありませんが、最新版のものがあれば別途置き換えて利用することをお勧めします。

Chart.js

ソースコードで利用しているバージョン：2.8.0

以下のサイトからダウンロードできます。
Chart.js

Moment.js

ソースコードで利用しているバージョン：2.24.0

以下のサイトからダウンロードできます。
Moment.js

使い方

以下のように回路を組みます。

ワイヤの色	ESP8266端子	AM2320端子
赤	3V3	VDD
黄	GPIO4	SDA
黒	GND	GND
白	GPIO5	SCL

AM2320の仕様は「Digital Temperature and Humidity Sensor AM2320 Product Manual 」を参照

Wire.hライブラリを使えば、ESP8266の任意のGPIOピンをI2Cで利用できるようです。しかし、自分の環境ではうまく動きませんでした。そのため、SDA_PINとSCL_PINはESP8266のデフォルトI2Cピンにすることをお勧めします。

Arduino IDEに"インストールが必要なソフトウェア"をインストールします。

インストールが必要なソフトウェアは「インストールが必要なソフトウェア」の章を参照ください。

Arduino IDEでESP8266基板に本コードを書き込みます。

書き込むコードは「AM2320-WebGraph.ino」です。

パラメータは以下です。ご自分の環境に合わせて適宜変更してください。

パラメータ	説明	デフォルト値
ssid	AP-Modeで使う場合のAPのSSID	"ESP8266 Access Point"
password	AP-Modeで使う場合のAPのパスワード	"esp8266-test"
myssid	ST-Modeで使う場合のAPのSSID。ご自分の環境に合わせて設定してください。	"The ssid name of your AP"
mypassword	ST-Modeで使う場合のAPのパスワード。ご自分の環境に合わせて設定してください。	"The password of your AP"
CPU_MHZ	ESP8266のCPU周波数。ご自分の環境に合わせて設定してください。	160
SDA_PIN ※	AM2320のSDA端子と接続するESP8266側のGPIOピン番号	4
SCL_PIN ※	AM2320のSCL端子と接続するESP8266側のGPIOピン番号	5
READ_INTERVAL ※※	AM2320センサーの読み取り間隔。(1s,5s,30s,60s,300sのどれか)	5

※ Wire.hライブラリを使えば、ESP8266の任意のGPIOピンをI2Cで利用できるようです。しかし、自分の環境ではうまく動きませんでした。そのため、SDA_PINとSCL_PINはESP8266のデフォルトI2Cピンにすることをお勧めします。

※※ AM2320センサーの読み取り間隔はクライアント端末側で固定の5パターンしか設定できないようにしています。 (1s,5s,30s,60s,300sのどれか) そのため、それ以外の値を入れると不具合が発生する可能性があります。

ESP8266基板にWebサーバ用ファイルをアップロードします。

Arduino ESP8266 filesystem uploaderを使えば、自動でソースコードがあるディレクトリ内にある/dataを読み取り、アップロードしてくれます。

アップロードするコードは以下です。

名称	説明
Chart.min.js.gz	JavaScriptでグラフ描画するために使用しているOSSスクリプト
index.html.gz	HTMLアクセスしたときの画面を指定
main.css.gz	画面デザインを指定
moment.min.js.gz	JavaScriptで時刻管理するために使用しているOSSスクリプト
WebSocket.js.gz	WebSoketのクライアント側の動作を指定

ファイルサイズを小さくするために、全ファイルを".gz"で圧縮しています。圧縮しなくても動くようにコードは書いています。

ESP8266基板の電源を入れて、wifiの設定をします。

AP-Modeの場合(デフォルト):

アクセスポイントにステーション端末がつながるのを待っています。アクセスポイントのSSIDは「ESP8266 Access Point」、パスワードは「esp8266-test」です。シリアルモニタでは接続が成功すれば、以下のように「[info] Access destination IP address: XXXX」のようにアクセス先のIPアドレスが出力されます。

※もし、コードのssidとpasswordを変えていたら、その値に変わっています。

ST-Modeの場合:

自動でアクセスポイントに接続します。シリアルモニタでは接続が成功すれば、以下のように「[info] Access destination IP address: XXXX」のようにアクセス先のIPアドレスが出力されます。

※ESP8266が11b/g/nしかサポートしていないため、接続先のアクセスポイントは2.4GHz帯のものに接続する必要があります。

クライアント端末のブラウザからアクセス先のIPアドレスにアクセスします。

ブラウザの検索フォームのところに、アクセス先のIPアドレス"X.X.X.X"を入力すれば温度と湿度を表示する画面が表示されるはずです。

画面の説明:

上部にある青背景部分にリアルタイムの温度と湿度値を表示されます。グラフのところにこれまでの温度と湿度情報の履歴が表示されます。

intervalラジオボタンでは、温湿度情報の更新時間を変更できます。(1s,5s,30s,60s,300sのみ)

Reset graphボタンをクリックすると、グラフがリセットされます。