Create a dashboard for IoT with Node-RED. Part 1: button, list, switch, slider, form, input field

12 February 2021
No Comments
8 minutes

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
Email
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…).