How to Change the color of the ui text node dynamically

Dashboard
1

Hi, I’ve been working on a home alarm panel using the dashboard ui nodes and mqtt. I’ve been able to change the dynamically the text and background colors of the buttons and used the form to input the passcode.
However, the one item I haven’t figured out is how to change the color of the text node which shows the current status of the alarm.
What I would like to do is if the status is “disarmed” to turn that text green, if it is the status is “pending” to turn it yellow and if it is “armed_home” or “armed_away” turn red. what is the simplest approach to getting this done?

Thank in advance!

3 Likes
2

Hello,

Have a look on below flow

[{"id":"cae40fed.0cb0b","type":"tab","label":"Font Color","disabled":false,"info":""},{"id":"b80cb9f6.df2e38","type":"ui_text","z":"cae40fed.0cb0b","group":"8924e22f.e375e","order":0,"width":"0","height":"0","name":"","label":"","format":"<font color= {{msg.color}} > {{msg.payload}} </font>","layout":"row-left","x":755.1000595092773,"y":172.60000705718994,"wires":[]},{"id":"84993741.45c658","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"disarmed","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":383.00000762939453,"y":107.00000190734863,"wires":[["fdb2fcd1.0e76"]]},{"id":"fdb2fcd1.0e76","type":"function","z":"cae40fed.0cb0b","name":"Color Mapping","func":"switch (msg.payload) {\n\ncase \"disarmed\" : \n    msg.color = \"lime\";\n    break;\n    \ncase \"pending\" : \n    msg.color = \"yellow\";\n    break;\n    \ndefault : \n    msg.color = \"red\";\n    break;\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":586.1000556945801,"y":172.60000228881836,"wires":[["b80cb9f6.df2e38"]]},{"id":"bb25a8a.3bfb258","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"pending","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":390.00000762939453,"y":154.00000190734863,"wires":[["fdb2fcd1.0e76"]]},{"id":"d8b7282e.5330f8","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"armed_home","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":373.00000762939453,"y":201.00000286102295,"wires":[["fdb2fcd1.0e76"]]},{"id":"71bdd81d.6f9f18","type":"inject","z":"cae40fed.0cb0b","name":"","topic":"","payload":"armed_away","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":371.00000762939453,"y":247.00000381469727,"wires":[["fdb2fcd1.0e76"]]},{"id":"8924e22f.e375e","type":"ui_group","z":"","name":"Teste","tab":"d4e79c02.16854","disp":false,"width":"6"},{"id":"d4e79c02.16854","type":"ui_tab","z":"","name":"LAB","icon":"dashboard"}]
6 Likes
3

@Andrei - two questions

  1. I thought the tag is not supported in HTML5, so might your solution not work in some browsers?
  2. how would you change the background color of the ut-text node? (the yellow on white is very unreadable.
4

Hi Zenofmud,

Indeed the <font> tag is not supported in HTML5 but most likely it will still work for some time in new browsers (until a point where it may break). However the original question was about the simplest approach to getting this done.

An alternative solution is to go with CSS using a dashboard template node and CSS variables. I have tested before . It works nice but not as concise as a single line.

In regards to the second question (background) perhaps he can chose to use another color for the font instead of yellow or use the dark theme background from node-red or move to CSS solution.

5

@Andrei, that worked perfectly. While testing I was using a function node with

msg.color = (msg.payload =='armed_home')?'green':'red';
return msg;

but could not get it to work, will be looking into CSS next as I continue learning this platform. Thank you!

@zenofmud - I am using a dark background with those color choices. The oddest looking item right now are the submit and cancel button, they are in English while everything else is in Spanish (besides the alarm status)
snip_20180616084255

6

What nodes are you using for them?

7

I'm using the ui form node.

8

@zenofmud - now you have me thinking, is it possible to change the text on the default buttons on the ui form?

10

@Unpuertomex - yes there is a way but currently you will have to edit one of the modules. You will have to go to the .node-red/node_modules/node-red-dashboard/dist/js and edit the file ‘app.min.js’

Search for <md-button type="submit" class="md-raised nr-dashboard-form-button">submit</md-button>
and you can change the >submit< to >whatever<

The ‘cancel’ is just below it.

This should be something that is in translation file and maybe @dceejay will pipe in here to answer the question “Should this have an issue raised?”

11

Feel free to raise an issue. I’m travelling for a bit so if anyone wants to offer up a fix on the meantime…

12

@dceejay can changing of text color / background color for ui_text be included in the Dashboard by default? Just like for ui_button. It will be very convenient.

13

@dceejay - I just raised an issue about changing the text for Submit and Cancel and would be willing to try to fix it, but it is hard coded in app.min.js and I have no idea where that comes from.

14

I decided to remove the form and created my own keypad, it gave me more control and help me learn a few new things. Thanks for your help, I'm sure I'll be back for more.

15

Thanks, fix will be in 2.9.5

16

Wow, that was quick. Thanks for the ticket @zenofmud.

17

HI,

I want to change the header color and i want add the condition for due date , if pm date is over due means it should shows in red color otherwise it should be in green...
kindly find the flow.please help me .

[{"id":"a1589425.dc0498","type":"ui_template","z":"e7aff11a.08007","group":"3330cf02.56b76","name":"","order":1,"width":"20","height":"13","format":"\n th {\n text-decoration: underline;\n }\n .numeric {\n text-align: center;\n padding-right: 15px;\n }\n\n\n<table cellpadding="2" border="1" id="table1" class="table-hover" style="width: 100%;">\n <tr ng-repeat="obj in msg.payload">\n \n <td class="numeric" bgcolor=radium>{{obj.A }}\n <td class="numeric" bgcolor=grey>{{obj.B }}\n <td class="numeric" bgcolor=grey>{{obj.C }}\n <td class="numeric" bgcolor=grey>{{obj.D }}\n <td class="numeric" bgcolor=grey>{{obj.E }}\n \n \n\n \n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":740,"y":100,"wires":[]},{"id":"2c1df0cb.1421c","type":"template","z":"e7aff11a.08007","name":"ICT MAINTAINANCE REPORT","field":"payload","fieldType":"msg","format":"json","syntax":"mustache","template":"[\n {"A":"MONTH" ,"B":"TESTER ID" , "C":"TESTER" ,"D":"PM DONE DATE" ,"E":"PM DUE DATE"}, \n {"A":"FEBRUARY" ,"B":"ICT07" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT16" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT59" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT64" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT69" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT80" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT85" , "C":"Spectrum" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT98" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT101" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT109" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT110" , "C":"Z18" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT117" , "C":"Spectrum" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT118" , "C":"Spectrum" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT142" , "C":"Spectrum" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT147" , "C":"Spectrum" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT148" , "C":"Teststation" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT175" , "C":"Teststation" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT176" , "C":"Teststation" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT199" , "C":"Teststation" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT210" , "C":"Teststation" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT171" , "C":"Agilent i307x Series 5" ,"D":"25/2/2020" ,"E":"25/3/2020"},\n{"A":"FEBRUARY" ,"B":"ICT180" , "C":"Agilent i307x Series 5" ,"D":"25/2/2020" ,"E":"25/3/2020"}\n \n \n\n \n]\n\n\n","x":370,"y":106,"wires":[["f4d81c18.b5"]]},{"id":"d4917cb3.d42c6","type":"inject","z":"e7aff11a.08007","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":"","x":150,"y":100,"wires":[["2c1df0cb.1421c"]]},{"id":"f4d81c18.b5","type":"json","z":"e7aff11a.08007","name":"","property":"payload","action":"","pretty":false,"x":570,"y":100,"wires":[["a1589425.dc0498"]]},{"id":"3330cf02.56b76","type":"ui_group","z":"","name":"ICT PM REPORT","tab":"bcd2e4aa.0cd768","order":1,"disp":true,"width":"20","collapse":false},{"id":"bcd2e4aa.0cd768","type":"ui_tab","z":"","name":"ICT PM TRAACKING","icon":"dashboard","order":13}]

18

Your flow will not import. Please read this thread and then edit your post to fix the flow.