Temperature into a color

[madmax]

Hello!
Is it possible to convert a temperature into a color?

That kind of thing.

I hope someone can help me.

[Steve-Mcl]

Create an array of colours, scale your temperature from 0 to colours.length, then pick the item from the array based on your scaled temperature.

[madmax]

[quote="Steve-Mcl, post:2, topic:81810, full:true"]
Create an array of colours, scale your temperature from 0 to colours.length, then pick the item from the array based on your scaled temperature.
[/quote]Hello!

Thanks for the answer.

OK. I thought there was a node there.

[jbudd]

There is an example at https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256 showing one way to change the background of a dashboard template according to the input payload.

It's not very straightforward, surely it could be done more easily!

[E1cid]

Sure , you do not specify what for though.
Here is a simple example of changing background of a ui-widget using hsl colour using the class and getElementByClassName.
You can alter the colurs by adjusting the range from 0 to 360.

[{"id":"3831f2b421e734d8","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"input","tooltip":"","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","topicType":"str","min":"-10","max":"40","step":1,"className":"colour_target","x":70,"y":140,"wires":[["ebaf88cb55883a99"]]},{"id":"ebaf88cb55883a99","type":"range","z":"c31640d81bf733c7","minin":"-4","maxin":"40","minout":"270","maxout":"0","action":"scale","round":true,"property":"payload","name":"","x":190,"y":140,"wires":[["a7913e49fe94e06e"]]},{"id":"a7913e49fe94e06e","type":"ui_template","z":"c31640d81bf733c7","group":"8b5cde76.edd58","name":"","order":7,"width":3,"height":"6","format":" <script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      var elements = document.getElementsByClassName(\"colour_target\");\n      \n        elements[0].style[\"background\"] = \"hsl(\" + msg.payload + \", 100%, 50%)\";\n      \n    }\n  });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":320,"y":140,"wires":[["7cc94c056a9f41aa"]]},{"id":"7cc94c056a9f41aa","type":"ui_text","z":"c31640d81bf733c7","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":530,"y":140,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

Colors HSL and HSLA

HTML DOM Element getElementsByClassName() Method

[edit] updated flow that handles multiple class elements with same name.

[{"id":"3831f2b421e734d8","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"input","tooltip":"","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","topicType":"str","min":"-10","max":"40","step":1,"className":"colour_target","x":70,"y":140,"wires":[["ebaf88cb55883a99"]]},{"id":"ebaf88cb55883a99","type":"range","z":"c31640d81bf733c7","minin":"-4","maxin":"40","minout":"270","maxout":"0","action":"scale","round":true,"property":"payload","name":"","x":190,"y":140,"wires":[["a7913e49fe94e06e"]]},{"id":"a7913e49fe94e06e","type":"ui_template","z":"c31640d81bf733c7","group":"8b5cde76.edd58","name":"","order":7,"width":3,"height":"6","format":" <script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      var elements = document.getElementsByClassName(\"colour_target\");\n      for(let obj of elements){\n        obj.style[\"background\"] = \"hsl(\" + msg.payload + \", 100%, 50%)\";\n      }\n    }\n  });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":320,"y":140,"wires":[["7cc94c056a9f41aa"]]},{"id":"7cc94c056a9f41aa","type":"ui_text","z":"c31640d81bf733c7","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"colour_target","style":false,"font":"","fontSize":16,"color":"#000000","x":530,"y":140,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]