Improved Artless Gauge with Color Gradient based on value
I created this because I wanted a gauge that would change colour based on the injected value. Similar to the original gauge. Artless gauge is really beautiful. However it lacks the ability to change colour smoothly.
[{"id":"d945d8c0a7c27149","type":"ui_artlessgauge","z":"4bda2192f12beeb8","group":"4d664abebd518bf1","order":2,"width":"3","height":"3","name":"","icon":"fa-tint","label":"Gauge","unit":"C","layout":"radial","decimals":0,"differential":false,"minmax":false,"colorTrack":"#555555","style":"","colorFromTheme":true,"property":"payload","secondary":"secondary","inline":false,"animate":true,"sectors":[{"val":20,"col":"#00ff00","t":"min","dot":0},{"val":40,"col":"#00ff00","t":"max","dot":0}],"lineWidth":"7","bgcolorFromTheme":false,"diffCenter":"20","x":600,"y":400,"wires":[]},{"id":"78b7bc2b355f25ae","type":"ui_slider","z":"4bda2192f12beeb8","name":"","label":"slider","tooltip":"","group":"4d664abebd518bf1","order":3,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":"20","max":"40","step":1,"className":"","x":210,"y":400,"wires":[["40f129d1ac7670b6"]]},{"id":"40f129d1ac7670b6","type":"function","z":"4bda2192f12beeb8","name":"function 16","func":"function GetColorAtPos(color1, color2, position) {\n var color1Multiplier = position;\n var color2Multiplier = 1 - position;\n var finalRGB = [];\n for (var i = 0; i <= 2; i++) {\n finalRGB.push(parseInt((color1[i] * color1Multiplier) + (color2[i] * color2Multiplier)))\n }\n return rgbToHex(finalRGB[0], finalRGB[1], finalRGB[2],);\n}\nfunction ConvertToInt(colorHex) {\n if (colorHex.length != 6) { return 0; }\n var R = colorHex.substring(0, 2);\n var G = colorHex.substring(2, 4);\n var B = colorHex.substring(4, 6);\n\n return [parseInt(R, 16), parseInt(G, 16), parseInt(B, 16)];\n}\nfunction rgbToHex(r, g, b) {\n return \"#\" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);\n}\nvar color = GetColorAtPos(ConvertToInt(\"FF0000\"), ConvertToInt(\"0000FF\"), (msg.payload-20)/20);\n\nvar newSectors = [\n { t: \"min\", val: 20, col: color, dot: 0 }, \n { t: \"max\", val: 40, col: color, dot: 0 }];\nmsg.control = {label: \"Temperature\", icon: \"fa-thermometer\", sectors: newSectors };\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":400,"wires":[["d945d8c0a7c27149"]]},{"id":"4d664abebd518bf1","type":"ui_group","name":"CCTV","tab":"5885da048b463ccb","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"5885da048b463ccb","type":"ui_tab","name":"CCTV","icon":"videocam","order":2,"disabled":false,"hidden":false}]
