Uibuilder v6.1 dev progress #8 - (more) final functional updates & more bug-fixes 😮

Share Your Nodes
1

I know I said that functional updates were complete - turns out I was wrong!

We have had an influx of new users, people testing the new version and people experimenting recently and this has meant that I found some rough corners that needed some TLC before go-live.

In this push, there are a few notable updates to the client library:

  • Another new function added to the client. uibuilder.showStatus() will show a table containing the most important status values for the uibuilder client. This is particularly useful for people testing pages on mobile phones and tablets where they may not have access to the dev tools console and perhaps where Socket.IO might be misbehaving. You can also turn this on/off from Node-RED (if comms are working of course) by sending a msg: {uib: {"command":"showStatus"}}.

  • The showMsg function can also be controlled from Node-RED. It has been improved and can be toggled simply by not passing any parameters. From a node-red msg: {uib: {"command":"showMsg"}}

  • Plenty of tweaks and improvements to the _ui low-code handling including:

    • A new method that allows the removal of ALL matching elements with a single selector (e.g. remove all list items by selecting li). The zero-code uib-update node has also been updated to use this.
    • Inserting/updating/removing elements can now be given a position within the parent (e.g. the 3rd item of a list or 5th row of a table) either by a number or first/last. This, of course, also works in the zero-code uib-element node.

  • The new function uibuilder.uiGet(selector) function will return a bunch of the most useful properties of an HTML element - saves you having to jump through hoops because some are quite hard to get. This can also be run from node-red so that you can, at any time, recover the key current properties of anything from the HTML DOM.

In addition, more improvements to the default uib-brand.css styles have happened. Including the introduction of some standard grid and flex layouts. Notably a nice status box has been defined. Expect to see a zero-code status display feature in the next release.

Lots of documentation improvements as usual.

Still a bit of work to do on the standard templates and examples but we are definitely "nearly there" :grin:

2 Likes
2

By the way, I'm totally itching to get going on v6.2 - the ideas that surfaced while working on 6.1 have created a cascade of further enhancements, many of which are now fairly straight-forwards to implement because they build on what already exists.

For example the showMsg and showStatus client functions both use the client's _ui low-code processing features to very easily create new visible elements. Just as the uib-element node also does.

Or the new watchDom and html cache functions spawned the idea for a future uiWatch function that will let you use the new uiGet function to send standard properties back to Node-RED (and will trigger a custom event so that you can handle changes in the front-end too). And the future htmlSend which will send the full DOM back to node-red where the new uib-save node will be able to save a static copy of the current web page that you can then reuse (save it to itself so that it becomes the new page!).

A future uiUpdate function will mirror the features of the uib-update node making it really easy to dynamically update data on the page from front-end code as well as from Node-RED.

Exciting times! See the v6.1 roadmap document for a braindump of the exciting features on the horizon.

2 Likes