Getting Started with Node-RED Dashboard on Raspberry Pi

This article is an introduction to the Node-RED dashboard with Raspberry Pi. We’ll cover how to install Node-RED Dashboard and exemplify how to build a graphical user interface for your IoT and Home Automation projects.

Getting Started with Node-RED Dashboard Raspberry Pi

Table of Contents:

Prerequisites:

You need a Raspberry Pi board—read Best Raspberry Pi Starter Kits. We assume that you are familiar with the Raspberry Pi, you know how to install the operating system, and you know how to establish an SSH connection with your Pi. You can take a look at the following tutorials first:

You should have Node-RED installed on your Pi. For an introduction to Node-RED, read this blog post Getting Started with Node-RED on Raspberry Pi.

What is Node-RED Dashboard?

Node-RED Dashboard is a module that provides a set of nodes in Node-RED to quickly create a live data dashboard. For example, it provides nodes to quickly create a user interface with buttons, sliders, charts, gauges, etc.

To learn more about Node-RED Dashboard you can check the following links:

Installing Node-RED Dashboard

You can install Node-RED dashboard nodes by going to Menu > Manage Palette. Then, search for node-red-dashboard and install it.

Install Node-RED dashboard palette

After installing, the dashboard nodes will show up on the palette.

Node-RED dashboard nodes

Nodes from the dashboard section provide widgets that show up in your application user interface (UI). The user interface is accessible on the following URL:

http://Your_RPi_IP_address:1880/ui

For example, in my case:

http://192.168.1.106:1880/ui
welcome node-red dashboard

At the moment, you’ll see the previous screen when you access the UI. That’s because you haven’t added any of those dashboard nodes to the flow. We’ll do that in the following section.

Creating a UI (User Interface)

In this section, we’re going to show you how to create your UI (User Interface) in Node-RED using the Node-RED dashboard nodes.

The Dashboard Layout

The user interface is organized in tabs and groups. Tabs are different pages on your user interface, like several tabs in a browser. Inside each tab, you have groups that divide the tabs into different sections so that you can organize your widgets (buttons, sliders, charts, gauges, forms, etc.).

Every widget should have an associated group that determines where the widget should appear on the user interface.

To create a tab and a group, follow the next instructions.

On the top right corner, click on the little arrow icon, and click on Dashboard.

Creating a UI User Interface Node-RED Dashboard

Creating Tabs and Groups

Make sure you have the Layout tab selected. Then, click on the +tab button to create a tab, it will be called Tab 1 by default.

After creating a tab, you can create several groups under that tab. You need to create at least one group to add your widgets. To add a group to the created tab, you need to click on the +group button.

Then, click on the +group button to create a group inside that tab—it will be called Group 1 by default.

Node-RED dashboard create tabs and groups

You can click on the Tab and Group edit buttons to change their properties.

For example, click the edit button for Tab 1.

Edit dashboard tab node

You can edit the tab’s name and change its icon:

  • Name: you can call it whatever you want
  • Icon:  you should use a name accordingly to the icon’s names in the links provided. By default, it uses the dashboard icon.

After making changes, click the Update button.

Now, edit the group, by clicking on the group edit button. The following window will open.

edit dashboard group node

You can edit its name, select its corresponding tab and change its width. According to the Node-RED dashboard documentation, each group element has a width of 6 ‘units’ (a unit is 48px wide by default with a 6px gap).

At the moment, you have created a tab and a group using Node-RED dashboard. To see them, you need to add a widget.

For example, add a switch (from the dashboard section, not from the function section—you need to scroll down through the palette to find the dashboard nodes) node to the flow.

Node-RED switch node

Double-click on it to check its properties. By default, it will be added to the group and tab you created previously. Deploy your app.

Node-RED deploy button

Now, go to the following URL, to access the user interface created.

http://Your_RPi_IP_address:1880/ui

For example, in my case:

http://192.168.1.106:1880/ui

You’ll see something as follows:

Node-RED dashboard UI group and tb

Dashboard Theme

The Node-RED Dashboard has a white background and a light blue bar by default. You can edit its colors and font in the Theme tab when you open the dashboard option.

Node-RED dashboard theme

Change the style, deploy the changes and see the Dashboard UI changing its colors. For example, like in the following figure:

Node-RED UI custom theme

Dashboard Site

At the dashboard window, you have another tab called Site that allows you to do further customization as shown in the figure below.

Node-RED dashboard site settings

Feel free to change the settings, then deploy the changes and see how the UI looks. At the moment you won’t see much difference because you only have one widget. Those changes will be noticeable when you start adding more widgets to the UI.

Creating a User Interface – Example

In this section we’re going to make a dashboard example to show you how you can build and edit your own dashboard – we won’t actually add functionalities to the widgets – we’ll do that in future projects. This dashboard will have the following features:

  • Two different tabs: one called Room and another called Garden
  • The Room tab will have two groups and the Garden tab will have one group
  • We’ll add a color picker and a switch to the Room groups
  • We’ll add a chart to the Garden group

Creating the Tabs

On the top right corner of the Node-RED window, select the dashboard tab and create two new tabs by clicking on the +tab button.

Edit one tab with the following properties:

  • Name: Room
  • Icon: tv

And the other one with the following:

  • Name: Garden
  • Icon: local_florist

Then, add two groups to the Room tab and one group to the Garden tab. The following figure shows how your dashboard layout looks.

Node-RED dashboard layout example

Adding the Widgets

Add a switch, a slider, a colour picker and a gauge to the flow as shown in the following figure:

Adding the Widgets Node-RED Dashboard

Double click on the switch. A new window pops up.

Node-RED edit switch node

In this new window, you can choose where you want to place your button widget on the user interface. In this case, we want it to appear in the Room tab, Group 1 as highlighted in red in the previous figure.

Then, do the same for the other widgets but add them to the following groups:

  • slider: Group 1 [Room]
  • colour picker: Group 2 [Room]
  • gauge: Group 1 [Garden]

Deploy the changes and go to the dashboard UI to see how it looks.

http://Your_RPi_IP_address:1880/ui

Your dashboard has two tabs: the Room and the Garden as shown in the following figure:

Node-RED dashboard multiple tabs

Here’s what the room tab looks like with the two groups.

Node-RED dashboard UI example

And here’s how the Garden tab looks with one group.

Node-RED UI gauge example

Wrapping Up

In this tutorial, you’ve learned how to use Node-RED dashboard nodes to create a user interface. You can add several widgets like sliders, buttons, forms, charts, and gauges to create a nice application for your IoT or Home Automation projects.

In the example presented, we only created the user interface, we haven’t added any functionalities to the widgets. We have several projects that use Node-RED dashboard that you may want to take a look at to learn how to add functionality to your user interface. For example:

We hope you’ve found this tutorial useful.

Thanks for reading!



Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »
Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »

Enjoyed this project? Stay updated by subscribing our newsletter!

18 thoughts on “Getting Started with Node-RED Dashboard on Raspberry Pi”

  1. This was a great intro to Node-red. I highly recommend using this product if you have ANY wifi connected devices such as ESP8266, ESP32, and of course RasPi. When combined with MQTT you can do virtually anything.

    I would love to see a tutorial on how to create node-red nodes from scratch. I use node-red in a lot of projects but sometimes there isn’t an existing node to do what I want and it would be great if I could create my own.
    Thanks!

    Reply
    • Hi Bruce. Thanks for your support.
      In an upcoming project we’re going to integrate an ESP8266 with Node-RED using the MQTT communication protocol.
      Stay tuned 🙂

      Reply
  2. Very nice tutorial. I have only one quibble: the Node-Red and Dashboard UI’s appear to have undergone some changes as of March 2019. In Node-Red, the dashboard (as well as info and debug) are now in a dropdown. In Dashboard, the Group list is also hidden until you access the dropdown in the upper left corner. Otherwise, I had no problems and am ready to try building my greenhouse monitoring system. Thanks for all your great info.

    Reply
    • Hi.
      Thank you for letting us know.
      We have to update this tutorial soon.
      Thank you for your interest in our tutorials.
      Regards,
      Sara

      Reply
  3. Very nice tutorial. This post made it easy to understand node-red dashboard in easy and better way. I appreciate the effort.
    I would like to see a tutorial on how to create a node “for dashboard” from scratch as soon as possible.
    Thank you and Best Regards.

    Reply
  4. Tried to follow along but saw warnings on my Raspberry Pi when I issued “npm install node-red-dashboard” during installation steps. Then, when I fed the “http://Your_RPi_IP_address:1880/ui” URL to a browser on any machine, I saw the error: Host refused to connect, ERR_CONNECTION_REFUSED

    Have the install or initial access steps changed with the newer version of Raspberry Pi OS…?

    Reply
  5. Hi Sara, thanks for the detailed overview of working with Node-red dashboard. It is indeed helpful. I am facing the following issue, I hope you can help me resolve this.
    “Welcome to the Node-RED Dashboard
    Please add some UI nodes to your flow and redeploy”

    Reply
  6. Hi Sara, thanks for the detailed overview of working with Node-red dashboard. It is indeed helpful. I am facing the following issue, I hope you can help me resolve this.
    “Welcome to the Node-RED Dashboard
    Please add some UI nodes to your flow and redeploy”

    Having same issue only show above info on the page.

    Reply
  7. Thanks for the tutorials. I deployed Node Red successfully on m RPi4 using the NodeRed installation tutorial.

    I have just tried deploying Dashboard using this tutorial.

    I added the tab and group as suggested and deployed (more than once). I clicked the link to the dashboard page (as well as typing it in manually) and still have the default

    Welcome to the Node-RED Dashboard
    Please add some UI nodes to your flow and redeploy.

    Deploy seemed to work (I have used NodeRed on windows so have some experience with the NodeRed interface – the Layout did still have the tab and group when I restarted my RPi so that suggests it was deployed.

    Reply
    • Hi.
      Please proceed with the tutoril and check the page after adding dashboard nodes to the flow.
      It seems the new version of Node-RED doesn’t show the dashboard tabs unless you add dashboard nodes, even though you have created tabs and groups.
      Regards,
      Sara

      Reply

Leave a Comment

Download Our Free eBooks and Resources

Get instant access to our FREE eBooks, Resources, and Exclusive Electronics Projects by entering your email address below.