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\">­ <b>°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!
[{"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\">­ <b>°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!