Node-RED Dashboard module allows you to very easily add a (very nice) graphic interface to a Node-RED project. The Dashboard module succeeds UI module . With this module you can add displays to view various forms of action: gauges, chart, text, notification, or the free HTML code. You can also add fields to interactions: button, switch, slider (slider), input field (text or digital), list of choice and forms.
Install Node-RED Dashboard Module
If you are using IU (node-red-contrib-ui), you must uninstall it already. Since the Terminal
cd ~/.node-red npm uninstall node-red-contrib-ui
You can also uninstall since palette Manager.
Note. To delete all Nodes of the UI module. Start by removing all the tables (Tab) before deleting Nodes, otherwise it is impossible to uninstall the module.
Open the Palette Manager and look for the module using the keyword dashboard .
Then click install to install the module. At the end of the installation, refresh the display of the browser.
Graphics elements provided by Dashboard
The Dashboard module offers the following graphics commands (entered):
- Button (button)
- List of choices (dropdown)
- Switch 2 States (switch)
- Horizontal slider (slider)
- Digital selector (numeric)
- Input field for text (text input)
- Form (form)
As well as the following displays (outputs) :
- Text (text)
- Gauge (gauge)
- Graphic (chart)
- Notification (notification)
- Change of page (tab) (ui control)
- Display of HTML (template)
You can access the GUI with the URL
http://IP_NODERED:1880/dashboard
Part 1: Discovering Dashboard Commands
In this tutorial we will explore the commands provided by this module.
How to customize icons
Before entering the heart of the matter, let’s see how to use icons. Several icons Open Source libraries can be used to customize the display of the components.
The most well-known are Awesome (http://fontawesome.io/icons/). The newer versions are not supported (4.7 and 5), but there are many others! To use an Awesome font, add fa – in front of the name of the icon. For example fa-fire .
Material Design ( https://material.io/icons/ ) is an Open Source project supported by Google. To use an icon, replace spaces by _, for example “account balance wallet”, enter “account_balance_wallet”.
You can use the library of Open Source icons for projects AngularJS of Klarsys ( https://klarsys.github.io/angular-material-icons/ ). Use the icon name.
Create Tabs
It is possible to create groups and pages directly from the control panel of each Node of the dashboard. When the module is discovered, it is much easier and clearer to go through the range of configuration which is added next to the console (debug). If the Panel is not visible (or if you closed it), go to the View menu then and finally dashboard .
Choose a title. It will be displayed as the title of the page in the header of the Web browser. You can choose between two themes, dark with a black background (Dark) or clear with a white background, the graphic elements in blue (Light).
click + tab to add a page.
Open the editing window by pressing edit .
Give a name and possibly one icon (see before how to do). Save with Done or Update . Here we give the main screen name and the home icon.
Add now 3 groups
And open the editing window
Give the following names to groups:
- Elements of entries
- Form
- Dashboard event log
Leaving the size of each widget is set automatically but in some cases you will need to change it by hand with the parameter Width.
You can reorder the groups in a Tab, move them one tab to another and reorder the Tab and using the handle.
The group is now ready.
Now, let’s add one control items proposed by the module and find out what they allow and available parameters. You will assign each element to the group ‘Elements of entry’, except the form that you will assign to the group “form.
Button
Button settings
- Group: display group.
- Size : size of the element. Auto default
- Icon : displays an icon to the left of the text
- Label : the button
- Colour : color of the text (in hexa, for example #8000ff)
- Payload : output value when you press on the button (true, false)
- Topic : label
- Name : name of the Node that is displayed on the Node-RED flow
Example of button
Dropdown (list of choice)
The Dropdown (choice list) element allows the user to return 3 types of data:
- A string
- A whole digital value
- A Boolean
The Node can also be transparent and let an incoming message. For this, you must check the box “If msg can we input, pass trough to output”.
The choice list obtained
Switch
the horizontal switch allows to return a Boolean when it changes state. It is possible to reverse the Boolean value by selecting by inverting the output value depending on the State On and Off.
It is also possible to have other types of output (other than the payload):
- A Flow
- Store the State in a global variable (Global)
- A string of characters (String)
- A number (Number)
- A JSON object
- the date and time of the action (timestamp)
The switch got
Slider
As well as the switch, the slider can pass an incoming transparent message (check if msg come…).
The slider takes as a parameter the minimum value (min), maximum (max) and not (step).
The slider got
Numeric field
Must be defined a range of entry (min, max).
The resulting numeric field
Text field
This field offers 4 input masks. If a delay (delay) is specified (default 300ms), the Node reference value entered automatically. It is convenient for use on tablet. If period is zero (0), then confirm the entry by pressing the Enter key.
Text
Nothing more to say about it.
Password
In this case the characters are masked.
Color picker
It return the color in hexadecimal format code. It uses the color selector of the system.
Email address
This field check that the email entered is correct.
Form
Last big piece of the Dashbord, the form . It is a component really very powerful and very simple to implement.
As usual, denominated one (Label) can give a type that will be displayed in the header. Are ‘stacked’ then the elements in the form (Form elements). It for the following choices:
- Text
- Number
- Password
- Checkbox
- Switch
You can make each mandatory element (Required) before the release of the form.
Here is the resulting form.
Bonus: create an event log
Now let’s see what it looks like. I offer you a small piece of code that stores all events and posters in the form of an event log (log) in a global variable.
Add a function Node and paste this code. Events on the interface is stored in a global variable. We delete messages beyond 20 records.
// initialise the counter to 0 if it doesn't exist already var dashboardLog = context.get('dashboardLog')|| []; dashboardLog.push(msg); if (dashboardLog.length > 20){ // Delete oldest message if > 20 dashboardLog.shift(); dashboardLog.length = 20; } // store the value back context.set('dashboardLog',dashboardLog); // make it part of the outgoing msg object msg = {}; msg.payload = dashboardLog; return msg;
Add an HTML Node and paste this code. AngularJS ng-repeat class is used to browse the array returned by the previous function. We created a label in red with the topic. Next to a chip (ul), it displays the value returned by the event of the Dashboard.
<ul> <li ng-repeat="x in msg.payload"> <font color="red">{{x.topic}}</font> <ul> <li>{{x.payload}}</li> </ul> </li> </ul>
Now, you can go to the Dashboard by typing the address http://IP_NODERED:1880 / ui
For you to test now!
Code of the flow
Paste the code from this flow to quickly test this example.
[{"id":"6eecf682.454f38","type":"ui_button","z":"df9159f.e304ea8","name":"Boutton","group":"2a5abbd3.afa284","order":0,"width":0,"height":0,"label":"Boutton","color":"#fffff","icon":"fa-star","payload":"true","payloadType":"bool","topic":"Button","x":360,"y":100,"wires":[["1e96adb5.fd25e2"]]},{"id":"2a0c052c.dfe4ca","type":"ui_dropdown","z":"df9159f.e304ea8","name":"Liste de choix","label":"Choisissez ce que vous voulez","group":"2a5abbd3.afa284","order":0,"width":0,"height":0,"passthru":true,"options":[{"label":"Choix 1 : chaine","value":"Choix1","type":"str"},{"label":"Choix 2 : numérique","value":4,"type":"num"},{"label":"Choix 3 : bool","value":true,"type":"bool"}],"payload":"","topic":"Liste de choix","x":340,"y":140,"wires":[["1e96adb5.fd25e2"]]},{"id":"61be9b53.3a5ff4","type":"debug","z":"df9159f.e304ea8","name":"Dashboard Log","active":true,"console":"false","complete":"payload","x":900,"y":220,"wires":[]},{"id":"e7869632.cb19b8","type":"ui_switch","z":"df9159f.e304ea8","name":"Interrupteur","label":"switch","group":"2a5abbd3.afa284","order":0,"width":0,"height":0,"passthru":true,"topic":"Interrupteur","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":350,"y":180,"wires":[["1e96adb5.fd25e2"]]},{"id":"6f4d5597.73fb0c","type":"ui_slider","z":"df9159f.e304ea8","name":"Slider","label":"slider","group":"2a5abbd3.afa284","order":0,"width":0,"height":0,"passthru":true,"topic":"Slider","min":0,"max":10,"step":1,"x":370,"y":220,"wires":[["1e96adb5.fd25e2"]]},{"id":"93c06deb.61b61","type":"ui_numeric","z":"df9159f.e304ea8","name":"","label":"numeric","group":"2a5abbd3.afa284","order":0,"width":0,"height":0,"passthru":true,"topic":"Numérique","format":"{{value}}","min":0,"max":10,"x":360,"y":260,"wires":[["1e96adb5.fd25e2"]]},{"id":"8f5cb4d9.8208a8","type":"ui_text_input","z":"df9159f.e304ea8","name":"","label":"Champ saisie de Texte","group":"2a5abbd3.afa284","order":0,"width":0,"height":0,"passthru":true,"mode":"text","delay":"0","topic":"Champ saisie de Texte","x":320,"y":300,"wires":[["1e96adb5.fd25e2"]]},{"id":"3375a2e.57b475e","type":"ui_form","z":"df9159f.e304ea8","name":"","label":"Un formulaire Node-RED","group":"febe591f.8ca1f8","order":0,"width":0,"height":0,"options":[{"label":"Du texte","value":"Texte","type":"text","required":true},{"label":"Un nombre","value":"Nombre","type":"number","required":false},{"label":"Un email","value":"email","type":"email","required":false},{"label":"Un mot de passe","value":"Mot de passe","type":"password","required":false},{"label":"Une case à cocher","value":"Case à cocher","type":"checkbox","required":false},{"label":"Un interrupteur","value":"Interrupteur","type":"switch","required":false}],"formValue":{"Texte":"","Nombre":"","email":"","Mot de passe":"","Case à cocher":false,"Interrupteur":false},"payload":"","topic":"Formulaire","x":310,"y":460,"wires":[["1e96adb5.fd25e2"]]},{"id":"1e96adb5.fd25e2","type":"function","z":"df9159f.e304ea8","name":"Enregistre les événements","func":"// Créé une variable pour stocker le journal du dashboard si inexistante\n// initialise the counter to 0 if it doesn't exist already\nvar dashboardLog = context.get('dashboardLog')|| [];\n\ndashboardLog.push(msg);\nif (dashboardLog.length > 20){\n // Supprime le plus anciens message si > 20\n // Delete oldest message if > 20\n dashboardLog.shift();\n dashboardLog.length = 20;\n} \n\n// Enregistre les messages du dashboard pour le prochain affichage\n// store the value back\ncontext.set('dashboardLog',dashboardLog);\n\n// Affiche le journal des messages\n// make it part of the outgoing msg object\nmsg = {};\nmsg.payload = dashboardLog;\nreturn msg;\n","outputs":1,"noerr":0,"x":660,"y":280,"wires":[["61be9b53.3a5ff4","7a421874.47f638"]]},{"id":"7a421874.47f638","type":"ui_template","z":"df9159f.e304ea8","group":"842b8d23.22294","name":"Journal des événement du Dashboard","order":1,"width":"8","height":"10","format":"<ul>\n <li ng-repeat=\"x in msg.payload\">\n <font color=\"red\">{{x.topic}}</font>\n <ul>\n <li>{{x.payload}}</li>\n </ul>\n </li>\n</ul>","storeOutMessages":true,"fwdInMessages":true,"x":970,"y":320,"wires":[[]]},{"id":"87bf88d.1fbd678","type":"ui_text_input","z":"df9159f.e304ea8","name":"","label":"Champ saisie email","group":"2a5abbd3.afa284","order":0,"width":0,"height":0,"passthru":true,"mode":"email","delay":300,"topic":"Champ saisie email","x":330,"y":340,"wires":[["1e96adb5.fd25e2"]]},{"id":"55e7b58f.cafe6c","type":"ui_text_input","z":"df9159f.e304ea8","name":"","label":"Champ saisie mot de passe","group":"2a5abbd3.afa284","order":0,"width":0,"height":0,"passthru":true,"mode":"password","delay":300,"topic":"Champ saisie mot de passe","x":300,"y":380,"wires":[["1e96adb5.fd25e2"]]},{"id":"21feb1b7.018a5e","type":"ui_text_input","z":"df9159f.e304ea8","name":"","label":"Sélecteur de couleur","group":"2a5abbd3.afa284","order":0,"width":0,"height":0,"passthru":true,"mode":"color","delay":300,"topic":"Sélecteur de couleur","x":320,"y":420,"wires":[["1e96adb5.fd25e2"]]},{"id":"2a5abbd3.afa284","type":"ui_group","z":"","name":"Eléments d'entrée","tab":"99f501d2.56c31","order":1,"disp":true,"width":"8"},{"id":"febe591f.8ca1f8","type":"ui_group","z":"","name":"Formulaire","tab":"99f501d2.56c31","order":2,"disp":true,"width":"8"},{"id":"842b8d23.22294","type":"ui_group","z":"df9159f.e304ea8","name":"Journal des événements du Dashboard","tab":"99f501d2.56c31","order":3,"disp":true,"width":"8"},{"id":"99f501d2.56c31","type":"ui_tab","z":"","name":"Ecran Principal","icon":"home","order":2}]
In the second part, we will see how to integrate output elements (gauges, charts, notifications…).
- Xiaomi Mijia Honeywell Smoke Detector Test with Domoticz, Emergency Notification with PushOver
- Test Zigbee2MQTT gateway. Part 2, include Xiaomi Aqara or Mijia accessories to Domoticz with Node-RED
- #Test Zigbee2MQTT project, hack of the Xiaomo Aqara Smart Home Gateway. Part 1: assembly, demo with Node-RED, 3D printed case [update]
- Install Node-RED on Raspbian Jessie Lite on a Raspberry Pi Zero W
- Node-RED + MQTT + ESP8266: how to drive an articulated PTZ system in WiFi
- Orange Pi: test of the OPI.GPIO package for Node-Red (node-red-contrib-opi-gpio)