User control from web browser
- Mateusz Borycki (Unlicensed)
- Joanna Kozakiewicz
- Katarzyna Stodolny
Create a simple and functional user control site using Node-RED. Choose from several standard elements like buttons, switches, sliders, etc. to create an application that you will run on your tablet.
In this guide, you will see how to create a simple controller for a single group using 2 buttons: ON/OFF and use a slider for smooth brightness change.
Import the ready made flow using the instructions here: Importing a Node-RED flow or follow the instructions below.
[{"id":"27f2e3182035a738","type":"ui_button","z":"2560f3f71e3c9d1e","name":"","group":"74521315d869b5b8","order":1,"width":0,"height":0,"passthru":false,"label":"OFF","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"OFF","payloadType":"str","topic":"topic","topicType":"msg","x":450,"y":260,"wires":[["3f7dd2164dc3b2c7"]]},{"id":"10ba9d2ed9f6bc41","type":"ui_slider","z":"2560f3f71e3c9d1e","name":"","label":"Brightness","tooltip":"","group":"74521315d869b5b8","order":2,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":470,"y":380,"wires":[["34db8e417ac9a9cb"]]},{"id":"03a0a5cb6f161d81","type":"ui_button","z":"2560f3f71e3c9d1e","name":"","group":"74521315d869b5b8","order":0,"width":0,"height":0,"passthru":false,"label":"ON","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"ON","payloadType":"str","topic":"topic","topicType":"msg","x":450,"y":200,"wires":[["d599ac5e7b69b1c0"]]},{"id":"d599ac5e7b69b1c0","type":"vertex action","z":"2560f3f71e3c9d1e","name":"ON","typeButton":"single","bPayload":{"action":"maxlevel","group":"7366e2b3dd6a53d1f5b01598b018d5f2","param":null,"priority":"254"},"bState":"","defaultpriority":true,"x":720,"y":200,"wires":[["3bbdfa66462cc15a"]]},{"id":"3f7dd2164dc3b2c7","type":"vertex action","z":"2560f3f71e3c9d1e","name":"OFF","typeButton":"single","bPayload":{"action":"off","group":"7366e2b3dd6a53d1f5b01598b018d5f2","param":null,"priority":"254"},"bState":"","defaultpriority":true,"x":720,"y":260,"wires":[["3bbdfa66462cc15a"]]},{"id":"34db8e417ac9a9cb","type":"vertex action","z":"2560f3f71e3c9d1e","name":"Brightness","typeButton":"directv","bPayload":{"action":"setbrightness","group":"7366e2b3dd6a53d1f5b01598b018d5f2","param":0,"priority":"254"},"bState":"","defaultpriority":true,"x":740,"y":380,"wires":[["3bbdfa66462cc15a"]]},{"id":"3bbdfa66462cc15a","type":"vertex cluster","z":"2560f3f71e3c9d1e","rate":90,"x":1030,"y":280,"wires":[]},{"id":"0caa8504b9902e34","type":"comment","z":"2560f3f71e3c9d1e","name":"Buttons - ON/OFF","info":"","x":490,"y":160,"wires":[]},{"id":"c2df35d84f7bc3fc","type":"comment","z":"2560f3f71e3c9d1e","name":"Slider","info":"","x":450,"y":340,"wires":[]},{"id":"438821462d8483e0","type":"comment","z":"2560f3f71e3c9d1e","name":"Vertex action","info":"","x":730,"y":340,"wires":[]},{"id":"31e4766dc6604986","type":"comment","z":"2560f3f71e3c9d1e","name":"Vertex action","info":"","x":730,"y":160,"wires":[]},{"id":"74521315d869b5b8","type":"ui_group","name":"Default","tab":"c277ec2984f43127","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"c277ec2984f43127","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
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.
Button x2
Slider
Vertex action x2
Vertex cluster
Visual input nodes
The first and second vertex action node will be used for turning the luminaire group ON and OFF. The third vertex action will be used for dimming.
Do these steps for both button nodes (ON/OFF):
select the group [1] like [Home] Default
adjust the size of the button [2]
change the Label to ON or OFF [3]
set the Payload type using the dropdown to String (“az”) and the Payload to ON or OFF. [4]
select Done in the upper-right corner of the screen. [5]
Now go to the slider node and set the following parameters:
select the same group [6] as in button nodes.
adjust the size [7] of the slider
change the Label [8] to e.g. Brightness
define the Range [9] as e.g. from 0 to 100 with a step equal to 1
on the Output set only on release. [12]
select Done [11] in the upper-right corner of the screen.
In Output option it’s good to set only on release option. Setting option continuously while sliding may intensify traffic on the DALI bus.
Action nodes
Configure the vertex action nodes. The first one, for the button ON should be configured as below:
Vertex action for the OFF button configuration:
Vertex action for the slider configuration:
Select the Deploy button. The program is ready to go!
Checking the application within the browser:
Find the dashboard tab on the right-hand side tab of the screen [12]
Select the open in browser icon [13], this brings you to the web page. As a programmer you need to copy the link for your users. Note that they will be able to access the site when they are in the same network.
You will then see the app as a web page!
Adjust your application by adding multiple pages (tabs) and change the theme, colour, etc. in the Layout, Theme, and Site tabs under the Dashboard section.
Adding more buttons
To add more button we need to add another dashboard node and connect it to action node just like in button on slider node case.
If we add new dashboard node into our flow and click Deploy we well see on our tablet screen that button appeared under the previous one. To add new column of active elements we need to add new group [6] just like before. We can also add new tab just like we added Home tab. We can also edit everything at Tabs & Links.
Here is an example
[{"id":"b7882007.d53e2","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"56346f86.b3a34","type":"vertex cluster","z":"b7882007.d53e2","rate":90,"x":930,"y":260,"wires":[]},{"id":"d80d6d9c.dad21","type":"ui_button","z":"b7882007.d53e2","name":"","group":"787732cf.c9a35c","order":1,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":310,"y":300,"wires":[["7ad033ee.a5449c"]]},{"id":"af735547.c569e8","type":"ui_slider","z":"b7882007.d53e2","name":"","label":"slider","tooltip":"","group":"61858df5.ef8664","order":1,"width":0,"height":0,"passthru":true,"outs":"end","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"x":310,"y":260,"wires":[["d5170fd4.3034f"]]},{"id":"d5170fd4.3034f","type":"vertex action","z":"b7882007.d53e2","name":"","typeButton":"directv","bPayload":{"action":"setbrightness","group":"26c37731f92bb56b041499872990f95d","param":0,"priority":"254"},"bState":false,"defaultpriority":true,"x":510,"y":260,"wires":[["56346f86.b3a34"]]},{"id":"7ad033ee.a5449c","type":"vertex action","z":"b7882007.d53e2","name":"","typeButton":"toggle","bPayload":{"ON":{"action":"setbrightness","group":"26c37731f92bb56b041499872990f95d","param":"50","priority":"254"},"OFF":{"action":"setbrightness","group":"26c37731f92bb56b041499872990f95d","param":"0","priority":"254"}},"bState":false,"defaultpriority":true,"x":510,"y":300,"wires":[["56346f86.b3a34"]]},{"id":"322febcd.ed3f94","type":"ui_switch","z":"b7882007.d53e2","name":"","label":"switch","tooltip":"","group":"787732cf.c9a35c","order":2,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"x":310,"y":340,"wires":[["1e82bc84.6604d3"]]},{"id":"1e82bc84.6604d3","type":"vertex action","z":"b7882007.d53e2","name":"","typeButton":"single","bPayload":{"action":"maxlevel","group":"26c37731f92bb56b041499872990f95d","param":null,"priority":"254"},"bState":false,"defaultpriority":true,"x":510,"y":340,"wires":[["56346f86.b3a34"]]},{"id":"8f256165.65e4c","type":"ui_colour_picker","z":"b7882007.d53e2","name":"RGB-circle","label":"RGB-circle","group":"ae3e911c.d286a","format":"rgb","outformat":"object","showSwatch":true,"showPicker":true,"showValue":true,"showHue":false,"showAlpha":false,"showLightness":true,"square":"false","dynOutput":"false","order":1,"width":0,"height":0,"passthru":true,"topic":"","topicType":"str","x":330,"y":420,"wires":[["2700ed36.a89562"]]},{"id":"2700ed36.a89562","type":"function","z":"b7882007.d53e2","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":500,"y":420,"wires":[["25173008.b117","1fcd954.b00556b"]]},{"id":"1fcd954.b00556b","type":"vertex action","z":"b7882007.d53e2","name":"","typeButton":"directv","bPayload":{"action":"setprimaryn","group":"b91ffd79-d000-4646-8bb3-4791bca1d35b","param":0,"priority":"254"},"bState":"","defaultpriority":true,"x":690,"y":420,"wires":[["56346f86.b3a34"]]},{"id":"25173008.b117","type":"vertex action","z":"b7882007.d53e2","name":"","typeButton":"single","bPayload":{"action":"setbrightness","group":"b91ffd79-d000-4646-8bb3-4791bca1d35b","param":"100","priority":"254"},"bState":"","defaultpriority":true,"x":690,"y":360,"wires":[["56346f86.b3a34"]]},{"id":"a396b4ae.127e88","type":"ui_template","z":"b7882007.d53e2","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":390,"y":180,"wires":[[]]},{"id":"787732cf.c9a35c","type":"ui_group","name":"First Group","tab":"59142e64.d0852","order":2,"disp":true,"width":"6","collapse":false},{"id":"61858df5.ef8664","type":"ui_group","name":"Secondary Group","tab":"59142e64.d0852","order":2,"disp":true,"width":"6","collapse":false},{"id":"ae3e911c.d286a","type":"ui_group","name":"Another Group","tab":"5ef03b00.ed60f4","order":1,"disp":true,"width":"6","collapse":false},{"id":"160ddf0a.756f41","type":"ui_group","name":"Secure","tab":"","order":1,"disp":true,"width":"6"},{"id":"59142e64.d0852","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"5ef03b00.ed60f4","type":"ui_tab","name":"Secondary Tab","icon":"dashboard","disabled":false,"hidden":false}]
At the bottom we can see that we created two groups in tab Home.
These are our Tabs
We put RGB circle at the secondary tab.