Hi all,
I do not really like the look (or appearance) of the dashboard color picker. I just wondered if it is possible to make use of a horizontal color slider (hue slider) as shown below.
Thus, I can easily choose the colour and change saturation and brightness with additional sliders. Is there a way to achieve this ?
Thanks and best regards
Is there really no way to implement this color slider... ?
Did you search the fourm?
e.g: How to create slider in dashboard template - #13 by bglnelissen
I already had found this thread. However, I thought: Damn, this is complicated stuff!
But I understood it's worth spending more effort on understanding the templeate node and html angular coding. Just to be sure that I am on the right way. All I need for my hue color slider can be achieved with the ui template node. Is that assumption right ?
It is certainly a direction. You could alternatively also achieve this kinda thing with Vue or jQuery or other Frameworks in the freedom uibuilder provides but then you have to do it all without the aid dashboard provides.
Let's just say you can achieve this using dashboard and template & you should learn a good deal on the way.
There are plenty here to help if you get stuck.
Dear Steve,
I have spend the last 2 days in performing research on what is possible with the template node, also checking ui builder etc. And what should I say, I am deeply impressed what can be achieved with CSS/angular/front-end-libraries and so on. In real life I do a lot of scientific programming. But I must be honest to myself, this is too much and complex for me. At least it requires too much effort for what I actually want to have (a simple hue slider). So I will stick to what the normal dashboard offers. Maybe one day this will be included as an option in the color picker. I am just writing this in order to thank you for your kind support.
Where did you find that slider you showed? Is it in a library already?
There is web full of examples , not hard to modify to use with ui_template.
But as the color picker usage is mainly targeted to light color adjustments, the color value alone is not enough.
In my world, the disco is music. And the best color for mood is what sun gives.
[{"id":"84256712.8baec8","type":"ui_template","z":"a05ff4cd.1ae7e8","group":"19f5ed07.08a453","name":"","order":8,"width":6,"height":1,"format":"<style>\n.wrapper {\n cursor: crosshair;\n width: 100%;\n position: relative;\n height: 15px;\n user-select: none;\n margin:auto;\n \n}\n.spectrum {\n height: 100%;\n width: 100%;\n border-radius:15px;\n background: linear-gradient(\n to right,\n rgb(255 0 0),\n rgb(255 255 0),\n rgb(0 255 0),\n rgb(0 255 255),\n rgb(0 0 255),\n rgb(255 0 255),\n rgb(255 0 0)\n );\n}\n</style>\n\n<div class=\"wrapper\">\n <div class=\"spectrum\"></div>\n</div>\n\n\n\n<script>\n \n(function($scope) {\n \n\nconst spectrumRanges = [\n { from: [255, 0, 0], to: [255, 255, 0] },\n { from: [255, 255, 0], to: [0, 255, 0] },\n { from: [0, 255, 0], to: [0, 255, 255] },\n { from: [0, 255, 255], to: [0, 0, 255] },\n { from: [0, 0, 255], to: [255, 0, 255] },\n { from: [255, 0, 255], to: [255, 0, 0] }\n];\n\nconst findColorValue = (from, to, leftRatio) => {\n return Math.round(from + (to - from) * leftRatio);\n};\n\nconst findRgbFromMousePosition = (event) => {\n const wrapper = document.querySelector(\".wrapper\");\n const { clientX } = event;\n const { left, width } = wrapper.getBoundingClientRect();\n const leftDistance = Math.min(Math.max(clientX - left, 0), width - 1);\n const totalRanges = spectrumRanges.length;\n const rangeWidth = width / totalRanges;\n const includedRange = Math.floor(leftDistance / rangeWidth);\n const leftRatio = ((leftDistance % rangeWidth) / rangeWidth).toFixed(2);\n const { from, to } = spectrumRanges[includedRange];\n return {\n r: findColorValue(from[0], to[0], leftRatio),\n g: findColorValue(from[1], to[1], leftRatio),\n b: findColorValue(from[2], to[2], leftRatio)\n };\n};\n\nconst rgbToHex = (r, g, b) => {\n const toHex = (rgb) => {\n let hex = Number(rgb).toString(16);\n if (hex.length < 2) {\n hex = `0${hex}`;\n }\n return hex;\n };\n const red = toHex(r);\n const green = toHex(g);\n const blue = toHex(b);\n return `#${red}${green}${blue}`;\n};\n\n\n$('.wrapper').on('click', function(e) {\n e.preventDefault(); //prevent default behavior\n var { r, g, b } = findRgbFromMousePosition(e);\n var hexValue = rgbToHex(r, g, b);\n $scope.send({\"topic\":\"color\",\"payload\": hexValue});\n});\n \n})(scope);\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":380,"y":540,"wires":[["286462ab.b032be"]]},{"id":"286462ab.b032be","type":"ui_text","z":"a05ff4cd.1ae7e8","group":"19f5ed07.08a453","order":8,"width":0,"height":0,"name":"","label":"Color","format":"{{msg.payload}}","layout":"row-center","x":520,"y":540,"wires":[]},{"id":"19f5ed07.08a453","type":"ui_group","name":"Default","tab":"c71e2691.3704f8","order":1,"disp":true,"width":"6","collapse":false},{"id":"c71e2691.3704f8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
This is just a manipulated picture just to explain what I want to achieve.
hotNipi! This is genious. I would never have mastered that on my own, at least not in the next couple of weeks. Based on that I will try to additionally implement a slider. Thank you so much!!
Thank yo so much! Please, say, how may realise with you color picker additional slider for brightness, like in stock color picker? Is it possible?
As I don't want to let myself in to the color of the light and rgb leds world, I just added black to white bar and percentage of clicked point. And I have no intentions to make such widget or modify this one to actually create something for real use. I is just as an example how to do something like this and that's it.
[{"id":"84256712.8baec8","type":"ui_template","z":"a05ff4cd.1ae7e8","group":"19f5ed07.08a453","name":"","order":6,"width":6,"height":1,"format":"<style>\n.wrapper {\n cursor: crosshair;\n width: 100%;\n position: relative;\n \n user-select: none;\n margin:auto;\n \n}\n.spectrum {\n height: 100%;\n width: 100%;\n border-radius:15px;\n margin-bottom:5px;\n height: 15px;\n background: linear-gradient(\n to right,\n rgb(255 0 0),\n rgb(255 255 0),\n rgb(0 255 0),\n rgb(0 255 255),\n rgb(0 0 255),\n rgb(255 0 255),\n rgb(255 0 0)\n );\n}\n.brightness {\n height: 100%;\n width: 100%;\n border-radius:15px;\n height: 15px;\n background: linear-gradient(\n to right,\n rgb(0 0 0),\n rgb(255 255 255)\n );\n}\n</style>\n\n<div class=\"wrapper\">\n <div class=\"spectrum\"></div>\n <div class=\"brightness\"></div>\n</div>\n\n\n\n<script>\n \n(function($scope) {\n \n\nconst spectrumRanges = [\n { from: [255, 0, 0], to: [255, 255, 0] },\n { from: [255, 255, 0], to: [0, 255, 0] },\n { from: [0, 255, 0], to: [0, 255, 255] },\n { from: [0, 255, 255], to: [0, 0, 255] },\n { from: [0, 0, 255], to: [255, 0, 255] },\n { from: [255, 0, 255], to: [255, 0, 0] }\n];\n\nconst findColorValue = (from, to, leftRatio) => {\n return Math.round(from + (to - from) * leftRatio);\n};\n\nconst findRgbFromMousePosition = (event) => {\n const wrapper = document.querySelector(\".wrapper\");\n const { clientX } = event;\n const { left, width } = wrapper.getBoundingClientRect();\n const leftDistance = Math.min(Math.max(clientX - left, 0), width - 1);\n const totalRanges = spectrumRanges.length;\n const rangeWidth = width / totalRanges;\n const includedRange = Math.floor(leftDistance / rangeWidth);\n const leftRatio = ((leftDistance % rangeWidth) / rangeWidth).toFixed(2);\n const { from, to } = spectrumRanges[includedRange];\n return {\n r: findColorValue(from[0], to[0], leftRatio),\n g: findColorValue(from[1], to[1], leftRatio),\n b: findColorValue(from[2], to[2], leftRatio)\n };\n};\n\nconst rgbToHex = (r, g, b) => {\n const toHex = (rgb) => {\n let hex = Number(rgb).toString(16);\n if (hex.length < 2) {\n hex = `0${hex}`;\n }\n return hex;\n };\n const red = toHex(r);\n const green = toHex(g);\n const blue = toHex(b);\n return `#${red}${green}${blue}`;\n};\n\nconst findBrightnessPos = (event) => {\n const wrapper = document.querySelector(\".wrapper\");\n const { clientX } = event;\n const { left, width } = wrapper.getBoundingClientRect();\n const leftDistance = Math.min(Math.max(clientX - left, 0), width - 1);\n const percentage = 100 * leftDistance / width\n return Math.round(percentage)\n}\n\n\n$('.spectrum').on('click', function(e) {\n e.preventDefault(); //prevent default behavior\n var { r, g, b } = findRgbFromMousePosition(e);\n var hexValue = rgbToHex(r, g, b);\n $scope.send({\"topic\":\"color\",\"payload\": hexValue});\n});\n$('.brightness').on('click', function(e) {\n e.preventDefault(); //prevent default behavior\n var br = findBrightnessPos(e)\n $scope.send({\"topic\":\"brightness\",\"payload\": br});\n}); \n \n})(scope);\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":400,"wires":[["c3a03db4.16fe7"]]},{"id":"286462ab.b032be","type":"ui_text","z":"a05ff4cd.1ae7e8","group":"19f5ed07.08a453","order":4,"width":0,"height":0,"name":"","label":"Color","format":"{{msg.payload}}","layout":"row-center","x":590,"y":380,"wires":[]},{"id":"577bd7d8.228bb8","type":"ui_text","z":"a05ff4cd.1ae7e8","group":"19f5ed07.08a453","order":4,"width":0,"height":0,"name":"","label":"Brightness","format":"{{msg.payload}}","layout":"row-center","x":610,"y":420,"wires":[]},{"id":"c3a03db4.16fe7","type":"switch","z":"a05ff4cd.1ae7e8","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"color","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":430,"y":400,"wires":[["286462ab.b032be"],["577bd7d8.228bb8"]]},{"id":"19f5ed07.08a453","type":"ui_group","name":"Default","tab":"c71e2691.3704f8","order":1,"disp":true,"width":"6","collapse":false},{"id":"c71e2691.3704f8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
Hi itProfi,
based on the support of hotNipi I have 'sucessfully' initiated my small project including a slider. To be honest, it's more a copy / paste of the here presented solutions and is not fully working at the moment. I furthermore need to implement the slider position instead of the crosshair position as used in hotNipi's approach. Will take a while I think but might help you to at least using the slider...
[{"id":"3f3c9b58.4fa8b4","type":"inject","z":"8c0dae24.8d305","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":905,"y":1230,"wires":[["f8e72721.515148"]],"l":false},{"id":"f8e72721.515148","type":"function","z":"8c0dae24.8d305","name":"inject","func":"// create a random rgb colour\n\nmsg.payload = { \"title\":\"Demo\",\n \"red\": Math.floor(Math.random() * (255) ),\n \"green\": Math.floor(Math.random() * (255) ),\n \"blue\": Math.floor(Math.random() * (255) )\n}\n\nreturn msg;\n\n\n/*\n// Random Hex color\nmsg.payload = { \"title\":\"Demo\",\n \"hexcolor\": \"#\" + Math.floor(Math.random()*16777215).toString(16)\n}\n*/\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1030,"y":1230,"wires":[["8c48bc97.9a7da","b10a356c.5bbfa8"]]},{"id":"8c48bc97.9a7da","type":"ui_template","z":"8c0dae24.8d305","group":"7b700281.aebaec","name":"RGB slider","order":2,"width":"0","height":"0","format":"<style>\n.slidecontainer {\n\t/* font-size: 80%; */\n\twidth: 100%;\n}\n.slidecontainer input {\n\tmargin-bottom:12px;\n}\n/* slider bar */\n\n.slider { /*das ist spektrum */\n -webkit-appearance: none;\n width: 98%;\n height: 18px;\n border-radius: 18px;\n outline: none;\n padding: 0px 2px;\n}\n\n/* color slides */\n\n.color {\n background: linear-gradient(\n to right,\n rgb(255 0 0),\n rgb(255 255 0),\n rgb(0 255 0),\n rgb(0 255 255),\n rgb(0 0 255),\n rgb(255 0 255),\n rgb(255 0 0)\n );\n}\n\n\n/* slider knopf */\n.slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: rgba({{msg.payload.red}},{{msg.payload.green}},{{msg.payload.blue}},1);\n /* background: #ff0000; */\n /* background: {{msg.payload.hexcolor}}; */\n border: 2px solid white;\n cursor: pointer;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n}\n\n\n\n/*<input type=\"range\" min=\"0\" max=\"255\" value=\"{{msg.payload.red}}\" class=\"slider red\" ng-model=\"msg.payload.red\" ng-mouseup=\"send(msg)\">*/\n</style>\n\n<div class=\"slidecontainer\">\n\n \n\tRGB ({{msg.payload.red}},{{msg.payload.green}},{{msg.payload.blue}})\n\t<input type=\"range\" min=\"0\" max=\"255\" value=\"{{msg.payload.red}}\" class=\"slider color\" ng-model=\"msg.payload.red\" ng-mouseup=\"send(msg)\">\n \t\n</div>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":1190,"y":1230,"wires":[[]]},{"id":"b10a356c.5bbfa8","type":"debug","z":"8c0dae24.8d305","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1190,"y":1270,"wires":[]},{"id":"7b700281.aebaec","type":"ui_group","name":"slider demo spielen","tab":"58c2aa06.ef46e4","order":8,"disp":true,"width":"6","collapse":false},{"id":"58c2aa06.ef46e4","type":"ui_tab","name":"Testboard","icon":"dashboard","disabled":false,"hidden":false}]
Thank you so much!
Thank you!
Hi all,
I am struggling to make my slider work. And the reason for sure is my lack of knowledge (which requires here CSS / AngularJS / JavaScript / HTML). Learned a lot of Javascript since starting with NodeRed, but the rest is not easy to handle all at once.
So, however, I'll proceed. Too be more precise at the moment I need some help replacing the part 'findRgbFromMousePosition' as from the hotNipi code to something like 'findRgbFromSliderPosition'. The translation part from one 'domain' to the other i.e. from the available slider range to the respective rgb range is aleady implemented. But I have no clue how to make this work for the slider range. Your help woule be much appreciated. BTW: This is where I am at the moment:
[{"id":"b891c72.ebed338","type":"inject","z":"51235c6b.bd5bb4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":405,"y":170,"wires":[["24bd9c6a.bdba34"]],"l":false},{"id":"24bd9c6a.bdba34","type":"function","z":"51235c6b.bd5bb4","name":"inject","func":"// create a random rgb colour\n\nmsg.payload = { \"title\":\"Demo\",\n \"red\": Math.floor(Math.random() * (255) ),\n \"green\": Math.floor(Math.random() * (255) ),\n \"blue\": Math.floor(Math.random() * (255) )\n}\n\nreturn msg;\n\n\n/*\n// Random Hex color\nmsg.payload = { \"title\":\"Demo\",\n \"hexcolor\": \"#\" + Math.floor(Math.random()*16777215).toString(16)\n}\n*/\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":530,"y":170,"wires":[["2255061b.a0ce1a","21b8504f.7fda3"]]},{"id":"2255061b.a0ce1a","type":"ui_template","z":"51235c6b.bd5bb4","group":"20ae1040.3cf58","name":"RGB slider","order":2,"width":"0","height":"0","format":"<style>\n.slidecontainer {\n\t/* font-size: 80%; */\n\twidth: 100%;\n}\n\n.slidecontainer input {\n\tmargin-bottom:9px;\n}\n/* slider bar */\n\n.slider {\n -webkit-appearance: none;\n width: 98%;\n height: 18px;\n border-radius: 18px;\n outline: none;\n padding: 0px 2px;\n}\n\n.spectrum {\n border-radius:10px;\n background: linear-gradient(\n to right,\n rgb(255 0 0),\n rgb(255 255 0),\n rgb(0 255 0),\n rgb(0 255 255),\n rgb(0 0 255),\n rgb(255 0 255),\n rgb(255 0 0)\n );\n}\n\n\n\n/* slider knopf */\n.slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: rgba({{msg.payload.red}},{{msg.payload.green}},{{msg.payload.blue}},1);\n border: 2px solid white;\n cursor: pointer;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n}\n\n</style>\n\n<div class=\"slidecontainer\">\n\tRGB ({{msg.payload.red}},{{msg.payload.green}},{{msg.payload.blue}})\n\t<input type=\"range\" min=\"0\" max=\"255\" value=\"{{msg.payload.red}}\" class=\"slider spectrum\" ng-model=\"msg.payload.red\" ng-mouseup=\"send(msg)\">\n</div>\n\n<script>\n \n \n(function($scope) {\n \n\nconst spectrumRanges = [\n { from: [255, 0, 0], to: [255, 255, 0] },\n { from: [255, 255, 0], to: [0, 255, 0] },\n { from: [0, 255, 0], to: [0, 255, 255] },\n { from: [0, 255, 255], to: [0, 0, 255] },\n { from: [0, 0, 255], to: [255, 0, 255] },\n { from: [255, 0, 255], to: [255, 0, 0] }\n];\n\nconst findColorValue = (from, to, leftRatio) => {\n return Math.round(from + (to - from) * leftRatio);\n};\n\nconst findRgbFromMousePosition = (event) => {\n const wrapper = document.querySelector(\".wrapper\");\n const { clientX } = event;\n const { left, width } = wrapper.getBoundingClientRect();\n const leftDistance = Math.min(Math.max(clientX - left, 0), width - 1);\n const totalRanges = spectrumRanges.length;\n const rangeWidth = width / totalRanges;\n const includedRange = Math.floor(leftDistance / rangeWidth);\n const leftRatio = ((leftDistance % rangeWidth) / rangeWidth).toFixed(2);\n const { from, to } = spectrumRanges[includedRange];\n return {\n r: findColorValue(from[0], to[0], leftRatio),\n g: findColorValue(from[1], to[1], leftRatio),\n b: findColorValue(from[2], to[2], leftRatio)\n };\n};\n\nconst rgbToHex = (r, g, b) => {\n const toHex = (rgb) => {\n let hex = Number(rgb).toString(16);\n if (hex.length < 2) {\n hex = `0${hex}`;\n }\n return hex;\n };\n const red = toHex(r);\n const green = toHex(g);\n const blue = toHex(b);\n return `#${red}${green}${blue}`;\n};\n\n\n$('.wrapper').on('click', function(e) {\n e.preventDefault(); //prevent default behavior\n var { r, g, b } = findRgbFromMousePosition(e);\n var hexValue = rgbToHex(r, g, b);\n $scope.send({\"topic\":\"color\",\"payload\": hexValue});\n});\n \n})(scope);\n\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":690,"y":170,"wires":[[]]},{"id":"21b8504f.7fda3","type":"debug","z":"51235c6b.bd5bb4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":690,"y":210,"wires":[]},{"id":"20ae1040.3cf58","type":"ui_group","name":"Group 1","tab":"6b520bda.e997a4","order":1,"disp":true,"width":"6","collapse":false},{"id":"6b520bda.e997a4","type":"ui_tab","name":"Experimentieren","icon":"dashboard","disabled":false,"hidden":false}]
I really despair of making this work and herewith officially beg for HELP. All I want is to change the color of the slider circle according to the position on the color spectrum. I have tried a few things out, however, without success. W3 Css school, this forum, Google. No chance to find something similar.
Could you please have a look at my last post ?
Thank you
Not clue what you have tried. Very messy.
May be that way it will be simpler ...
[{"id":"bdc44b29.79d388","type":"ui_template","z":"ea1d3f40.afc6e","group":"20ae1040.3cf58","name":"color slider based on md-slider","order":1,"width":"6","height":"1","format":"<div id=\"{{'slider_'+$id}}\" class=\"color-sider-container\">\n <md-slider ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\"></md-slider>\n</div>\n<style>\n.color-sider-container{\n\n}\n.color-sider-container > md-slider{\n height:40px;\n margin-left: 8px;\n margin-right: 8px;\n top:-1px;\n}\n.color-sider-container > md-slider .md-track-container {\n width: 100%;\n position: absolute;\n top: 16px;\n height: 16px;\n \n}\n.color-sider-container > md-slider .md-track.md-track{\n border-radius:10px;\n background: linear-gradient(\n to right,\n rgb(255 0 0),\n rgb(255 255 0),\n rgb(0 255 0),\n rgb(0 255 255),\n rgb(0 0 255),\n rgb(255 0 255),\n rgb(255 0 0)\n );\n}\n.color-sider-container > md-slider .md-track.md-track-fill{\n visibility:hidden;\n}\n.color-sider-container > md-slider .md-thumb:after {\n visibility:hidden;\n \n}\n.color-sider-container > md-slider .md-thumb {\n transform: scale(1.2) !important;\n border:2px solid white;\n pointer-events: none;\n\n}\n</style>\n\n<script>\n(function(scope) {\n \nconst spectrumRanges = [\n { from: [255, 0, 0], to: [255, 255, 0] },\n { from: [255, 255, 0], to: [0, 255, 0] },\n { from: [0, 255, 0], to: [0, 255, 255] },\n { from: [0, 255, 255], to: [0, 0, 255] },\n { from: [0, 0, 255], to: [255, 0, 255] },\n { from: [255, 0, 255], to: [255, 0, 0] }\n];\n\nconst findColorValue = (from, to, leftRatio) => {\n return Math.round(from + (to - from) * leftRatio);\n};\n\nconst findRgbFromSliderValue = (sliderpos) => {\n const wrapper = document.querySelector(\".color-sider-container\");\n const {width } = wrapper.getBoundingClientRect();\n const leftDistance = width * sliderpos\n const totalRanges = spectrumRanges.length;\n const rangeWidth = width / totalRanges;\n const includedRange = Math.floor(leftDistance / rangeWidth);\n const leftRatio = ((leftDistance % rangeWidth) / rangeWidth).toFixed(2);\n const { from, to } = spectrumRanges[includedRange];\n return {\n r: findColorValue(from[0], to[0], leftRatio),\n g: findColorValue(from[1], to[1], leftRatio),\n b: findColorValue(from[2], to[2], leftRatio)\n };\n};\n\nconst rgbToHex = (r, g, b) => {\n const toHex = (rgb) => {\n let hex = Number(rgb).toString(16);\n if (hex.length < 2) {\n hex = `0${hex}`;\n }\n return hex;\n };\n const red = toHex(r);\n const green = toHex(g);\n const blue = toHex(b);\n return `#${red}${green}${blue}`;\n};\n \n \nscope.$watch('slidervalue', function(slidervalue) {\n if (slidervalue) {\n var { r, g, b } = findRgbFromSliderValue(slidervalue);\n var hexValue = rgbToHex(r, g, b);\n $(\"#slider_\"+scope.$id).find('.md-thumb').css(\"background-color\",hexValue);\n \n }\n})\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":340,"wires":[[]]},{"id":"20ae1040.3cf58","type":"ui_group","name":"Group 1","tab":"6b520bda.e997a4","order":1,"disp":true,"width":"6","collapse":false},{"id":"6b520bda.e997a4","type":"ui_tab","name":"Experimentieren","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Here's another way using conversion from RGB to HSL:
<style>
.slidecontainer {
/* font-size: 80%; */
width: 100%;
}
.slidecontainer input {
margin-bottom:9px;
}
/* slider bar */
.slider {
-webkit-appearance: none;
width: 98%;
height: 18px;
border-radius: 18px;
outline: none;
padding: 0px 2px;
}
.spectrum {
border-radius:10px;
background: linear-gradient(
to right,
rgb(255 0 0),
rgb(255 255 0),
rgb(0 255 0),
rgb(0 255 255),
rgb(0 0 255),
rgb(255 0 255),
rgb(255 0 0)
);
}
/* slider knopf */
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba({{msg.payload.red}},{{msg.payload.green}},{{msg.payload.blue}},1);
border: 2px solid white;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
<div class="slidecontainer">
RGB ({{msg.payload.red}},{{msg.payload.green}},{{msg.payload.blue}})
<input type="range" min="0" max="255" value="msg.payload.red" class="slider spectrum" ng-model="sliderValue" ng-change="test()" ng-mouseup="send(msg)">
</div>
<script>
(function($scope) {
function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
}
function hslToRgb(h, s, l){
var r, g, b;
if(s == 0){
r = g = b = l; // achromatic
}else{
var hue2rgb = function hue2rgb(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return {"red":Math.round(r * 255), "green": Math.round(g * 255), "blue": Math.round(b * 255)};
}
$scope.test = function(){
$scope.msg.payload = hslToRgb($scope.sliderValue/255,1,0.5)
}
scope.$watch('msg', function(msg) {
if (msg) {
$scope.sliderValue = rgbToHsl($scope.msg.payload.red,$scope.msg.payload.green,$scope.msg.payload.blue)[0]*255
}
});
})(scope);
</script>
Yes, another type of color calculations and very fancy 
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy