Create User Dashboards for IoT Projects in Node-RED

2022-10-03 | By Maker.io Staff

Creating visually appealing user interfaces for your IoT projects can be daunting. Most sophisticated development environments for IoT projects (for example, the Arduino IoT Cloud) offer some automated dashboard creation functionality. A similar feature is available in Node-RED, a development environment that targets data-driven IoT projects. However, getting used to working with the UI system can be confusing at first. Therefore, this article takes you through the most important steps of setting up a UI dashboard and making the UI elements interact with the nodes in a Node-RED flow.

Create User Dashboards for IoT Projects in Node-RED Nore-RED lets you create beautiful user interfaces by only defining the elements on the UI and their styling. The system takes care of placing and updating the elements automatically.

Installing the Dashboard Package

You need to install an additional package within Node-RED before you can start creating a user interface for your IoT application. For that purpose, use the menu button in the top-right corner of the app to navigate to the palette manager:

Create User Dashboards for IoT Projects in Node-RED Open the palette manager using Node-RED’s main menu.

Once the window opens, click the install tab, and use the search bar to find the node-red-dashboard package. Finally, click the install button next to the package name to install the new palette elements:

Create User Dashboards for IoT Projects in Node-RED Follow the highlighted steps to install the dashboard UI elements in Node-RED.

You can find the new elements toward the end of the list in the palette on the left-hand side of the main Node-RED window.

Creating Tabs, Groups, and Layouts

Node-RED uses tabs and groups to organize and display dashboard UI elements. The concept may be a bit confusing at first. However, it can quickly become an intuitive and powerful tool for building and organizing dashboards for multiple projects once you figure out how it functions.

You have to create at least one tab and associate one group with that tab before you can place any UI elements in Node-RED. In this context, each tab serves as a new UI dashboard, and groups can help you organize elements within a dashboard. You can, for example, create a new tab for each of your IoT projects. Similarly, you can create multiple groups on each tab, for example, one for each room of a home automation system.

There are multiple ways to create and manage tabs and groups in Node-RED. However, I recommend using the dedicated dashboard options in the right-hand side toolbar of the app, as it shows a practical overview of all tabs, groups, and UI elements:

Create User Dashboards for IoT Projects in Node-RED Follow the highlighted steps to access the dashboard settings in Node-RED.

Further, this method also lets you rearrange, edit, and delete dashboard elements:

Create User Dashboards for IoT Projects in Node-RED You can quickly access tab and group settings by hovering your mouse cursor over an element.

You can change a tabs or group’s name by editing the element’s settings. The final UI will then display that name in the dashboard. Further, note that Node-RED will not display tabs and groups in the UI unless they contain at least one UI element, such as a button or a label.

Finally, you can also use the dashboard settings to change the styling of your custom dashboards, for example, by enabling the dark theme or adjusting the theme color.

Placing UI Elements on a Dashboard

You can drag and drop any dashboard node from the palette to the Node-RED main working area. However, you have to place each new UI element in one of the previously created groups before Node-RED displays it in the dashboard. You can do so by double-clicking a UI node and selecting one of the groups:

Create User Dashboards for IoT Projects in Node-RED Make sure to assign each UI element to a group so that Node-RED places it on the linked dashboard tab.

The rest of this article explains how to expand the counter example from a previous article, where a simple inject node advances a counter once every second, and the flow then outputs the counter value using the debug console. However, this article replaces the inject node with a button, and the finished flow displays the counter value on the graphical dashboard instead of using the debug console of Node-RED. Therefore, add a button and text output node to the flow, and place both in the same group on the same tab. Then, place a function node between the two UI nodes and connect all three of them so that they form a chain:

Create User Dashboards for IoT Projects in Node-RED Create three nodes and connect them as shown in the image above.

Next, add the following script to the function node. You can refer to the previous article for a detailed explanation of what the following code does:

Copy Code

var cnt = flow.get("count") || 0;

flow.set("count", (cnt + 1));
msg.payload = cnt;

return msg;

Like all other nodes, UI nodes in Node-RED communicate via messages, flow variables, and global variables. In this example, you don’t have to configure the button node to output a message, as the function node doesn’t expect an input. However, the function node passes the current count value along with its output message. The final text node receives that message and outputs the payload using the UI, which it already does by default. Therefore, you can navigate to the UI page, which is http://localhost:1880/ui/ by default, and see the dashboard Node-RED created:

Create User Dashboards for IoT Projects in Node-RED This image shows the final UI dashboard that contains the button and the text output.

Summary

Creating beautiful UI dashboards is often essential to IoT projects, as they allow users to interact with the finished product. However, creating a user interface from scratch can be tedious, and it may take some time to iron out any problems or errors. Luckily, Node-RED includes an intuitive automated system that helps you effortlessly create visually pleasing UI dashboards with minimum effort.

Start by setting up a tab for every new dashboard you want to create. You can add a new tab for each project you make or use multiple tabs per project, for example, one tab per room in a home automation system. Then, add at least a single group to each tab. The groups contain and organize the UI elements you assign to them.

Then, add dashboard nodes to your Node-RED flows. Make sure to associate each node with precisely one of the previously created groups. Remember that Node-RED will not display UI elements that are not assigned to a group; similarly, Node-RED will also not display empty tabs and groups.

Like all other nodes in Node-RED, the UI nodes mainly use messages and variables to exchange data. Therefore, you can incorporate them into your flows like any other node. This tutorial only looked at two of the most straightforward UI nodes. However, the other ones work similarly, and they can add additional features to your UI, such as data visualization and notifications, should a value exceed a threshold.