UI create

Node-RED: User Interface (UI) Design and Prototyping

Node-RED is an excellent tool not only for managing data flows but also for creating rapid prototype interfaces (UI) to visualize and control this data. Thanks to its low-code structure, you can prepare professional-looking panels without the need for complex HTML/CSS knowledge.

1. Installing the Dashboard Module

Node-RED does not come with a UI interface by default. For this, you need to install the most popular and standard node-red-dashboard node.

In the Node-RED editor, click the Manage Palette option from the menu in the top right corner.
Go to the Install tab.
Type node-red-dashboard into the search bar and click the install button.

2. Basic Concepts: Tab and Group Structure

You need to establish a hierarchical order when creating your interface. Node-RED Dashboard consists of three main layers:

Tabs: These are like different pages in your browser (e.g., "Home Automation", "Energy Tracking").
Groups: These are visual sections within a page (e.g., "Kitchen Lights", "Temperature Charts").
Widgets: Components the user interacts with, such as buttons, charts, sliders, etc.

3. Create Your First Interface

Let's start with a simple example: Let's create a Slider to control a Gauge.

Drag a Slider node from the left panel.
Add a Gauge node next to it and connect them.
Double-click the Slider node; create a Group here (if none exists, click "Add" to define a new Tab and Group).
Do the same for the Gauge and select the same group.
Press the Deploy button at the top right.

How to View? To access your interface, go to your browser's address bar and add /dashboard to the end of the Node-RED address. (e.g., http://[HUBBOX IP]:1880/dashboard)

4. Visualization Options

There are many ready-made components within the Node-RED Dashboard:

Component	Intended Use
Chart	Shows time-series data (temperature, humidity, etc.) as line or bar graphs.
Switch	Used to control or show a status (On/Off).
Button	Used to trigger a specific process (e.g., "Restart System").
Template	Allows you to create completely customized components by writing your own HTML and CSS code.

5. Advanced Customization and Styling

You can use the Dashboard tab on the right side to make your interface look more professional:

Theme: You can choose Light or Dark mode and change the color palette according to your brand.
Site: You can set the page title, icons, and visibility of the navigation bar.
Layout: You can arrange the width and placement of components on the screen using a drag-and-drop method.

Important Tips:

Mobile Compatibility: Consider mobile screens when adjusting the width of groups.
Data Entry: In addition to visualization, you can also provide data entry from the outside with nodes like Text Input.
Context: Don't forget to use global or flow variables to store data sent via the UI.

Node-RED UI is extremely efficient for real-time data monitoring and device control, especially in IoT projects.
Learn more: www.hubbox.io