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 not installed by default.

Here are the install instructions and a brief description of what it does.



Important Notes:

  • On Linux you need to have created the link to node or the install fails.
  • You get a series of warnings at the end as shown below:nodered-dashboard-install-warningsThe warnings are nothing to worry about.
  • You need to go to the ~/.node-red folder (Linux) to do the install otherwise when you open the node-red interface the dashboard icons will be missing.

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.

node-red-dashboardThey consist of both input and output nodes.

To use them just drag them onto the flow canvas.

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 guage 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

Node Red Demo Video

This video takes you through installing and creating a basic dashboard.Here is the flow used in the video, and in creating this tutorial.

=====>How to Copy Nodes and Flows in Node-Red



Other Node-Red Tutorials

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Leave a Reply

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