RGB Buttons

Using this article you can set a color. A colour will be triggered using dashboard buttons. To be able to continue with this article please first complete User control from web browser.

Use this app for controlling a Constant Voltage PWM controller such as Toltec CV.

Import the ready made flow using the instructions here: Importing a Node-RED flow or follow the instructions below.

[{"id":"59857715.c357f8","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"3b2ebdc3.013d22","type":"comment","z":"59857715.c357f8","name":"Color buttons","info":"","x":210,"y":140,"wires":[]},{"id":"151fd33c.e7fe3d","type":"function","z":"59857715.c357f8","name":"Red","func":"var color = {};\ncolor.payload = {\"ch0\":254,\"ch1\":0,\"ch2\":0}; //ch0 = red, ch1 = green, ch2 = blue\nreturn color;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":180,"wires":[["e371fd21.478a3"]]},{"id":"31bb5d43.9624c2","type":"function","z":"59857715.c357f8","name":"Green","func":"var color = {};\ncolor.payload = {\"ch0\":0,\"ch1\":254,\"ch2\":0}; //ch0 = red, ch1 = green, ch2 = blue\nreturn color;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":220,"wires":[["e371fd21.478a3"]]},{"id":"8f284157.8a92a","type":"function","z":"59857715.c357f8","name":"Blue","func":"\nmsg.payload = {\"ch0\":0,\"ch1\":0,\"ch2\":254}; //ch0 = red, ch1 = green, ch2 = blue\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":260,"wires":[["e371fd21.478a3"]]},{"id":"6b25656e.aec25c","type":"function","z":"59857715.c357f8","name":"White","func":"var color = {};\ncolor.payload = {\"ch0\":254,\"ch1\":254,\"ch2\":254}; //ch0 = red, ch1 = green, ch2 = blue\nreturn color;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":480,"wires":[["e371fd21.478a3"]]},{"id":"21f20a34.8ba306","type":"function","z":"59857715.c357f8","name":"OFF","func":"var color = {};\ncolor.payload = {\"ch0\":0,\"ch1\":0,\"ch2\":0}; //ch0 = red, ch1 = green, ch2 = blue\nreturn color;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":520,"wires":[["e371fd21.478a3"]]},{"id":"6a68f710.d8a028","type":"ui_button","z":"59857715.c357f8","name":"","group":"53fdc851.4112e8","order":1,"width":0,"height":0,"passthru":false,"label":"Red","color":"black","bgcolor":"red","icon":"","payload":"","payloadType":"str","topic":"","x":210,"y":180,"wires":[["151fd33c.e7fe3d"]]},{"id":"8ed64a22.4c5dc8","type":"ui_button","z":"59857715.c357f8","name":"","group":"53fdc851.4112e8","order":2,"width":0,"height":0,"passthru":false,"label":"Green","color":"black","bgcolor":"green","icon":"","payload":"","payloadType":"str","topic":"","x":210,"y":220,"wires":[["31bb5d43.9624c2"]]},{"id":"b4f040a9.ebbe5","type":"ui_button","z":"59857715.c357f8","name":"","group":"53fdc851.4112e8","order":3,"width":0,"height":0,"passthru":false,"label":"Blue","color":"white","bgcolor":"blue","icon":"","payload":"","payloadType":"str","topic":"","x":210,"y":260,"wires":[["8f284157.8a92a"]]},{"id":"812b3f76.99264","type":"ui_button","z":"59857715.c357f8","name":"","group":"53fdc851.4112e8","order":7,"width":0,"height":0,"passthru":false,"label":"White","color":"black","bgcolor":"white","icon":"","payload":"","payloadType":"str","topic":"","x":210,"y":480,"wires":[["6b25656e.aec25c"]]},{"id":"c444b9e3.7b7528","type":"ui_button","z":"59857715.c357f8","name":"","group":"53fdc851.4112e8","order":8,"width":0,"height":0,"passthru":false,"label":"RGB OFF","color":"white","bgcolor":"black","icon":"","payload":"","payloadType":"str","topic":"","x":220,"y":520,"wires":[["21f20a34.8ba306"]]},{"id":"67e2d058.12616","type":"function","z":"59857715.c357f8","name":"Magenta","func":"var color = {};\ncolor.payload = {\"ch0\":254,\"ch1\":0,\"ch2\":254}; //ch0 = red, ch1 = green, ch2 = blue\nreturn color;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":440,"y":300,"wires":[["e371fd21.478a3"]]},{"id":"cd4fa98b.43dd78","type":"ui_button","z":"59857715.c357f8","name":"","group":"53fdc851.4112e8","order":4,"width":0,"height":0,"passthru":false,"label":"Magenta","color":"white","bgcolor":"magenta","icon":"","payload":"","payloadType":"str","topic":"","x":220,"y":300,"wires":[["67e2d058.12616"]]},{"id":"1e3e436a.08a15d","type":"function","z":"59857715.c357f8","name":"Yellow","func":"var color = {};\ncolor.payload = {\"ch0\":254,\"ch1\":254,\"ch2\":0}; //ch0 = red, ch1 = green, ch2 = blue\nreturn color;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":380,"wires":[["e371fd21.478a3"]]},{"id":"4522652d.62aa7c","type":"ui_button","z":"59857715.c357f8","name":"","group":"53fdc851.4112e8","order":5,"width":0,"height":0,"passthru":false,"label":"Yellow","color":"black","bgcolor":"yellow","icon":"","payload":"","payloadType":"str","topic":"","x":210,"y":380,"wires":[["1e3e436a.08a15d"]]},{"id":"6d97b86d.a9cfa8","type":"function","z":"59857715.c357f8","name":"Cyan","func":"var color = {};\ncolor.payload = {\"ch0\":0,\"ch1\":254,\"ch2\":254}; //ch0 = red, ch1 = green, ch2 = blue\nreturn color;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":340,"wires":[["e371fd21.478a3"]]},{"id":"cb466bc8.1bff18","type":"ui_button","z":"59857715.c357f8","name":"","group":"53fdc851.4112e8","order":6,"width":0,"height":0,"passthru":false,"label":"Cyan","color":"black","bgcolor":"cyan","icon":"","payload":"","payloadType":"str","topic":"","x":210,"y":340,"wires":[["6d97b86d.a9cfa8"]]},{"id":"f5726d05.e3767","type":"vertex action","z":"59857715.c357f8","name":"","typeButton":"single","bPayload":{"action":"setbrightness","group":"cb57c871e25105f50c764ad4362863d6","param":"7","priority":"254"},"bState":"","defaultpriority":true,"x":990,"y":320,"wires":[["b26b817.6b9de8"]]},{"id":"e371fd21.478a3","type":"link out","z":"59857715.c357f8","name":"","links":["a36ba901.56ecb8"],"x":775,"y":380,"wires":[]},{"id":"a36ba901.56ecb8","type":"link in","z":"59857715.c357f8","name":"","links":["e371fd21.478a3"],"x":855,"y":380,"wires":[["f5726d05.e3767","c87c7e9e.85f0e"]]},{"id":"b26b817.6b9de8","type":"vertex cluster","z":"59857715.c357f8","rate":90,"x":1240,"y":380,"wires":[]},{"id":"1279517a.404cff","type":"comment","z":"59857715.c357f8","name":"Specify RGB values","info":"","x":430,"y":140,"wires":[]},{"id":"678b3439.fab8dc","type":"comment","z":"59857715.c357f8","name":"Configure Vertex action nodes","info":"","x":980,"y":280,"wires":[]},{"id":"38e1c077.3973d","type":"ui_template","z":"59857715.c357f8","group":"160ddf0a.756f41","name":"zoom and minimalize protection","order":1,"width":0,"height":0,"format":"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" /> \n<meta name=\"HandheldFriendly\" content=\"true\" /> ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":810,"y":180,"wires":[[]]},{"id":"c87c7e9e.85f0e","type":"vertex action","z":"59857715.c357f8","name":"","typeButton":"directv","bPayload":{"action":"setprimaryn","group":"cb57c871e25105f50c764ad4362863d6","param":0,"priority":"254"},"bState":"","defaultpriority":true,"x":990,"y":380,"wires":[["b26b817.6b9de8"]]},{"id":"53fdc851.4112e8","type":"ui_group","name":"RGB-valaisimet","tab":"e33645c.88afcb8","order":1,"disp":true,"width":"6","collapse":false},{"id":"160ddf0a.756f41","type":"ui_group","name":"Secure","tab":"f83ce942.20d488","order":1,"disp":true,"width":"6"},{"id":"e33645c.88afcb8","type":"ui_tab","name":"RGB-valaisimet","icon":"dashboard"},{"id":"f83ce942.20d488","type":"ui_tab","name":"Home","icon":"home","order":1}]

Step-by-step instructions

Find the following nodes in the palette on the left side of the Node-RED, drag them to your workspace, name them and connect as shown.

Link in & Link out
dashboard button → User control from web browser
function
Vertex action
Vertex cluster
template - zoom and minimalize protection

Each button in the user app is assigned to a specific function setting a given color. In function nodes (Red, Green, Blue, etc.) the variable color is created and we assign the color.payload with the appropriate color configuration. Set the properties of each button. Go to On Message tab [1] and enter JSON script as below. ch0 we can set red color value from 0 to 254. Similarly ch1 is or green color and ch2 for blue [2].
Configure vertex action nodes as shown below:

First vertex action node is responsible for setting the RGB led brightness. Select single button option [3]. Set the group and action [4]. Enter a brightness value that suits you best [5].

The second action node translates the RGB value for the appropriate Vertex controller command. Set Direct value at Mode option [6]. As action select Set primary n and select the group of your RGB [7].

Import the Template node attached below. It will prevent from accidental zooming or exiting the app.
[{"id":"38e1c077.3973d","type":"ui_template","z":"207fbddc.b61a52","group":"160ddf0a.756f41","name":"zoom and minimalize protection","order":1,"width":0,"height":0,"format":"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" /> \n<meta name=\"HandheldFriendly\" content=\"true\" /> ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":730,"y":180,"wires":[[]]},{"id":"160ddf0a.756f41","type":"ui_group","name":"Secure","tab":"f83ce942.20d488","order":1,"disp":true,"width":"6"},{"id":"f83ce942.20d488","type":"ui_tab","name":"Home","icon":"home","order":1}]
Final Dashboard