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. 🙂
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 stores listed here are so-called affiliate links. If you click on such an affiliate link and store via this link, Nerdiy.de receives a commission from the online store 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. 🙂
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.
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
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.
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".
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 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.
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.
With the form node you have the possibility to configure a typical web form. 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.
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). 🙂
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.
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.
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 received messages from the connected nodes and also send messages again.
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 that I share this information with you, I would be happy about a small donation to the coffee box. 🙂
Hello, great article. A question: How do you manage to arrange elements next to each other within a group, such as the on and off button in your LED stripe group?
This should actually happen automatically as soon as both elements fit next to each other in the group. To do this, you have to set the width of the elements (the buttons in the case of the LED Stripe) to 3, for example, so that they fit into the group (here “LED Stripe”) with a width of 6 next to each other. 🙂
Please let me know if it worked. 🙂
great article, helped me a lot. Still have a general question about a Node-Red dashboard.
I have built one and read data from a temperature sensor via Node-Red. I connected this to the RPi. (Node-red runs on my RPi).
This dashboard is also easily accessible via the browser I use. But only if I'm in the same network as the raspberry Pi itself.
I have no access to the dashboard from my smartphone internet network.
Do you know of a way I can get access to the dashboard from the “public” network or from other internet connections than my WiFi at home?
Thank you and best regards, Lennard
Thank you. 🙂
The (only reasonably) secure option is to connect to your home network via a VPN and thus access the RaspberryPi in your network.
In the meantime, many routers (e.g. the Fritzbox) can be configured as VPN servers.
Unfortunately I don't have a tutorial ready for this, but probably. do you find anything about it? 🙂
I've been working with the Node-Red on the Raspy-400 for a few days. An AD converter (ADS1115) also gives me clean results. I would like to change the font size for the dashboard nodes. Is this possible? Some codes are published on other sites, but they don't work. Do you have an example for me (e.g. for gauge) how to do that?
I would like to thank you in advance, just because of the dashboard article.
Unfortunately, I don't have an example for this, but probably. a "nudge" in the right direction. The node description for the gauge node contains the following note:
That means you should actually be able to edit the appearance of the individual components of the gauge node with CSS code.
I hope this helps you further. 🙂