Node-RED 儀表板
區域1 → bar chart
區域2 → line、pie
區域3 → gauge、donut、compass
區域4 → radar、polar
[
{
"id": "input1_slider",
"type": "ui_slider",
"z": "48dfc1a39d38d8de",
"name": "輸入1",
"label": "輸入1",
"group": "group_control",
"order": 1,
"width": 4,
"height": 1,
"passthru": true,
"outs": "all",
"topic": "input1",
"min": 0,
"max": 100,
"step": 1,
"x": 90,
"y": 120,
"wires": [
[
"a6aa5335c08f0c9e"
]
]
},
{
"id": "input2_slider",
"type": "ui_slider",
"z": "48dfc1a39d38d8de",
"name": "輸入2",
"label": "輸入2",
"group": "group_control",
"order": 2,
"width": 4,
"height": 1,
"passthru": true,
"outs": "all",
"topic": "input2",
"min": 0,
"max": 100,
"step": 1,
"x": 90,
"y": 160,
"wires": [
[
"a6aa5335c08f0c9e"
]
]
},
{
"id": "input3_slider",
"type": "ui_slider",
"z": "48dfc1a39d38d8de",
"name": "輸入3",
"label": "輸入3",
"group": "group_control",
"order": 3,
"width": 4,
"height": 1,
"passthru": true,
"outs": "all",
"topic": "input3",
"min": 0,
"max": 100,
"step": 1,
"x": 90,
"y": 200,
"wires": [
[
"a6aa5335c08f0c9e"
]
]
},
{
"id": "chart_bar",
"type": "ui_chart",
"z": "48dfc1a39d38d8de",
"name": "bar chart",
"group": "group_1",
"order": 1,
"width": 6,
"height": 4,
"label": "bar chart",
"chartType": "bar",
"legend": "true",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"nodata": "",
"dot": false,
"ymin": 0,
"ymax": 100,
"removeOlder": "10",
"removeOlderPoints": "",
"removeOlderUnit": "60",
"cutout": 0,
"useOneColor": false,
"colors": [
"#0094CE",
"#FF7F0E",
"#2CA02C"
],
"outputs": 1,
"x": 520,
"y": 80,
"wires": [
[]
]
},
{
"id": "chart_line",
"type": "ui_chart",
"z": "48dfc1a39d38d8de",
"name": "chart",
"group": "group_2",
"order": 1,
"width": 6,
"height": 4,
"label": "chart",
"chartType": "line",
"legend": "true",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"dot": false,
"ymin": 0,
"ymax": 100,
"removeOlder": "10",
"removeOlderUnit": "60",
"cutout": 0,
"useOneColor": false,
"colors": [
"#ff0000",
"#00ff00",
"#0000ff"
],
"outputs": 1,
"x": 510,
"y": 120,
"wires": [
[]
]
},
{
"id": "chart_pie",
"type": "ui_chart",
"z": "48dfc1a39d38d8de",
"name": "Pie chart",
"group": "group_2",
"order": 2,
"width": 6,
"height": 4,
"label": "Plie chart",
"chartType": "pie",
"legend": "true",
"xformat": "HH:mm:ss",
"nodata": "",
"dot": false,
"ymin": "",
"ymax": "",
"removeOlder": "",
"removeOlderPoints": "",
"cutout": 0,
"useOneColor": false,
"useUTC": false,
"colors": [
"#ff5733",
"#33ff57",
"#3357ff",
"#000000",
"#000000",
"#000000",
"#000000",
"#000000",
"#000000"
],
"outputs": 1,
"useDifferentColor": false,
"className": "",
"x": 520,
"y": 160,
"wires": [
[]
]
},
{
"id": "chart_gauge",
"type": "ui_gauge",
"z": "48dfc1a39d38d8de",
"name": "gauge",
"group": "group_3",
"order": 1,
"width": 3,
"height": 3,
"gtype": "gage",
"title": "gauge",
"label": "units",
"format": "{{value}}",
"min": 0,
"max": "100",
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"x": 510,
"y": 200,
"wires": []
},
{
"id": "chart_donut",
"type": "ui_gauge",
"z": "48dfc1a39d38d8de",
"name": "Donut",
"group": "group_3",
"order": 2,
"width": 3,
"height": 3,
"gtype": "donut",
"title": "Donut",
"label": "units",
"format": "{{value}}",
"min": 0,
"max": "100",
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"x": 510,
"y": 240,
"wires": []
},
{
"id": "chart_compass",
"type": "ui_gauge",
"z": "48dfc1a39d38d8de",
"name": "Compass",
"group": "group_3",
"order": 3,
"width": 3,
"height": 3,
"gtype": "compass",
"title": "Compass",
"label": "units",
"format": "{{value}}",
"min": 0,
"max": "100",
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"x": 520,
"y": 280,
"wires": []
},
{
"id": "chart_radar",
"type": "ui_chart",
"z": "48dfc1a39d38d8de",
"name": "raddar chart",
"group": "group_4",
"order": 1,
"width": 6,
"height": 4,
"label": "raddar chart",
"chartType": "radar",
"legend": "true",
"xformat": "HH:mm:ss",
"nodata": "",
"dot": false,
"ymin": "0",
"ymax": "100",
"removeOlder": "",
"removeOlderPoints": "",
"cutout": 0,
"useOneColor": false,
"useUTC": false,
"colors": [
"#ff5733",
"#33ff57",
"#3357ff",
"#000000",
"#000000",
"#000000",
"#000000",
"#000000",
"#000000"
],
"outputs": 1,
"useDifferentColor": false,
"className": "",
"x": 510,
"y": 320,
"wires": [
[
"b348bf211ab9c377"
]
]
},
{
"id": "chart_polar",
"type": "ui_chart",
"z": "48dfc1a39d38d8de",
"name": "polar area chart",
"group": "group_4",
"order": 2,
"width": 6,
"height": 4,
"label": "polar area chart",
"chartType": "polar-area",
"legend": "true",
"xformat": "HH:mm:ss",
"nodata": "",
"dot": false,
"ymin": "0",
"ymax": "100",
"removeOlder": "",
"removeOlderPoints": "",
"cutout": 0,
"useOneColor": false,
"useUTC": false,
"colors": [
"#ff5733",
"#33ff57",
"#3357ff",
"#000000",
"#000000",
"#000000",
"#000000",
"#000000",
"#000000"
],
"outputs": 1,
"useDifferentColor": false,
"className": "",
"x": 500,
"y": 360,
"wires": [
[
"8d83cdbe832a9287"
]
]
},
{
"id": "5547b5917c5b6fa4",
"type": "inject",
"z": "48dfc1a39d38d8de",
"name": "每秒更新",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "1",
"crontab": "",
"once": true,
"onceDelay": "",
"topic": "",
"payload": "",
"payloadType": "str",
"x": 110,
"y": 420,
"wires": [
[
"ea5d95e958a92f38"
]
]
},
{
"id": "ea5d95e958a92f38",
"type": "function",
"z": "48dfc1a39d38d8de",
"name": "產生三個輸入資料",
"func": "let msgs = [];\nmsgs.push({ topic: \"自動輸入1\", payload: Math.floor(Math.random() * 100) });\nmsgs.push({ topic: \"自動輸入2\", payload: Math.floor(Math.random() * 100) });\nmsgs.push({ topic: \"自動輸入3\", payload: Math.floor(Math.random() * 100) });\nreturn [msgs];",
"outputs": 1,
"timeout": "",
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 310,
"y": 420,
"wires": [
[]
]
},
{
"id": "a6aa5335c08f0c9e",
"type": "function",
"z": "48dfc1a39d38d8de",
"name": "function 107",
"func": "// 獲取並儲存最新的輸入值到 flow 變數\nflow.set(msg.topic, msg.payload);\n\n// 獲取所有 input 值\nconst input1 = flow.get('input1') || 25;\nconst input2 = flow.get('input2') || 75;\nconst input3 = flow.get('input3') || 50;\n\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 290,
"y": 160,
"wires": [
[
"c6bbacc0f6fffe95"
]
]
},
{
"id": "1334cf863bd17fb4",
"type": "debug",
"z": "48dfc1a39d38d8de",
"name": "debug ",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 510,
"y": 40,
"wires": []
},
{
"id": "f0650de2f0021ff2",
"type": "link in",
"z": "48dfc1a39d38d8de",
"name": "link in 69",
"links": [
"c6bbacc0f6fffe95"
],
"x": 335,
"y": 260,
"wires": [
[
"chart_bar",
"1334cf863bd17fb4",
"chart_line",
"chart_pie",
"chart_gauge",
"chart_donut",
"chart_compass",
"chart_radar",
"chart_polar"
]
]
},
{
"id": "c6bbacc0f6fffe95",
"type": "link out",
"z": "48dfc1a39d38d8de",
"name": "link out 75",
"mode": "link",
"links": [
"f0650de2f0021ff2"
],
"x": 355,
"y": 200,
"wires": []
},
{
"id": "b348bf211ab9c377",
"type": "debug",
"z": "48dfc1a39d38d8de",
"name": "debug ",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 650,
"y": 320,
"wires": []
},
{
"id": "8d83cdbe832a9287",
"type": "debug",
"z": "48dfc1a39d38d8de",
"name": "debug ",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 670,
"y": 360,
"wires": []
},
{
"id": "group_control",
"type": "ui_group",
"name": "控制區",
"tab": "tab_dashboard",
"order": 1,
"disp": true,
"width": 4,
"collapse": false
},
{
"id": "group_1",
"type": "ui_group",
"name": "區域1",
"tab": "tab_dashboard",
"order": 2,
"disp": true,
"width": "6"
},
{
"id": "group_2",
"type": "ui_group",
"name": "區域2",
"tab": "tab_dashboard",
"order": 3,
"disp": true,
"width": "6"
},
{
"id": "group_3",
"type": "ui_group",
"name": "區域3",
"tab": "tab_dashboard",
"order": 4,
"disp": true,
"width": "6"
},
{
"id": "group_4",
"type": "ui_group",
"name": "區域4",
"tab": "tab_dashboard",
"order": 5,
"disp": true,
"width": "6"
},
{
"id": "tab_dashboard",
"type": "ui_tab",
"name": "儀表板測試",
"icon": "dashboard",
"order": 1
}
]
沒有留言:
張貼留言