I don't know if dashboards are THE way to make a nerd's heart beat faster, but they are definitely a 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. You can now create this feeling yourself with NodeRed thanks to certain nodes.
Because once you have your SmartHome so far that it collects all kinds of data about your own four walls, you of course want to present it. But how? After all, you can't just stick this data in a photo album like your last vacation photos.
A simple and 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 opportunity to interact with your SmartHome system. This means you can set values, flip virtual switches, trigger actions and monitor their status at the same time.
You can find an overview of the various functions of the dashboard node in the following article
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.
In the following list you will find all the parts you need to implement this article.
Log into the NodeRed configuration interface
Before you can edit your NodeRed configuration, you must - if activated - first log into the NodeRed configuration interface.
View of the login dialog. Here you have to enter the login data that you specified during the configuration of the login. You can find information about this in the article NodeRed - set up user login.
Install dashboard node
In order to use the dashboard nodes you must have the node
View during the installation of the node "node-red-dashboard".
Overview of the available input and output nodes
By installing the dashboard nodes, you will receive a whole package of additional nodes that are suitable for displaying and entering various values. These will be displayed as usual in the node palette in the left area of the configuration menu. Details about the individual nodes are listed below.
View 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". You can use this to position a button on your dashoard. This then works like a button in the real world. When it is clicked, it sends an adjustable value and an adjustable topic to the linked node.
Button nodes, for example, can be used very well to trigger actions. For example, you can turn 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 for each. The dashboard is a separate website that can be managed centrally via the dashboard configuration.
By installing the dashboard nodes, a new tab was added to the left configuration area. You can recognize it by the icon based on a bar chart. Click on this to open the basic configuration of the dashboard.
Here you can see the different tabs "Layout", "Theme" and "Site" in the upper area. An arrow pointing upwards and to the right is displayed to the right. If you click on this, you will be redirected to the dashboard website.
You can reach the dashboard page by clicking on the symbol marked with the mouse pointer in the dashboard tab.
Alternatively, you can also select the dashboard page directly. To do this, simply add "/ui/" to the address of your NodeRed configuration page. For example, if the address to your NodeRed configuration page is https:// 192.168.172.5:1880 then the address to your dashboard is https:// 192.168.172.5:1880/ui/
The first step is to divide up the layout. You can use this to position the respective input and output elements (dashboard nodes) almost freely on the dashboard. The dashboard offers the option of combining individual dashboard nodes into 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, other tabs can also be created. This is useful, for example, to virtually separate the elements in different rooms in a smart home system. For example, you can group all sensors and actuators in the living room in a tab called "Living room". This makes it easier to maintain an 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 following screenshot
"Layout" area of the dashboard configuration. Here you can see some of the individual tabs (in this example "Home", "Raspi data", "Settings" and "Tasmota status"). The groups can also be recognized. For example, the "Raspi data" tab includes the groups "1" and "2". Each group then contains the actual dashboard elements assigned to it. You can make these 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 called "Settings" and "Home". On the "Settings" tab, for example, you will find the various groups such as "Server", "RasPi" or "Status". On the "Home" tab, on the other hand, you will only find the "Default" group. In the expanded "Server" group, you can also see how the individual elements such as "Restart server" or "Switch off screen" are arranged.
You will now find these tabs and groups in the dashboard view. In the view shown, you are on the "Settings" 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-hand side also marks the symbol that you need to click on to switch to another tab.If you click on this symbol, all available tabs - in this case "Settings" 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 keys. 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 "Group" defines the group and tab in which 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 further down in the article. You can also use the "Icon" setting to display icons on the button. To get a selection of the available icons, simply click on the "Material Design icon" link in the info bar on the right. "Label" specifies 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 checking or unchecking "If msg arrives on input, pass through to output." you can activate or deactivate the forwarding of a message received at the input of the button node 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) pencil next to the Group section in the previous window. This will take you 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 "collapse" the group, i.e. hide the content.In the dashboard overview, all tabs included are then displayed in a fold-out page view. Here you can switch back and forth between them by clicking on the respective tab.The view of the different sized buttons on the dashboard.
Dropdown 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 sorts of other entries with a wide variety of 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 then appears. As with the other nodes, the assigned group and tab as well as the size can be set here. As before, you can also set 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 is displayed as long as no value has been selected in the drop-down list. Things only get really exciting in the "Options" section. Here you can configure the available options for your drop-down list. To do this, the name for the corresponding entry is set in the right-hand column and the value of the corresponding entry is set in the left-hand column. You can add further entries by clicking on "+option". You can also change the order of the entries using the three small horizontal lines on the left-hand side of each entry. To do this, simply click on the lines in the entry you want to move and hold down the mouse button. By moving the mouse pointer up or down, you can now reposition the selected entry. The other functions shown behave in exactly the same way as already described for the "Button".View 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 then appears. As with the other nodes, the assigned group and tab as well as the size can be set here. As before, you can also set 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 icon. The remaining properties such as "Topic" and "Name" are the same as for the previous nodes. The only difference here is that you can enter different payloads for the "On" and "Off" switching states. This also makes sense, as otherwise you would not be able to distinguish between the switched-off and switched-on states.View of the switched on switch.View of switched off switch.
Slider node
The slider node is ideal for setting numbers within a certain range. A good use case, for example, is to use it as a dimmer for a lamp.
In order to use the slider node, you first have to drag it from the node palette to the Node Red configuration interface and open its settings menu by double-clicking.
As with the other nodes, the settings window appears again after double-clicking. As before, the assigned group and tab as well as the size can be set here. As before, you can also set the "Label". In the "Range" section, you can set the value range over which the slider should sweep. This ranges from "min"=the minimum value to max=the maximum value. The step width can be set using "step". The remaining properties such as "Topic" and "Name" are 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". As with the slider node, you can use "Range" to define the possible number range and set the increment. "Value Format" allows you to format the display of the value. Here, for example, you can add a unit sign after "{{value}}" so that the dashboard later displays not just the numerical value but a numerical value plus a unit. For example, you can also use "°C" to indicate a 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", the "Mode" and a "Delay" can be set for this node. Under "Delay", you can set the amount of time that is waited after the last character input until the characters entered in the text field are sent on to the next node.Under "Mode" you can select which data should be entered in the respective field. You can choose between the various options shown and adapt the input field perfectly to the respective application.(Relatively simple looking) view of the text node in the dashboard view.
Date picker node
The date picker node basically does exactly what the name suggests: you can use it to select a certain date and then pass it on to NodeRed for further processing.
No other options (apart from the usual ones) can be configured for this node. 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 this to transfer colors to Node-Red for further processing in all other cases.
In addition to the "usual setting options", the color picker node has the "Format" setting option and also various checkboxes that you can set or remove. The "Format" property can be used to set the format of the output color. 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. You can also configure the permanent display of different "picker variants" using the "Always show swatch", "Always show picker" and "Always show value field" checkboxes. Simply try out which view you like best 🙂This is what your color picker could look like in the dashboard.
Form node
With the form node you have the opportunity to configure a typical form. This allows different input options to be combined. This is perfect, for example, for configuring 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 fields for different content such as text or numbers. You can also store standard content or specify whether this is a mandatory field or not. Last but not least, you can also add your own text to the confirm and cancel buttons.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, relatively few settings can be made in the properties of the text output node. In addition to the "Value Format" in which you can extend the appearance of the text output with additional information such as unit characters, you also have the option of editing the layout of the text output. You can choose from five different arrangements of label and text. Simply try out which one best suits your presentation.View of the text output node in the dashboard view.
Gauge node
The gauge node is perfect for visualizing measured values. This means that the measured values can be classified directly visually. You can also set number intervals in which the color of the displayed scale changes. For example, you can represent high/dangerous temperatures with a red color. Temperatures in the normal range, on the other hand, are shown with a green scale. This makes it possible to get an impression at a quick glance whether the measured values displayed are OK or not. Aside from that, it just 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 are already familiar with "Label" and "Value format" from the previous nodes. The "Units" property allows you to specify 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 range from 0 to 100%. For an outdoor temperature range, a temperature range should be selected that is not normally exceeded or fallen below. For example -20°C to 45°C. With the property "Color gradient" you can now define the colors that are displayed according to the displayed measured value. In this example, the color green is displayed for all low measured values, the color yellow for all medium measured values and the color red for all high measured values. Normally, the points at which one color changes to 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 where the 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 set period of time. Unfortunately, the values are currently only saved temporarily. This means that if your NodeRed server crashes or is otherwise 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 go to "Type" set the type of diagram. You can highlight the individual measured values in each display by checking the box "enlarge point" puts. You can set the resolution or duration of the data progression on the X-axis (the horizontal axis running from left to right) with the parameter "X-axis label" set. Here you can specify the length of time or how many measured values should be displayed. For example, you can choose to display either all measurements from the last two hours or the last 500 measurements. This can be matched with "X-axis label" then also set the labeling of the X-axis. With "Y-axis" However, only the displayed value range of the Y-axis can be set. For example, if you only want to see the value range from 0° to 30°C for a temperature curve, you have to enter this here. Using the option "Legend" You can also configure a legend, which is particularly useful when there are several curves displayed. This means you can display a name for each curve color. The option "Interpolate" determines how the individual measured values are linked together. Last but not least, you can use "Series Colours" to set the colors used for the curves and "Blank label" to set the text to be displayed if no measured values are available for the curve.View of the chart node in the dashboard.
Audio out node
The Audio Out Node is another one of those nodes that does exactly what its 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 customize the voice output a little more to your style. Ultimately, this node will output any text you send to it by voice. 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 at the time the voice message is sent, the voice message will not be output. However, you could implement local output on the NodeRed server via connected speakers using the "Espeak" program. You can find information on this in the article RaspberryPi – Install speech output with eSpeak.
Notification node
The notification node allows 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 of the notification node, you can set the position of the notification field under "Layout". Among other things, there is the option "OK/Cancel Dialog", which allows you to equip the notification with two buttons. These must then be confirmed by the user. This way you can be sure that the user has definitely noticed the notification. To do this, you can specify under "Default action label" and "Secondary action label" what should appear on the "Confirm" and "Cancel" buttons.In addition to the notification variant that the user must confirm, there is also the option of displaying the notification only as a hint. To do this, select "Top Right" under "Layout", for example. If you then send a notification to the node, it is displayed in the top right-hand corner and disappears again automatically after a few seconds.View of a notification that needs to be confirmed in order to make it disappear again.View of a notification in the upper right corner.
UI control node
You can use the UI control node to control the appearance and behavior of the dashboard view. For example, you can use it to change the tab displayed and "expand and collapse" groups. You can also use this node to react to whether a user has opened or closed the dashboard.
For this node, only the name can be configured in the settings window. All adjustable parameters or available information are also summarized in the information bar on the side.
Template node
The template node is a very versatile node. You can use it to integrate your own HTML code into the dashboard. This can then react individually to the messages received from the connected nodes and also send messages itself.
Using the template node you can add content to the header of the page......or add nodes to groups that you have formatted as you like with your own HTML code.
thztjz
For example, you can use this node to 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 which will redirect you to the MagicMirror view.
Further examples
Below you will find a small list of the articles in which I also use the dashboard nodes. Maybe there is something for you too. 🙂
I hope everything worked as described for you. If not or you have questions or suggestions please let me know in the comments. I will then add this to the article if necessary. Ideas for new projects are always welcome. 🙂
PS 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 think it's cool that I share the information with you, I would be happy about a small donation to the coffee fund. 🙂
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?
Hi Andreas,
thanks 🙂
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. 🙂
Best regards
Fab
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?
Hi 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? 🙂
Best regards
Fabian
Hello,
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.
Kind regards
H.Harle
Hi Horst,
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:
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.
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. 🙂
Best regards
Fab
English 
Deutsch 
Français 
Español 
Nederlands
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?
Best regards
Andrew
Hi Andreas,
thanks 🙂
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. 🙂
Best regards
Fab
Thanks 🙂
Good morning,
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
Hi 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? 🙂
Best regards
Fabian
Hello,
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.
Kind regards
H.Harle
Hi Horst,
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. 🙂
Best regards
Fab