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.
