Create a simple and functional user app 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 control for a single group using 2 buttons, one for ON and the second for OFF. You will also use a slider for smooth brightness change.
Flow
| Code Block |
|---|
[{"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}] |
Instructions
Find the following nodes in the Node-RED palette:
Button x2
Slider
Vertex action x2
Vertex cluster
2. Select button and slider nodes and drag & drop them onto the workspace. Copy the button node as we need 2 such nodes.
3. Find vertex action and vertex cluster node and drop them onto the workspace.
4. Copy vertex action node. The first and second vertex action node will be used for turning ON and OFF the luminaire group. The third vertex action will be used for dimming up and down the lighting using a slider.
5. Edit button nodes:
select the group for now as [Home] Default
adjust the size of the button
change the Label to ON or OFF
set the Payload type using the dropdown to String (“az”) and the Payload to ON or OFF.
select Done in the upper-right corner of the screen.
Configuration of the button ON. For the OFF button, you should type OFF as a label and payload. The rest of the group should be added automatically after setting the first one.
6. Edit the slider node:
select the same group as in button nodes
adjust the size of the slider
change the Label to e.g. Brightness
define the Range as e.g. from 0 to 100 with a step equal to 1
select Done in the upper-right corner of the screen.
Configuration of the slider
7. Configure the vertex action nodes. The first one, for the button ON should be configured as below:
Vertex action for the button OFF:
Vertex action for the slider:
8. Link all the nodes together and select the Deploy button.
9. Checking the application within the browser:
Find the dashboard tab on the right-hand side of the screen
Select the icon (highlighted in red on the picture below)
You will then see the app as a web page.
| Info |
|---|
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. |