How to Create a Basic Node-Red Dashboard

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.

node-red-dashboard-files

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.

 

node-red-dashboard

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 urlhost:1800/ui or in my example: 192.168.1.157:1880/ui

An example UI dashboard is shown below:

node-red-dashboard-layout

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.

dashboard-node-properties

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.

node-red-dashboard-layout-1

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.

node-red-dashboard-ui

This is the Flow I used to create the above.

node-red-dashboard-demo-flow

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

<=====Understanding the Message object

=====>Storing Data in Node-Red Variables

Other Node-Red Tutorials

Please rate? And use Comments to let me know more
[Total: 8   Average: 4/5]

17 comments

  1. 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.

  2. 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

    1. 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.

    1. 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

  3. 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?

  4. 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.

  5. Hi, is it possible for a tutorial on how to access (safely) nodered across the internet with nodered running on raspberry pi. Many thanks.

  6. 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.

  7. 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?

    1. 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

Leave a Reply

Your email address will not be published. Required fields are marked *