• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Changing colour of dashboard text fields based on value
[{"id":"44878260.2a53ac","type":"ui_template","z":"bd3199c3.5714e8","group":"15cef6d6.1902e1","name":"Cabin Temperature template","order":5,"width":0,"height":0,"format":"<p style=\"text-align:left\">Cabin Temperature\n<span style = \"float:right\" id = \"CabinTemp\">\n</span>\n</p>\n\n<script>\n\n \n (function(scope) {\n scope.$watch('msg.payload', function(data) {\n     var element = document.getElementById('CabinTemp');\n     element.innerHTML = data + '&deg;C';\n if(data < 0){\n element.style.color = \"blue\";\n }\n if(data >= 0 && data < 20){\n element.style.color = \"green\";\n }\n if(data >= 20 && data < 25){\n element.style.color = \"yellow\"; \n }\n if(data >= 25 && data < 30){\n element.style.color = \"orange\";\n }\n if(data >= 30){\n element.style.color = \"red\";\n }\n element.style.fontWeight = \"bold\";\n element.style.fontSize = \"larger\";\n });\n })(scope);\n\n</script>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":515,"y":238,"wires":[[]]},{"id":"15cef6d6.1902e1","type":"ui_group","z":"","name":"Group 3","tab":"ae0d9f06.7e80e8","order":2,"disp":true,"width":"6"},{"id":"ae0d9f06.7e80e8","type":"ui_tab","z":"","name":"Pi","icon":"dashboard","order":1}]

I removed the ng-bind-html and added the data by javascripts innerHTML function.
Thanks Shark24! For some reason this (latest code) didn't work for me. Here is the final code should anybody else want to do this:

[{"id":"da1d892.075fef8","type":"ui_template","z":"2bb5124c.62bba6","group":"c8830f94.9e8968","name":"Cabin Temperature template","order":5,"width":0,"height":0,"format":"<p style=\"text-align:left\">Cabin Temperature\n<span style =\"float:right\">&shy; <b>&deg;C</b> </span>\n<span style = \"float:right\" id = \"CabinTemp\" ng-bind-html = \"msg.payload\" > \n</span>\n</p>\n\n<script>\n\n (function(scope) {\n scope.$watch('msg.payload', function(data) {\n if(data < 0){\n document.getElementById('CabinTemp').style.color = \"blue\";\n }\n if(data >= 0 && data < 20){\n document.getElementById('CabinTemp').style.color = \"green\";\n \n }\n if(data >= 20 && data < 25){\n document.getElementById('CabinTemp').style.color = \"yellow\"; \n // document.getElementById('CabinTemp').style.backgroundColor = \"red\";\n }\n if(data >= 25 && data < 30){\n document.getElementById('CabinTemp').style.color = \"orange\";\n }\n if(data >= 30){\n document.getElementById('CabinTemp').style.color = \"red\";\n }\n document.getElementById('CabinTemp').style.fontWeight = \"bold\";\n // document.getElementById('CabinTemp').style.fontSize = \"larger\";\n });\n })(scope);\n\n</script>\n","storeOutMessages":false,"fwdInMessages":false,"x":952.566650390625,"y":561.566650390625,"wires":[[]]},{"id":"c8830f94.9e8968","type":"ui_group","z":"","name":"Group 3","tab":"58e7af38.2bce4","order":2,"disp":true,"width":"6"},{"id":"58e7af38.2bce4","type":"ui_tab","z":"","name":"Pi","icon":"dashboard","order":1}]

As a side note, I had no experience with HTML/Java/whatever when I started this. Your original reply gave me enough to give it a go. Way too many hours spent bashing my head against the wall gave me a glimmer of how powerful this (template) node actually is. It boggles the mind!
Thank you very much for your help!
I'm glad I pushed you in the right direction. If you need help along your way learning html, css and javascript you can ask me anything and I'll try to help. You used float for the layout this is a little bit old fashioned. Take a look at flexbox it might be easier for you.

Forum Jump:

Users browsing this thread: 1 Guest(s)