No # in colour picker when select a color

I am probably doing something wrong but can't seem to figure out what's the best way to solve this.


I have a LED device/lamp that needs a string like: #ffff00 to show a yellow light.
dashboard_01
All values in the dropdown box works well and even the colour picker sets it self to that color with the correct string format.
But, if I click on the colour picker on the dashboard it removes the # sign that needs to be added to the string for the device to work.
dashboard_02
What would be the best/smarted way to do this?

(in case of, this is the flow so far)

[{"id":"48cfb54.0d598cc","type":"tab","label":"LOL04","disabled":false,"info":""},{"id":"ee4ce161.186c2","type":"inject","z":"48cfb54.0d598cc","name":"","topic":"","payload":"","payloadType":"str","repeat":"3","crontab":"","once":true,"onceDelay":"","x":130,"y":280,"wires":[["a5b4c8a6.b2a818","4a6b9502.52c46c","2cd91bd5.98f01c"]]},{"id":"a5b4c8a6.b2a818","type":"websocket out","z":"48cfb54.0d598cc","name":"","server":"","client":"763525bf.549a64","x":380,"y":140,"wires":[]},{"id":"4a6b9502.52c46c","type":"http request","z":"48cfb54.0d598cc","name":"get current state","method":"GET","ret":"txt","url":"lol04.local/current_state","tls":"","x":370,"y":300,"wires":[["f4c26ddb.f8925","84c47d30.c060a"]]},{"id":"f4c26ddb.f8925","type":"debug","z":"48cfb54.0d598cc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":630,"y":400,"wires":[]},{"id":"2cd91bd5.98f01c","type":"http request","z":"48cfb54.0d598cc","name":"get current color","method":"GET","ret":"txt","url":"lol04.local/current_color","tls":"","x":370,"y":240,"wires":[["27cb8e8e.de915a","876fef22.9e4c78","64abfff5.0e1438"]]},{"id":"27cb8e8e.de915a","type":"debug","z":"48cfb54.0d598cc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":630,"y":280,"wires":[]},{"id":"fd9351da.30b238","type":"ui_button","z":"48cfb54.0d598cc","name":"","group":"b316f8bf.aafd8","order":1,"width":"3","height":"1","passthru":false,"label":"Power","color":"","bgcolor":"","icon":"","payload":"@2","payloadType":"str","topic":"","x":130,"y":160,"wires":[["a5b4c8a6.b2a818","4a6b9502.52c46c","2cd91bd5.98f01c"]]},{"id":"8f2e1b25.15037","type":"ui_text","z":"48cfb54.0d598cc","group":"b316f8bf.aafd8","order":2,"width":"1","height":"1","name":"indicator","label":"","format":"<font color={{msg.payload}} ><i class=\"fa fa-lightbulb-o fa-2x\" style=\"font-size:48px;\"></i></font>","layout":"row-spread","x":840,"y":360,"wires":[]},{"id":"84c47d30.c060a","type":"change","z":"48cfb54.0d598cc","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"Off","fromt":"str","to":"grey","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"On","fromt":"str","to":"yellow","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":340,"wires":[["8f2e1b25.15037"]]},{"id":"64abfff5.0e1438","type":"ui_colour_picker","z":"48cfb54.0d598cc","name":"","label":"","group":"b316f8bf.aafd8","format":"hex","outformat":"object","showSwatch":true,"showPicker":true,"showValue":true,"showHue":false,"showAlpha":false,"showLightness":true,"dynOutput":"false","order":4,"width":"4","height":"4","passthru":true,"topic":"","x":630,"y":200,"wires":[["27c99c7a.bf3cf4","5ac47b4a.802d7c"]]},{"id":"876fef22.9e4c78","type":"ui_text","z":"48cfb54.0d598cc","group":"b316f8bf.aafd8","order":3,"width":"4","height":"1","name":"","label":"","format":"{{msg.payload}}","layout":"col-center","x":830,"y":240,"wires":[]},{"id":"27c99c7a.bf3cf4","type":"debug","z":"48cfb54.0d598cc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":850,"y":200,"wires":[]},{"id":"5ac47b4a.802d7c","type":"websocket out","z":"48cfb54.0d598cc","name":"","server":"","client":"763525bf.549a64","x":880,"y":120,"wires":[]},{"id":"7436e246.a0718c","type":"inject","z":"48cfb54.0d598cc","name":"","topic":"","payload":"#444800","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":620,"y":80,"wires":[["5ac47b4a.802d7c"]]},{"id":"d2eeb440.3dab1","type":"ui_dropdown","z":"48cfb54.0d598cc","name":"","label":"","place":"Select option","group":"b316f8bf.aafd8","order":0,"width":"4","height":"1","passthru":true,"options":[{"label":"red","value":"#ff0000","type":"str"},{"label":"green","value":"#00ff00","type":"str"},{"label":"blue","value":"#0000ff","type":"str"},{"label":"magenta","value":"#ff00ff","type":"str"},{"label":"yellow","value":"#ffff00","type":"str"},{"label":"cyaan","value":"#00ffff","type":"str"},{"label":"white","value":"#ffffff","type":"str"},{"label":"black","value":"#000000","type":"str"},{"label":"default","value":"#808080","type":"str"},{"label":"nice one","value":"#444800","type":"str"}],"payload":"","topic":"","x":620,"y":140,"wires":[["5ac47b4a.802d7c"]]},{"id":"763525bf.549a64","type":"websocket-client","z":"","path":"ws://lol04.local:81/","tls":"","wholemsg":"false"},{"id":"b316f8bf.aafd8","type":"ui_group","z":"","name":"LOL04","tab":"4cbb5257.8f207c","disp":true,"width":"4","collapse":false},{"id":"4cbb5257.8f207c","type":"ui_tab","z":"","name":"LOL","icon":"dashboard"}]

How about a change node to add the # at the beginning??
Screen Shot 2020-01-09 at 10.56.23 AM

1 Like

Thanks for the idea.
Let me try that.

With the current flow it now gives me two # of these! Mainly because it passing the old value plus an #. If I disconnect the http request node from the input of the colour picker it looks to work. Need to think about a way to set that colour picker with the current color that been set with the dropdown box or by the webside.
Thanks again anyway.