Hello,
I'm trying to change the visual appearance of a template node with a flow.var while displaying the msg.payload. Basically I have three different status for a particulate item on my network. It can be Warning, Degraded, Online and I'm using flow.var to track the status. I would like for the template node to have different colors based on the status. i.e. online = green background | degraded = yellow background | warning = red background . In addition to the status (indicated by formatting), I would like the description to be the text. i.e the text of the template node as shown on the dashboard would be
"out of paper" with a red background | "low paper" with a yellow background | "Online" with a green background.
MY current work around is to have a template node with text to match the payload with another text node that gives the description. I would rather have the description along with the formatting all in the same template nod.
Here's a working example with my work around. node-red-contrib-string loaded in flow
[
{
"id": "7d3eaf0c.844da",
"type": "string",
"z": "69d20979.37c01",
"name": "Parse Error",
"methods": [
{
"name": "between",
"params": [
{
"type": "str",
"value": "Alarm Description : </td><td>"
},
{
"type": "str",
"value": "</td>"
}
]
}
],
"prop": "payload",
"propout": "payload",
"object": "msg",
"objectout": "msg",
"x": 434.000057220459,
"y": 2493.0315589904785,
"wires": [
[
"d6ca305a.25c6b",
"252e7c87.858f24",
"52dea50a.3c71cc"
]
]
},
{
"id": "18641d92.f38df2",
"type": "change",
"z": "69d20979.37c01",
"name": "set Degraded",
"rules": [
{
"t": "set",
"p": "rExitAlert",
"pt": "flow",
"to": "Degraded",
"tot": "str"
},
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "Degraded",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1108.0001544952393,
"y": 2511.031925201416,
"wires": [
[
"582a514c.bc457",
"76bc6438.1c970c"
]
]
},
{
"id": "209b8f1b.5f097",
"type": "change",
"z": "69d20979.37c01",
"name": "set Warning",
"rules": [
{
"t": "set",
"p": "rExitAlert",
"pt": "flow",
"to": "Warning",
"tot": "str"
},
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "Warning",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1096.0000286102295,
"y": 2465.031615257263,
"wires": [
[
"582a514c.bc457",
"76bc6438.1c970c"
]
]
},
{
"id": "cc373f82.3beef",
"type": "switch",
"z": "69d20979.37c01",
"name": "if Active",
"property": "rEntryStatus",
"propertyType": "flow",
"rules": [
{
"t": "cont",
"v": "Active",
"vt": "str"
}
],
"checkall": "true",
"outputs": 1,
"x": 929.749906539917,
"y": 2512.0470008850098,
"wires": [
[
"18641d92.f38df2"
]
]
},
{
"id": "96ea380a.2706c8",
"type": "switch",
"z": "69d20979.37c01",
"name": "if Active",
"property": "rEntryStatus",
"propertyType": "flow",
"rules": [
{
"t": "cont",
"v": "Active",
"vt": "str"
}
],
"checkall": "true",
"outputs": 1,
"x": 931.9999675750732,
"y": 2466.0308837890625,
"wires": [
[
"209b8f1b.5f097"
]
]
},
{
"id": "468770d2.f1709",
"type": "switch",
"z": "69d20979.37c01",
"name": "if Clear",
"property": "rEntryStatus",
"propertyType": "flow",
"rules": [
{
"t": "cont",
"v": "Clear",
"vt": "str"
}
],
"checkall": "true",
"outputs": 1,
"x": 933.999885559082,
"y": 2593.0310192108154,
"wires": [
[
"5bbddeb2.d911"
]
]
},
{
"id": "5bbddeb2.d911",
"type": "change",
"z": "69d20979.37c01",
"name": "set Online",
"rules": [
{
"t": "set",
"p": "rExitAlert",
"pt": "flow",
"to": "Online",
"tot": "str"
},
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "Online",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1095.0000896453857,
"y": 2592.0311317443848,
"wires": [
[
"4715c350.34342c",
"582a514c.bc457"
]
]
},
{
"id": "76bc6438.1c970c",
"type": "change",
"z": "69d20979.37c01",
"name": "get rExitDescription",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "rExitDescription",
"tot": "flow"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1232.789888381958,
"y": 2551.0233192443848,
"wires": [
[
"ee81132.d734bf"
]
]
},
{
"id": "4715c350.34342c",
"type": "change",
"z": "69d20979.37c01",
"name": "set clear",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "Online",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1274.789270401001,
"y": 2591.0237464904785,
"wires": [
[
"ee81132.d734bf"
]
]
},
{
"id": "4e6def6f.3754",
"type": "ui_text",
"z": "69d20979.37c01",
"group": "85ff8710.052358",
"order": 10,
"width": 0,
"height": 0,
"name": "Left Exit",
"label": "",
"format": "<font size=\"+2\">Left Exit",
"layout": "col-center",
"x": 1458.0390586853027,
"y": 2493.7110023498535,
"wires": []
},
{
"id": "ee81132.d734bf",
"type": "ui_text",
"z": "69d20979.37c01",
"group": "85ff8710.052358",
"order": 12,
"width": 0,
"height": 0,
"name": "Left Exit Description",
"label": "",
"format": "{{msg.payload}}",
"layout": "col-center",
"x": 1486.288932800293,
"y": 2586.0235023498535,
"wires": []
},
{
"id": "582a514c.bc457",
"type": "ui_template",
"z": "69d20979.37c01",
"group": "85ff8710.052358",
"name": "Dynamic Status Left Exit",
"order": 11,
"width": "0",
"height": "0",
"format": " <div id=\"msg\" ng-bind-html=\"msg.payload\" ng-class=\"{warning: msg.payload == 'Warning', degraded: msg.payload == 'Degraded', online: msg.payload == 'Online'}\"></div>\n\n <style>\n #msg * {\n display:table-cell;\n }\n .online {\n height: 45px;\n width: 100%;\n font-size: 24px;\n color: #000;\n text-align: center;\n background-color: #008000;\n }\n .degraded {\n height: 45px;\n width: 100%;\n font-size: 24px;\n color: #000000;\n text-align: center;\n background-color: #FFFF00; \n }\n .warning {\n height: 45px;\n width: 100%;\n font-size: 24px;\n color: #FFFFFF;\n text-align: center;\n background-color: #FF0000;\n }\n </style>",
"storeOutMessages": true,
"fwdInMessages": true,
"templateScope": "local",
"x": 1505.2891483306885,
"y": 2542.0238075256348,
"wires": [
[]
]
},
{
"id": "d6ca305a.25c6b",
"type": "delay",
"z": "69d20979.37c01",
"name": "",
"pauseType": "delay",
"timeout": "500",
"timeoutUnits": "milliseconds",
"rate": "1",
"nbRateUnits": "1",
"rateUnits": "second",
"randomFirst": "1",
"randomLast": "5",
"randomUnits": "seconds",
"drop": false,
"x": 490.29672050476074,
"y": 2538.898380279541,
"wires": [
[
"f4d05f3e.d5dee",
"bf638d7.fa7837",
"19eb46e2.a9c8a9"
]
]
},
{
"id": "252e7c87.858f24",
"type": "change",
"z": "69d20979.37c01",
"name": "set rExitDescription",
"rules": [
{
"t": "set",
"p": "rExitDescription",
"pt": "flow",
"to": "payload",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 671.000036239624,
"y": 2457.031446456909,
"wires": [
[]
]
},
{
"id": "d941178.70c68e8",
"type": "inject",
"z": "69d20979.37c01",
"name": "warning active",
"topic": "",
"payload": "<html><body><table style=\"width:400px;float:left;\"><tr><td>Alarm Event Time : </td><td>11/7/2018 9:59:00 AM</td></tr><tr><td>Alarm Event Number : </td><td>2069</td></tr><tr><td>Alarm Event Status : </td><td>Active</td></tr><tr><td>Alarm Description : </td><td>Out of Ticket</td></tr><tr><td>Alarm Device Name : </td><td>Right Entry TD</td></tr><tr><td>Engine Name : </td><td>EASTERWOOD-AMIA</td></tr><tr><td>Port Number : </td><td>Network Port</td></tr><tr><td>Site Name : </td><td>Easterwood</td></tr></table></body></html>",
"payloadType": "str",
"repeat": "",
"crontab": "",
"once": false,
"x": 214.96874809265137,
"y": 2413.858808517456,
"wires": [
[
"7d3eaf0c.844da",
"1faf7d0b.302de3"
]
]
},
{
"id": "d942b1d5.7108d",
"type": "inject",
"z": "69d20979.37c01",
"name": "warning clear",
"topic": "",
"payload": "<html><body><table style=\"width:400px;float:left;\"><tr><td>Alarm Event Time : </td><td>11/7/2018 9:59:00 AM</td></tr><tr><td>Alarm Event Number : </td><td>2069</td></tr><tr><td>Alarm Event Status : </td><td>Clear</td></tr><tr><td>Alarm Description : </td><td>Out of Ticket</td></tr><tr><td>Alarm Device Name : </td><td>Right Entry TD</td></tr><tr><td>Engine Name : </td><td>EASTERWOOD-AMIA</td></tr><tr><td>Port Number : </td><td>Network Port</td></tr><tr><td>Site Name : </td><td>Easterwood</td></tr></table></body></html>",
"payloadType": "str",
"repeat": "",
"crontab": "",
"once": false,
"x": 213.2109432220459,
"y": 2469.038496017456,
"wires": [
[
"7d3eaf0c.844da",
"1faf7d0b.302de3"
]
]
},
{
"id": "40efbeeb.e3ee9",
"type": "inject",
"z": "69d20979.37c01",
"name": "degraded active",
"topic": "",
"payload": "<html><body><table style=\"width:400px;float:left;\"><tr><td>Alarm Event Time : </td><td>11/7/2018 9:59:00 AM</td></tr><tr><td>Alarm Event Number : </td><td>2069</td></tr><tr><td>Alarm Event Status : </td><td>Active</td></tr><tr><td>Alarm Description : </td><td>Tickets Low</td></tr><tr><td>Alarm Device Name : </td><td>Right Entry TD</td></tr><tr><td>Engine Name : </td><td>EASTERWOOD-AMIA</td></tr><tr><td>Port Number : </td><td>Network Port</td></tr><tr><td>Site Name : </td><td>Easterwood</td></tr></table></body></html>",
"payloadType": "str",
"repeat": "",
"crontab": "",
"once": false,
"x": 212.21093559265137,
"y": 2533.038549423218,
"wires": [
[
"7d3eaf0c.844da",
"1faf7d0b.302de3"
]
]
},
{
"id": "aeafd878.e5b868",
"type": "inject",
"z": "69d20979.37c01",
"name": "degraded clear",
"topic": "",
"payload": "<html><body><table style=\"width:400px;float:left;\"><tr><td>Alarm Event Time : </td><td>11/7/2018 9:59:00 AM</td></tr><tr><td>Alarm Event Number : </td><td>2069</td></tr><tr><td>Alarm Event Status : </td><td>Clear</td></tr><tr><td>Alarm Description : </td><td>Tickets Low</td></tr><tr><td>Alarm Device Name : </td><td>Right Entry TD</td></tr><tr><td>Engine Name : </td><td>EASTERWOOD-AMIA</td></tr><tr><td>Port Number : </td><td>Network Port</td></tr><tr><td>Site Name : </td><td>Easterwood</td></tr></table></body></html>",
"payloadType": "str",
"repeat": "",
"crontab": "",
"once": false,
"x": 211,
"y": 2588.0310401916504,
"wires": [
[
"7d3eaf0c.844da",
"1faf7d0b.302de3"
]
]
},
{
"id": "52dea50a.3c71cc",
"type": "debug",
"z": "69d20979.37c01",
"name": "",
"active": true,
"console": "false",
"complete": "false",
"x": 662.7890625,
"y": 2382.0859375,
"wires": []
},
{
"id": "f4d05f3e.d5dee",
"type": "switch",
"z": "69d20979.37c01",
"name": "Tickets Low",
"property": "payload",
"propertyType": "msg",
"rules": [
{
"t": "cont",
"v": "Tickets Low",
"vt": "str"
}
],
"checkall": "true",
"outputs": 1,
"x": 704.0234336853027,
"y": 2510.0391273498535,
"wires": [
[
"cc373f82.3beef",
"468770d2.f1709"
]
]
},
{
"id": "19eb46e2.a9c8a9",
"type": "switch",
"z": "69d20979.37c01",
"name": "Jammed/Full",
"property": "payload",
"propertyType": "msg",
"rules": [
{
"t": "cont",
"v": "Ticket Jammed or Vault Full",
"vt": "str"
}
],
"checkall": "true",
"outputs": 1,
"x": 708.2734775543213,
"y": 2608.0157508850098,
"wires": [
[
"96ea380a.2706c8",
"468770d2.f1709"
]
]
},
{
"id": "bf638d7.fa7837",
"type": "switch",
"z": "69d20979.37c01",
"name": "Out of Ticket",
"property": "payload",
"propertyType": "msg",
"rules": [
{
"t": "cont",
"v": "Out of Ticket",
"vt": "str"
}
],
"checkall": "true",
"outputs": 1,
"x": 707.2734317779541,
"y": 2559.015567779541,
"wires": [
[
"96ea380a.2706c8",
"468770d2.f1709"
]
]
},
{
"id": "1faf7d0b.302de3",
"type": "string",
"z": "69d20979.37c01",
"name": "Parse Status",
"methods": [
{
"name": "between",
"params": [
{
"type": "str",
"value": "<td>Alarm Event Status : </td><td>"
},
{
"type": "str",
"value": "</td>"
}
]
}
],
"prop": "payload",
"propout": "payload",
"object": "msg",
"objectout": "msg",
"x": 448.02344703674316,
"y": 2588.039249420166,
"wires": [
[
"8659aa59.d81638"
]
]
},
{
"id": "8659aa59.d81638",
"type": "change",
"z": "69d20979.37c01",
"name": "set rEntryStatus",
"rules": [
{
"t": "set",
"p": "rEntryStatus",
"pt": "flow",
"to": "payload",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 462.02327728271484,
"y": 2653.0394325256348,
"wires": [
[]
]
},
{
"id": "85ff8710.052358",
"type": "ui_group",
"z": "",
"name": "Unsused",
"tab": "2188bc10.a1f4d4",
"disp": true,
"width": "6"
},
{
"id": "2188bc10.a1f4d4",
"type": "ui_tab",
"z": "",
"name": "Unused",
"icon": "dashboard"
}
]