some while ago I started a dashboard alternative, which is something between node-red-dashboard and node-red-contrib-uibuilder.
For details look at https://github.com/cinhcet/node-red-contrib-component-dashboard
The idea is that the dashboard widgets are web-components, i.e. custom html-tags with their own look and functionality. Each of these widgets can then also be accompanied by their own Node-RED node.
Creating the dashboard then means to write html, but adding a widget like a button or even more complicated things like a gauge or a music browser means just inserting for example
<yad-paper-button id="paperButton">I am a button</yad-paper-button>.
Then you can add a node to Node-RED which has an elementId parameter set to
paperButton. As soon as you press the button, this node will inject a message into the flow.
You have complete freedom of your dashboard, you could use your favorite css framework etc etc.
Creating new widgets means writing web-components. At the moment, the provided ones are created with polymer 3.
Now I finally found a convenient way of installing/bundling it, so that users could create new widgets and make them installable via npm. This was realized by the parceljs.org bundler, which is a html/js/css.... bundler that is able to resolve node_module paths. Therefore I decided to publish a first version to npm.
A few features:
- you can create as many separate dashboards as you want
- messages can be replayed
- widgets can not only communicate via websockts with NR, but also via ajax. This is helpful if you want for example to create a widget that browses a database or a music library or graphs.
- creating new widgets is actually relatively easy, since I tried to hide away a lot of complexity in the communication with NR.
At the moment, not many widgets are published. The biggest question I have is how to provide a good basic css grid structure layout, such that not everyone has to start from scratch. If someone wants to discuss that with me, I would be happy.
Let me know what you think!
Here some very basic pictures