【ラズパイ×Node-RED】気象情報をモニタリングするwebアプリを作る

【ラズパイ×Node-RED】気象情報をモニタリングするWebアプリを作ってみた

こんにちは! けい(Twitter)です。

今回は、温湿度センサーからの温度・湿度・気圧の情報を Node-REDを用いてWeb上で表示するアプリケーションを作成する方法をご紹介します。

必要な物

ラズパイ本体

私はラズパイ4を使用しましたが、ラズパイZeroなどでも大丈夫です。

BME280

今回使用する温湿度・気圧センサーです。

同時に3種類の気象情報をI2C通信で取得することのできる高機能なセンサーです。

BME280搭載 温湿度・気圧センサモジュール
スイッチサイエンス(Switch Science)

ジャンパワイヤー

Node-REDの環境設定

ラズパイにNode-REDをインストール

まずはラズパイにNode-REDをインストールする必要がありますが、以前の記事で説明しているので、そちらを参考にしてください。

パレットの追加

2つの新しいパレットを追加します。

  1. node-red-dashboard
  2. node-red-contrib-bme280

1つ目の「dashboard」は、センサーの値をweb上で表示するアプリケーションを作る際に便利なパレットです。

2つ目の「contrib-bme280」は、bme280から温度・湿度・気圧の情報を読み取るパレットです。

ハードウェア構成

ラズパイの設定(I2C有効化)

ラズパイとセンサーの通信にI2Cを用いるので、ラズパイの設定でI2Cを有効化しておきます。

「設定」→「Raspberry Pi の設定」をクリックして、

I2Cを有効にして、再起動します。

回路図

SDO端子をGNDに接続するので、アドレスは0x76となります。

【ラズパイ】bme280

BME280のI2Cアドレスを念のため確認しておきます。

ターミナルで次のコマンドを実行します。

i2cdetect -y 1

アドレスが「0x76」であることが確認できました。

Node-REDで温度・湿度・気圧を読み取る

ターミナルで次のコマンドを実行し、Node-REDを起動します。

node-red-start

「ipアドレス:1880」にアクセスし、フローを組みます。

Bme280ノードを使ってみる

手始めに、「inject」「Bme280」「debug」の3種類のノードを繋げてみます。

Bme280ノードのプロパティを開くと、デフォルトで「0x76」となっています。

全てのプロパティをデフォルトでデプロイしてみます。

タイムスタンプをクリックすると、デバッグのメッセージに以下の出力がされました。

4種類のキー(temperature_C、humidity、pressure_hPa、model)が出力されています。

上の画像では温度25.56°、湿度78%、気圧1014Paであることが分かります。(雨なので湿度高い)

Bme280ノードを使えば、簡単に温度・湿度・気圧を取得できることが分かりました。

温度・湿度・気圧をそれぞれ取得する

それでは、次に温度・湿度・気圧それぞれ別の出力をしてみましょう。

ここでは新たにchangeノードを使います。
changeノードは値を変換するノードで、普通のプログラミング言語での「=」に相当します。

changeノードをBME280ノードの出力に接続します。

changeノードをダブルクリックして、プロパティを開きます。

対象の値の部分を、「msg.」に変更し、温度のキーである「payload. temperature_C 」を入力します。

最後にdebugノードを繋げてデプロイします。

デバッグのメッセージに下の画像のように、温度℃の値が出力されます。

これを湿度・気圧でも同様に行います。
分かりやすいように、changeノードの名前をそれぞれ割り当てました。

実行すると、温度・湿度・気圧がそれぞれ別々に出力されていることが確認できます。

気象情報を表示するWebアプリを作る

dashboardを使ってみる

続いて、これらの気象情報をWeb上で確認できるようにしてみましょう。

その際に新たに用いるのが「dashboard」です。

まずは、下の図のようにdashboardのtextノードを出力に繋げてみます。

textノードをダブルクリックして、プロパティを開き、鉛筆マークを2連続でクリックし、「追加」をクリックします。

