HowTo: Node Red – Creating a User Interface with Dashboard Nodes

Posted on by

I don’t know if dashboards are THE means to make a nerd’s heart beat faster, but they are certainly one way to make a nerd’s heart beat faster. For those who grew up with StarTrek and Co., dashboard-like overviews in the form of diagrams and graphics are the epitome of technology. This feeling can now be prepared with NodeRed thanks to certain nodes.

Because once you have your SmartHome so far that it collects all sorts of data about your own four walls, you naturally want to present it. But how? After all, you can’t just stick this data into a photo album like the last vacation photos.

A simple and also informative and decorative way is to present the existing data via the dashboard node for NodeRed. In addition to various display elements, this also offers the option of interacting with your SmartHome system. So you can set values, flip virtual switches, trigger actions and simultaneously monitor their status.

An overview of the various functions of the dashboard node can be found in the following article

Hints for our lovely english readers: Basically, many of the articles on Nerdiy.de are translations from the original german articles. Therefore, it may happen here and there that some illustrations are not available in english and that some translations are weird/strange/full of mistakes or generally totaly wrong. So if you find some obvious (or also not obvious) mistakes don't hesitate to leave us a hint about that in the comment section. 
Also please don't get confused, that instead of a "dot" often a "comma" is used as decimal separator. 🙂

Safety instructions

I know the following hints are always a bit annoying and seem unnecessary. But unfortunately, many people who knew it "better" from carelessness lost their eyes, fingers or other things or hurt themselves. In comparison, a loss of data is almost not worth mentioning, but even these can be really annoying. Therefore, please take five minutes to read the safety instructions. Even the coolest project is worth no injury or other annoyance. https://www.nerdiy.de/en/sicherheitshinweise/

Affiliate links / advertising links

The links to online shops listed here are so-called affiliate links. If you click on such an affiliate link and shop via this link, Nerdiy.de receives a commission from the online shop or provider concerned. The price doesn't change for you. If you do your purchases via these links, you will support Nerdiy.de in being able to offer further useful projects in the future. 🙂

Requirements

Helpful articles:
So that you can install new nodes, NodeRed should of course already be installed.
How to prepare a RaspberryPi and then install NodeRed on it is described in the following articles.

The following three articles describe what to do to prepare the RaspberryPi so far:
RaspberryPi – set up for nerdies!
RaspberryPi – the first configuration!
RaspberryPi – Control the RaspberryPi via SSH
NodeRed – Installation of NodeRed on the RaspberryPi
NodeRed – Install new nodes

Tools required:
-no-

Required material:

In the following list you will find all the parts you need to implement this article.

Log in to the NodeRed configuration interface

Before you can edit your NodeRed configuration you must - if activated - first log in to the NodeRed configuration interface.

View of the login screen. Here you have to enter the login details that you entered during the configuration of the login. Information about this can be found in the article NodeRed - User Login Setup.

Install the dashboard node

So that you can use the dashboard nodes you need to install the node

node-red-dashboard
How your node is installed is described in the article NodeRed – Install new nodes.
View during the installation of the node “node-red-dashboard”.

Overview of the available input and output nodes

By installing the dashboard nodes, you receive a whole package of additional nodes that are suitable for displaying and entering different values from and to your NodeRed. As usual, these are displayed in the node palette in the left area of the configuration menu. Details on the individual nodes are listed below.

View of the dashboard nodes in the node palette.

Button node and positioning of the elements in the dashboard

The first and simplest node is the “button node”. With this you can position a button on your dashboard. This then works like a button in the real world. If it is clicked, it sends an adjustable value and an adjustable topic to the linked node.

For example, button nodes can be used very well to trigger actions. For example, you can switch lamps on and off.

Before you can use the button node, it must first be positioned on the layout grid of the dashboard.

In addition to the functions of the actual nodes, the positioning on the layout of the later dashboard can also be configured. The dashboard is therefore a separate website that can be managed centrally via the dashboard configuration.

By installing the dashboard nodes, a new tab was added in the left configuration area. You can recognize it by the icon based on a bar chart. Click on it to open the basic configuration of the dashboard.

Here you can see the different tabs “Layout”, “Theme” and “Site” in the upper area. To the right is an arrow pointing up and to the right. If you click on this, you will be redirected to the website of the dashboard.

You reach the dashboard page by clicking on the symbol marked with the pointer in the dashboard tab.

Alternatively, you can also select the dashboard page directly. All you have to do is add a “/ui/” to the address of your NodeRed configuration page. For example, is the address to your NodeRed configuration page
https:// 192.168.172.5:1880
then the address to your dashboard is
https:// 192.168.172.5:1880/ui/

The first thing is to divide the layout. With its help you can position the respective input and output elements (dashboard nodes) almost freely on the dashboard. The dashboard offers the possibility to combine individual dashboard nodes in groups. The display order of these nodes can then be set on the dashboard. In addition, these grouped nodes can or must be assigned to a specific “tab”.

In addition to the “Home” tab, you can also create other tabs. This is practical, for example, to also virtually separate the elements in different rooms from one another in a smart home system. So you can summarize all sensors and actuators of the living room in a tab called “Living room”. This simplifies the overview and brings structure to the often rapidly increasing number of nodes.

This is also what you can see and set in the “Layout” tab of the dashboard configuration. All tabs and the associated groups are displayed there. In the screenshot below

“Layout” area of the dashboard configuration. Here you can see a part of the individual tabs (in this example “Home”, “Raspi data”, “Settings” and “Tasmota status”). The groups can also be identified. For example, the “Raspi data” tab includes groups “1” and “2”. Each group then contains the actual dashboard elements assigned to it. You can make this visible by clicking on the small arrow pointing to the right.
View of the “Theme” tab of the dashboard configuration. Here you can set the style, the base color and the font used on the dashboard.
On the “Site” tab of the dashboard configuration you can also set the title of the dashboard page and other options.

Another example:

On this layout overview you can see that there are two tabs with the names “Settings” and “Home”. On the “Einstellungen” tab you will find, for example, the various groups such as “Server”, RasPi “or” Status “. On the” Home “tab, on the other hand, you will only find the group” Default “. In the opened group” Server “you can then see how the individual elements such as “restart server” or “switch off screen” are arranged.
You can now find these tabs and groups on the dashboard view. In the view shown you are on the “Einstellungen” tab. The first red frame marks the “Server” group. The “LED Stripe” group is marked with the second red frame. The large red arrow on the left also marks the symbol that you have to click to switch to another tab.
If you click on this symbol, all available tabs – in this case “Einstellungen” and “Home” – will be displayed.

The button node

The button node is one of the very simple nodes. You can use it to build virtual buttons. To do this, drag the button node from the Node palette to the NodeRed configuration area. If you now double click on the node, the following options can be configured.

“Group” defines in which group and which tab the button is positioned. In this example, the button is positioned in the “TestTab” tab in the “TestGroup” group. With “Size” you can set the size of the button. You can see an example of different sizes below in the article. Using the “Icon” setting, icons can also be shown on the button. To get a selection of the available icons you just have to click on the link “Material Design icon” in the info bar on the right. “Label” indicates the text of the button. “With” Color “and” Background “you can set the color of the button and the button text. The setting for” Payload “and” Topic “defines which value (Payload) is sent via which topic as soon as the button is pressed. Last but not least, a very important function: By setting or removing the checkmark at “If msg arrives on input, pass through to output.”, You can activate or deactivate the forwarding of a message received at the button node input to the output With “Name” you can set the name of the node for the NodeRed configuration as usual.
Here is the view you get when you click on the small (edit)-pen next to the group section in the previous window. Then you will come to the window in which the group and tab can be assigned to the button node (or any other dashboard node). In principle, you edit the properties of the entire group in this window. The assigned tab (under “Tab”) and the width of the group (under “Width”) can be set. You can also activate or deactivate the display of the group name and set whether it should be possible to “fold” the group, ie hide the content.
In the dashboard overview, all tabs contained are then displayed in a fold-out side view. Here you can switch between them by clicking on the respective tab.
The view of the different sized buttons on the dashboard.

Drop node

The dropdown node is a node with which you can create a selection list on the dashboard. For example, you can create a list of available temperatures for a radiator. But you can also define all kinds of other entries with different names and the associated values.

To do this, drag a dropdown node from the Node palette onto the Node Red configuration interface and double-click on it.

The displayed window appears. Here you can set the assigned group and tab as well as the size for the other nodes. In addition, as before, the “label”. In this case, “label” means the name for the drop-down list on the actual dashboard. Under “Placeholder” you can configure a placeholder that will be displayed as long as no value has been selected in the dropdown list. It only gets really exciting in the “Options” section. Here you can configure the available options from your dropdown list. The name for the corresponding entry is set in the right column and the value of the corresponding entry in the left column. You can add more entries by clicking on “+ option”. The order of the entries can also be changed using the three small horizontal lines on the left side of each entry. Simply click on the lines in the entry you want to move and hold the mouse button down. By moving the mouse pointer up or down you can now reposition the marked entry. The rest of the functions shown behave exactly as described for the “button”.

View of the configured dropdown list on the dashboard.
If you now click on the selection field, you can choose between the various previously configured entries.

Switch Node

The switch node basically corresponds to a virtual switch. This can be used to send switching signals or to display switching states.

To do this, drag the switch node from the Node palette onto the Node Red configuration interface and double-click on it.

The displayed window appears. Here you can set the assigned group and tab as well as the size for the other nodes. In addition, as before, the “label”. Under “Icon” you can select an icon that you can display in front of the label or without a label as a switch symbol. The remaining properties such as “Topic” and “Name” are again the same as for the previous nodes. The only difference here is that you can enter different payloads for the switching states “On” and “Off”. Which also makes sense, because otherwise you could not differentiate between switched off and switched on state.
View of the turned on switch.
View of the turned off switch.

Slider Node

The slider node is ideal for setting numbers in a certain range. A good use case is, the use as a dimmer for a lamp.

To be able to use the slider node, you must first drag it from the node palette back onto the node red configuration interface and open its settings menu with a double click.

As usual with the other nodes, the settings window reappears after double-clicking. As before, the assigned group and tab as well as the size can be set here. In addition, as before, the “label”. In the section “Range” you can set which value range the slider should cover. This ranges from “min” = the minimum value to max = the maximum value. The step size can be set using “step”. The remaining properties such as “Topic” and “Name” are again the same as for the previous nodes. The only difference here is that the payload is of course determined by the current “slider value”.
View of the slider in the dashboard.

Numeric node

The Numeric Node is another way to pass numerical values to Node-Red for processing.

To configure this, drag a Numeric Node from the Node palette onto the Node-Red configuration interface.

The exciting – because different from the other nodes – setting options for this node are the two properties “Value Format” and “Range”. With “Range” you can define the possible number range and set the step size as before with the slider node. “Value Format” allows you to format the display of the value. Here you can, for example, put a unit sign after “{{value}}”, so that later on the dashboard not only the numerical value but a numerical value plus unit is displayed. For example, you can label a temperature with “° C” as the temperature.

Text input node

The text input node is – as the name suggests – a node to enable text input.

In addition to the usual setting options such as “Group”, “Size”, “Label”, “Topic” and “Name”, this “Mode” and a “Delay” can be set for this node. Under “Delay” the time is set, which is waited after the last character input until the characters entered in the text field are forwarded to the next node.
Under “Mode” you can choose which data should be entered in the respective field. You can choose between the different options shown and adapt the input field perfectly to the respective purpose.
(Relatively simple-looking) view of the text node in the dashboard view.

Date picker node

In principle, the Date-Picker-node does exactly what the name suggests: With this you can select a certain date and transfer it to NodeRed for further processing.

With this node, no further (apart from the usual) options can be configured. After entering a date on the dashboard, it is forwarded to the connected flow via payload.
View of the date picker in the dashboard.

Color picker node

The Color Picker Node is ideal for setting the color of a connected RGB lamp. Of course, you can also use it to transfer colors to Node-Red for further processing.

In addition to the “usual setting options”, the Color Picker node has the “Format” setting option and also various check boxes (checkmarks) that you can set or remove. The format of the output color can be set via the “Format” property. You can choose between XXXXXXX and XX. By activating the “Show hue slider” or “Show brightness slider” property, you can also display a slider for setting the HUE or brightness value. With the checkboxes “Always show swatch”, “always show picker” and “Always show value field” you can also configure the permanent display of different “picker variants”. Just try out which view you like best. 🙂
Your color picker could look like this in the dashboard.

Form Node

With the form node you have the possibility to configure a typical web-formular. This allows different input options to be summarized. This is perfect, to configure a form for entering an address or something similar.

In addition to the usual setting options, you can configure the displayed form elements here in the “Form elements” area. You can add text boxes for different content like text or numbers. In addition, standard content can be stored or specified whether this is a mandatory field or not. Last but not least, you can also populate the Confirm and Cancel buttons with your own text.
View of the test form in the dashboard.

Text-output node

The text output node is ideal for simply displaying text. For example, you can display measured values from sensors. The user has no option to edit the displayed text.

As a result, the properties of the text output node don’t have so much to set up. In addition to the “Value Format” in which you can expand the appearance of the text output with additional information such as unit symbols, you also have the option to edit the layout of the text output. You can choose from five different arrangements of label and text. Just try which one suits your presentation best.
View of the text output node in the dashboard view.

Gauge node

The gauge node is perfect for visualizing measured values. In this way, the measured values can be displayed optically. In addition, you can also define number intervals in which the color of the displayed scale changes. For example, you can display high/dangerous temperatures with a red color. Temperatures in the normal range are shown on a green scale. This enables you to get a quick impression of whether the displayed measured values are OK or not. Apart from that, it also looks pretty cool (Star Trek-like). 🙂

In addition to the usual setting options, you have the option of setting the “Type”, the “Value format”, the “Units”, the “Range”, the “Color gradients” and the “Sectors” for the gauge node. You already know “Label” and “Value format” from the previous nodes. The property “Units” allows you to set the displayed unit again. You can use the “Range” property to define the range of values ​​to be displayed. For example, if you want to display a humidity value, this range must go from 0 to 100%. For an outside temperature range, a temperature range should be selected that is normally not under or exceeded. For example -20 °C to 45 °C(for non-arctiv-/desert-regions). With the property “Color gradient” you can now define the colors that are displayed to match the displayed measured value. In this example, the color green is shown for all small, yellow for all medium and red for all high measurements. Usually the places where the colors go into the next are evenly distributed. However, if you want a different scaling or even want to omit the middle color, you can use the “Sectors” setting to specify which colors should change.
Under “Type” you can also select which gauge type you want to have displayed. You can see examples of the available types here.
View of the gauge type “Gauge” in the dashboard.
View of the gauge type “Donut” in the dashboard.
View of the gauge type “Compass” in the dashboard.
View of the gauge type “Level” in the dashboard.

Chart Node

The chart node is suitable for displaying value trends. This allows you, for example, to save and display the course of a temperature over a specified period of time. Unfortunately, the values are currently only saved temporarily. This means that if your NodeRed server crashes or is restarted, all previously displayed values will be lost.

Compared to the previous nodes, this node offers a few more setting options. Here you can first set the type of diagram under “Type”. You can emphasize the individual measured values ​​in every display by ticking “enlarge point”. You can set the resolution or the duration of the data flow on the X axis (the horizontal axis running from left to right) with the “X axis label” parameter. Here you can specify over how long or how many measured values ​​should be displayed. For example, you can choose to display either all measurements from the past two hours or the last 500 measurements. The “X-axis label” can also be used to set the labeling of the X axis. By contrast, “Y-axis” can only be used to set the value range of the Y-axis shown. If, for example, you only want to see the temperature range from 0 ° to 30 ° C, you have to enter this here. Using the “Legend” option, you can also configure a legend, which is particularly useful when there are several curves displayed. So you can display a name for each curve color. The “Interpolate” option decides how the individual measured values ​​are connected to one another. Last but not least, you can use “Series Colors” to set the colors used for the curves and “Blank label” to set the text that is to be displayed if no measured values ​​for the curve are available yet.
View of the chart node in the dashboard.

Audio-out Node

The audio out node is again one of those nodes that does exactly what your name suggests. It outputs text as spoken language.

To do this, you can select the “TTS-Voice” (= “Text-To-Speech” voice) in the properties of the node. This allows you to adapt the speech to your style. Ultimately, this node outputs any text by language that you send to it. However, it is important that this voice is not output locally on the node red server but in the browser of the user who has just opened the dashboard. If no browser window is open when the voice message is sent, the voice message is not output. A local output on the NodeRed server via connected loudspeakers could be realized with the “Espeak” program. You can find information about this in the article RaspberryPi – Install voice output with eSpeak.

Notification node

The notification node enables you to display notifications on the open dashboard. This can be displayed as information on the edge or centered in the middle of the screen including a confirmation button.

In the settings window under “Layout” you can set the position of the notification field. There is, among other things, the option “OK/Cancel Dialog”, which enables you to equip the notification with two buttons. These must then be confirmed by the user. So you can be sure that the user has noticed the message in any case. To do this you can specify under “Default action label” and “Secondary action label” what should be displayed on the “Confirm” and “Cancel” buttons.
In addition to the notification variant that the user must confirm, there is also the option to show the notification only as a hint. To do this, select “Top Right” under “Layout”. If you then send a notification to the node, it is shown in the top right corner and disappears automatically after a few seconds.
View of a notification that has to be confirmed to make it disappear.
View of a notification in the upper right corner.

UI Control Node

With the UI control node you can control the appearance and behavior of the dashboard view. With this you can, for example, change the displayed tab or “collapse and expand” groups. You can also use this node to react to whether a user has opened or closed the dashboard.

