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 OK 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 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”):
A node will pop on the workspace. Use it to build the following flow:
And get the following charts: