Please be aware that this is a legacy version of the support site. If you have software version 3.1.30 or higher go to MODERN Home

(Classic) User application

Owned by Katarzyna Stodolny
Last updated: Apr 03, 2023
3 min read

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

[{"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

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

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.