Well I am mostly there .... the only thing I haven't yet figured out is how to insert a '°C' after the data.
This is what I have so far:
[{"id":"37f56309.71340c","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\" id = \"CabinTemp\" ng-bind-html = \"msg.payload\" >\n</span>\n</p>\n\n<script>\n\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 if(data >= 20 && data < 25){\n document.getElementById('CabinTemp').style.color = \"yellow\"; \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":905.566650390625,"y":553.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}]
PaddyB, thanks for the suggestion. Some elements in my display use a gauge but there are others where a gauge just takes up too much room.
This is what I have so far:
[{"id":"37f56309.71340c","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\" id = \"CabinTemp\" ng-bind-html = \"msg.payload\" >\n</span>\n</p>\n\n<script>\n\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 if(data >= 20 && data < 25){\n document.getElementById('CabinTemp').style.color = \"yellow\"; \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":905.566650390625,"y":553.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}]
PaddyB, thanks for the suggestion. Some elements in my display use a gauge but there are others where a gauge just takes up too much room.