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!
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.
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)
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.
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.
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.
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!
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:
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.
I have kind-of built from scratch but a lot of is is "borrowed with pride" from other sources of course
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.
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:
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.
