Options for dashboards

[AndreKR]

I'm looking into uibuilder to build small dashboards mainly because node-red-dashboard does not allow to serve multiple dashboards on different URLs (which would allow me to configure HTTP Basic Auth in the webserver). Node-RED is running remotely with only HTTP access, no SSH or local file editing.

Unlike node-red-dashboard, uibuilder by design doesn't come with dashboard components, so I'm looking into my options here. I'd like to confirm that I understand everything correctly.

• I can't use anything that requires a build script, so no Admin One for example.
• I could build the HTML using the _ui thing, but that would require me to learn the JSON language instead of HTML which I already know, so I'm not sure what I would gain by that.
• I can use ES modules to make Vue components, but since Single File Components require a build, I need to use the {setup: ..., template: ...} syntax.
• I can use CSS frameworks if I can load them as static files using <style> and <script> tags. TailwindCSS is a framework I know and while it's not recommended I should be able to use it in "Play CDN" mode.
• I can however use frameworks that are actually built as ES modules, like Vuetify. The frameworks has to support this, just because a framework consists of ES modules doesn't mean the browser can resolve and use it from node_modules.
• I gave up on Bootstrap a couple of years ago because aligning things (like two horizontal radio groups next to each other) never worked on the first attempt, but since it is a comprehensive UI framework that can be loaded through <style> and <script> tags, it might to wise to revisit it.
• To receive updates from Node-RED I have to call uibuilder.onChange('msg', function(msg) { ... }) and in that inner function I do the update either using plain JS (querySelector('...').innerHtml = ...) or by updating reactive root properties of a Vue app or by for example calling ChartJS's update() function.

Is that about right?

[TotallyInformation]

Hi Andre, apologies for missing this till now.

Unlike node-red-dashboard, uibuilder by design doesn't come with dashboard components

This is starting to change. The no-code uib-element node has a number of pre-defined components that are automatically created based on simple input data. The uib-update node lets you update things that you've already created if you simply need to, lets say, update a current value, if you need to rebuild an element, you can simply re-use the same uib-element node you started with but with new data.

So it is a different way of working than Dashboard. And, of course, not all of the elements that Dashboard provides are, as yet, available in uib-element.

I can't use anything that requires a build script, so no Admin One for example.

You can indeed use anything, even if a build step is required. There are some examples in the WIKI. Currently, there is no Editor direct support for doing a build - though it is on the roadmap where scripts defined in the package.json for a UIBUILDER instance will be exposed as buttons in the Editor. But you can still use any web development workflow you use elsewhere, you simply need to work with the instance root and its sub-folders.

I could build the HTML using the _ui thing, but that would require me to learn the JSON language instead of HTML which I already know, so I'm not sure what I would gain by that.

If you already know HTML/CSS/JavaScript and have an existing web development workflow, by all means, use that - this is the core strategy of UIBUILDER: Provide a harness for building data-driven web apps but otherwise don't get in the way! 😁

However, speaking personally, I've discovered myself using the low-code JSON approach for more things over time because it is simply much easier, especially for what should be simple things, than fighting with either the DOM or a front-end framework. See my recent posts in the forum about MQTT v5 as an example. I can move from idea to execution really quickly by building a simple JSON structure that defines the HTML. Of course, if you use a front-end framework in your day-job, this may be less useful to you as the framework might already be doing most of this for you.

I can use ES modules to make Vue components, but since Single File Components require a build, I need to use the {setup: ..., template: ...} syntax.

There are ways to avoid a build step with Vue but it can be tricky. Especially with v3. But, as mentioned above, this is not an issue, you can incorporate a build step.

I can use CSS frameworks if I can load them as static files using <style> and <script> tags. TailwindCSS is a framework I know and while it's not recommended I should be able to use it in "Play CDN" mode.

Again, build steps, while often not needed, are supported by uibuilder.

I can however use frameworks that are actually built as ES modules, like Vuetify. The frameworks has to support this, just because a framework consists of ES modules doesn't mean the browser can resolve and use it from node_modules.

That is correct, though a build tool like esbuild (which I now use extensively to build parallel ESP and IIFE versions of the front-end libraries for example, can incorporate node.js modules in some cases. I also use esbuild to enforce JavaScript/node.js version specifics.

I gave up on Bootstrap a couple of years ago because aligning things (like two horizontal radio groups next to each other) never worked on the first attempt, but since it is a comprehensive UI framework that can be loaded through <style> and <script> tags, it might to wise to revisit it.

Bootstrap was used in many of the VueJS examples purely because, at the time, bootstrap-vue was one of the easiest component extensions for Vue that didn't require a build step. Personally, I don't use anything like that as I am not a full-time developer and don't have the ability to continually remember all the complexities.

To receive updates from Node-RED I have to call uibuilder.onChange('msg', function(msg) { ... }) and in that inner function I do the update either using plain JS (querySelector('...').innerHtml = ...) or by updating reactive root properties of a Vue app or by for example calling ChartJS's update() function.

If you are using Vue, you will normally just use the onChange function to update a Vue managed data variable and let Vue do its stuff. No need to mess with the DOM.

If you are not using a framework, uibuilder provides a shortcut for getting a reference to a single DOM element. The $(...) window level function is available, so $('#mything') for example, similar to jQuery. If you need an array of elements, you can use $$(...). These also match what you get in your browser dev console. Should you be using jQuery or something else that defines window.$, the shortcuts are still available as uibuilder.$, etc.

But yes, you can manipulate the DOM directly. Or you could use the uibuilder.ui() function with the standardised JSON to avoid DOM complexities if you prefer since that is usable in the front-end as well as from Node-RED.

Hope this helps?