UI Text background color change

[traderjoe]

I'm trying to change the background color of the UI text. I'm trying to do something like this:

I like the way this looks because it adds a lot more color to an otherwise dull dashboard.

The original dashboard looks like this:

It's just a UI LED. So I was wondering if I can do something like how I had it in grafana (background change, and text change). I can get the text to change according to payload. But I can't get the color to change. I'm close though.

This is what I have.

[{"id":"88cc44ecd75d32d5","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"run","payloadType":"str","x":450,"y":2420,"wires":[["fb434105336b6e0f","75310dfb98b04d4a"]]},{"id":"f8a61b270b60dbe0","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"standby","payloadType":"str","x":460,"y":2480,"wires":[["fb434105336b6e0f","75310dfb98b04d4a"]]},{"id":"75310dfb98b04d4a","type":"ui_text","z":"368e5e5ea9463c23","group":"3339ea67ba4a96c0","order":1,"width":0,"height":0,"name":"","label":"status","format":"<font size = 4>{{msg.payload}}","layout":"row-spread","className":"","x":650,"y":2480,"wires":[]},{"id":"fb434105336b6e0f","type":"ui_template","z":"368e5e5ea9463c23","group":"3339ea67ba4a96c0","name":"group","order":1,"width":0,"height":0,"format":"<div id=\"{{'my_'+$id}}\" >template name?</div>\n\n<script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      // Do something when msg arrives\n      var c = msg.payload > \"run\" ? \"green\" : \"red\"\n      $(\"#my_\"+scope.$id).closest(\".nr-dashboard-cardcontainer\").css(\"background-color\",c);\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":650,"y":2440,"wires":[[]]},{"id":"a7cb29a6654c77fb","type":"ui_template","z":"368e5e5ea9463c23","group":"fc08b77d.62707","name":"CSS","order":2,"width":0,"height":0,"format":"<style id=\"dash-styles\">\nbody.nr-dashboard-theme md-content md-card {\n    background-color: #33333300;\n}\n.nr-dashboard-theme .nr-dashboard-template {\n    background-color: #33333300;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":650,"y":2400,"wires":[[]]},{"id":"3339ea67ba4a96c0","type":"ui_group","name":"Test Table","tab":"7353d1a6.00acc","order":2,"disp":true,"width":14,"collapse":false,"className":""},{"id":"fc08b77d.62707","type":"ui_group","name":"TEST","tab":"826dc63e.367f48","order":1,"disp":false,"width":"6","collapse":false},{"id":"7353d1a6.00acc","type":"ui_tab","name":"Sandbox","icon":"dashboard","order":9,"disabled":false,"hidden":false},{"id":"826dc63e.367f48","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

it's close.

But this section in the red box is so big. I can remove that template name but it's the fact that I need the template there that creates that big space.

I don't want to use the embedded grafana element because that status panel is supposed to be a live update. I tried a 1sec refresh time, and it crashes the element. 5s seeems to work fine, but I feel that lag will not be appealing. Thoughts on this? I'm trying to recreate that grafana panel in node red.

[jbudd]

You can use a custom class to style your chosen text widget. Here the middle widget has class "red".
For me the template node does not occupy any space if it's size is auto.

[{"id":"26de8ce4b7e73190","type":"ui_template","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","name":"","order":1,"width":"0","height":"0","format":"<style>\n.nr-dashboard-text.red{\n    background-color: red;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":280,"y":160,"wires":[[]]},{"id":"a7a739d8a99e44b2","type":"ui_text","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","order":2,"width":0,"height":0,"name":"","label":"text1","format":"{{msg.payload}}","layout":"row-spread","className":"","x":550,"y":100,"wires":[]},{"id":"346f35253f5834d6","type":"ui_text","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","order":4,"width":0,"height":0,"name":"","label":"text3","format":"{{msg.payload}}","layout":"row-spread","className":"","x":550,"y":180,"wires":[]},{"id":"85dc36c81c77bbd5","type":"ui_text","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","order":3,"width":0,"height":0,"name":"","label":"text2","format":"{{msg.payload}}","layout":"row-spread","className":"red","x":550,"y":140,"wires":[]},{"id":"e3a91bd2e6e5bf9a","type":"inject","z":"a531e868a7ed264e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":270,"y":120,"wires":[["85dc36c81c77bbd5","a7a739d8a99e44b2","346f35253f5834d6"]]},{"id":"a6e358b.672ffa8","type":"ui_group","name":"Demo","tab":"4e528085.a1bfa","order":1,"disp":true,"width":"20","collapse":false},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

[traderjoe]

Neat! So in your example, how do I get your middle widget to change colors? Let's say a payload comes in, if true then green, if false, then red.

[jbudd]

Send msg.className = "green"

And to get the default colouring, msg.className = "thereisnocssforthisclass"

[traderjoe]

Oh, I think I got it.
You mean something like this?

[{"id":"26de8ce4b7e73190","type":"ui_template","z":"368e5e5ea9463c23","group":"87daf6bf91ebce67","name":"","order":1,"width":"0","height":"0","format":"<style>\n.nr-dashboard-text.green{\n    background-color: green;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":280,"y":3380,"wires":[[]]},{"id":"a7a739d8a99e44b2","type":"ui_text","z":"368e5e5ea9463c23","group":"87daf6bf91ebce67","order":2,"width":0,"height":0,"name":"","label":"text1","format":"{{msg.payload}}","layout":"row-spread","className":"","x":550,"y":3300,"wires":[]},{"id":"346f35253f5834d6","type":"ui_text","z":"368e5e5ea9463c23","group":"87daf6bf91ebce67","order":4,"width":0,"height":0,"name":"","label":"text3","format":"{{msg.payload}}","layout":"row-spread","className":"","x":550,"y":3380,"wires":[]},{"id":"85dc36c81c77bbd5","type":"ui_text","z":"368e5e5ea9463c23","group":"87daf6bf91ebce67","order":3,"width":0,"height":0,"name":"","label":"text2","format":"{{msg.payload}}","layout":"row-spread","className":"green","x":550,"y":3340,"wires":[]},{"id":"e3a91bd2e6e5bf9a","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":270,"y":3320,"wires":[["85dc36c81c77bbd5","a7a739d8a99e44b2","346f35253f5834d6"]]},{"id":"114381b6615d91c7","type":"ui_template","z":"368e5e5ea9463c23","group":"87daf6bf91ebce67","name":"","order":1,"width":"0","height":"0","format":"<style>\n.nr-dashboard-text.red{\n    background-color: red;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":280,"y":3460,"wires":[[]]},{"id":"a3c81da03e8cee73","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":3380,"wires":[["26de8ce4b7e73190"]]},{"id":"66009def1c2a7f53","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":100,"y":3460,"wires":[["114381b6615d91c7"]]},{"id":"9a7b39dcd6868375","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"className","v":"green","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":350,"y":3560,"wires":[["346f35253f5834d6"]]},{"id":"b0da0c37c817de97","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"className","v":"red","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"str","x":350,"y":3620,"wires":[["346f35253f5834d6"]]},{"id":"87daf6bf91ebce67","type":"ui_group","name":"TEST BOX","tab":"7353d1a6.00acc","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"7353d1a6.00acc","type":"ui_tab","name":"Sandbox","icon":"dashboard","order":9,"disabled":false,"hidden":false}]

Thanks!

[jbudd]

Or like this

[{"id":"26de8ce4b7e73190","type":"ui_template","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","name":"Custom Styling","order":1,"width":"0","height":"0","format":"<style>\n.nr-dashboard-text.red{\n    background-color: red;\n}\n.nr-dashboard-text.orange{\n    background-color: orange;\n}\n.nr-dashboard-text.green{\n    background-color: green;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":860,"y":80,"wires":[[]]},{"id":"346f35253f5834d6","type":"ui_text","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","order":4,"width":0,"height":0,"name":"","label":"Reactor temperature","format":"{{msg.payload}} {{msg.status}}","layout":"row-spread","className":"","x":880,"y":120,"wires":[]},{"id":"f9f9ee8b0cdaaae7","type":"ui_slider","z":"a531e868a7ed264e","name":"","label":"slider","tooltip":"","group":"a6e358b.672ffa8","order":2,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":"200","max":"1000","step":"10","className":"","x":390,"y":120,"wires":[["316a5f7bc9fe81a5"]]},{"id":"316a5f7bc9fe81a5","type":"switch","z":"a531e868a7ed264e","name":"","property":"payload","propertyType":"msg","rules":[{"t":"lt","v":"400","vt":"str"},{"t":"btwn","v":"400","vt":"num","v2":"600","v2t":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":3,"x":510,"y":120,"wires":[["3918f204d3848a09"],["6e8724876c535941"],["a14e405b29f537e8"]]},{"id":"3918f204d3848a09","type":"change","z":"a531e868a7ed264e","name":"Green","rules":[{"t":"set","p":"className","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"status","pt":"msg","to":"Normal","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":80,"wires":[["346f35253f5834d6"]]},{"id":"6e8724876c535941","type":"change","z":"a531e868a7ed264e","name":"Orange","rules":[{"t":"set","p":"className","pt":"msg","to":"orange","tot":"str"},{"t":"set","p":"status","pt":"msg","to":"Warning","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":120,"wires":[["346f35253f5834d6"]]},{"id":"a14e405b29f537e8","type":"change","z":"a531e868a7ed264e","name":"Red","rules":[{"t":"set","p":"className","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"status","pt":"msg","to":"Meltdown!","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":160,"wires":[["346f35253f5834d6"]]},{"id":"a818b7f630689b87","type":"inject","z":"a531e868a7ed264e","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"200","payloadType":"num","x":270,"y":120,"wires":[["f9f9ee8b0cdaaae7"]]},{"id":"a6e358b.672ffa8","type":"ui_group","name":"Demo","tab":"4e528085.a1bfa","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]