This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Changing colour of dashboard text fields based on value
#11
Code:
[{"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.
Reply
#12
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!
Reply
#13
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.
Reply
#14
Nice!

I just installed node-red and one of my first google hunt was for ways to change theme from a switch, ie from day to night mode. is that possible?
Reply
#15
(2017-08-18, 08:27 AM)joabakk Wrote: Nice!

I just installed node-red and one of my first google hunt was for ways to change theme from a switch, ie from day to night mode. is that possible?

Afaik there isn't a simple way to do this but certainly there is a solution using the template-node.

I've re-used my last example and added some javascript in the template-node and created an extra button.
If you hit the button the headline "Default" in the dashboard should turn to green and if you hit it again it turns back to the color of the certain theme.
It is done by adding custom css by javascript to the DOM and disabling or enabling it. You can build a whole custom style and write it to the css variable in my code and build therefore your own dark or light theme.
Code:
[{"id":"cb5ac30.9af85c","type":"inject","z":"bd3199c3.5714e8","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"1","crontab":"","once":true,"x":89,"y":163,"wires":[["40aba4b2.11e704"]]},{"id":"40aba4b2.11e704","type":"function","z":"bd3199c3.5714e8","name":"random","func":"msg.rand = Math.floor(Math.random() * 9);\nreturn msg;","outputs":1,"noerr":0,"x":280,"y":161,"wires":[["9bdb1d37.39052"]]},{"id":"9bdb1d37.39052","type":"ui_template","z":"bd3199c3.5714e8","group":"f599153a.42a9f8","name":"","order":0,"width":0,"height":0,"format":"<div id=\"testId\">\n</div>\n<script>\n    var css = 'body.nr-dashboard-theme md-content {color: #00ff00;}';\n    var head = document.head;\n    var style = document.createElement('style');\n    style.type = 'text/css';\n    style.id = 'my-custom-style';\n    if(style.styleSheet){\n        style.styleSheet.cssText = css;\n    } else {\n        style.appendChild(document.createTextNode(css));\n    }\n    head.appendChild(style);\n    style.disabled = true;\n    (function(scope) {\n        scope.$watch('msg.rand', function(data) {\n            var element = document.getElementById(\"testId\");\n            element.textContent = data;\n            if(data > 3 && data < 7){\n                document.getElementById('testId').style.color = \"yellow\";\n            }\n            if(data < 4){\n                document.getElementById('testId').style.color = \"green\";\n            }\n            if(data > 6){\n                document.getElementById('testId').style.color = \"red\";\n            }\n        });\n        scope.$watch('msg.payload', function(data) {\n            if(data == 'switchStyle'){\n                document.getElementById('my-custom-style').disabled = !document.getElementById('my-custom-style').disabled;\n            }\n        });\n    })(scope);\n    \n    \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":491,"y":165,"wires":[[]]},{"id":"89f882bc.8a327","type":"ui_button","z":"bd3199c3.5714e8","name":"","group":"f599153a.42a9f8","order":0,"width":0,"height":0,"passthru":false,"label":"button","color":"","bgcolor":"","icon":"","payload":"switchStyle","payloadType":"str","topic":"","x":324,"y":262,"wires":[["9bdb1d37.39052"]]},{"id":"f599153a.42a9f8","type":"ui_group","z":"","name":"Default","tab":"2a75465.6ca1e3a","disp":true,"width":"6"},{"id":"2a75465.6ca1e3a","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)