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": "33029e5f.5eda92",
"type": "tab",
"label": "UNI-02-A001",
"disabled": false,
"info": ""
},
{
"id": "893d82e1.cd32b",
"type": "aedes broker",
"z": "33029e5f.5eda92",
"name": "",
"mqtt_port": 1883,
"mqtt_ws_port": null,
"cert": "",
"key": "",
"certname": "",
"keyname": "",
"dburl": "",
"usetls": false,
"x": 110,
"y": 40,
"wires": [
[],
[]
]
},
{
"id": "bc1b9633.9f11c8",
"type": "mqtt in",
"z": "33029e5f.5eda92",
"name": "",
"topic": "tx_root/00001",
"qos": "2",
"datatype": "auto",
"broker": "b61248bf.fdd658",
"x": 90,
"y": 100,
"wires": [
[
"f5bc4981.3ed388"
]
]
},
{
"id": "f5bc4981.3ed388",
"type": "json",
"z": "33029e5f.5eda92",
"name": "",
"property": "payload",
"action": "",
"pretty": false,
"x": 140,
"y": 160,
"wires": [
[
"f8e4f8ae.8f6f28"
]
]
},
{
"id": "4dd07409.a14e2c",
"type": "change",
"z": "33029e5f.5eda92",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "payload.co2",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 280,
"y": 280,
"wires": [
[
"e0d34cb1.9d86e",
"40b6a5dc.2ae10c"
]
]
},
{
"id": "e0d34cb1.9d86e",
"type": "ui_gauge",
"z": "33029e5f.5eda92",
"name": "",
"group": "d51d16a0.45e8a8",
"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": 540,
"y": 260,
"wires": []
},
{
"id": "40b6a5dc.2ae10c",
"type": "ui_chart",
"z": "33029e5f.5eda92",
"name": "",
"group": "d51d16a0.45e8a8",
"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": 540,
"y": 300,
"wires": [
[]
]
},
{
"id": "f8e4f8ae.8f6f28",
"type": "function",
"z": "33029e5f.5eda92",
"name": "timestamp",
"func": "let d = new Date(msg.payload.time);\nmsg.timestamp = d.getTime();\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 210,
"y": 220,
"wires": [
[
"4dd07409.a14e2c"
]
]
},
{
"id": "b61248bf.fdd658",
"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": "d51d16a0.45e8a8",
"type": "ui_group",
"z": "",
"name": "UNI-02-A001",
"tab": "2c8bd09f.dcf29",
"disp": true,
"width": 10,
"collapse": false
},
{
"id": "2c8bd09f.dcf29",
"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

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

function

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

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

のプロパティ名timeの値をUNIX時刻に変換してmsg.timestampに代入します。

function

change

functionノードから受けとった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