Node-REDでグラフを作る

使用機器

ここでは以下の機器を使用して、設定します。

  • OpenBlocks IoT VX2

フローの作成

MQTTサーバーの設置で、Node-REDのフローにaedes brokerノードを追加し、OpenBlocks IoT VX2にMQTTサーバーを設置しました。ここでは、OpenBlocks IoT EX1からのCO2濃度のデータを受信し、可視化するフローを作成します。

フロー

[サービス] > [Node-RED]リンクをクリックし、[Node-RED]タブの[リンク]ボタンをクリックしてください。Node-REDのフロー作成画面が表示されます。

ここで作成したしたフローは以下の通りです。

フローUNI-02-A001

[{"id":"833ffad6.8d8dc8","type":"tab","label":"UNI-02-A001","disabled":false,"info":""},{"id":"36657b5a.4232a4","type":"aedes broker","z":"833ffad6.8d8dc8","name":"","mqtt_port":1883,"mqtt_ws_port":null,"cert":"","key":"","certname":"","keyname":"","dburl":"","usetls":false,"x":110,"y":40,"wires":[[]]},{"id":"472f632f.c9095c","type":"mqtt in","z":"833ffad6.8d8dc8","name":"","topic":"tx_root/00001","qos":"2","datatype":"auto","broker":"39fa0e27.041ac2","x":90,"y":100,"wires":[["6e578a43.8dcf04"]]},{"id":"6e578a43.8dcf04","type":"json","z":"833ffad6.8d8dc8","name":"","property":"payload","action":"","pretty":false,"x":140,"y":160,"wires":[["348390ac.c6453"]]},{"id":"348390ac.c6453","type":"change","z":"833ffad6.8d8dc8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.co2","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":220,"y":220,"wires":[["e24d12e9.75f3e","6e1810cb.4e4e7"]]},{"id":"e24d12e9.75f3e","type":"ui_gauge","z":"833ffad6.8d8dc8","name":"","group":"173af1f4.da587e","order":1,"width":10,"height":7,"gtype":"gage","title":"CO<sub>2</sub>濃度(現在)","label":"ppm","format":"{{value}}","min":0,"max":"2000","colors":["#00b500","#e6e600","#ca3838"],"seg1":"700","seg2":"1000","x":480,"y":200,"wires":[]},{"id":"6e1810cb.4e4e7","type":"ui_chart","z":"833ffad6.8d8dc8","name":"","group":"173af1f4.da587e","order":2,"width":10,"height":7,"label":"CO<sub>2</sub>濃度(一日)","chartType":"line","legend":"false","xformat":"MM/DD HH:mm","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"2000","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":480,"y":240,"wires":[[]]},{"id":"39fa0e27.041ac2","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"173af1f4.da587e","type":"ui_group","z":"","name":"UNI-02-A001","tab":"85deb3a5.7d65c","disp":true,"width":10,"collapse":false},{"id":"85deb3a5.7d65c","type":"ui_tab","z":"","name":"UNI-02-A001","icon":"dashboard","disabled":false,"hidden":false}]

フローの作成手順については、[Node-REDスターターガイド] > Node-REDの簡易説明ノード操作サンプルを参照してください。

以下にフロー中のノードの設定内容を説明します。

aedes broker

MQTTサーバーです。MQTTサーバーの設置で追加しました。

mqtt in

MQTTサーバーに接続し、指定したトピックのメッセージをサブスクライブ(購読)します。

mqtt_in

以下を設定しています。

項目備考
トピックtx_root/00001送受信設定で設定した[トピックプレフィックス]とBLEデバイス情報送信設定で設定した[ユニークID(mqtt)]を「/」でつなげたものです。

json

mqtt inノードから受けとったmsg.payloadのJSON文字列をJavaScriptオブジェクトに変換します。

json

設定は、デフォルトのままです。

change

jsonノードから受けとったmsg.payloadのJavaScriptオブジェクト

{
time: "2020-12-09T16:57:26.775+09:00",
deviceId: "012345abcdef",
rssi: -55,
co2: 547,
battery: 254
}

のプロパティ名co2の値(CO2濃度)をmsg.payloadに代入します。

change

以下を設定しています。

項目
値の代入msg.payload
対称の値msg.payload.co2

gauge

ダッシュボードにCO2濃度をゲージ型のウィジェットで表示します。

gauge

以下を設定しています。

項目
Group[UNI-02-A001] UNI-02-A001
Size10 x 7
LabelCO2濃度(現在)
Value format{{value}}
Unitsppm
Rangemin: 0, max: 2000
Sectors0...700...1000...2000

chart

ダッシュボードにCO2濃度をチャート型のウィジェットで表示します。

chart

以下を設定しています。

項目
Group[UNI-02-A001] UNI-02-A001
Size10 x 7
LabelCO2濃度(一日)
X-axis1 days
X-axis LabelMM/DD HH:mm
Y-axismin: 0, max: 2000

ダッシュボード

ダッシュボードを表示するには、ブラウザで

http://<OpenBlocks IoT VX2のホスト名またはIPアドレス>:1880/ui/

に接続します。

ui UNI-02-A001