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. Click Import > node.

Type

node-red-dashboard

in the edit box and click the OK button.

This imports a third party software. The installation may take minutes (a progress bar shows the progress), depending on what is already installed on your device.

At the end, click the reboot button to restart the device.

Browse the palette and look at the newly added nodes:

Refresh the browser if the nodes are not there

A first simple flow with a button

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 Enocean temperature sensor

Install Enocean stuff as described in the Enocean documentation.

You also need a dedicated dongle:

But then you can include a temperature sensor by pressing its LEARN button (learn more about this in the dedicated documentation “Temperature sensor”):

Nodon temperature sensor.

A node will pop on the workspace. Use it to build the following flow:

And get the following charts:

Back to top