Conditional formatting template node

Dashboard
1

Hi,
I am trying to display last 60 minutes of machine output in a ui_text node using a template node as formatter. The input to the template node is a single json object (given in inject node in example) generated by a mysql query.

I want to conditionally color the font of ZERO output to red and rest all any other single color (shown yellow here)
expected output shown in second image (done manually)
is this possible, and is there any other better way to display the data as below ?
the data is updated automatically every minute

[{"id":"78ce4683b6dd7be8","type":"inject","z":"53edcbb0228e136a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"d\":\"17:06\",\"mac\":\"000\"},{\"d\":\"17:05\",\"mac\":\"000\"},{\"d\":\"17:04\",\"mac\":\"000\"},{\"d\":\"17:03\",\"mac\":\"039\"},{\"d\":\"17:02\",\"mac\":\"245\"},{\"d\":\"17:01\",\"mac\":\"154\"},{\"d\":\"17:00\",\"mac\":\"000\"},{\"d\":\"16:59\",\"mac\":\"000\"},{\"d\":\"16:58\",\"mac\":\"000\"},{\"d\":\"16:57\",\"mac\":\"000\"},{\"d\":\"16:56\",\"mac\":\"081\"},{\"d\":\"16:55\",\"mac\":\"266\"},{\"d\":\"16:54\",\"mac\":\"317\"},{\"d\":\"16:53\",\"mac\":\"319\"},{\"d\":\"16:52\",\"mac\":\"318\"},{\"d\":\"16:51\",\"mac\":\"319\"},{\"d\":\"16:50\",\"mac\":\"320\"},{\"d\":\"16:49\",\"mac\":\"047\"},{\"d\":\"16:48\",\"mac\":\"242\"},{\"d\":\"16:47\",\"mac\":\"317\"},{\"d\":\"16:46\",\"mac\":\"318\"},{\"d\":\"16:45\",\"mac\":\"320\"},{\"d\":\"16:44\",\"mac\":\"318\"},{\"d\":\"16:43\",\"mac\":\"104\"},{\"d\":\"16:42\",\"mac\":\"266\"},{\"d\":\"16:41\",\"mac\":\"316\"},{\"d\":\"16:40\",\"mac\":\"319\"},{\"d\":\"16:39\",\"mac\":\"319\"},{\"d\":\"16:38\",\"mac\":\"318\"},{\"d\":\"16:37\",\"mac\":\"228\"},{\"d\":\"16:36\",\"mac\":\"133\"},{\"d\":\"16:35\",\"mac\":\"317\"},{\"d\":\"16:34\",\"mac\":\"317\"},{\"d\":\"16:33\",\"mac\":\"316\"},{\"d\":\"16:32\",\"mac\":\"318\"},{\"d\":\"16:31\",\"mac\":\"318\"},{\"d\":\"16:30\",\"mac\":\"317\"},{\"d\":\"16:29\",\"mac\":\"080\"},{\"d\":\"16:28\",\"mac\":\"172\"},{\"d\":\"16:27\",\"mac\":\"296\"},{\"d\":\"16:26\",\"mac\":\"317\"},{\"d\":\"16:25\",\"mac\":\"232\"},{\"d\":\"16:24\",\"mac\":\"318\"},{\"d\":\"16:23\",\"mac\":\"317\"},{\"d\":\"16:22\",\"mac\":\"314\"},{\"d\":\"16:21\",\"mac\":\"317\"},{\"d\":\"16:20\",\"mac\":\"319\"},{\"d\":\"16:19\",\"mac\":\"072\"},{\"d\":\"16:18\",\"mac\":\"077\"},{\"d\":\"16:17\",\"mac\":\"000\"},{\"d\":\"16:16\",\"mac\":\"092\"},{\"d\":\"16:15\",\"mac\":\"280\"},{\"d\":\"16:14\",\"mac\":\"196\"},{\"d\":\"16:13\",\"mac\":\"316\"},{\"d\":\"16:12\",\"mac\":\"318\"},{\"d\":\"16:11\",\"mac\":\"316\"},{\"d\":\"16:10\",\"mac\":\"315\"},{\"d\":\"16:09\",\"mac\":\"153\"},{\"d\":\"16:08\",\"mac\":\"000\"},{\"d\":\"16:07\",\"mac\":\"023\"}]","payloadType":"json","x":310,"y":340,"wires":[["f23c6dead6ba8c1b","448533f26c4e085a"]]},{"id":"f23c6dead6ba8c1b","type":"template","z":"53edcbb0228e136a","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<font color=cyan>{{payload.0.d}} to {{payload.14.d}} <font color=yellow> {{payload.0.mac}}-{{payload.1.mac}}-{{payload.2.mac}}-{{payload.3.mac}}-{{payload.4.mac}}-{{payload.5.mac}}-{{payload.6.mac}}-{{payload.7.mac}}-{{payload.8.mac}}-{{payload.9.mac}}-{{payload.10.mac}}-{{payload.11.mac}}-{{payload.12.mac}}-{{payload.13.mac}}-{{payload.14.mac}}\n<font color=cyan>{{payload.15.d}} to {{payload.29.d}} <font color=yellow> {{payload.15.mac}}-{{payload.16.mac}}-{{payload.17.mac}}-{{payload.18.mac}}-{{payload.19.mac}}-{{payload.20.mac}}-{{payload.21.mac}}-{{payload.22.mac}}-{{payload.23.mac}}-{{payload.24.mac}}-{{payload.25.mac}}-{{payload.26.mac}}-{{payload.27.mac}}-{{payload.28.mac}}-{{payload.29.mac}}\n<font color=cyan>{{payload.30.d}} to {{payload.44.d}} <font color=yellow> {{payload.30.mac}}-{{payload.31.mac}}-{{payload.32.mac}}-{{payload.33.mac}}-{{payload.34.mac}}-{{payload.35.mac}}-{{payload.36.mac}}-{{payload.37.mac}}-{{payload.38.mac}}-{{payload.39.mac}}-{{payload.40.mac}}-{{payload.41.mac}}-{{payload.42.mac}}-{{payload.43.mac}}-{{payload.44.mac}}\n<font color=cyan>{{payload.45.d}} to {{payload.59.d}} <font color=yellow> {{payload.45.mac}}-{{payload.46.mac}}-{{payload.47.mac}}-{{payload.48.mac}}-{{payload.49.mac}}-{{payload.50.mac}}-{{payload.51.mac}}-{{payload.52.mac}}-{{payload.53.mac}}-{{payload.54.mac}}-{{payload.55.mac}}-{{payload.56.mac}}-{{payload.57.mac}}-{{payload.58.mac}}-{{payload.59.mac}}\n","output":"str","x":480,"y":340,"wires":[["acc50d842aba3730"]]},{"id":"acc50d842aba3730","type":"ui_text","z":"53edcbb0228e136a","group":"17968b47330c2d48","order":2,"width":"24","height":"8","name":"Last One Hour","label":"","format":"<font size=6><font color=yellow><pre>{{payload}}</pre>","layout":"row-left","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":650,"y":340,"wires":[]},{"id":"448533f26c4e085a","type":"template","z":"53edcbb0228e136a","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<font color=cyan>{{payload.0.d}} to {{payload.14.d}} <font color=red> {{payload.0.mac}}-{{payload.1.mac}}-{{payload.2.mac}}-<font color=yellow>{{payload.3.mac}}-{{payload.4.mac}}-{{payload.5.mac}}-<font color=red>{{payload.6.mac}}-{{payload.7.mac}}-{{payload.8.mac}}-{{payload.9.mac}}-<font color=yellow>{{payload.10.mac}}-{{payload.11.mac}}-{{payload.12.mac}}-{{payload.13.mac}}-{{payload.14.mac}}\n<font color=cyan>{{payload.15.d}} to {{payload.29.d}} <font color=yellow> {{payload.15.mac}}-{{payload.16.mac}}-{{payload.17.mac}}-{{payload.18.mac}}-{{payload.19.mac}}-{{payload.20.mac}}-{{payload.21.mac}}-{{payload.22.mac}}-{{payload.23.mac}}-{{payload.24.mac}}-{{payload.25.mac}}-{{payload.26.mac}}-{{payload.27.mac}}-{{payload.28.mac}}-{{payload.29.mac}}\n<font color=cyan>{{payload.30.d}} to {{payload.44.d}} <font color=yellow> {{payload.30.mac}}-{{payload.31.mac}}-{{payload.32.mac}}-{{payload.33.mac}}-{{payload.34.mac}}-{{payload.35.mac}}-{{payload.36.mac}}-{{payload.37.mac}}-{{payload.38.mac}}-{{payload.39.mac}}-{{payload.40.mac}}-{{payload.41.mac}}-{{payload.42.mac}}-{{payload.43.mac}}-{{payload.44.mac}}\n<font color=cyan>{{payload.45.d}} to {{payload.59.d}} <font color=yellow> {{payload.45.mac}}-{{payload.46.mac}}-{{payload.47.mac}}-{{payload.48.mac}}-<font color=red>{{payload.49.mac}}-<font color=yellow>{{payload.50.mac}}-{{payload.51.mac}}-{{payload.52.mac}}-{{payload.53.mac}}-{{payload.54.mac}}-{{payload.55.mac}}-{{payload.56.mac}}-{{payload.57.mac}}-<font color=red>{{payload.58.mac}}-<font color=yellow>{{payload.59.mac}}\n","output":"str","x":470,"y":400,"wires":[["b3533c2f76fef997"]]},{"id":"b3533c2f76fef997","type":"ui_text","z":"53edcbb0228e136a","group":"17968b47330c2d48","order":2,"width":"24","height":"8","name":"Last One Hour-Formatted","label":"","format":"<font size=6><font color=yellow><pre>{{payload}}</pre>","layout":"row-left","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":670,"y":400,"wires":[]},{"id":"17968b47330c2d48","type":"ui_group","name":"HEADER","tab":"6582da0ead11dd5a","order":2,"disp":false,"width":"24","collapse":false,"className":""},{"id":"6582da0ead11dd5a","type":"ui_tab","name":"MACH","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

how to convert this....

image
image1106Ă—195 19.9 KB

to this...

image
image1118Ă—196 20.4 KB

2

I had to use different colours because yours don't work with my light theme dashboard...

image
image747Ă—51 4.18 KB

There may well be a more elegant way to do it.

image
image950Ă—111 10.8 KB

[{"id":"78ce4683b6dd7be8","type":"inject","z":"b29522f571f41f93","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"d\":\"17:06\",\"mac\":\"000\"},{\"d\":\"17:05\",\"mac\":\"000\"},{\"d\":\"17:04\",\"mac\":\"000\"},{\"d\":\"17:03\",\"mac\":\"039\"},{\"d\":\"17:02\",\"mac\":\"245\"},{\"d\":\"17:01\",\"mac\":\"154\"},{\"d\":\"17:00\",\"mac\":\"000\"},{\"d\":\"16:59\",\"mac\":\"000\"},{\"d\":\"16:58\",\"mac\":\"000\"},{\"d\":\"16:57\",\"mac\":\"000\"},{\"d\":\"16:56\",\"mac\":\"081\"},{\"d\":\"16:55\",\"mac\":\"266\"},{\"d\":\"16:54\",\"mac\":\"317\"},{\"d\":\"16:53\",\"mac\":\"319\"},{\"d\":\"16:52\",\"mac\":\"318\"},{\"d\":\"16:51\",\"mac\":\"319\"},{\"d\":\"16:50\",\"mac\":\"320\"},{\"d\":\"16:49\",\"mac\":\"047\"},{\"d\":\"16:48\",\"mac\":\"242\"},{\"d\":\"16:47\",\"mac\":\"317\"},{\"d\":\"16:46\",\"mac\":\"318\"},{\"d\":\"16:45\",\"mac\":\"320\"},{\"d\":\"16:44\",\"mac\":\"318\"},{\"d\":\"16:43\",\"mac\":\"104\"},{\"d\":\"16:42\",\"mac\":\"266\"},{\"d\":\"16:41\",\"mac\":\"316\"},{\"d\":\"16:40\",\"mac\":\"319\"},{\"d\":\"16:39\",\"mac\":\"319\"},{\"d\":\"16:38\",\"mac\":\"318\"},{\"d\":\"16:37\",\"mac\":\"228\"},{\"d\":\"16:36\",\"mac\":\"133\"},{\"d\":\"16:35\",\"mac\":\"317\"},{\"d\":\"16:34\",\"mac\":\"317\"},{\"d\":\"16:33\",\"mac\":\"316\"},{\"d\":\"16:32\",\"mac\":\"318\"},{\"d\":\"16:31\",\"mac\":\"318\"},{\"d\":\"16:30\",\"mac\":\"317\"},{\"d\":\"16:29\",\"mac\":\"080\"},{\"d\":\"16:28\",\"mac\":\"172\"},{\"d\":\"16:27\",\"mac\":\"296\"},{\"d\":\"16:26\",\"mac\":\"317\"},{\"d\":\"16:25\",\"mac\":\"232\"},{\"d\":\"16:24\",\"mac\":\"318\"},{\"d\":\"16:23\",\"mac\":\"317\"},{\"d\":\"16:22\",\"mac\":\"314\"},{\"d\":\"16:21\",\"mac\":\"317\"},{\"d\":\"16:20\",\"mac\":\"319\"},{\"d\":\"16:19\",\"mac\":\"072\"},{\"d\":\"16:18\",\"mac\":\"077\"},{\"d\":\"16:17\",\"mac\":\"000\"},{\"d\":\"16:16\",\"mac\":\"092\"},{\"d\":\"16:15\",\"mac\":\"280\"},{\"d\":\"16:14\",\"mac\":\"196\"},{\"d\":\"16:13\",\"mac\":\"316\"},{\"d\":\"16:12\",\"mac\":\"318\"},{\"d\":\"16:11\",\"mac\":\"316\"},{\"d\":\"16:10\",\"mac\":\"315\"},{\"d\":\"16:09\",\"mac\":\"153\"},{\"d\":\"16:08\",\"mac\":\"000\"},{\"d\":\"16:07\",\"mac\":\"023\"}]","payloadType":"json","x":110,"y":100,"wires":[["6a93e6b08b6276fe"]]},{"id":"acc50d842aba3730","type":"ui_text","z":"b29522f571f41f93","group":"17968b47330c2d48","order":2,"width":"24","height":"8","name":"Last One Hour","label":"","format":"<pre>{{payload}}</pre>","layout":"row-left","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":800,"y":100,"wires":[]},{"id":"8b6db7aec92da220","type":"template","z":"b29522f571f41f93","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{{payload.0.d}} to {{payload.14.d}} {{{payload.0.mac}}}-{{{payload.1.mac}}}-{{{payload.2.mac}}}-{{{payload.3.mac}}}-{{{payload.4.mac}}}-{{{payload.5.mac}}}-{{{payload.6.mac}}}-{{{payload.7.mac}}}-{{{payload.8.mac}}}-{{{payload.9.mac}}}-{{{payload.10.mac}}}-{{{payload.11.mac}}}-{{{payload.12.mac}}}-{{{payload.13.mac}}}-{{{payload.14.mac}}}\n","output":"str","x":640,"y":100,"wires":[["acc50d842aba3730"]]},{"id":"1493dedaef23ace5","type":"ui_template","z":"b29522f571f41f93","group":"2dee2e04.7cf00a","name":"CSS","order":13,"width":0,"height":0,"format":"<style>\n    .red {\n        color: red;\n    }\n    .blue {\n        color: blue;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":770,"y":60,"wires":[[]]},{"id":"6a93e6b08b6276fe","type":"split","z":"b29522f571f41f93","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":230,"y":100,"wires":[["c9be19e19f674ea2"]]},{"id":"bf7cd5865eb20134","type":"join","z":"b29522f571f41f93","name":"","mode":"auto","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":"false","timeout":"","count":"","reduceRight":false,"x":510,"y":100,"wires":[["8b6db7aec92da220"]]},{"id":"c9be19e19f674ea2","type":"function","z":"b29522f571f41f93","name":"Set colours","func":"if (msg.payload.mac == \"000\") {\n    msg.payload.mac = \"<span class = 'red'>\" + msg.payload.mac + \"</span>\"\n}\nelse {\n    msg.payload.mac = \"<span class = 'blue'>\" + msg.payload.mac + \"</span>\"\n}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":370,"y":100,"wires":[["bf7cd5865eb20134"]]},{"id":"17968b47330c2d48","type":"ui_group","name":"HEADER","tab":"6582da0ead11dd5a","order":2,"disp":false,"width":"24","collapse":false,"className":""},{"id":"2dee2e04.7cf00a","type":"ui_group","name":"Demo","tab":"721af69.d130208","order":1,"disp":false,"width":"25","collapse":false,"className":""},{"id":"6582da0ead11dd5a","type":"ui_tab","name":"MACH","icon":"dashboard","order":3,"disabled":false,"hidden":false},{"id":"721af69.d130208","type":"ui_tab","name":"Demo","icon":"dashboard"}]

Note triple braces in the template {{{payload.0.mac}}} rather than double.

3

Indeed!
Excellent solution. thanks for this. What does triple braces mean ?

4

image
image636Ă—450 19.5 KB