Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Current »

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

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.

  • Colour 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.

  • No labels