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-dashboardor 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.
Additional Dashboard Nodes
Not all nodes available dashboard nodes are part of the default dashboard nodes. Two nodes in particular are the table and list nodes will need to be installed separately.
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
Dashboard Examples
- Video –Using the chart node video
- Video –How to Create a Node-Red MQTT Dashboard
- Video –Creating a Dashboard for the Eztimer
Other Node-Red Tutorials and videos
Steve,
Thank you so much for all the work you do in building and continuing to expand your website of information. You present the information in a logical, easy to understand method. Because of that, when you have covered something I’m interested in learning, your site is the first I start with. From your pages I’ve learned enough about Node-Red and MQTT to let me begin to control the tasmota’d sonoff devices.
Have you dabbled with the programs openHab or HomeAssistant?
Hi
Tks for the nice comment and glad you find the site helpful.
I have dabbled with homeassistant and it is on my list of things to do.
rgds
Steve
Hearty Greetings, I am 72 years old retired Telecom Engineer and my hobby is IoT. I go through your article and videos on Node-Red and it is really exhaustive. You expose all most, all the options and features of Node-red and it will be more than enough for some one to master it. Thank you so much for your contribution to beginners like me.
With Great Regards, Ragothaman R. from India.
Hi
Glad you found it useful.
Rgds
Steve
Hi, is it possible for a tutorial on how to access (safely) nodered across the internet with nodered running on raspberry pi. Many thanks.
This is a HUGE amount of work you are putting into this site – and tons of people arecbenefiting from it – THANK YOU !
Great tutorial. Thanks. I read step by step. I fully understood every concept. The illustrations help a lot. Then I saw the video. It enhanced my understanding of the whole thing and every concept. Thanks for your Magnum Opus.
If I installed in home directory by accident, can i copy the contents of the created user/node_modules directory into the correct ~/.node-red/node_modules folder?
I think so I would try it.
rgds
Steve
Looking forward for a windows version instead of reinventing the wheel…
I cant get it to display /ui error message is please add som ui nodes but i have them in
Hi
Can you send me a screen shot of what you are getting using the ask steve page and I’ll take a look
Rgds
Steve
Thank you for a very useful tutorial on the Node-RED dashboard. I am just getting into using WeMos and ESP32 modules for home automation and Node-RED is looking to be a good tool for visualizing and controlling devices so the tutorial was spot on!. I am currently using Google Home minis via IFTTT and Adafruit.io to give word commands to WeMos and ESP32 devices (having looked at many less reliable/slower combinations). I am currently looking to replace the Adafruit.io route with Node-RED and Mosquito MQTT running on a Pi. Do you have any recommendations for doing it in a better or more direct way? Regards Steve
No
That is the way I would go.
Rgds
Steve
Hello !
I´m doing exactly the same thing, using the same elements.
If I may, let me suggest to round up your set-up, to also use a mobile app for visualization.
In my case, after some research, I decided for “MQTT Dashboard”. I have an Android phone so I found it in Play Store. I don´t know whether they vave an iOS version.
I join the group here in congratulating and thanking Steve for his awesome tutorials, making the learning curve less steep for us all.
Kudos Steve! Keep up the good work.
Oscar
Tks for the comments glad that you find the site useful.
Rgds
Steve