• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Changing colour of dashboard text fields based on value
#1
I have several reported parameters on a node red dashboard. Let's say engine temperature for example.
I am wondering if there is any method for changing the colour of the displayed text (or background colour).
In other words, let's say the reading is 80C .... I would like the text data to be shown in green. When it hits 90C I would like it to change to red and if it is 100C I would ideally like it to be either flashing or show a flashing red background with black text or some such thing. Basically I would like to be able to look at a number of data points and at a glance be able to see which parameters are out of the normal range.

This seems to be a fairly basic requirement and I am wondering if I am missing something .....

Thinking on this a bit more, is it possible to have a button / field / area right after the displayed value that changes colour?  This would also allow a quick glance to see if everything is fine or something needs attention.
  Reply
#2
(08-06-2017, 06:28 PM)JD1 Wrote: I have several reported parameters on a node red dashboard. Let's say engine temperature for example.
I am wondering if there is any method for changing the colour of the displayed text (or background colour).
In other words, let's say the reading is 80C .... I would like the text data to be shown in green. When it hits 90C I would like it to change to red and if it is 100C I would ideally like it to be either flashing or show a flashing red background with black text or some such thing. Basically I would like to be able to look at a number of data points and at a glance be able to see which parameters are out of the normal range.

This seems to be a fairly basic requirement and I am wondering if I am missing something .....

Thinking on this a bit more, is it possible to have a button / field / area right after the displayed value that changes colour?  This would also allow a quick glance to see if everything is fine or something needs attention.

This can be done with very basic javascript, css and html knowledege. I'm not aware of a ready-made solution.
  Reply
#3
Here is an example. This is quick and dirty but you will get the basic idea. I guess there is a better way using pure angularjs but I haven't used it yet.
In the flow every second a random number between 1 and 9 is created. Values <=3 are colored green, values >3 and <7 are yellow and values >=7 are red.
Code:
[{"id":"cb5ac30.9af85c","type":"inject","z":"bd3199c3.5714e8","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"1","crontab":"","once":true,"x":83,"y":162,"wires":[["40aba4b2.11e704"]]},{"id":"40aba4b2.11e704","type":"function","z":"bd3199c3.5714e8","name":"random","func":"msg.rand = 1+Math.floor(Math.random() * 9);\nreturn msg;","outputs":1,"noerr":0,"x":274,"y":160,"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\" ng-bind-html=\"msg.rand\">\n</div>\n<script>\n    (function(scope) {\n        scope.$watch('msg.rand', function(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);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":485,"y":164,"wires":[[]]},{"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
#4
Excellent! Thank you very much, I will give it a try tomorrow when I am back on the boat.
  Reply
#5
(08-07-2017, 07:02 PM)shark24 Wrote: Here is an example. This is quick and dirty but you will get the basic idea. I guess there is a better way using pure angularjs but I haven't used it yet.
In the flow every second a random number between 1 and 9 is created. Values <=3 are colored green, values >3 and <7 are yellow and values >=7 are red.

Thank you again for posting this but alas, it is several levels beyond my understanding. I was not even able to figure out if or where there would be any output.
I managed to kill my node red in the process somehow but once that is back up I will try again to understand what is going on. It seems simple and elegant but will require a lot more learning on my part.
  Reply
#6
I have been able to make things work enough to get coloured numbers .... cool !!!
I still don't understand what is happening but I am making progress Smile
Thanks Shark24!
  Reply
#7
I have been able to experiment a bit with this but am running into more problems which are probably general concept issues.
The template node has an input and an output. I can use the template node to put 'stuff' into the assigned group. This 'stuff' could be a coloured data value and presumably a description which would imitate a text node. Up until now I put the template node prior to a text node in the flow but if I understand things right the template node actually replaces the text node? If that is so, why is there an output to the template node - what is it used for ?
Last but not least, the text node has a 'value format' field that allows for angular and HTML expressions - is it possible to cram the entire HTML code given here as an example into that little field and have the value portion of the text node displayed in colour ?
  Reply
#8
(08-11-2017, 07:34 PM)JD1 Wrote: I have been able to experiment a bit with this but am running into more problems which are probably general concept issues.
The template node has an input and an output. I can use the template node to put 'stuff' into the assigned group. This 'stuff' could be a coloured data value and presumably a description which would imitate a text node. Up until now I put the template node prior to a text node in the flow but if I understand things right the template node actually replaces the text node? If that is so, why is there an output to the template node - what is it used for ?
Last but not least, the text node has a 'value format' field that allows for angular and HTML expressions - is it possible to cram the entire HTML code given here as an example into that little field and have the value portion of the text node displayed in colour ?

I have never used angularjs before. The whole dashboard is built in it and its not very pleasant to debug the javascript and html. Besides that imho the dashboard is poorly documented. All i know is javascript, css and html and that the template node lets you inject all of this into the dashboard. My 'solution' isn't easy to customize, without the basic knowledge of this stuff. I just wanted to give you an idea of how it can be done.
In my template node a html layer is created (<div></div>). It has  specific attributes like the id so I can easy find it with javascript. I've created a random number and stored it in msg.rand. Angular updates the content of the div every time a msg object is passed to the template node. The javscriptcode in the <script></script> block gets msg.rand from angularjs and checks its value. If there is a certain value the font-color of the div is set via css by javascript.

I hope this isn't too much confusing Smile

So like you said the template node replaces the text node. I don't know why there is an output on the template-node. It just passes the msg object through.
I do not know either if the colouring of certain values can be done with angular js inside the text-node.
  Reply
#9
A simple basic option might be to use a gauge, then you can define 3 ranges with different colours.

[Image: 5orYOBC.png]
  Reply
#10
Well I am mostly there .... the only thing I haven't yet figured out is how to insert a '&deg;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.
  Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)