Hi,
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
4 Likes
version 0.0.2 published.
- switch widget
- text widget
- basic css flex layout for groups
- better example flow
somehow neither npm not the flows library is showing this package?!? maybe I have to be more patient.
Have you published it to npm?
yes, although I cannot find it there. https://www.npmjs.com/search?q=node-red-contrib-component-dashboard returns nothing. However, "npm view node-red-contrib-component-dashboard" shows it (install also works)
If it doesn't show up in the search results then the node-red flow library won't find it. You may need to follow up on https://npm.community
I will wait for another 24 hours and then ask there. Thanks!
Strange, never had this before with a npm package...
Edit: This link works https://www.npmjs.com/package/node-red-contrib-component-dashboard as normal
now it is appearing on npmjs.com and also on the flows page 
Could you suggest an IDE or HTML-editor that I could use to adjust/develop further web pages?
https://atom.io/ or https://code.visualstudio.com/
Actually I like visual studio code with the atom theme
A few tips:
- if you look at the bundle.js file, you will find the option "watch". If you set it to true, the bundler will automatically watch for changes and update your dashboard. Although it claims that you even do not have to refresh your browser, you sometimes have to do so.
- if you want to create your own widgets, look at the existing ones. If you have questions, ask.
Note that this is still a beta version, I try to make improvements. At the moment I want to come up with some kind of style guide so that if one creates a widget and adheres to this style guide, the complete dashboard could be themed with custom colors.
What "core" widgets do you miss most?
Thanks for your swift response and the links.
I'll try-out your suggestions later this evening.
I've used Dreamweaver and WebPlus (from Serif) for a number of websites I've built.
I just wanted to try using YAD to enhance the dashboard for my Home Automation system.
maybe I misunderstood you, the editors I mentioned are not html editors like Dreamweaver, they are code editors.
If you want to use YAD, then you have to write html/css (and javascript for new widgets) yourself.
Yes I think you did misunderstand me - but no bother I'm sure I can cope with hand-crafting some html/css.
I've been using VSCode as of late -- there are extensions that help edit HTML, CSS, YAML, etc.
Plus, you can use it to step through your custom node when it is running, using the techniques outlined on the old Google groups forum, like this one from Julian...
1 Like
Cool, you've managed to solve a number of design issues I've been struggling with in uibuilder. Partly through lack of experience and partly through lack of time.
I'd always planned to overlay a set of components over uibuilder to provide an intermediate way of working.
I've been back working with VueJS recently and discovered that bootstrap-vue is really good. However, I realise that is somewhat away from your use of Polymer.
gauge / chart.
But most importantly how to develop your own that is not just a button/switch?
I have already created a widget with the same gauge as node-red-dashboard uses.
I also played with charts, there the problem is how I should expose all possible options to the user in a convenient way.
Unfortunately, I am extremely busy at the moment, so it will take some weeks from now until I can publish them. I also plan to do a proper 1.0.0 release with some (little) changes in the next months. There is always this gap between developing something for yourself and polishing it such that it is usable for others....
But most importantly how to develop your own that is not just a button/switch?
Best way is to learn about web-components. You can use the native syntax, or use polymer 3 or use the new lit-element from the polymer team. It is really not difficult, if you know html, CSS and javascript. As long as you can develop your own widget as such a web-component, then interfacing it with node-red is very easy with the functions this dashboard provides. If you have specific questions, please ask here, I will try to answer them.
Thanks for the interest!
Cool, you've managed to solve a number of design issues I've been struggling with in uibuilder. Partly through lack of experience and partly through lack of time.
Thanks Julian, uibuilder was a great inspiration!
With respect to using bootstrap, as for vue, the libraries somehow have to be compatible with web-components, some are, some not. There is a lot of development here lately with the new polymer web-component library, which they call lit-element, especially how you can share CSS between different web-components.
