An easy Dashboard

Create a web dashboard from your Node-RED Flow running locally (no cloud).

This tutorial shows how to insert web widgets into the NodeRED flow and use them from a web page where they are gathered.

Here how the result looks like:

Install the nodes

Click the right menu in the Node-RED web page. Choose Manage Palette then Install.

  • Type node-red-dashboard in the edit box and click the Install button.

  • Wait for the install

The installation may take up to 5 minutes (a progress bar shows the progress), depending on what is already installed on your device.

  • Then reboot and then refresh the web browser page.

  • Browse the palette and look at the newly added nodes.

A first simple flow

Add a Web widget node

Let’s start with a simple flow:

Drag the button node to near the Go one like this:

Double clic on the button node to add it in a UI group:

And use the following to create the UI group:

And use again the following to create a tab for the UI group:

Just choose add without changing anything.

Then add again then close the previous dialog with done button.

Don’t forget to validate the flow change with the activate button.

“Not properly configured” error

If you come to the following error below, that juste because node have no default settings when dragged.

Just double click the node - that adds the default configuration - and click the Done button. That’s all.

And see the result!!

Select the config tab on the right:

and open the dashboard by clicking the following icon:

Here is the result:

You can push the button, it behaves as you push the Go button in the flow!

A simple flow with a slider

Drag the slider node like this:

Double click the node to add a group as above.

The UI web screen becomes:

You can drag the slider: the output is according to the slider position:

A simple flow with a gauge

Drag the gauge node like this:

For a unknown reason, the name of the node becomes unit on the workspace

Moving the slider updates the gauge:

A simple flow with a chart

Drag the chart node like this:

Be aware to set an appropriate time window:

Moving the slider updates the gauge and the chart:

Use it with an temperature sensor

Buid a chart with an enOcean temperature sensor:

Nodon temperature sensor.

Use it to build the following flow:

And get the following charts:

See here for more informations.

A similar example can be done with a Hue temperature sensor as described here:


Learn more about NodeRED dashboard here: