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 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.
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” at the top. To the right of it there is an arrow pointing up-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, all you have to do is append “/ui/” to the address of your NodeRed configuration page. For example, 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/
First of all, it's about dividing 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 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, you can create other tabs. This is practical, for example, for virtually separating the elements in different rooms in a smart home system. This means you can combine all of the sensors and actuators in the living room in a tab called “Living Room”. This makes the overview easier 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 their associated groups will be displayed there. In the screenshot below
“Layout” section 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 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 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 you will find, for example, the various groups such as “Server”, RasPi” or “Status”. On the “Home” tab, however, you will only find the “Default” group. In the opened “Server” group you can also see how the individual elements such as “Restart server” or “Turn off screen” are arranged.
You can now find these tabs and groups on the dashboard view. In the view shown you are on the “Settings” tab. The first red frame marks the “Servers” 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 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.
“Group” determines in which group and 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 further down in the post. Using the “Icon” setting, icons can also be displayed on the button. To get a selection of the available icons, you simply have to click on the “Material Design icon” link 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 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. 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, 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 window shown will then appear. Here, as before with the other nodes, you can set the assigned group and tab as well as the size. Also, as before, the “label”. “Label” in this case means the label for the dropdown 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 drop-down list. Things only get really exciting in the “Options” section. Here you can configure the available options in your dropdown list. To do this, the name for the corresponding entry is set in the right column and the value of the corresponding entry is set in the left column. You can add further 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. 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 marked entry. The remaining functions shown behave in 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 window shown will then appear. Here, as before with the other nodes, you can set the assigned group and tab as well as the size. Also, as before, the “label”. Under “Icon” you can select an icon that you can display as a switch symbol in front of the label or without a label at all. The remaining properties such as “Topic” and “Name” are the same as with the previous nodes. The only difference here is that you can enter different payloads for the switching states “On” and “Off”. Which makes sense, because otherwise you wouldn't 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 usual with the other nodes, the settings window appears again after double-clicking. As before, you can set the assigned group and tab as well as the size here. Also, as before, the “label”. In the “Range” section you can set the range of values the slider should cover. This ranges from “min”=the minimum value to max=the maximum value. The step size can be adjusted using “step”. The remaining properties such as “Topic” and “Name” are the same as with 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 setting options for this node - because they are different from the other nodes - 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, for example, you can put a unit sign after “{{value}}” so that not only the numerical value but a numerical value plus the unit are displayed on the dashboard later. For example, you can mark a temperature information 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 node allows you to set the “Mode” and a “Delay”. “Delay” is used to set the length of time that waits after the last character entry until the characters entered in the text field are sent to the next node.Under “Mode” you can select which data should be entered into 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 (ticks) that you can set or remove. The format of the output color can be set using 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. You can also configure the permanent display of various “picker variants” using the “Always show swatch”, “always show picker” and “Always show value field” checkboxes. Just 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, there is relatively little that can be set in the properties of the text output node. 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 of editing the layout of the text output. You can choose from five different arrangements of label and text. Just try out 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. 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 can set the “Type”, the “Value format”, the “Units”, the “Range”, the “Color gradients” and the “Sectors” with the Gauge node. You already know “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 specify the range of values to be displayed. For example, if you want to display a humidity value, this range must be from 0 to 100%. For an outdoor temperature range, a temperature range should be selected that is normally not below or exceeded. For example -20°C to 45°C. With the “Color gradient” property you can now specify the colors that are displayed to match the displayed measured value. In this example, the color green is displayed for all small measurements, the color yellow for all medium measurements, and the color red for all high measurements. Normally the places where the colors merge into the next are evenly distributed. However, if you want a different scaling or even want to leave out 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 “Donut” gauge type in the dashboard.View of the “Compass” gauge type in the dashboard.View of the “Level” gauge type 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 “Interpolates” decides how the individual measured values are connected to each other. 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 should be displayed if no measured values are yet 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 adapt the voice output a little more to your style. Ultimately, this node outputs every text you send to it via voice. It is important, however, 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 achieve local output on the NodeRed server via connected speakers using the “Espeak” program. You can find information about 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”. There is, among other things, the “OK/Cancel Dialog” option, 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 message. To do this, you can specify what should be on the “Confirm” and “Cancel” buttons under “Default action label” and “Secondary action label”.In addition to the notification variant that the user has to confirm, there is also the option to only display the notification as a notice. To do this, select “Top Right” under “Layout”, for example. If you then send a notification to the node, it will be displayed in the upper right corner and will automatically disappear 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
With the UI control node you can control the appearance and behavior of the dashboard view. This can be used, for example, to change the tab displayed and to “fold in and out” 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 on the LED stripe), for example, to 3 so that they fit next to each other in the group (here “LED stripe”) with a width of 6. 🙂
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 a way how I can get access to the dashboard from the “public” network or from Internet connections other 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 maybe. 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 on the LED stripe), for example, to 3 so that they fit next to each other in the group (here “LED stripe”) with a width of 6. 🙂
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 a way how I can get access to the dashboard from the “public” network or from Internet connections other 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 maybe. 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