Hi there. I want my dashboard to display a set of values which can blink in either red or green depending on certain condition. Below is the sample:
Below is my current node-red dashboard:
Looking out for suggestions and assistance...
Edit - I thought this was working but it's not. ... OK, fixed.
Hi @jagades. What's cooking?
One possibility:
[{"id":"6b7503f72b16f50f","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"da7b88224af0b621","type":"group","z":"6b7503f72b16f50f","style":{"stroke":"#999999","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#a4a4a4"},"nodes":["69d56adbeb4dde09","a5b93ea2dffc2c53","0e34e7f518b4b274","f53d99a361c84124","359ad4902f66b32d","6ddb102aef41db9c"],"x":234,"y":-1,"w":482,"h":162},{"id":"e0215670b3ffd214","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"99.9","payloadType":"num","x":130,"y":180,"wires":[["ec1f5b031f1e12e5"]]},{"id":"c55c284c29b29f3f","type":"ui_text","z":"6b7503f72b16f50f","group":"9d7bb24dba64fb9d","order":0,"width":"2","height":"1","name":"","label":"Oven 1","format":"{{msg.payload}}","layout":"col-center","className":"","x":420,"y":240,"wires":[]},{"id":"fb175f262cd9cb63","type":"ui_template","z":"6b7503f72b16f50f","group":"9d7bb24dba64fb9d","name":"","order":1,"width":0,"height":0,"format":"<style>\n.nr-dashboard-text.green {\n animation: blinkinggreen 1s infinite;\n}\n.nr-dashboard-text.red {\nanimation: blinkingred 1s infinite;\n}\n.nr-dashboard-text {\n border: 2px solid #666;\n}\n@keyframes blinkinggreen {\n 0% {\n background-color: #fafafa0;\n }\n 100% {\n background-color: #00ff00;\n }\n}\n@keyframes blinkingred {\n 0% {\n background-color: #fafafa;\n }\n100% {\n background-color: #ff0000;\n }\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":900,"y":80,"wires":[[]]},{"id":"21ca73ee091a96bf","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"101","payloadType":"num","x":130,"y":220,"wires":[["ec1f5b031f1e12e5"]]},{"id":"1836b248fa3ff21c","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"450","payloadType":"num","x":130,"y":260,"wires":[["ec1f5b031f1e12e5"]]},{"id":"075516155c1b833c","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"451","payloadType":"num","x":130,"y":300,"wires":[["ec1f5b031f1e12e5"]]},{"id":"5a4235ade42ce319","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"99.9","payloadType":"num","x":610,"y":180,"wires":[["096e573821225775"]]},{"id":"d908f6613b78b7da","type":"ui_text","z":"6b7503f72b16f50f","group":"9d7bb24dba64fb9d","order":0,"width":"2","height":"1","name":"","label":"Oven 2","format":"{{msg.payload}}","layout":"col-center","className":"","x":900,"y":240,"wires":[]},{"id":"0131c867e19cb897","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"101","payloadType":"num","x":610,"y":220,"wires":[["096e573821225775"]]},{"id":"7b8e638f9f068820","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"450","payloadType":"num","x":610,"y":260,"wires":[["096e573821225775"]]},{"id":"d48ae9af9aca92d9","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"451","payloadType":"num","x":610,"y":300,"wires":[["096e573821225775"]]},{"id":"69d56adbeb4dde09","type":"link in","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"link in 1","links":[],"x":275,"y":80,"wires":[["a5b93ea2dffc2c53"]]},{"id":"a5b93ea2dffc2c53","type":"switch","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"","property":"payload","propertyType":"msg","rules":[{"t":"lt","v":"100","vt":"str"},{"t":"btwn","v":"100","vt":"num","v2":"450","v2t":"num"},{"t":"gt","v":"450","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":370,"y":80,"wires":[["0e34e7f518b4b274"],["6ddb102aef41db9c"],["f53d99a361c84124"]]},{"id":"0e34e7f518b4b274","type":"change","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":40,"wires":[["359ad4902f66b32d"]]},{"id":"f53d99a361c84124","type":"change","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":120,"wires":[["359ad4902f66b32d"]]},{"id":"359ad4902f66b32d","type":"link out","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"link out 1","mode":"return","links":[],"x":675,"y":80,"wires":[]},{"id":"ec1f5b031f1e12e5","type":"link call","z":"6b7503f72b16f50f","name":"","links":["69d56adbeb4dde09"],"linkType":"static","timeout":"30","x":280,"y":240,"wires":[["c55c284c29b29f3f"]]},{"id":"096e573821225775","type":"link call","z":"6b7503f72b16f50f","name":"","links":["69d56adbeb4dde09"],"linkType":"static","timeout":"30","x":760,"y":240,"wires":[["d908f6613b78b7da"]]},{"id":"7127685b5bd9a609","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"99.9","payloadType":"num","x":130,"y":360,"wires":[["6f995ab8ac0956e5"]]},{"id":"577d1bc1b40e7014","type":"ui_text","z":"6b7503f72b16f50f","group":"9d7bb24dba64fb9d","order":0,"width":"2","height":"1","name":"","label":"Oven 3","format":"{{msg.payload}}","layout":"col-center","className":"","x":420,"y":420,"wires":[]},{"id":"4d48c2d29b768fe8","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"101","payloadType":"num","x":130,"y":400,"wires":[["6f995ab8ac0956e5"]]},{"id":"127e2558825b45bc","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"450","payloadType":"num","x":130,"y":440,"wires":[["6f995ab8ac0956e5"]]},{"id":"57d31a942fdfa7b4","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"451","payloadType":"num","x":130,"y":480,"wires":[["6f995ab8ac0956e5"]]},{"id":"a1413d7cd29a36f5","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"99.9","payloadType":"num","x":610,"y":360,"wires":[["aa904c2209543aeb"]]},{"id":"6a7419949dee8f5f","type":"ui_text","z":"6b7503f72b16f50f","group":"9d7bb24dba64fb9d","order":0,"width":"2","height":"1","name":"","label":"Oven 4","format":"{{msg.payload}}","layout":"col-center","className":"","x":900,"y":420,"wires":[]},{"id":"8a0e50943cb3a87c","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"101","payloadType":"num","x":610,"y":400,"wires":[["aa904c2209543aeb"]]},{"id":"7d356f9454f77b31","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"450","payloadType":"num","x":610,"y":440,"wires":[["aa904c2209543aeb"]]},{"id":"4b85bd74e5e93e47","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"451","payloadType":"num","x":610,"y":480,"wires":[["aa904c2209543aeb"]]},{"id":"6f995ab8ac0956e5","type":"link call","z":"6b7503f72b16f50f","name":"","links":["69d56adbeb4dde09"],"linkType":"static","timeout":"30","x":280,"y":420,"wires":[["577d1bc1b40e7014"]]},{"id":"aa904c2209543aeb","type":"link call","z":"6b7503f72b16f50f","name":"","links":["69d56adbeb4dde09"],"linkType":"static","timeout":"30","x":760,"y":420,"wires":[["6a7419949dee8f5f"]]},{"id":"6ddb102aef41db9c","type":"change","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"nothing","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":80,"wires":[["359ad4902f66b32d"]]},{"id":"9d7bb24dba64fb9d","type":"ui_group","name":"Default","tab":"24fb5c805e063a65","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"24fb5c805e063a65","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
A snapshot at full blink...
Yes, this works as intended, but how do I apply this for my case? I have msg.payload that reads and deliver the data to the dashboard.
I'll share my flow below
[
{
"id": "ba40178493839cb7",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "033c373046a2da30",
"type": "C-Mode Command",
"z": "ba40178493839cb7",
"name": "CP2E",
"plcSeries": "CSJP",
"hostNumber": 0,
"headerCode": "RD",
"p1": "0",
"p2": "12",
"p3": "",
"x": 270,
"y": 100,
"wires": [
[
"92dcb68ff10007a0"
]
]
},
{
"id": "64c03284f8f31ee0",
"type": "C-Mode Response",
"z": "ba40178493839cb7",
"name": "",
"x": 570,
"y": 100,
"wires": [
[
"dc2cec39514b5748"
]
]
},
{
"id": "91eb937ee4e89c68",
"type": "inject",
"z": "ba40178493839cb7",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "1",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 110,
"y": 100,
"wires": [
[
"033c373046a2da30"
]
]
},
{
"id": "4ba084247ffa13ea",
"type": "debug",
"z": "ba40178493839cb7",
"name": "debug 7",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 540,
"y": 280,
"wires": []
},
{
"id": "92dcb68ff10007a0",
"type": "serial request",
"z": "ba40178493839cb7",
"name": "",
"serial": "893956afe4c6c260",
"x": 400,
"y": 100,
"wires": [
[
"64c03284f8f31ee0"
]
]
},
{
"id": "4a9d8cb4d0c90c8c",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 2,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 1",
"format": "{{msg.payload.asInteger1[0]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 380,
"wires": []
},
{
"id": "dc2cec39514b5748",
"type": "buffer-parser",
"z": "ba40178493839cb7",
"name": "",
"data": "payload.buffer",
"dataType": "msg",
"specification": "spec",
"specificationType": "ui",
"items": [
{
"type": "int16be",
"name": "asInteger1",
"offset": 0,
"length": 12,
"offsetbit": 0,
"scale": "1",
"mask": ""
},
{
"type": "hex",
"name": "asHex1",
"offset": 0,
"length": 2,
"offsetbit": 0,
"scale": "1",
"mask": ""
},
{
"type": "hex",
"name": "asHex2",
"offset": 0,
"length": 3,
"offsetbit": 0,
"scale": "1",
"mask": ""
},
{
"type": "hex",
"name": "hex3",
"offset": 0,
"length": 4,
"offsetbit": 0,
"scale": "1",
"mask": ""
},
{
"type": "hex",
"name": "hex4",
"offset": 0,
"length": 5,
"offsetbit": 0,
"scale": "1",
"mask": ""
},
{
"type": "hex",
"name": "hex5",
"offset": 0,
"length": 6,
"offsetbit": 0,
"scale": "1",
"mask": ""
}
],
"swap1": "",
"swap2": "",
"swap3": "",
"swap1Type": "swap",
"swap2Type": "swap",
"swap3Type": "swap",
"msgProperty": "payload",
"msgPropertyType": "str",
"resultType": "keyvalue",
"resultTypeType": "return",
"multipleResult": false,
"fanOutMultipleResult": false,
"setTopic": true,
"outputs": 1,
"x": 170,
"y": 340,
"wires": [
[
"4ba084247ffa13ea",
"4a9d8cb4d0c90c8c",
"f14369720473e9f7",
"34f847f2bbe15d3b",
"f022d5898a696ebf",
"0b2ad89132104852",
"042c5d8445576637",
"f77a6d4e6acb8a58",
"3e5216204600adf7",
"494dbbc109ff3992",
"3bcdec2a17238e0c",
"4be0a557693b5c35",
"5832bd24f1a404ad",
"03439064148ae32c"
]
]
},
{
"id": "f14369720473e9f7",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 4,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 2",
"format": "{{msg.payload.asInteger1[1]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 420,
"wires": []
},
{
"id": "03439064148ae32c",
"type": "ui_button",
"z": "ba40178493839cb7",
"name": "",
"group": "efcc13e5a5b82fc5",
"order": 15,
"width": "9",
"height": "1",
"passthru": false,
"label": "Refresh",
"tooltip": "",
"color": "",
"bgcolor": "red",
"className": "",
"icon": "autorenew",
"payload": "0",
"payloadType": "num",
"topic": "topic",
"topicType": "msg",
"x": 180,
"y": 440,
"wires": [
[
"f14369720473e9f7",
"34f847f2bbe15d3b",
"f022d5898a696ebf",
"0b2ad89132104852",
"042c5d8445576637",
"f77a6d4e6acb8a58",
"3e5216204600adf7",
"494dbbc109ff3992",
"3bcdec2a17238e0c",
"4be0a557693b5c35",
"5832bd24f1a404ad",
"4a9d8cb4d0c90c8c"
]
]
},
{
"id": "34f847f2bbe15d3b",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 5,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 3",
"format": "{{msg.payload.asInteger1[2]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 460,
"wires": []
},
{
"id": "f022d5898a696ebf",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 6,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 4",
"format": "{{msg.payload.asInteger1[3]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 500,
"wires": []
},
{
"id": "0b2ad89132104852",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 7,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 5",
"format": "{{msg.payload.asInteger1[4]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 540,
"wires": []
},
{
"id": "042c5d8445576637",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 8,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 6",
"format": "{{msg.payload.asInteger1[5]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 580,
"wires": []
},
{
"id": "f77a6d4e6acb8a58",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 9,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 7",
"format": "{{msg.payload.asInteger1[6]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 620,
"wires": []
},
{
"id": "3e5216204600adf7",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 10,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 8",
"format": "{{msg.payload.asInteger1[7]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 660,
"wires": []
},
{
"id": "494dbbc109ff3992",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 11,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 9",
"format": "{{msg.payload.asInteger1[8]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 700,
"wires": []
},
{
"id": "3bcdec2a17238e0c",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 12,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 10",
"format": "{{msg.payload.asInteger1[9]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 740,
"wires": []
},
{
"id": "4be0a557693b5c35",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 13,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 11",
"format": "{{msg.payload.asInteger1[10]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 780,
"wires": []
},
{
"id": "5832bd24f1a404ad",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 14,
"width": "2",
"height": "2",
"name": "",
"label": "<font size=6>Oven 12",
"format": "{{msg.payload.asInteger1[11]}}",
"layout": "col-center",
"className": "",
"x": 580,
"y": 820,
"wires": []
},
{
"id": "44d5fc2dac950cbd",
"type": "ui_template",
"z": "ba40178493839cb7",
"group": "eee0579406adab47",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"format": "<style>\n.nr-dashboard-text.green {\n animation: blinkinggreen 1s infinite;\n}\n.nr-dashboard-text.red {\nanimation: blinkingred 1s infinite;\n}\n.nr-dashboard-text {\n border: 2px solid #666;\n}\n@keyframes blinkinggreen {\n 0% {\n background-color: #fafafa0;\n }\n 100% {\n background-color: #00ff00;\n }\n}\n@keyframes blinkingred {\n 0% {\n background-color: #fafafa;\n }\n100% {\n background-color: #ff0000;\n }\n}\n</style>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 760,
"y": 220,
"wires": [
[]
]
},
{
"id": "893956afe4c6c260",
"type": "serial-port",
"z": "ba40178493839cb7",
"serialport": "COM11",
"serialbaud": "9600",
"databits": "7",
"parity": "even",
"stopbits": "2",
"waitfor": "",
"dtr": "none",
"rts": "none",
"cts": "none",
"dsr": "none",
"newline": "\\n",
"bin": "false",
"out": "char",
"addchar": "",
"responsetimeout": "1000"
},
{
"id": "efcc13e5a5b82fc5",
"type": "ui_group",
"name": "Oven Monitoring Dashboard",
"tab": "d6f687902eee7759",
"order": 2,
"disp": true,
"width": "8",
"collapse": false,
"className": ""
},
{
"id": "eee0579406adab47",
"type": "ui_group",
"name": "Default",
"tab": "24fb5c805e063a65",
"order": 1,
"disp": true,
"width": "12",
"collapse": false,
"className": ""
},
{
"id": "d6f687902eee7759",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
},
{
"id": "24fb5c805e063a65",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
I think my suggestion depends on each text widget having it's own message with payload and className.
But you seem to have everything in a single message, with an array msg.payload.asInteger1[ ] ?
I would consider splitting it into discrete messages so that you can pass each one through the link call "subroutine" to give it the required className. I'm not sure precisely how because I don't have your data.
It's in the template CSS:
.nr-dashboard-text {
border: 2px solid #666;
}
I apologise, but may I know what does the className term mean, and what does this do prior to my goal?
From the help text of the dashboard text widget:
If a Class is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a
msg.classNamestring property.
[
{
"id": "ba40178493839cb7",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "033c373046a2da30",
"type": "C-Mode Command",
"z": "ba40178493839cb7",
"name": "CP2E",
"plcSeries": "CSJP",
"hostNumber": 0,
"headerCode": "RD",
"p1": "0",
"p2": "12",
"p3": "",
"x": 290,
"y": 100,
"wires": [
[
"92dcb68ff10007a0"
]
]
},
{
"id": "64c03284f8f31ee0",
"type": "C-Mode Response",
"z": "ba40178493839cb7",
"name": "",
"x": 630,
"y": 100,
"wires": [
[
"dc2cec39514b5748"
]
]
},
{
"id": "91eb937ee4e89c68",
"type": "inject",
"z": "ba40178493839cb7",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "1",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 130,
"y": 100,
"wires": [
[
"033c373046a2da30"
]
]
},
{
"id": "4ba084247ffa13ea",
"type": "debug",
"z": "ba40178493839cb7",
"name": "debug 7",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 520,
"y": 180,
"wires": []
},
{
"id": "92dcb68ff10007a0",
"type": "serial request",
"z": "ba40178493839cb7",
"name": "",
"serial": "893956afe4c6c260",
"x": 440,
"y": 100,
"wires": [
[
"64c03284f8f31ee0"
]
]
},
{
"id": "4a9d8cb4d0c90c8c",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 2,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 1",
"format": "<font size=6>{{msg.payload.asInteger1[0]}} °C",
"layout": "col-center",
"className": "num1",
"x": 560,
"y": 220,
"wires": []
},
{
"id": "dc2cec39514b5748",
"type": "buffer-parser",
"z": "ba40178493839cb7",
"name": "",
"data": "payload.buffer",
"dataType": "msg",
"specification": "spec",
"specificationType": "ui",
"items": [
{
"type": "int16be",
"name": "asInteger1",
"offset": 0,
"length": 12,
"offsetbit": 0,
"scale": "1",
"mask": ""
},
{
"type": "hex",
"name": "asHex1",
"offset": 0,
"length": 2,
"offsetbit": 0,
"scale": "1",
"mask": ""
},
{
"type": "hex",
"name": "asHex2",
"offset": 0,
"length": 3,
"offsetbit": 0,
"scale": "1",
"mask": ""
},
{
"type": "hex",
"name": "hex3",
"offset": 0,
"length": 4,
"offsetbit": 0,
"scale": "1",
"mask": ""
},
{
"type": "hex",
"name": "hex4",
"offset": 0,
"length": 5,
"offsetbit": 0,
"scale": "1",
"mask": ""
},
{
"type": "hex",
"name": "hex5",
"offset": 0,
"length": 6,
"offsetbit": 0,
"scale": "1",
"mask": ""
}
],
"swap1": "",
"swap2": "",
"swap3": "",
"swap1Type": "swap",
"swap2Type": "swap",
"swap3Type": "swap",
"msgProperty": "payload",
"msgPropertyType": "str",
"resultType": "keyvalue",
"resultTypeType": "return",
"multipleResult": false,
"fanOutMultipleResult": false,
"setTopic": true,
"outputs": 1,
"x": 150,
"y": 200,
"wires": [
[
"4ba084247ffa13ea",
"4a9d8cb4d0c90c8c",
"f14369720473e9f7",
"34f847f2bbe15d3b",
"f022d5898a696ebf",
"0b2ad89132104852",
"042c5d8445576637",
"f77a6d4e6acb8a58",
"3e5216204600adf7",
"494dbbc109ff3992",
"3bcdec2a17238e0c",
"4be0a557693b5c35",
"5832bd24f1a404ad",
"03439064148ae32c"
]
]
},
{
"id": "f14369720473e9f7",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 3,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 2",
"format": "<font size=6>{{msg.payload.asInteger1[1]}} °C",
"layout": "col-center",
"className": "num2",
"x": 560,
"y": 260,
"wires": []
},
{
"id": "03439064148ae32c",
"type": "ui_button",
"z": "ba40178493839cb7",
"name": "",
"group": "efcc13e5a5b82fc5",
"order": 15,
"width": 4,
"height": 1,
"passthru": false,
"label": "Refresh",
"tooltip": "",
"color": "",
"bgcolor": "blue",
"className": "num0",
"icon": "autorenew",
"payload": "0",
"payloadType": "num",
"topic": "topic",
"topicType": "msg",
"x": 140,
"y": 260,
"wires": [
[
"f14369720473e9f7",
"34f847f2bbe15d3b",
"f022d5898a696ebf",
"0b2ad89132104852",
"042c5d8445576637",
"f77a6d4e6acb8a58",
"3e5216204600adf7",
"494dbbc109ff3992",
"3bcdec2a17238e0c",
"4be0a557693b5c35",
"5832bd24f1a404ad",
"4a9d8cb4d0c90c8c"
]
]
},
{
"id": "34f847f2bbe15d3b",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 4,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 3",
"format": "<font size=6>{{msg.payload.asInteger1[2]}} °C",
"layout": "col-center",
"className": "num1",
"x": 560,
"y": 300,
"wires": []
},
{
"id": "f022d5898a696ebf",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 5,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 4",
"format": "<font size=6>{{msg.payload.asInteger1[3]}} °C",
"layout": "col-center",
"className": "num2",
"x": 560,
"y": 340,
"wires": []
},
{
"id": "0b2ad89132104852",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 6,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 5",
"format": "<font size=6>{{msg.payload.asInteger1[4]}} °C",
"layout": "col-center",
"className": "num2",
"x": 560,
"y": 380,
"wires": []
},
{
"id": "042c5d8445576637",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 7,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 6",
"format": "<font size=6>{{msg.payload.asInteger1[5]}} °C",
"layout": "col-center",
"className": "num1",
"x": 560,
"y": 420,
"wires": []
},
{
"id": "f77a6d4e6acb8a58",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 8,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 7",
"format": "<font size=6>{{msg.payload.asInteger1[6]}} °C",
"layout": "col-center",
"className": "num2",
"x": 560,
"y": 460,
"wires": []
},
{
"id": "3e5216204600adf7",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 9,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 8",
"format": "<font size=6>{{msg.payload.asInteger1[7]}} °C",
"layout": "col-center",
"className": "num1",
"x": 560,
"y": 500,
"wires": []
},
{
"id": "494dbbc109ff3992",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 10,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 9",
"format": "<font size=6>{{msg.payload.asInteger1[8]}} °C",
"layout": "col-center",
"className": "num1",
"x": 560,
"y": 540,
"wires": []
},
{
"id": "3bcdec2a17238e0c",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 11,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 10",
"format": "<font size=6>{{msg.payload.asInteger1[9]}} °C",
"layout": "col-center",
"className": "num2",
"x": 560,
"y": 580,
"wires": []
},
{
"id": "4be0a557693b5c35",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 12,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 11",
"format": "<font size=6>{{msg.payload.asInteger1[10]}} °C",
"layout": "col-center",
"className": "num1",
"x": 560,
"y": 620,
"wires": []
},
{
"id": "5832bd24f1a404ad",
"type": "ui_text",
"z": "ba40178493839cb7",
"group": "efcc13e5a5b82fc5",
"order": 13,
"width": 3,
"height": 4,
"name": "",
"label": "<font size=7>Oven 12",
"format": "<font size=6>{{msg.payload.asInteger1[11]}} °C",
"layout": "col-center",
"className": "num2",
"x": 560,
"y": 660,
"wires": []
},
{
"id": "b940024a556b8bed",
"type": "ui_template",
"z": "ba40178493839cb7",
"group": "eee0579406adab47",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"format": "<style>\n.num1 {\n animation: blinkinggreen 1s infinite;\n}\n.num0 {\nanimation: blinkingwhite 1s infinite;\n}\n.num2 {\nanimation: blinkingred 1s infinite;\n}\n.num1 {\n border: 2px solid #666;\n}\n.num2 {\nborder: 2px solid #666;\n}\n@keyframes blinkinggreen {\n 0% {\n background-color: #fafafa0;\n }\n 100% {\n background-color: #00ff00;\n }\n}\n@keyframes blinkingred {\n 0% {\n background-color: #fafafa;\n }\n100% {\n background-color: #ff0000;\n }\n}\n</style>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 860,
"y": 100,
"wires": [
[]
]
},
{
"id": "d7c05987dd5a4de7",
"type": "ui_spacer",
"z": "ba40178493839cb7",
"name": "spacer",
"group": "efcc13e5a5b82fc5",
"order": 14,
"width": 4,
"height": 1
},
{
"id": "972f49ed5fbd0a92",
"type": "ui_spacer",
"z": "ba40178493839cb7",
"name": "spacer",
"group": "efcc13e5a5b82fc5",
"order": 16,
"width": 4,
"height": 1
},
{
"id": "893956afe4c6c260",
"type": "serial-port",
"z": "ba40178493839cb7",
"serialport": "COM11",
"serialbaud": "9600",
"databits": "7",
"parity": "even",
"stopbits": "2",
"waitfor": "",
"dtr": "none",
"rts": "none",
"cts": "none",
"dsr": "none",
"newline": "\\n",
"bin": "false",
"out": "char",
"addchar": "",
"responsetimeout": "1000"
},
{
"id": "efcc13e5a5b82fc5",
"type": "ui_group",
"name": "Oven Monitoring Dashboard",
"tab": "d6f687902eee7759",
"order": 2,
"disp": true,
"width": "12",
"collapse": false,
"className": ""
},
{
"id": "eee0579406adab47",
"type": "ui_group",
"name": "Default",
"tab": "24fb5c805e063a65",
"order": 1,
"disp": true,
"width": "12",
"collapse": false,
"className": ""
},
{
"id": "d6f687902eee7759",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
},
{
"id": "24fb5c805e063a65",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"order": 3,
"disabled": false,
"hidden": false
}
]
Got it, I just used your template and assigned 2 different CSS classes
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy