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. 🙂
Inhalte
- 1 Safety instructions
- 2 Affiliate links / advertising links
- 3 Requirements
- 4 Log in to the NodeRed configuration interface
- 5 Install the dashboard node
- 6 Overview of the available input and output nodes
- 7 Button node and positioning of the elements in the dashboard
- 8 The button node
- 9 Drop node
- 10 Switch Node
- 11 Slider Node
- 12 Numeric node
- 13 Text input node
- 14 Date picker node
- 15 Color picker node
- 16 Form Node
- 17 Text-output node
- 18 Gauge node
- 19 Chart Node
- 20 Audio-out Node
- 21 Notification node
- 22 UI Control Node
- 23 Template Node
- 24 Additional information
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.

Install the dashboard node
So that you can use the dashboard nodes you need to install 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.

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.

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



Another example:



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.




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


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.



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.


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.

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



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.


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.


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.


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.


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






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.


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.

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.




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.

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.




Additional information
https://flows.nodered.org/node/node-red-dashboard
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. 🙂
Fab
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. 🙂

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