โœจ uibuilder sneaky release! v6.3.0 - Dynamically create SVG images using low-code

There is really only 1 new feature in this release which is why it is a bit sneaky coming so soon after 6.2 - but it is incredibly powerful! :man_mage:

You can now use the uibuilder low-code dynamic configuration data to create SVG elements as well as HTML! This means that you could, for example, easily create an SVG-based gauge dynamically.

Watch out for an example I'll post shortly. :grin:

Client library changes

  • _ui handling extended to support dynamic creation of SVG images.
  • Changed _uiUpdate() to use _uiComposeComponent() for consistency & code reduction.

uib-brand.css

  • Adjusted img, picture, video, canvas, svg background colours to match the html background colour --surface2.

Examples

  • zero-code: Minor correction to form example (1st input had changed id)
1 Like

Are there any updated DOCs for these new versions ? :exploding_head:

No new docs in v6.3 but in v6.2 there were extensive improvements to the documentation for the zero-code forms output. v6.1 had very significant updates to the documentation.

Forms (totallyinformation.github.io)

v6.3 is really just a tweak to how the uibuilder client hydrates the low-code descriptor data back to HTML so that it can dynamically create an SVG - which annoyingly can't be done with the normal document.createElement but rather has to use document.createElementNS.

That kind of thing is why I've been spending time creating these intermediate functions because doing this stuff directly with the DOM is a nightmare of different rules and exceptions. The uibuilder low-code features evens all of that out and presents a consistent interface while still remaining close to the vanilla HTML (and now SVG) so that as you gain experience, it can be used either with uibuilder or equally with vanilla HTML.

I now realise that when I click on the DOCs link in the node. it's showing a local copy of the doc which are not the same as GitHub version !!!

1 Like

Ah, yes! The online version is the latest version in the main branch of the GitHub repository.

The local version is, of course, whatever version of uibuilder you currently have installed. So you can use it even when not connected to the Internet.

I tend to keep a couple of instances of Node-RED running. One that is the current node-red and uibuilder release and another that can be the latest dev versions.

As always - I'm generally hanging around to help with any questions. :grin:

I just updated to 6.3 - but the local docs don't look the same as github version ?

Try reloading the page? Your browser might be caching.

Otherwise, let me have an example and I'll check it out.

Quick comparison after clearing cache on broswer -

Side bar nav is missing, No dark mode icon.

Urg! Looks like it has been broken for a while - I never noticed as that doesn't happen on my dev PC, only on live. I'll have to work out what is happening. Thanks for reporting. There's always something it seems!

Oops! Found it.

The _sidebar.md file gets dropped when publishing to npm!! Weirdly, that also kills the light/dark switch, not sure why.

No idea why that file is being missed out of the published archive. Didn't used to happen.

Work-around is to put the file manually back into ~/.node-red/node_modules/node-red-contrib-uibuilder/docs/_sidebar.md.

This is the file:

* [Home](/)
* Using uibuilder
  * [A first-timers walkthough](walkthrough1.md "Let's get started!")
  * [Did you know?](did-you-know.md "Things you might not know about uibuilder")
  * [Creating data-driven web apps](web-app-workflow.md "Different styles and workflows you can use")
  * [Configuring uibuilder](uib-configuration.md "Configure the uibuilder platform. Affects all uibuilder nodes")
  * [Standard messages](pre-defined-msgs.md "Catalogue of messages and properties")
  * [Creating Templates](creating-templates "Pre-defined and reusable front-end code, dependencies, and optional build steps")
  * [Browser auto-refresh](browser-refresh.md "Automatically reload your page after a change")
  * [Zero-code UI creation](using/zero-code-ui.md "Dynamically creating web UI's")
* The nodes
  * [`uibuilder`](nodes/uibuilder.md)
  * [`uib-cache`](nodes/uib-cache.md)
  * [`uib-element`](nodes/uib-element.md)
  * [`uib-update`](nodes/uib-update.md)
  * [`uib-sender`](nodes/uib-sender.md)
  * [`uib-html`](nodes/uib-html.md)
  * [`uib-save`](nodes/uib-save.md)
