NodeRed Dashbored (Yes, that is spelt correctly)
A customizable dashboard for NodeRed, not to be confused with the
NodeRed Dashboard project.
!
Example
Features
* Widgets!
* Configuration within the NodeRed flow(s)
* Custom CSS
* Compatibility with older browsers (We use Android tablets with outdated browsers and need to support them)
* Locked pages / actions behind a password
* A "Are you sure" dialog
Installation
Simply search for
node-red-contrib-dashbored in the pallet manager or install using
npm install node-red-contrib-dashbored
Creating your first Dashbored
How it works
The project serves dashboreds at your node-red ip
http://:1880/
The following
Example JSON will create 2 dashboreds at
/kitchen
!
Kitchen Example
and
/bedroom
!
Bedroom Example
and will show how widgets can be used between the two dashbored instances.
The example above has the following diagram that shows the general flow of the project.
!
Flow
It shows that the project has 2 main parts, widgets and dashboreds (both contained within a server). A
widget is an element that the user interacts with (for example a button that turns the lights on), and a
dashbored is the webpage that links to the widgets.
Doing it this way allows you to use widgets between dashboreds, for example one may have a toggle to turn the alarm on/off, this project allows you to have the widget for this implemented once but placed on several dashboreds, say on the bedroom, entry, and kitchen dashboreds.
Supported Widgets
Is a simple button that performs an action.
!
Action Button
Switches between two states. Useful for on/off applications.
!
Toggle Button
This allows for a selection of a value using a simple button layout
!
Button Selector
Stacks many other widgets horizontally
!
Horizontal Stack
Stacks many other widgets vertically
!
Vertical Stack
Control a volume channel
!
Volume
Control a volume channel by dragging the slider
!
DraggableVolume
Control a HVAC unit
!
HVAC
Learn More
Find information how the widgets work.
Find information on how the dashbored node works, it's settings and other information.
Find information on how the server it's self can be configured.
Find information on how to contribute to this project and how to create your own widgets.
Examples
$3
Sometimes it can be useful to modify widgets dynamically. In this example we will set the options of a few widgets dynamically.
Example JSON
$3
Sometimes it can be useful to add widgets dynamically. In this example two custom toggle buttons will be added to a horizontal stack.
Example JSON
Contributing
To contribute to the project fork the repo into your local directory and add it to node-red with the following commands
1. cd into the project directory
2.
npm install
3.
npm link
4.
cd ~/.node-red or
cd %userprofile%/.node-red
5.
npm link node-red-contrib-dashbored
You can add widgets into the widgets directory, see
Development for more information on creating widgets.
Limitations
* There is probably no or very little security. Data will probably be sent in plain text so don't expect any encryption.
* If you are using HomeAssistant access the editor externally. The configuration will not load if you access NodeRed through home assistant itself, the editor may also ask for 2 passwords, the first one is your admin password and the second is your password for accessing the web if configured.