I have a color picker for my lights, I also have a power button. how can I change the state of the button (on/off) based on the color hex value? I set a range of #000000 - #099999 and that work for most of the colors close the black. What can I use to define the colors with letters in their hex value. Im trying.... if...contains a-z but no luck
Could you provide your flow and a little more explaination.
[{"id":"9d5312b0.2c645","type":"ui_colour_picker","z":"3fe06b2e.827a64","name":"","label":"Cody Light","group":"a3ef4451.79d408","format":"hex","outformat":"object","showSwatch":false,"showPicker":true,"showValue":true,"showHue":true,"showAlpha":false,"showLightness":true,"square":"false","dynOutput":"false","order":0,"width":0,"height":0,"passthru":false,"topic":"","x":90,"y":60,"wires":[["4bc2aae6.2d7ef4","138b68c0.1b0347","b3d01830.f8e688"]]},{"id":"4bc2aae6.2d7ef4","type":"debug","z":"3fe06b2e.827a64","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":480,"y":240,"wires":[]},{"id":"138b68c0.1b0347","type":"change","z":"3fe06b2e.827a64","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload.color","tot":"msg"},{"t":"set","p":"payload.power","pt":"msg","to":"on","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":80,"wires":[["79139360.506b6c"]]},{"id":"52478219.15f6cc","type":"ui_switch","z":"3fe06b2e.827a64","name":"","label":"Power","tooltip":"","group":"a3ef4451.79d408","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","x":150,"y":300,"wires":[["4bc2aae6.2d7ef4","f8c8229e.76e02"]]},{"id":"89a73730.5feba8","type":"change","z":"3fe06b2e.827a64","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"true","fromt":"bool","to":"on","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"false","fromt":"bool","to":"off","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":300,"wires":[["f8c8229e.76e02"]]},{"id":"ca2f80e2.21ea5","type":"inject","z":"3fe06b2e.827a64","name":"","topic":"","payload":"true","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":380,"wires":[["52478219.15f6cc"]]},{"id":"ad06e89b.2d6d68","type":"inject","z":"3fe06b2e.827a64","name":"","topic":"","payload":"false","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":440,"wires":[["52478219.15f6cc"]]},{"id":"f8c8229e.76e02","type":"change","z":"3fe06b2e.827a64","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload.power","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":400,"wires":[["4ac2cbd3.e5be24","79139360.506b6c"]]},{"id":"3ff5af17.d4238","type":"ui_toast","z":"3fe06b2e.827a64","position":"top right","displayTime":"3","highlight":"","outputs":0,"ok":"OK","cancel":"","topic":"Turning Power Off","name":"","x":650,"y":320,"wires":[]},{"id":"4ac2cbd3.e5be24","type":"switch","z":"3fe06b2e.827a64","name":"","property":"payload.power","propertyType":"msg","rules":[{"t":"eq","v":"on","vt":"str"},{"t":"eq","v":"off","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":580,"y":480,"wires":[["7b1c5f6a.3e923"],["3ff5af17.d4238"]]},{"id":"7b1c5f6a.3e923","type":"ui_toast","z":"3fe06b2e.827a64","position":"top right","displayTime":"3","highlight":"","outputs":0,"ok":"OK","cancel":"","topic":"Turning Power On","name":"","x":710,"y":380,"wires":[]},{"id":"b3d01830.f8e688","type":"switch","z":"3fe06b2e.827a64","name":"","property":"payload","propertyType":"msg","rules":[{"t":"btwn","v":"000000","vt":"num","v2":"059999","v2t":"num"},{"t":"regex","v":"a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z","vt":"str","case":false}],"checkall":"true","repair":false,"outputs":2,"x":70,"y":220,"wires":[["c8f0c9d7.f2f4b8","4bc2aae6.2d7ef4"],["83e4c624.576768","4bc2aae6.2d7ef4"]]},{"id":"c8f0c9d7.f2f4b8","type":"change","z":"3fe06b2e.827a64","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"off","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":180,"wires":[["52478219.15f6cc"]]},{"id":"83e4c624.576768","type":"change","z":"3fe06b2e.827a64","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"on","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":140,"wires":[[]]},{"id":"a3ef4451.79d408","type":"ui_group","z":"","name":"Color","tab":"f83347b9.375888","disp":true,"width":"6","collapse":false},{"id":"f83347b9.375888","type":"ui_tab","z":"","name":"Home","icon":"whatshot","disabled":false,"hidden":false}]
The output goes to a lifx bulb. the colors are working but I cant get the power toggle button to switch to On
Ok, some comments to start
- instead of one debug node, use many and name them. This will make identifying them debug msg in the debug panel much easier.
- when providing a flow to someone else, make a copy for yourself then get rid of all the extra stuff. You have three
changenodes that aren't being used. Why do I need to see them? - the inject nodes to the power
buttonneed to be on/off not true/false - you can consolidate the notifications into one node with a little jsonata expression (see attached flow)
- your switch is checking if ALL cases match - is that what you want or should it stop after the first rule that is true?
[{"id":"ecdd3fd0.f4f0b8","type":"ui_colour_picker","z":"1996daf9.e3d05d","name":"","label":"Cody Light","group":"46f15c1f.ba5f64","format":"hex","outformat":"object","showSwatch":false,"showPicker":true,"showValue":true,"showHue":true,"showAlpha":false,"showLightness":true,"square":"false","dynOutput":"false","order":0,"width":0,"height":0,"passthru":false,"topic":"","x":190,"y":80,"wires":[["a6b79ed9.b329c","2ce4d23b.b9b7f6"]]},{"id":"5300f1b7.51b108","type":"debug","z":"1996daf9.e3d05d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":430,"y":120,"wires":[]},{"id":"64de1af0.f139ec","type":"ui_switch","z":"1996daf9.e3d05d","name":"","label":"Power","tooltip":"","group":"46f15c1f.ba5f64","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","x":670,"y":160,"wires":[["f30f0c09.8a4ed8","ba1e7629.5186a"]]},{"id":"a0b6d280.695718","type":"inject","z":"1996daf9.e3d05d","name":"","topic":"","payload":"off","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":590,"y":40,"wires":[["64de1af0.f139ec"]]},{"id":"d4bdbcc6.d1104","type":"inject","z":"1996daf9.e3d05d","name":"","topic":"","payload":"on","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":590,"y":80,"wires":[["64de1af0.f139ec"]]},{"id":"f30f0c09.8a4ed8","type":"change","z":"1996daf9.e3d05d","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"\"Turning Power \"& $uppercase(payload) ","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":700,"y":220,"wires":[["cb37a0da.01a668","33974d75.68579a"]]},{"id":"a6b79ed9.b329c","type":"switch","z":"1996daf9.e3d05d","name":"","property":"payload","propertyType":"msg","rules":[{"t":"btwn","v":"000000","vt":"num","v2":"059999","v2t":"num"},{"t":"regex","v":"a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z","vt":"str","case":false}],"checkall":"false","repair":false,"outputs":2,"x":190,"y":180,"wires":[["a051677d.321fb8","5300f1b7.51b108"],["eb798646.5388a8"]]},{"id":"a051677d.321fb8","type":"change","z":"1996daf9.e3d05d","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"off","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":160,"wires":[["64de1af0.f139ec"]]},{"id":"2ce4d23b.b9b7f6","type":"debug","z":"1996daf9.e3d05d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":430,"y":80,"wires":[]},{"id":"ba1e7629.5186a","type":"debug","z":"1996daf9.e3d05d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":910,"y":160,"wires":[]},{"id":"eb798646.5388a8","type":"debug","z":"1996daf9.e3d05d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":430,"y":240,"wires":[]},{"id":"cb37a0da.01a668","type":"ui_toast","z":"1996daf9.e3d05d","position":"top right","displayTime":"3","highlight":"","outputs":0,"ok":"OK","cancel":"","topic":"","name":"","x":710,"y":280,"wires":[]},{"id":"33974d75.68579a","type":"debug","z":"1996daf9.e3d05d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":910,"y":220,"wires":[]},{"id":"46f15c1f.ba5f64","type":"ui_group","z":"","name":"Color","tab":"11495332.ede3bd","disp":true,"width":"6","collapse":false},{"id":"11495332.ede3bd","type":"ui_tab","z":"","name":"Home","icon":"whatshot","order":1,"disabled":false,"hidden":false}]
1 Like
Im pretty new at this, sorry about the extra stuff.
Thanks for the notification json.
It make sense to stop if the 1st case is true.
but how can I get the button to toggle on or off using the color picker? ie when I pick black or close to black it toggle off. when its not black it toggles on
Try attaching a debug node to the colour picker node. See what it outputs. As you likely know black or near black will be close to zero. So using this knowledge and a few nodes, you can determine this and fire an "on" or "off" msg to the button.
Yea I tried that. I have it working for black. But if I pick a spot where there's a letter in the hex value it wont work. So I just have to try to pick #000000 everytime
The problem I see is defining what is black. 0E0C0B looks pretty black but so does 121617.
So question
- how dark does it have to be to consider it black or off?
- how to figure the range of darks that are to be considered off
Here is a link about calculating dark that might be helpful
So you should realise we don't want to spoon feed you the direct answer but instead provide clues so you can figure it out for yourself right? 
Anyhow, so as you know the colour is made up of RGB components, represented as HEX values from 0x00 to 0xFF. You could split the three values out manually and convert them hexadecimal values to decimal by calling parseInt.
At this point you'd have 3 individual R G B values you can use simple maths to compare each to your desired threshold & return "on" or "off".
Of course there are plenty of solutions out there you could copy (but then you'd miss out of leaning how to take a string, chop it up and convert hexadecimal to decimal). It's useful knowledge. But if you don't care then here is one such solution (hint rob his code, put it in a function node)
1 Like
Setting a color is not the same as setting brightness.
#000001 is still on with the same brightness.
To answer your original question, the hexadecimal representation is simply that: a numerical system that uses a base of 16, as opposed to the base 10 of our usual decimal system. Because we only have 10 different base 10 numbers, they decided to use letters to describe the larger numbers. It’s a different way of counting essentially, as in base 10, to display we use 0-9, then run out of numbers to use and up the position by one and start over, so 9 + 1 becomes 10. Hexadecimal uses A after running out of other numbers, up to F, before upping the position and starting over. So to go from decimal 0 to decimal 255, in hexadecimal that’s 0 to FF.
And as colours are often described in RGB values from 0 to 255, the hex representation is just that: the first 2 characters are the hex value for R, the 3rd and 4th for G, and the last 2 for B.
So #000000 means an RGB of 0, 0, 0, while #FFFFFF means RGB of 255, 255, 255.
Hope that helps your understanding a bit better 
@codycato1882 Ok, here are the detailed steps to use tinycolor.js to test the color to see if it is 'light' or 'dark'.
Go to the node-red directory cd .node-red
install tinycolor.js npm install tinycolor2.js
backup the settings file cp settings.js settings.bkup this is incase something goes wrong
edit settings.js and find the section functionGlobalContext: { it should look like this
functionGlobalContext: {
// os:require('os'),
// jfive:require("johnny-five"),
// j5board:require("johnny-five").Board({repl:false})
},
add the following tinycolor: require('tinycolor2'), to the begining so you will have:
functionGlobalContext: {
tinycolor: require('tinycolor2')
// os:require('os'),
// jfive:require("johnny-five"),
// j5board:require("johnny-five").Board({repl:false})
},
NOTE: if you have more than one entry, all but the last need a comma at the end.
Save the file and restart NR. If the restart get an error, re-edit settings.js and make sure you don't have a typo.
in a function node you can now use the file
var tinycolor = global.get('tinycolor')
var color1 = tinycolor(msg.payload);
var t1 = color1.isDark(); // false
msg.payload = ("Is "+ color1 + " dark? "+ t1);
return msg;
here is a sample flow with two inject nodes sending #000 and #FFF
[{"id":"a61a8c88.442398","type":"inject","z":"cdaab1fb.ab33a","name":"","topic":"","payload":"#000000","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":200,"y":140,"wires":[["e8f2fcfe.764c3"]]},{"id":"d987f969.79c86","type":"debug","z":"cdaab1fb.ab33a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":690,"y":180,"wires":[]},{"id":"e8f2fcfe.764c3","type":"function","z":"cdaab1fb.ab33a","name":"Check if color is light or dark","func":"var tinycolor = global.get('tinycolor')\n\nvar color1 = tinycolor(msg.payload);\nvar t1 = color1.isDark(); // false\nmsg.payload = (\"Is \"+ color1 + \" dark? \"+ t1);\nreturn msg;\n","outputs":1,"noerr":0,"x":440,"y":180,"wires":[["d987f969.79c86"]]},{"id":"5cfc8e7.a5d60f","type":"inject","z":"cdaab1fb.ab33a","name":"","topic":"","payload":"#ffffff","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":220,"wires":[["e8f2fcfe.764c3"]]}]
There are other things you can use in the function node like isLight() and isReadable() feel free to read about what you can do at https://github.com/bgrins/TinyColor
Thank you, I'll try it when I feel better. Feeling really sick today.