* The front-end client
  * [Introduction](client-docs/readme.md)
  * [Features](client-docs/features.md)
  * [Controlling from Node-RED](client-docs/control-from-node-red.md)
  * [Dynamic, config-driven UI's](client-docs/config-driven-ui.md)
  * [Functions](client-docs/functions.md)
  * [Variables](client-docs/variables.md)
  * [Custom Events](client-docs/custom-events.md)
  * [uib-brand Style Sheet](client-docs/uib-brand-css.md "How to use the uibuilder standard style sheet uib-brand.css")
  * [Troubleshooting](client-docs/troubleshooting.md)
  * [Old uibuilderfe client library](front-end-library.md)
* Zero-code element types
  * [Tables](elements/tables.md)
  * [Forms](elements/forms.md)
  * [Lists](elements/lists.md)
  * [HTML](elements/html.md)
  * [Headings, text boxes, etc.](elements/other.md)
* UI frameworks & builds
  * [VueJS complexities](vue-complexities.md)
  * [VueJS components](vue-component-handling.md)
  * [Svelte](svelte.md)
  * [Avoiding a build step](front-end-no-build.md)
  * [Optimise & transpile (build)](front-end-builds.md)
  * [Snowpack as build tool](front-end-build-snowpack.md)
* How to
  * [How & why to use the sender node](sender-node.md)
  * [How & why to use the list node](list-node.md)
  * [Use the cache node](cache-node.md)
  * [Change the root folder (uibRoot)](changing-uibroot.md)
  * [Create instance-specific API's](instance-apis.md)
  * [Other How-To's](how-to/README.md)
* Security
  * [Securing uib web apps](security.md "Overview of general web app security with some specifics for Node-RED and uibuilder")
  * [Securing Data](securing-data.md "How to use flows and uibiulder middleware to secure your data")
  * [Securing apps using NGINX](uib-security-nginx.md "How to use NGINX as a reverse proxy with TLS and identity authentication")
* [Developer documentation](/?id=developer-documentation)
  * [Processes](processes/README.md)
  * [`nodes/uibuilder.js`](uibuilder-js.md)
  * [`nodes/uibuilder.html`](uibuilder-html.md)
  * [`nodes/uiblib.js`](uiblib-js.md)
  * [`nodes/tilib.js`](tilib-js.md)
  * [`nodes/web.js`](web-js.md)
  * [`nodes/socket.js`](socket-js.md)
  * [`front-end/src/uibuilderfe.js`](uibuilderfe-js.md)
* Testing
  * [Regression tests](regression-tests.md)
* [Glossary of terms](glossary.md)
* [Changelog <sup>๐Ÿ”—</sup>](changelog)
* [Roadmap](roadmap)
* [Main readme <sup>๐Ÿ”—</sup>](uibhome)
* Archives
  * [v5 Changelog](archived/CHANGELOG-v5)
  * [v3/4 changelog](archived/CHANGELOG-v3-v4)
  * [v2 breaking changes](archived/v2-breaking-changes)
  * [v2 changelog](archived/CHANGELOG-v2)
  * [v1 changelog](archived/CHANGELOG-v1)

- **Links**
- [uibuilder license <sup>๐Ÿ”—</sup>](https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/LICENSE)
- [uibuilder WIKI <sup>๐Ÿ”—</sup>](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki)
- [Much Ado About IT (Blog) <sup>๐Ÿ”—</sup>](https://it.knightnet.org.uk)
- [Node-RED <sup>๐Ÿ”—</sup>](https://nodered.org/)

Looks better now !

Thank you very much for your hard work TotallyInformation !
I've look at your last video and it's impressive to see Zero-code Example in details.
But, if i want to quit Nodered Dashboard, it's to have hands-free on my css / prensentation. I know bootstrap pretty well, and i can learn vue (i've develop with angular a few years ago).
So, i've look at Template Tests Example, but, i'm a little bit lost with which template i've to choose, could you help me ???
Thanks again,

No problem. If you want to get into Vue, at the moment you need to choose between Vue v2 and v3.

v3 is the future but a lot of extensions haven't caught up since the big extension libraries have a lot to test at the very least if not a lot of changes to make.

bootstrap-vue sadly falls into the not yet ready for v3 category. So if you want to use that, you will want to still with Vue v2 a little longer. I liked bootstrap-vue as I found it very easy to use and they don't make any assumptions about needing a build-step just to do straight-forward things.

I'd also say that - in my opinion - Vue v2 is easier to learn. Though I'm sure others might disagree and it might simply be because that's what I learned. But I find the code for the new v3 approaches far more complex,

If you do want to get into Vue v3, I'd say that Quasar or Vuetify are your better bets. Vuetify uses Material Design I think and Quasar does its own thing. So neither currently use bootstrap I'm afraid. Both are now capable of being used without a build step.


Hope this gives some insight?

Vue v2 with bootstrap-vue has a built-in template with an example:

Which would get you going.

No templates for Quasar or Vuetify I'm afraid though I do have a couple of rough test flows - 1 for each of them - that lets me make sure that uibuilder still works with them. Give me a shout if you want either of them - they really don't do anything useful though just load the libraries and use a couple of components.

PS: Just to say that I'm no longer using Vue myself having learned a bit more HTML and CSS, I've mostly ditched frameworks and I use vanilla HTML/CSS mostly. But I'm not really currently trying to build anything complex. However, I've had some success at building some fairly complex outputs both from the zero-code stuff as well as things like the low-code vanilla SVG gauge I demonstrated yesterday and the "Tech Radar" I showed recently. I got fed up of overly complex frameworks that only ever seem to get more complex and where the complexity only really helps massive front-end apps and not the majority of what I need to do which is mostly about getting some simple user data into Node-RED or visualising data.

Don't let that put you off though - only you know what you want to build and what you want to learn. :slight_smile:

Thank you for this long answer !
Perhaps you're right and i will use vanilla HTML/CSS...
Do you have build uib-brand.css from scratch ?

I have kind-of built from scratch but a lot of is is "borrowed with pride" from other sources of course :grin:

It isn't perfect by any means and I always welcome feedback, thoughts, corrections and ideas. I seem to need to make a tweak or 2 on each release. It doesn't aim to be comprehensive like bootstrap - which, of course, you can absolutely use directly with uibuilder. You certainly don't have to use it.

Sorry TotallyInformation, have you seen that ? Vue.js 3 support | BootstrapVue
I know that you don't like too much vue3, but is there a chance to have a new template with it ?

Hi, yes I saw that and even tried it out some weeks ago but I couldn't get it to work.

It also looks like a lot of work and a fair bit of learning to do. Sadly, I don't currently have time. If someone comes up with a working example though, we have several ways that we can get it available. For example, it is possible to have an external template - so anyone can put up a template on GitHub and there is a WIKI entry to publicise them. Then anyone can install from such a template without needing any kind of install.

Sounds cool, Julian! I'll have to give uibuilder another try when I get my other projects completed. Dynamic guages could come in handy for me!

Thanks :grin:

If you like gauges, you may be interested in the fact that another forum member, hotnipi, has just gifted an HTML Component version of his fabulous gauge that works nicely with uibuilder:

image

I can pass on a copy manually. When I get time, I will be publishing it as a package to make it easier to use. When that happens, you will be able to install using uibuilder's library manager.

You may also have seen my recent post on a pure SVG gauge. That was mostly an SVG learning and test exercise for me to make sure that the uibuilder low-code features can create SVG's dynamically.

Of course, there are any number of chart and gauge libraries available - they should all work just fine with uibuilder without the need for a front-end framework.

1 Like

Would you please explain the therm dynamic gauge. Specially the dynamic part of it.