The node red dashboard is an add-on module that lets you create live dashboards.
It is an optional module and it is not installed by default.
You can install the dashboard nodes using npm make sure you are in your .node-red folder when you run the command:
npm install node-red-dashboard
or from inside node-red just as you install other nodes.
The Node_red dashboard files are stored in a folder called node-red-dashboard in the node_modules folder.
The install adds a new category to the node palette and a collection of UI (User Interface) nodes or widgets.
They consist of both input and output nodes.
To use them just drag them onto the flow canvas.
Starting with version 2.10 you can now install individual widget nodes, and also create your own dashboard widget nodes. see here
Using The Node-Red Dashboard
The dashboard or display nodes appear on the User Interface (UI) dashboard.
To access this dashboard use the url – host:1800/ui or in my example: 192.168.1.157:1880/ui
An example UI dashboard is shown below:
You can have multiple display pages called tabs and each tab has a name.
On a Page the display nodes can be arranged in Groups.
When you drag a node onto the flow canvas you will need to edit it to target a display tab and a display group.
Each dashboard node has three important settings:
- The Group Name – group and tab example shows a group called control on the MYhome tab.
- Label name – This is the name on the dashboard
- Name – This is the name in the flow workspace.
Controlling the UI Dashboard Layout
The layout of the UI screen can be controlled in the dashboard tab (third column main screen) of the admin page and select layout.
You can create new tabs and groups and move display nodes between groups using this screen.
This is usually were you do the initial design.
The screen shot above shows a flow with three display tabs called MYhome and Bedroom and Lounge.
The MYhome tab has two display groups call display and control.
The display group has two display nodes gauge and light and the control group has two display nodes -light switch and main slide.
This is how they appear on the User Interface.
This is the Flow I used to create the above.
Common Questions and Answers
Q- I have installed node-red but don’t see the dashboard nodes.
A- The dashboard nodes are an add-on and need to be installed manually.
Q- I have installed the dashboard nodes but they don’t appear in my admin Interface.
A- You weren’t in the .node-red folder when you did the install.
Node Red Demo Video
This video takes you through installing and creating a basic dashboard.
Here is the flow used in the video
Other Node-Red Tutorials
- Using the UI Dashboard Template Node (Widget)
- Using the chart node video
- Node-Red Settings.js File – Node-Red Admin
- Video –How to Create a Node-Red MQTT Dashboard
- Securing Node-Red with SSL and Username Authentication