🎏
Node-RED：node-red-dashboardからchartノードの最小、最大値を動的に変化させる
はじめに
Node-REDをつかって何かしらのデータをnode-red-dashboardのchartノードを使って可視化します。その際、chartノードで表示したグラフの最小、最大値を動的に変化させる方法について説明します。
動作の様子
今回は、適当なランダム値を入力してchartノードに表示しています。
そして、「Y軸の最大値変更」、「Y軸の最小値変更」のスライダーをグリグリ動かすと、グラフの最大、最小値が変化します。
サンプル
サンプルコードを下記に示します。
サンプルコード
[
{
"id": "ab835ff791ec9dd8",
"type": "tab",
"label": "フロー 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "2998085a766ddceb",
"type": "ui_chart",
"z": "ab835ff791ec9dd8",
"name": "",
"group": "93c1b6d3e58a2112",
"order": 1,
"width": 20,
"height": 6,
"label": "グラフ表示",
"chartType": "line",
"legend": "true",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"nodata": "",
"dot": false,
"ymin": "",
"ymax": "",
"removeOlder": "5",
"removeOlderPoints": "",
"removeOlderUnit": "60",
"cutout": 0,
"useOneColor": false,
"useUTC": false,
"colors": [
"#1f77b4",
"#aec7e8",
"#ff7f0e",
"#2ca02c",
"#98df8a",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"outputs": 1,
"useDifferentColor": false,
"className": "",
"x": 1230,
"y": 220,
"wires": [
[]
]
},
{
"id": "a70d1656dd11abd7",
"type": "change",
"z": "ab835ff791ec9dd8",
"name": "msg.payload → msg.ui_control",
"rules": [
{
"t": "move",
"p": "payload",
"pt": "msg",
"to": "ui_control",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 930,
"y": 360,
"wires": [
[
"2998085a766ddceb"
]
]
},
{
"id": "ea200f070a008b06",
"type": "ui_slider",
"z": "ab835ff791ec9dd8",
"name": "",
"label": "Y軸の最大値変更",
"tooltip": "",
"group": "93c1b6d3e58a2112",
"order": 4,
"width": "10",
"height": "1",
"passthru": true,
"outs": "end",
"topic": "ui_control",
"topicType": "msg",
"min": 0,
"max": "1000",
"step": "10",
"className": "",
"x": 530,
"y": 340,
"wires": [
[
"222e00aa56df83f6"
]
]
},
{
"id": "222e00aa56df83f6",
"type": "function",
"z": "ab835ff791ec9dd8",
"name": "",
"func": "msg.payload = { \"ymax\": msg.payload }\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 700,
"y": 340,
"wires": [
[
"a70d1656dd11abd7"
]
]
},
{
"id": "e9c6d696152d8d56",
"type": "ui_slider",
"z": "ab835ff791ec9dd8",
"name": "",
"label": "Y軸の最小値変更",
"tooltip": "",
"group": "93c1b6d3e58a2112",
"order": 4,
"width": "10",
"height": "1",
"passthru": true,
"outs": "end",
"topic": "ui_control",
"topicType": "msg",
"min": 0,
"max": "1000",
"step": "10",
"className": "",
"x": 530,
"y": 380,
"wires": [
[
"5860a63524587ade"
]
]
},
{
"id": "5860a63524587ade",
"type": "function",
"z": "ab835ff791ec9dd8",
"name": "",
"func": "msg.payload = { \"ymin\": msg.payload }\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 700,
"y": 380,
"wires": [
[
"a70d1656dd11abd7"
]
]
},
{
"id": "868e1fd92b4ba962",
"type": "comment",
"z": "ab835ff791ec9dd8",
"name": "グラフ出力部分",
"info": "",
"x": 1240,
"y": 180,
"wires": []
},
{
"id": "bd4ee366d1ac67e6",
"type": "comment",
"z": "ab835ff791ec9dd8",
"name": "グラフのY軸の最大・最小値の変更部分",
"info": "",
"x": 590,
"y": 300,
"wires": []
},
{
"id": "c282b1a23c1df74e",
"type": "inject",
"z": "ab835ff791ec9dd8",
"name": "",
"props": [],
"repeat": "1",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"x": 230,
"y": 220,
"wires": [
[
"ef22046b846be2c0"
]
]
},
{
"id": "ef22046b846be2c0",
"type": "random",
"z": "ab835ff791ec9dd8",
"name": "ランダム値の出力",
"low": 1,
"high": "1000",
"inte": "true",
"property": "payload",
"x": 530,
"y": 220,
"wires": [
[
"2998085a766ddceb"
]
]
},
{
"id": "93c1b6d3e58a2112",
"type": "ui_group",
"name": "",
"tab": "da7625594f744d64",
"order": 1,
"disp": true,
"width": "20",
"collapse": false,
"className": ""
},
{
"id": "da7625594f744d64",
"type": "ui_tab",
"name": "ホーム",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
解説
sliderノードの値が変化したとき、その値が格納されているmsg.ui_controlがfunctionノードに送り出されます（下記の図に示す①）。
そして「Y軸の最大値変更」の値が変更された場合はfunctionノードでキーymax（②）、「Y軸の最小値変更」の値が変更された場合はキーymin（③）と紐付けられ、次のノードに送信されます。
functionノードからmsg.payloadに格納されていたオブジェクトをchangeノードでmsg.ui_controlに格納しなおします。
そして、msg.ui_controlをchartノードに送信することで、グラフの最大、最小値を変更することができます。
まとめ
node-red-dashboardをつかって、グラフの最大・最小値を動的に変更できるグラフを作成しました。
node-red-dashboardのようなUIウィジェットを制御する際、msg.ui_controlを使いこなすことが重要のようです。node-red-dashboardのリポジトリにどういったパラメータを変更できるのか仕様がまとまっていました。これらを読み解くことで、より柔軟にNode-REDを使いこなせるようになれそうです。
Discussion