あとは、それぞれのtextノードの名前を温度・湿度・気圧に変更してデプロイしてみます。

デプロイ後、右上のタブを開き「Dashboard」をクリックします。

下の画像の赤枠をクリックすると、別タブでWebページが生成されています。

タイムスタンプをクリックすると、新たに生成されたWebページで温度・湿度・気圧が出力されていることが確認できます。

気象情報をモニタリングするWebアプリを作る

dashboardには他にもグラフで表示するノードが用意されているのでそちらを使って、表示してみます。

タイムスタンプを繰り返しにすれば、リアルタイムで気象情報をモニタリングすることができます。

上の画像のフローは下のjsonコードから読み込みできます。

[{"id":"a70c50b4.9264c","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"ceda5f98.03ead","type":"Bme280","z":"a70c50b4.9264c","name":"","bus":"1","address":"0x76","topic":"bme280","extra":false,"x":380,"y":160,"wires":[["4d45dd19.536b44","e293a940.5821f8","2c48165.73f69ea"]]},{"id":"4cf4204f.6b87b","type":"inject","z":"a70c50b4.9264c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":160,"wires":[["ceda5f98.03ead"]]},{"id":"4d45dd19.536b44","type":"change","z":"a70c50b4.9264c","name":"温度取り出し","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.temperature_C","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":100,"wires":[["634932a7.30c57c"]]},{"id":"e293a940.5821f8","type":"change","z":"a70c50b4.9264c","name":"湿度取り出し","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.humidity","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":160,"wires":[["2d86b188.056fae"]]},{"id":"2c48165.73f69ea","type":"change","z":"a70c50b4.9264c","name":"気圧取り出し","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.pressure_hPa","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":220,"wires":[["38e6a753.3d8b28"]]},{"id":"634932a7.30c57c","type":"ui_chart","z":"a70c50b4.9264c","name":"","group":"b5cbf5d5.438f98","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":810,"y":100,"wires":[[]]},{"id":"71858509.ae2f6c","type":"ui_gauge","z":"a70c50b4.9264c","name":"","group":"5d00773d.a3e418","order":1,"width":0,"height":0,"gtype":"donut","title":"","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#ff0000","#00ff00","#0000ff"],"seg1":"","seg2":"","x":890,"y":160,"wires":[]},{"id":"2d86b188.056fae","type":"range","z":"a70c50b4.9264c","minin":"0","maxin":"100","minout":"0","maxout":"100","action":"scale","round":true,"property":"payload","name":"","x":760,"y":160,"wires":[["71858509.ae2f6c"]]},{"id":"1056e015.3338b","type":"ui_gauge","z":"a70c50b4.9264c","name":"","group":"ba0170df.655b9","order":1,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"hPa","format":"{{value}}","min":0,"max":"1500","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":890,"y":220,"wires":[]},{"id":"38e6a753.3d8b28","type":"range","z":"a70c50b4.9264c","minin":"0","maxin":"10000","minout":"0","maxout":"10000","action":"scale","round":true,"property":"payload","name":"","x":760,"y":220,"wires":[["1056e015.3338b"]]},{"id":"b5cbf5d5.438f98","type":"ui_group","name":"温度計","tab":"cd1bb64d.9a2a38","order":1,"disp":true,"width":"6","collapse":false},{"id":"5d00773d.a3e418","type":"ui_group","name":"湿度計","tab":"cd1bb64d.9a2a38","order":2,"disp":true,"width":"6","collapse":false},{"id":"ba0170df.655b9","type":"ui_group","name":"気圧計","tab":"cd1bb64d.9a2a38","order":3,"disp":true,"width":"6","collapse":false},{"id":"cd1bb64d.9a2a38","type":"ui_tab","name":"ホーム","icon":"dashboard","disabled":false,"hidden":false}]

実行すると、こんな感じでWebページが生成されます。
Node-REDを使えば、簡単にかっこいいWebアプリを作ることができます。