Colour Picker RGB to PWM?

[Gummix]

Hi there.
I have a simple RGP String here and want to control it with the Colour picker.

The Picker gives me a string like this:

msg.payload : string[15]
"rgb(77, 29, 20)"

How can i split this msg to 3 outputs that gives me 77, 29 and 20?

When i have this i can change the range from 0-255 to 0-100 for pwm.

Can somebode help me?

[zenofmud]

Here is a way you could do it with just the standard nodes AND without using regex. I'm sure someone else can give you an example using regex which wil make the flow smaller.

and here is the flow:

[{"id":"5b779e08.cf148","type":"inject","z":"4915e138.8021c8","name":"","topic":"","payload":"rgb(77, 29, 20)","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":60,"wires":[["ee7008b5.d8f31"]]},{"id":"d089b582.beece8","type":"debug","z":"4915e138.8021c8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":470,"y":320,"wires":[]},{"id":"ee7008b5.d8f31","type":"split","z":"4915e138.8021c8","name":"split at the \"(\"","splt":"(","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":200,"y":140,"wires":[["cb24e6bd.62c748"]]},{"id":"cb24e6bd.62c748","type":"switch","z":"4915e138.8021c8","name":"don't pass the 'rgb'","property":"payload","propertyType":"msg","rules":[{"t":"neq","v":"rgb","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":210,"y":200,"wires":[["e0942efe.3d8858","4c3ceb17.9fb00c"]]},{"id":"e0942efe.3d8858","type":"split","z":"4915e138.8021c8","name":"split at the \"(\"","splt":")","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":220,"y":260,"wires":[["1165df67.6b0f89","d1ffa4de.7b6b28"]]},{"id":"1165df67.6b0f89","type":"switch","z":"4915e138.8021c8","name":"don't pass the ')'","property":"payload","propertyType":"msg","rules":[{"t":"nempty"}],"checkall":"true","repair":false,"outputs":1,"x":210,"y":320,"wires":[["d089b582.beece8","bda8bb4f.d94a68"]]},{"id":"4c3ceb17.9fb00c","type":"debug","z":"4915e138.8021c8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":470,"y":200,"wires":[]},{"id":"d1ffa4de.7b6b28","type":"debug","z":"4915e138.8021c8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":470,"y":260,"wires":[]},{"id":"bda8bb4f.d94a68","type":"split","z":"4915e138.8021c8","name":"split at the \",\"","splt":", ","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":200,"y":380,"wires":[["8dc65f7c.c07cf8","51e98ae9.fb62dc"]]},{"id":"8dc65f7c.c07cf8","type":"debug","z":"4915e138.8021c8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":450,"y":380,"wires":[]},{"id":"51e98ae9.fb62dc","type":"switch","z":"4915e138.8021c8","name":"","property":"parts.index","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"}],"checkall":"true","repair":false,"outputs":3,"x":190,"y":480,"wires":[["3183e0ad.7781c8"],["f72c8657.c6eef"],["fbfeb478.ad5f1"]]},{"id":"3183e0ad.7781c8","type":"change","z":"4915e138.8021c8","name":"format R value","rules":[{"t":"set","p":"payload","pt":"msg","to":"'R='&payload","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":440,"wires":[["fb014da.36643b"]]},{"id":"fb014da.36643b","type":"debug","z":"4915e138.8021c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":590,"y":440,"wires":[]},{"id":"f72c8657.c6eef","type":"change","z":"4915e138.8021c8","name":"format G value","rules":[{"t":"set","p":"payload","pt":"msg","to":"'G='&payload","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":480,"wires":[["c68a5aed.fd086"]]},{"id":"c68a5aed.fd086","type":"debug","z":"4915e138.8021c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":590,"y":480,"wires":[]},{"id":"fbfeb478.ad5f1","type":"change","z":"4915e138.8021c8","name":"format B value","rules":[{"t":"set","p":"payload","pt":"msg","to":"'B='&payload","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":520,"wires":[["bd589fca.074d78"]]},{"id":"bd589fca.074d78","type":"debug","z":"4915e138.8021c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":590,"y":520,"wires":[]}]

[Gummix]

Thanks i will try it.

[Gummix]

Hi,
found a way to make it a bit shorter^^

[{"id":"51f7b740.8330b8","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"897caaa8.5caa18","type":"debug","z":"51f7b740.8330b8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1028,"y":202,"wires":},{"id":"12b1176c.b38e31","type":"function","z":"51f7b740.8330b8","name":"","func":"var payload=msg.payload;\nmsg.payload = payload.replace(/[^\d]/g, ''); // 1238\nreturn msg;","outputs":1,"noerr":0,"x":493,"y":217,"wires":[["af7141b6.98745"]]},{"id":"dd9f6109.7de44","type":"split","z":"51f7b740.8330b8","name":"","splt":",","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":329,"y":218,"wires":[["12b1176c.b38e31"]]},{"id":"ffbf59b.da010a8","type":"inject","z":"51f7b740.8330b8","name":"","topic":"","payload":"rgb(193, 62, 84)","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":125,"y":219,"wires":[["dd9f6109.7de44"]]},{"id":"af7141b6.98745","type":"switch","z":"51f7b740.8330b8","name":"","property":"parts.index","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"str"},{"t":"eq","v":"1","vt":"str"},{"t":"eq","v":"2","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":687,"y":218,"wires":[["897caaa8.5caa18"],["d6a34de3.e3d4b"],["2046fe54.466aa2"]]},{"id":"d6a34de3.e3d4b","type":"debug","z":"51f7b740.8330b8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1008,"y":257,"wires":},{"id":"2046fe54.466aa2","type":"debug","z":"51f7b740.8330b8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":976,"y":309,"wires":}]

[shrickus]

This output is easily parsed with a regular expression, like this in a function node:

// pull the r, g, b string values out
var rgb = msg.payload.match(/(\d+)/gi);

// convert each value to a percentage
var pwm = rgb.map(h => Math.round(100*h/255));

// return an object with named properties
msg.payload = {
    r: pwm[0],
    g: pwm[1],
    b: pwm[2]
}
return msg;

Since the colour picker whould always returns the same string format, I didn't add any input data checking. If you don't need a payload with named properties, you can just set the payload to the pwm array and return that directly.

[dceejay]

Or... You could just set the colour picker to "output an object" rather than a string and save yourself a load of hassle...

[dceejay]

Example flow

[{"id":"715c1baf.2c7394","type":"ui_colour_picker","z":"dfe4ec36.0a5a5","name":"","label":"","group":"8a3c0162.4c8d1","format":"rgb","outformat":"object","showSwatch":true,"showPicker":false,"showValue":false,"showHue":false,"showAlpha":false,"showLightness":true,"dynOutput":"true","order":0,"width":0,"height":0,"passthru":true,"topic":"","x":130,"y":400,"wires":[["30e73299.7e539e"]]},{"id":"30e73299.7e539e","type":"function","z":"dfe4ec36.0a5a5","name":"","func":"\nreturn [\n    {payload:msg.payload.r},\n    {payload:msg.payload.b},\n    {payload:msg.payload.b}\n];","outputs":3,"noerr":0,"x":290,"y":400,"wires":[["b06ef87a.2ecd18"],["3532ded.ea45f22"],["813aa6c7.4faa58"]]},{"id":"813aa6c7.4faa58","type":"range","z":"dfe4ec36.0a5a5","minin":"0","maxin":"255","minout":"0","maxout":"100","action":"scale","round":true,"property":"payload","name":"","x":460,"y":440,"wires":[["843e8dab.baebc"]]},{"id":"3532ded.ea45f22","type":"range","z":"dfe4ec36.0a5a5","minin":"0","maxin":"255","minout":"0","maxout":"100","action":"scale","round":true,"property":"payload","name":"","x":460,"y":400,"wires":[["96ad2af9.ebb138"]]},{"id":"b06ef87a.2ecd18","type":"range","z":"dfe4ec36.0a5a5","minin":"0","maxin":"255","minout":"0","maxout":"100","action":"scale","round":true,"property":"payload","name":"","x":460,"y":360,"wires":[["43b79720.9de288"]]},{"id":"843e8dab.baebc","type":"debug","z":"dfe4ec36.0a5a5","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","visible":false,"x":630,"y":440,"wires":[]},{"id":"96ad2af9.ebb138","type":"debug","z":"dfe4ec36.0a5a5","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","visible":false,"x":630,"y":400,"wires":[]},{"id":"43b79720.9de288","type":"debug","z":"dfe4ec36.0a5a5","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","visible":false,"x":630,"y":360,"wires":[]},{"id":"8a3c0162.4c8d1","type":"ui_group","z":"","name":"Chart","tab":"ed5f97bc.2d4ce8","disp":true,"width":"12","collapse":false},{"id":"ed5f97bc.2d4ce8","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

[shrickus]

Um, well, yes... shows you how much I've used that node.
But then I wouldn't actually be answering the question ;*)

[Gummix]

Ok,
i nearly have it but:
When i press the Mousebutton at the "colour wheel" at the Dashboard and holt it than i can change the colours and it works fine.
But when i just click on green or blue it dont work.

Any idears?