With this node, only the name can be configured in the settings window. All adjustable parameters or available information are also summarized in the info bar on the side.

Template Node

The template node is a very versatile node. You can use it to embed your own HTML code on the dashboard. The latter can then react individually to the messages received from the connected nodes and also send messages again.

Using the template node you can add content to the header of the page …
… or add nodes to groups that you have formatted with your own HTML code.
With this node you can, insert links to any page on the dashboard. In this example, the link to the MagicMirror view is generated and displayed on the dashboard.
A link will then be visible on the dashboard via which you will be redirected to the MagicMirror view.

Additional information

https://flows.nodered.org/node/node-red-dashboard

Have fun with the project

I hope everything worked as described. If not or you have any other questions or suggestions, please let me know in the comments. Also, ideas for new projects are always welcome. 🙂

P.S. Many of these projects - especially the hardware projects - cost a lot of time and money. Of course I do this because I enjoy it, but if you appreciate it that I share these information with you, I would be happy about a small donation to the coffee box. 🙂

Buy Me a Coffee at ko-fi.com   

7 comments

  1. Hallo, super Artikel. Eine Frage dazu: Wie schafft man es Elemente innerhalb einer Gruppe nebeneinander anzuordnen, wie z.B. in deienr LED stripe Gruppe der On und der Off button?

    Viele Grüße
    Andreas

    Reply

    1. Hallo Andreas,
      danke 🙂
      Das müsste eigentlich automatisch passieren, sobald beide Elemente nebeneinander in die Gruppe passen. Dazu musst du die Breite der Elemente (Beim LED Stripe die Taster) zum Beispiel auf 3 einstellen, damit sie in die Gruppe (hier “LED Stripe”) mit der Breite 6 nebeneinander passen. 🙂
      Las mich gerne wissen ob es geklappt hat. 🙂
      Beste Grüße
      Fab

      Reply

  2. Guten Morgen,

    klasse Artikel, hat mir super weitergeholfen. Habe trotzdem noch eine allgemeine Frage zu einem Node-Red dashboard.

    Ich habe mir ein solches aufgebaut und lese mir somit Daten eines Temperatursensors über Node-Red aus. Diesen habe ich an den RPi angeschlossen. (Node-red läuft auf dem RPi bei mir).

    Dieses Dashboard ist auch einfach aufrufbar über den Browser den ich nutze. Jedoch nur wenn ich in dem selben Netzwerk bin, wie der raspberry Pi selbst.
    Von meinem Smartphone internet Netz habe ich keinen Zugriff auf das Dashboard.

    Kennst du eine Möglichkeit, wie ich auch aus dem “Öffentlichen” Netz Zugriff, bzw. aus anderen Internetverbindungen als mein W-Lan zu Hause, auf das Dashboard bekomme?

    Danke dir und Viele Grüße, Lennard

    Reply

    1. Hi Lennard,
      danke dir. 🙂
      Die (einzige einigermaßen) sichere Variante ist, dass du dich über ein VPN mit deinem Heimnetzwerk verbindest und so auf den RaspberryPi in deinem Netzwerk zugreifst.
      Mittlerweile können viele Router (z.B. auch die Fritzbox) als VPN Server konfiguriert werden.
      Leider habe ich dazu kein Tutorial fertig, aber vllt. findest du dazu ja was. 🙂
      Beste Grüße
      Fabian

      Reply

  3. Hallo,
    arbeite seit ein paar Tagen mit dem Node-Red auf dem Raspy-400. Ein AD Wandler (ADS1115) liefert mir auch saubere Ergenisse. Ich möchte gerne bei den Dashboard-Nodes die Schriftgöße verändern. Ist das möglich? Auf anderen Seiten sind irgendwelche Codes veröffentlicht, welche aber nicht funktionieren. Habt ihr mir ein Bsp. ( z.Bsp. für Gauge ) wie das zu bewerkstelligen ist?

    Im vorhinaus möchte ich mich schonmal bedanken, alleine schon wegen des Dashboard Artikels.
    MfG
    H.Härle

    Reply

    1. Hi Horst,
      ein Beispiel habe ich leider nicht dafür, aber vllt. einen “Schubs” in die richtige Richtung. In der Node Beschreibung für die gauge node ist folgender Hinweis enthalten:

      If a Class is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a msg.className string property.

      Das heißt du müsstest das Aussehen der einzelnen Bestandteile der gauge node eigentlich mit CSS code bearbeiten können.
      Ich hoffe das hilft dir weiter. 🙂
      Beste Grüße
      Fab

      Reply

Leave a Reply

Your email address will not be published.