Node-RED module Dashboard: Add a GUI (part 1) [Exclusive Guide]

2:15 pm November 28, 201611218

module Dashboard 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.

node-red dashboard library
If you are using IU (node-red-contrib-ui), you must uninstall it already. Since the Terminal

 cd npm uninstall node-red-contrib-ui ~/.node-red 

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

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

node-red dashboard palette 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)
  • stealth 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 

in this tutorial we will explore the

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 f-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

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 (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 (name) and possibly one icon (see below 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
  • the 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 (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 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, pr 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

got button

node-red dashboard bouton

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

node-red dashboard liste de choix dropdown

the choice list obtained

node-red dashboard dropdown

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 switch

as well as the swtich, 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

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

node-red dashboard numeric numerique

the resulting numeric field

node-red dashboard numeric

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 (password)

in this case the characters are masked.

node-red dashboard saisie mot de passe password

(color picker) color picker

he reference the color in hexadecimal format code. It uses the color selectorEUR of the system.

node-red dashboard selecteur couleur color picker.

Email address

practice, this field verifies that the email entered is correct.

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 (text)
  • number (Number)
  • Email (E-mail)
  • password (Password)
  • check box (Checkbox)
  • switch (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

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.

 / / created a variable to store the dashboard if non-existent journal / / Initializes the counter to 0 if it does not exist already var dashboardLog = context.get ('dashboardLog'). [];

dashboardLog.push (msg);
If (dashboardLog.length > 20) {/ / deletes the oldest message if > 20 / / Delete oldest message if > 20 dashboardLog.shift ();}
    dashboardLog.length = 20;
} / / Saves the messages of the dashboard for the next display / / store the value back context.set ('dashboardLog', dashboardLog);

Shows the log messages / / make it part of the outgoing msg msg object = {};
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.

 
  • {{x.topic}}
    • {{x.payload}}

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

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": "Pick list", "label": "Choose what you want", "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 ":"Pick list","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":"Textinputfield""x":320"y":300"wires":[["1e96adb5.fd25e2"]]}, {"id": "3375a2e.57b475e", "type": "ui_form", "z": "df9159f.e304ea8", "name" ":""," label ":"A form 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": {"Text"": "","number" ":""," email "": "","password" ":""," checkbox ": false,"Switch": false},"payload"": "","topic": "Form", "x": 310, "y": 460, "wires": [["1e96adb5.fd25e2"]]}, {"id": "1e96adb5.fd25e2", "type": "function", "z": "df9159f.e304ea8", "name" : "Record the events","func": "/ / created a variable to store the dashboard log if inexistanten / / Initializes the counter to 0 if it does not exist alreadynvar dashboardLog = context.get ('dashboardLog') |" [];nndashboardLog.push(msg);nif (dashboardLog.length > 20) {n / / Deletes the oldest message if > 20n / / Delete oldest message if > 20n dashboardLog.shift (); n dashboardLog.length = 20; n} nn// recorded messages of the dashboard for the next affichagen / / store the value backncontext.set('dashboardLog',dashboardLog);nn// displays the messagesn journal / / make it part of the outgoing msg = {} objectnmsg "; 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 of the event of the Dashboard", "order": 1, "width": "8", "height": "10", "size": "
    n
  • n {{x.topic}} n
      n
    • {{x.payload}}
    • n
    n
  • n
","storeOutMessages": true, "fwdInMessages": true, "x": 970, "y": 320, "wires": [[]]}, {"id" {["":"87bf88d1fbd678""type":"ui_text_input""z":"df9159fe304ea8""name":"""label":"Email""groupentryfield":"2a5abbd3afa284""order":0"width":0"height":0"passthru":true"mode":"email""delay":300"topic":"Entryfieldemail""x":330"y":340"wires":[["1e96adb5.fd25e2"]]}, {"id": "55e7b58f.cafe6c", "type": "ui_text_input", "z": "df9159f.e304ea8", "name" ":""," label ":"Field enter password "," group":"2a5abbd3.afa284","order": 0,"width": 0,"height": 0,"passthru": true,"mode":"password","delay": 300,"topic":"Password entry field"} {["x":300"y":380"wires":[["1e96adb5.fd25e2"]]}, {"id": "21feb1b7.018a5e", "type": "ui_text_input", "z": "df9159f.e304ea8", "name" ":""," label ":"Color picker","group":"2a5abbd3.afa284","order": 0,"width": 0,"height": 0,"passthru": true,"mode":"color","delay": 300,"topic":"Color picker","x": 320,"y": 420,"wires": [["1e96adb5.fd25e2"]]}, {"id":"2a5abbd3.afa284","type":"ui_group","z"": "","name": "Input Elements", "tab": "99f501d2.56c31", "order": 1, "disp": true, "width": "8"}, {"id": "febe591f.8ca1f8", "type": "ui_group"} [{"", "z": "","name": "Form", "tab": "99f501d2.56c31", "order": 2, "disp": true, "width": "8"}, {"id": "842b8d23.22294", "type": "ui_group", "z": "df9159f.e304ea8", "name": "Journal of the events of the Dashboard", "tab": "99f501d2.56c31", "order": 3, "disp": true, "width": "8"}, {"id": "99f501d2.56c31", "type": "ui_tab", "z" ":""," name ":"Main view","icon":"home","order": 2}]

in the second part, we will see how to integrate output elements (gauges, graphs notifications…).