Building an IoT Dashboard with Node-RED
Learn how to centralize and optimize your IoT monitoring
In the rapidly evolving landscape of the Internet of Things (IoT), managing and visualizing data from connected devices is crucial. As IoT ecosystems become complex, efficient monitoring and control tools become paramount.
Enter Node-RED — an open-source flow-based programming tool that provides a visual development environment for wiring IoT devices, APIs, and online services.
In this blog post, we’ll explore how Node-RED can be utilized to create a powerful IoT dashboard for managing and monitoring connected devices. Whether you’re a hobbyist experimenting with home automation or an enterprise deploying large-scale IoT solutions, Node-RED offers flexibility and simplicity in building intuitive dashboards tailored to your needs.
What is Node-RED?
IBM Emerging Technology developed Node-RED, built on top of Node.js and provides a browser-based flow editor. It allows users to wire together devices, APIs, and services using a drag-and-drop interface, making it accessible to both beginners and experienced developers.
With its extensive library of pre-built nodes and the ability to create custom nodes, Node-RED enables rapid prototyping and deployment of IoT applications.
Learn how to install Node-Red.
Building the IoT Dashboard
Now that we have Node-RED running, let’s create our IoT dashboard.
First, we will need to install an additional package, the Node-Red Dashboard node. To do so, open the palette manager using the Node-Red main menu, search for the node-red-dashboard package, and install it.
We will use this node-red-dashboard node package to create our IoT dashboard.
Here, we will simulate our two IoT sensor devices, Motor Vibration and Motor Temperature. We will use a function node to simulate Motor Vibration and Temperature in the range of 0 to 100.
To simulate Motor Vibration and Temperature in the range of 0 to 100, the following JS code will be used with a function node.
var msg = {};
msg.payload = Math.round(Math.random()*100);
msg.topic = 'Line1';
return msg;Now, we will create the IoT dashboard layout design. To access the IoT dashboard setting for layout design, click on the option highlighted in the following screenshot and follow a number of steps.
After going into the dashboard settings, we can see there is a layout section. From there, we can create groups and add UI components to particular groups to show on the IoT dashboard. We can add multiple widget UI components to a single group to show on the IoT dashboard.
In the above screenshot, we can see two groups named Motor Vibration and Motor Temperature. Under Motor Vibration, to visualize the motor’s Vibration, we have used the Chart node added under the Motor Vibration group. We have used the Gauge node added under the Motor Temperature group for Motor Temperature.
We can add a UI widget to a particular group by selecting the group from the widget UI properties. As shown in the screenshot highlighted with a red square, we can add a widget to a particular group from there. We can also change and modify different settings of the widget from its properties.
We can select multiple widget UI nodes from the Dashboard node section. Different types of widget UI components are available under the Dashboard node section.
After integrating the timestamp node with the function and widget UI nodes, the red UI flow editor of all nodes will look like the following screenshot.
In the node-red flow, the Timestamp node triggers the function node every 1 second to push real-time sensor values to visualize on the IoT dashboard. Function node will push particular sensor data to a particular widget UI node, which we integrated with them.
As we can see, function 4 node will push motor temperature sensor data to the motor temperature widget UI, and function 3 node will push motor vibration sensor data to the motor vibration widget UI, and it will visualize real-time sensor values accordingly on the IoT dashboard.
The timestamp node setting will look like the following screenshot. Here, the timestamp node is configured to trigger at every 1-second interval.
After deployment, this IoT dashboard will look like the screenshot with two UI widgets we created to visualize real-time sensor values.
To access IoT dashboard we can click on this icon from dashboard menu highlighted in screenshot
Conclusion
In this blog post, we explored how Node-RED can be used to create a powerful IoT dashboard for managing and monitoring connected devices.
With its intuitive interface and extensive library of nodes, Node-RED simplifies the development process, allowing users to focus on building innovative IoT solutions.
For more updates on the latest tools and technologies, follow the Simform Engineering blog.
