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

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

node-red dashboard library
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 .

node-red dashboard installation palette manager

Then click install to install the module. At the end of the installation, refresh the display of the browser.

Graphics elements provided by Dashboard

node-red dashboard paletteThe 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 .

node-red dashboard font awesome
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”.

node-red dashboard icons material design google

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.

node-red dashboard icone klarsys

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 .

node-red affichage onglet 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.

node-red dashboard onglet ajout tab

Open the editing window by pressing edit .

https://i2.wp.com/www.projetsdiy.fr/wp-content/uploads/2016/11/2-node-red-dashboard-edit-tab.png?resize=298%2C66

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.

node-red-dashboard-edition-tab-ecran-principal

Add now 3 groups

node-red-dashboard-ecran-ajouter-groupe

And open the editing window

node-red-dashboard-edit-group

Give the following names to groups:

  • Elements of entries
  • Form
  • Dashboard event log

node-red-dashboard-edition-groupe

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.

node-red-dashboard-taille-groupe

You can reorder the groups in a Tab, move them one tab to another and reorder the Tab and using the handle.

node-red-dashboard-reorganisation-ordre-groupes

The group is now ready.

node-red-dashboard-groupes-configures

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

node-red dashboard button bouton

Example of button

node-red dashboard bouton

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

node-red dashboard liste de choix dropdown

The choice list obtained

node-red dashboard dropdown

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.

node-red dashboard switch interrupteur

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)

node-red dashboard switch autres types

The switch got

node-red dashboard switchSlider

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

node-red dashboard slider potentiometre

The slider got

node-red dashboard slider

Numeric field

Must be defined a range of entry (min, max).

node-red dashboard numeric numerique

The resulting numeric field

node-red dashboard numeric

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.

node-red dashboard saisie texte

Text

Nothing more to say about it.

node-red dashboard text saisie texte

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.

node-red dashboard selecteur couleur color picker.

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.

node-red dashboard form formulaire

Here is the resulting form.

node-red dashboard formulaire 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!

32-node-red-dashboard-test

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

 

Subscribe to the weekly newsletter

No spam and no other use will be made of your email. You can unsubscribe anytime.

We will be happy to hear your thoughts

Leave a Reply

DIY Projects