Hello, I would like to visualize my heating buffer.
3 temperature sensors top middle and bottom.
Now I would like to dynamize the contents of the heating buffer in color using the sensors.
Does anyone have an idea or examples?
thanks greetings
I don't know what a heating buffer is nor indeed what dynamizing it's contents means (maybe transatlantic syntax)?
So...
Do you want a dashboard representation of a hot water tank, with some way to show the temperature at three levels in the tank?
How accurate do you want the representation of the tank? Would a simple rectangle suffice?
For the temperature display, do you want numbers, blue to red leds, a gauge for each sensor?
yes, hot water Tank also possible.
Since there is simply not enough content in this direction in German and I am not an expert in English, I use a translator.
A rectangle would be enough. But I would like to color the content of the rectangle from blue to red. I I have provided me with a color code from 20-90*C. I don't know how I can divide the tank and give it a nice transition of colors.
It is for sure interesting enough CSS challenge so I'll take it. For next couple of days I maybe don't have time to deal with it but then let's see ..
Can you show us an example of the temperature readings or the "color codes"?
if (msg.payload >=80){
msg.colour ='#600000';}
else if (msg.payload >= 70) {
msg.colour = '#8b1600';}
else if (msg.payload >= 65) {
msg.colour = '#932700';}
else if (msg.payload >= 60) {
msg.colour = '#983400';}
else if (msg.payload >= 55) {
msg.colour = '#9f4300';}
else if (msg.payload >= 50) {
msg.colour = '#a75700';}
else if (msg.payload >= 45) {
msg.colour = '#b16d00';}
else if (msg.payload >= 40) {
msg.colour = '#b88000';}
else if (msg.payload >= 35) {
msg.colour = '#a58414';}
else if (msg.payload >= 30) {
msg.colour = '#5f614d';}
else if (msg.payload >= 20) {
msg.colour = '#103b8c';}
else if (msg.payload < 20) {
msg.colour = '#000080';}
return msg;
1 Like
Here is a fairly simple demonstration using your colours and a CSS gradient to blend between them. Import the flow then you can adjust the three temperature readings with the sliders and see the results on your own dashboard.
What do you think about the colours?
[{"id":"c31640d81bf733c7","type":"tab","label":"Boiler Demo","disabled":false,"info":"","env":[]},{"id":"d25954b36544f696","type":"ui_template","z":"c31640d81bf733c7","group":"be8cd6b09a8d7d5d","name":"CSS","order":14,"width":0,"height":0,"format":"<style>\n .boiler {\n height: 200px;\n width: 120px;\n border: 4px solid black;\n background: linear-gradient(0deg, var(--bottom) 0% 10%, var(--middle) 55% 65% , var(--top) 90% 100%);\n }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":770,"y":120,"wires":[[]]},{"id":"f3c43fd0cfc8b280","type":"ui_template","z":"c31640d81bf733c7","group":"2a81558c7ec1f470","name":"","order":7,"width":3,"height":"6","format":"<div class=\"boiler\" style=\"--bottom: {{msg.bottom}}; --middle: {{msg.middle}}; --top: {{msg.top}};\">\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":780,"y":160,"wires":[[]]},{"id":"0d04e96dc9578de1","type":"function","z":"c31640d81bf733c7","name":"Convert temp to colour","func":"if (msg.payload >= 80) {\n msg.colour = '#600000';\n}\nelse if (msg.payload >= 70) {\n msg.colour = '#8b1600';\n}\nelse if (msg.payload >= 65) {\n msg.colour = '#932700';\n}\nelse if (msg.payload >= 60) {\n msg.colour = '#983400';\n}\nelse if (msg.payload >= 55) {\n msg.colour = '#9f4300';\n}\nelse if (msg.payload >= 50) {\n msg.colour = '#a75700';\n}\nelse if (msg.payload >= 45) {\n msg.colour = '#b16d00';\n}\nelse if (msg.payload >= 40) {\n msg.colour = '#b88000';\n}\nelse if (msg.payload >= 35) {\n msg.colour = '#a58414';\n}\nelse if (msg.payload >= 30) {\n msg.colour = '#5f614d';\n}\nelse if (msg.payload >= 20) {\n msg.colour = '#103b8c';\n}\nelse if (msg.payload < 20) {\n msg.colour = '#000080';\n}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":200,"y":40,"wires":[["5cff6b93cae4a69d"]]},{"id":"3831f2b421e734d8","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Top Sensor","tooltip":"","group":"2a81558c7ec1f470","order":2,"width":0,"height":0,"passthru":true,"outs":"end","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":90,"y":120,"wires":[["f3da952e5ed1c591"]]},{"id":"6529859cd44d0fce","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Middle Sensor","tooltip":"","group":"2a81558c7ec1f470","order":3,"width":0,"height":0,"passthru":true,"outs":"end","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":100,"y":160,"wires":[["cf2ee47352f01a60"]]},{"id":"1c097ca07f7c0d6f","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Bottom Sensor","tooltip":"","group":"2a81558c7ec1f470","order":4,"width":0,"height":0,"passthru":true,"outs":"end","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":100,"y":200,"wires":[["a388b5497055a426"]]},{"id":"d648d364970f0816","type":"link in","z":"c31640d81bf733c7","name":"link in 2","links":[],"x":55,"y":40,"wires":[["0d04e96dc9578de1"]]},{"id":"5cff6b93cae4a69d","type":"link out","z":"c31640d81bf733c7","name":"link out 2","mode":"return","links":[],"x":355,"y":40,"wires":[]},{"id":"f3da952e5ed1c591","type":"link call","z":"c31640d81bf733c7","name":"","links":["d648d364970f0816"],"linkType":"static","timeout":"30","x":260,"y":120,"wires":[["45adf6b29841bb7b"]]},{"id":"cf2ee47352f01a60","type":"link call","z":"c31640d81bf733c7","name":"","links":["d648d364970f0816"],"linkType":"static","timeout":"30","x":260,"y":160,"wires":[["ab18517f066b5022"]]},{"id":"a388b5497055a426","type":"link call","z":"c31640d81bf733c7","name":"","links":["d648d364970f0816"],"linkType":"static","timeout":"30","x":260,"y":200,"wires":[["d3186ffd51763c63"]]},{"id":"45adf6b29841bb7b","type":"change","z":"c31640d81bf733c7","name":"","rules":[{"t":"set","p":"top","pt":"flow","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":120,"wires":[["30a0aba554bc7f6d"]]},{"id":"ab18517f066b5022","type":"change","z":"c31640d81bf733c7","name":"","rules":[{"t":"set","p":"middle","pt":"flow","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":160,"wires":[["30a0aba554bc7f6d"]]},{"id":"d3186ffd51763c63","type":"change","z":"c31640d81bf733c7","name":"","rules":[{"t":"set","p":"bottom","pt":"flow","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":200,"wires":[["30a0aba554bc7f6d"]]},{"id":"30a0aba554bc7f6d","type":"function","z":"c31640d81bf733c7","name":"function 52","func":"msg.top = flow.get(\"top\") ?? 0\nmsg.middle = flow.get(\"middle\") ?? 0\nmsg.bottom = flow.get(\"bottom\") ?? 0\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":610,"y":160,"wires":[["f3c43fd0cfc8b280"]]},{"id":"be8cd6b09a8d7d5d","type":"ui_group","name":"Labels","tab":"704020d306ae5506","order":1,"disp":false,"width":2,"collapse":false,"className":""},{"id":"2a81558c7ec1f470","type":"ui_group","name":"Boiler","tab":"1e5db0123cb5abe5","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"704020d306ae5506","type":"ui_tab","name":"ESP BME","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"1e5db0123cb5abe5","type":"ui_tab","name":"Boiler","icon":"dashboard","disabled":false,"hidden":false}]
2 Likes
Thank you,
But somehow I can't get any colors into the boiler.
I still have to take a closer look at it
but thank you very much
Well that's not good! Connect a debug node to the output of "function 52". Set it to display the entire message object. Move the sliders around a bit and share with us what the debug shows.
Worked for me to. Are you using node-red-dashboard 3.6.0
I did alter it after as seems to call 2 functions and multiple link calls, I thought 1 function should do. I also reduced the ui-templates.
finally i added some error messages and a high and low average temp warning as i was bored.
Each incoming sensor reading needs a topic top, middle and bottom.
[{"id":"3831f2b421e734d8","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Top Sensor","tooltip":"","group":"2a81558c7ec1f470","order":2,"width":0,"height":0,"passthru":false,"outs":"end","topic":"top","topicType":"str","min":0,"max":"100","step":1,"className":"","x":90,"y":140,"wires":[["30a0aba554bc7f6d"]]},{"id":"30a0aba554bc7f6d","type":"function","z":"c31640d81bf733c7","name":"function 52","func":"if(!isNaN(msg.payload)){\n if(msg.payload >= 80) {\n msg.colour = '#600000';\n }else if(msg.payload >= 70) {\n msg.colour = '#8b1600';\n }else if(msg.payload >= 65) {\n msg.colour = '#932700';\n }else if(msg.payload >= 60) {\n msg.colour = '#983400';\n }else if (msg.payload >= 55) {\n msg.colour = '#9f4300';\n }else if(msg.payload >= 50) {\n msg.colour = '#a75700';\n }else if(msg.payload >= 45) {\n msg.colour = '#b16d00';\n }else if(msg.payload >= 40) {\n msg.colour = '#b88000';\n }else if(msg.payload >= 35) {\n msg.colour = '#a58414';\n }else if(msg.payload >= 30) {\n msg.colour = '#5f614d';\n }else if(msg.payload >= 20) {\n msg.colour = '#103b8c';\n }else {\n msg.colour = '#000080';\n }\n}else{\n node.error(\"bad sensor reading\");\n msg.topic =\"\";\n}\nif([\"top\",\"middle\",\"bottom\"].includes(msg.topic)){\n flow.set(\"heat_store.\" + msg.topic, {colour: msg.colour, value: msg.payload})\n msg.warning = \"\";\n msg.top = flow.get(\"heat_store.top\") ?? {colour: '#000080', value: 5};\n msg.middle = flow.get(\"heat_store.middle\") ?? {colour: '#000080', value: 5}\n msg.bottom = flow.get(\"heat_store.bottom\") ?? {colour: '#000080', value: 5}\n msg.average = (msg.top.value + msg.middle.value + msg.bottom.value)/3\n if(msg.average > 95){\n msg.warning = \"heat store over temperature\";\n }else if(msg.average < 5){\n msg.warning = \"heat store in danger of freezing\";\n }\n return msg;\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":330,"y":180,"wires":[["f3c43fd0cfc8b280"]]},{"id":"6529859cd44d0fce","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Middle Sensor","tooltip":"","group":"2a81558c7ec1f470","order":3,"width":0,"height":0,"passthru":false,"outs":"end","topic":"middle","topicType":"str","min":0,"max":"100","step":1,"className":"","x":100,"y":180,"wires":[["30a0aba554bc7f6d"]]},{"id":"1c097ca07f7c0d6f","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Bottom Sensor","tooltip":"","group":"2a81558c7ec1f470","order":4,"width":0,"height":0,"passthru":false,"outs":"end","topic":"bottom","topicType":"str","min":0,"max":"100","step":1,"className":"","x":100,"y":220,"wires":[["30a0aba554bc7f6d"]]},{"id":"f3c43fd0cfc8b280","type":"ui_template","z":"c31640d81bf733c7","group":"2a81558c7ec1f470","name":"","order":7,"width":3,"height":"6","format":"<div class=\"boiler\" \n style=\"text-align: center;\n color:yellow;\n height: 200px;\n width: 120px;\n border: 4px solid black;\n background: linear-gradient(0deg, var(--bottom) 0% 10%, var(--middle) 55% 65% , var(--top) 90% 100%);\n --bottom: {{msg.bottom.colour}}; --middle: {{msg.middle.colour}}; --top: {{msg.top.colour}};\"\n>\n{{msg.warning}}\n</div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":500,"y":180,"wires":[["9fed361fb72a1a61"]]},{"id":"9fed361fb72a1a61","type":"debug","z":"c31640d81bf733c7","name":"debug 341","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":430,"y":120,"wires":[]},{"id":"2a81558c7ec1f470","type":"ui_group","name":"Boiler","tab":"1e5db0123cb5abe5","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"1e5db0123cb5abe5","type":"ui_tab","name":"Boiler","icon":"dashboard","disabled":false,"hidden":false}]
2 Likes
Much more compact, but I suspect less easy to understand (for me it is anyway - not invented here!)
If you are bored, can you tweek it to use hsv or hsl colours instead of hex codes?
A range node to convert slider value 0 to 240, 100 to 359
background: linear-gradient(hsl(var --top), 100%, 50%, etc
I can't get it to work.
Is this the right way to make msg properties accessible to CSS variables?
style="--bottom: {{msg.bottom}}; --middle: {{msg.middle}}; --top: {{msg.top}};"
By having needs to play with colors I have found great tool called chroma-js
And the gradients can be done with a bit less mud (gray dead zone) nowadays using different color spaces. Color Spaces for More Interesting Gradients | CSS-Tricks - CSS-Tricks
Here's that little what it takes to create gradient dolors.
Explore the flow to gain and grow the ideas.
[{"id":"d25954b36544f696","type":"ui_template","z":"c31640d81bf733c7","group":"be8cd6b09a8d7d5d","name":"CSS","order":14,"width":0,"height":0,"format":"<style>\n .boiler {\n height: 200px;\n width: 120px;\n border: 4px solid black;\n \n }\n .regular{\n background: linear-gradient(to top , var(--bottom) 5%, var(--middle) 45% 55%, var(--top) 95%);\n }\n .oklab{\n background: linear-gradient(to top in oklab, var(--bottom) 5%, var(--middle) 45% 55%, var(--top) 95%);\n }\n .wrap{\n display:flex;\n flex-direction: column;\n }\n .boilers{\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":770,"y":120,"wires":[[]]},{"id":"f3c43fd0cfc8b280","type":"ui_template","z":"c31640d81bf733c7","group":"2a81558c7ec1f470","name":"","order":7,"width":"6","height":"8","format":"<div class=\"wrap\">\n <p>Default gradient</p>\n <div class=\"boiler regular\" style=\"--bottom: {{msg.bottom}}; --middle: {{msg.middle}}; --top: {{msg.top}};\"></div>\n</div>\n<div class=\"wrap\">\n <p>OKLAB gradient</p>\n <div class=\"boiler oklab\" style=\"--bottom: {{msg.bottom}}; --middle: {{msg.middle}}; --top: {{msg.top}};\"></div>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"boilers","x":780,"y":160,"wires":[[]]},{"id":"0d04e96dc9578de1","type":"function","z":"c31640d81bf733c7","name":"Convert temp to colour","func":"msg.colour = context.get(\"colourFunction\")(msg.payload).css()\nreturn msg;","outputs":1,"noerr":0,"initialize":"const colors = ['blue', 'orange', 'red']\ncontext.set('colourFunction', chroma.scale(colors).mode('lab').domain([20, 50, 90]))","finalize":"","libs":[{"var":"chroma","module":"chroma-js"}],"x":200,"y":40,"wires":[["5cff6b93cae4a69d"]]},{"id":"3831f2b421e734d8","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Top Sensor","tooltip":"","group":"2a81558c7ec1f470","order":2,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":90,"y":120,"wires":[["f3da952e5ed1c591"]]},{"id":"6529859cd44d0fce","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Middle Sensor","tooltip":"","group":"2a81558c7ec1f470","order":3,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":100,"y":160,"wires":[["cf2ee47352f01a60"]]},{"id":"1c097ca07f7c0d6f","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Bottom Sensor","tooltip":"","group":"2a81558c7ec1f470","order":4,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":100,"y":200,"wires":[["a388b5497055a426"]]},{"id":"d648d364970f0816","type":"link in","z":"c31640d81bf733c7","name":"link in 2","links":[],"x":55,"y":40,"wires":[["0d04e96dc9578de1"]]},{"id":"5cff6b93cae4a69d","type":"link out","z":"c31640d81bf733c7","name":"link out 2","mode":"return","links":[],"x":355,"y":40,"wires":[]},{"id":"f3da952e5ed1c591","type":"link call","z":"c31640d81bf733c7","name":"","links":["d648d364970f0816"],"linkType":"static","timeout":"30","x":260,"y":120,"wires":[["45adf6b29841bb7b"]]},{"id":"cf2ee47352f01a60","type":"link call","z":"c31640d81bf733c7","name":"","links":["d648d364970f0816"],"linkType":"static","timeout":"30","x":260,"y":160,"wires":[["ab18517f066b5022"]]},{"id":"a388b5497055a426","type":"link call","z":"c31640d81bf733c7","name":"","links":["d648d364970f0816"],"linkType":"static","timeout":"30","x":260,"y":200,"wires":[["d3186ffd51763c63"]]},{"id":"45adf6b29841bb7b","type":"change","z":"c31640d81bf733c7","name":"","rules":[{"t":"set","p":"top","pt":"flow","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":120,"wires":[["30a0aba554bc7f6d"]]},{"id":"ab18517f066b5022","type":"change","z":"c31640d81bf733c7","name":"","rules":[{"t":"set","p":"middle","pt":"flow","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":160,"wires":[["30a0aba554bc7f6d"]]},{"id":"d3186ffd51763c63","type":"change","z":"c31640d81bf733c7","name":"","rules":[{"t":"set","p":"bottom","pt":"flow","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":200,"wires":[["30a0aba554bc7f6d"]]},{"id":"30a0aba554bc7f6d","type":"function","z":"c31640d81bf733c7","name":"function 52","func":"msg.top = flow.get(\"top\") ?? 0\nmsg.middle = flow.get(\"middle\") ?? 0\nmsg.bottom = flow.get(\"bottom\") ?? 0\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":610,"y":160,"wires":[["f3c43fd0cfc8b280"]]},{"id":"be8cd6b09a8d7d5d","type":"ui_group","name":"Labels","tab":"704020d306ae5506","order":1,"disp":false,"width":2,"collapse":false,"className":""},{"id":"2a81558c7ec1f470","type":"ui_group","name":"Boiler","tab":"1e5db0123cb5abe5","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"704020d306ae5506","type":"ui_tab","name":"ESP BME","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"1e5db0123cb5abe5","type":"ui_tab","name":"Boiler","icon":"dashboard","disabled":false,"hidden":false}]
Thanks for that enhancement @hotNipi 
OKLab is supposed to work in Firefox v111 onwards but I have v116 and it's not working for me.
It works in Chrome and Edge.
Sadly true.
That's a shame, and odd too. I saw this https://developer.mozilla.org/en-US/blog/css-color-module-level-4/ on mozilla.org and assumed these features were supported.
I have had success with this syntax
background: linear-gradient(to top , hsl(var(--bottom)) 15% , hsl(var(--middle)) 70%, hsl(var(--top)) );
--bottom: {{msg.bottom.value}}, 100%, 50%;
--middle: {{msg.middle.value}}, 100%, 50%;
--top: {{msg.top.value}}, 100%, 50%;
not attached a range node as of yet.
right image is hsl 0 to 100
with range 240 - 359
Here is the single function node no range node hack.
[edit] post correct flow
[{"id":"3831f2b421e734d8","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Top Sensor","tooltip":"","group":"2a81558c7ec1f470","order":2,"width":0,"height":0,"passthru":false,"outs":"end","topic":"top","topicType":"str","min":0,"max":"100","step":1,"className":"","x":90,"y":140,"wires":[["6bd06de5d815dfa8","30a0aba554bc7f6d"]]},{"id":"30a0aba554bc7f6d","type":"function","z":"c31640d81bf733c7","name":"function 52","func":"if(isNaN(msg.payload)){\n node.error(\"bad sensor reading\");\n msg.topic =\"\";\n}\nif([\"top\",\"middle\",\"bottom\"].includes(msg.topic)){\n let lookup = {\n bottom: 200,\n middle: 230,\n top: 259\n }\n let hsl_offset = lookup[msg.topic];\n flow.set(\"heat_store2.\" + msg.topic, {colour: msg.payload + hsl_offset, value: msg.payload})\n msg.warning = \"\";\n msg.top = flow.get(\"heat_store2.top\") ?? {colour: 240, value: 5};\n msg.middle = flow.get(\"heat_store2.middle\") ?? {colour: 240, value: 5}\n msg.bottom = flow.get(\"heat_store2.bottom\") ?? {colour: 240, value: 5}\n msg.average = (msg.top.value + msg.middle.value + msg.bottom.value)/3\n if(msg.average > 95){\n msg.warning = \"heat store over temperature\";\n }else if(msg.average < 5){\n msg.warning = \"heat store in danger of freezing\";\n }\n return msg;\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":330,"y":180,"wires":[["a7913e49fe94e06e"]]},{"id":"6529859cd44d0fce","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Middle Sensor","tooltip":"","group":"2a81558c7ec1f470","order":3,"width":0,"height":0,"passthru":false,"outs":"end","topic":"middle","topicType":"str","min":0,"max":"100","step":1,"className":"","x":100,"y":180,"wires":[["6bd06de5d815dfa8","30a0aba554bc7f6d"]]},{"id":"1c097ca07f7c0d6f","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Bottom Sensor","tooltip":"","group":"2a81558c7ec1f470","order":4,"width":0,"height":0,"passthru":false,"outs":"end","topic":"bottom","topicType":"str","min":0,"max":"100","step":1,"className":"","x":100,"y":220,"wires":[["6bd06de5d815dfa8","30a0aba554bc7f6d"]]},{"id":"a7913e49fe94e06e","type":"ui_template","z":"c31640d81bf733c7","group":"2a81558c7ec1f470","name":"","order":7,"width":3,"height":"6","format":"<div class=\"boiler2\" \n style=\"text-align: center;\n color:yellow;\n height: 200px;\n width: 120px;\n border: 4px solid black;\n background: linear-gradient(to top , hsl(var(--bottom)) 10% , hsl(var(--middle)) 55%, hsl(var(--top)) );\n --bottom: {{msg.bottom.colour}}, 100%, 50%; \n --middle: {{msg.middle.colour}}, 100%, 50%; \n --top: {{msg.top.colour}}, 100%, 50%;\"\n>\n{{msg.warning}}\n</div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":500,"y":180,"wires":[["9fed361fb72a1a61"]]},{"id":"9fed361fb72a1a61","type":"debug","z":"c31640d81bf733c7","name":"debug 341","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":430,"y":120,"wires":[]},{"id":"2a81558c7ec1f470","type":"ui_group","name":"Boiler","tab":"1e5db0123cb5abe5","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"1e5db0123cb5abe5","type":"ui_tab","name":"Boiler","icon":"dashboard","disabled":false,"hidden":false}]
@hotNipi not sure if it is any better on my chrome browser
1 Like
Well, better is of course subjective. Actually most about the colors is deeply subjecive. I just pointed out that option cos it may come useful for such implementations.
1 Like
I'm too stupid, I can't do it.
function 52 just doesn't output!!
I'm inclined to think there is some other reason than that @ninaaa!
Just so we can check the code you are working with, can you export your flow and post it here?
To export: CTRL C (or hamburger menu and "Export"), make sure that the "current flow" tab is selected then click "Copy to clipboard".
In the forum, click the </> button and CTRL V to paste your flow over the top of "type or paste code here"
