RGB color picker

Owned by Jakub Cupiał
Last updated: Mar 21, 2024 by Joanna Kozakiewicz
2 min read

In this article you will learn how to use the RGB color picker in E2D Dashboard. To be able to continue with this article please first complete User control from web browser.

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":"136e1e95.7cda61","type":"comment","z":"59857715.c357f8","name":"Color palette","info":"","x":390,"y":320,"wires":[]},{"id":"8212bbe6.332d78","type":"ui_colour_picker","z":"59857715.c357f8","name":"RGB-circle","label":"RGB-circle","group":"53fdc851.4112e8","format":"rgb","outformat":"object","showSwatch":true,"showPicker":true,"showValue":true,"showHue":false,"showAlpha":false,"showLightness":true,"square":"false","dynOutput":"false","order":9,"width":0,"height":0,"passthru":true,"topic":"","topicType":"str","x":390,"y":380,"wires":[["6d79ce36.e2d0c"]]},{"id":"6d79ce36.e2d0c","type":"function","z":"59857715.c357f8","name":"RGB conversion","func":"var color = {};\nvar red = Math.abs((msg.payload.r-1));\nvar green = Math.abs((msg.payload.g-1));\nvar blue = Math.abs((msg.payload.b-1));\ncolor.payload = {\"ch0\":red,\"ch1\":green,\"ch2\":blue};\nreturn color;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":620,"y":380,"wires":[["6c120f9c.c89e2","7f9c7c3e.d09894"]]},{"id":"7f9c7c3e.d09894","type":"vertex action","z":"59857715.c357f8","name":"","typeButton":"directv","bPayload":{"action":"setprimaryn","group":"cb57c871e25105f50c764ad4362863d6","param":0,"priority":"254"},"bState":"","defaultpriority":true,"x":850,"y":380,"wires":[["93e4f479.706cf8"]]},{"id":"6c120f9c.c89e2","type":"vertex action","z":"59857715.c357f8","name":"","typeButton":"single","bPayload":{"action":"setbrightness","group":"cb57c871e25105f50c764ad4362863d6","param":"3","priority":"254"},"bState":"","defaultpriority":true,"x":850,"y":320,"wires":[["93e4f479.706cf8"]]},{"id":"93e4f479.706cf8","type":"vertex cluster","z":"59857715.c357f8","rate":90,"x":1100,"y":380,"wires":[]},{"id":"3c7f133b.e022ec","type":"comment","z":"59857715.c357f8","name":"Configure Vertex action nodes","info":"","x":840,"y":280,"wires":[]},{"id":"f94167ee.5de948","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":570,"y":220,"wires":[[]]},{"id":"135b12c.017a4ed","type":"comment","z":"59857715.c357f8","name":"template for preventing unexpected zooming ","info":"","x":610,"y":180,"wires":[]},{"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

  1. 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.

  • Color picker

  • Function

  • Vertex action

  • Vertex cluster

  • Template for preventing unexpected zooming and minimizing

 

  1. RGB conversion function outputs properly rescaled RGB values corresponding with the placement of your mouse cursor on the circle color picker.

    Enter code given below into On Message [1] tab in function node.

    var color = {}; var red = Math.abs((msg.payload.r-1)); var green = Math.abs((msg.payload.g-1)); var blue = Math.abs((msg.payload.b-1)); color.payload = {"ch0":red,"ch1":green,"ch2":blue}; return color;

  1. Configure Vertex action node 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].

  1. 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}]

  1. Final Dashboard

 

  1. Link all nodes together and click Deploy and test your flow.