🧑‍💻 UIBUILDER next steps - what is coming in v6.8

Hi again to everyone interested in UIBUILDER.

Development of v6.9 is well under way so I thought I'd share a couple of teasers. There may well be more before I've done and I'll try to update this if so. No fixed release timetable yet, too much happening in other parts of my life for that right now.


<uib-var> improvements

There will be an extension to the <uib-var> custom web component. A new attribute filter is being added that will let you apply pretty much any JavaScript function to the variable before it is displayed. Working out how to do this reasonably safely has been an interesting challenge but the approach I've developed should also be applicable to other things as well which will be exciting.

Custom communication channels via a "Rooms" feature

This is still in development and uses the Socket.IO server library's rooms features.

This will enable client-to-client communication via the uibuilder client library (via Node-RED server of course). That will work across different instances of uibuilder nodes as well.

It will also improve the efficiency of server-to-client comms when filtering by uibuilder's clientId or pageName attributes as these now use dedicated rooms instead of the general connection. So those filters now prevent data being sent to the client at all.

The 3rd aspect of this work is that the clients now subscribe to the root namespace as well as the uibuilder node's dedicated namespace. It is this that will allow the server to talk to ALL clients (regardless of which uibuilder instance they are connected to). And will also allow each client to do the same. Of course, it is up to each client connection to decide whether they want to listen to something. :grinning:

There will be a new node that will enable room-based and multi-instance communications from the server.

Just noting that "rooms" are a Socket.IO server concept, clients have no direct knowledge of them so I am overlaying a naming convention that will facilitate client listeners. I will be implementing a simplified uibuilder client function of course so you don't have to know any of the gory details.

Socket.IO is pretty efficient at what it does so these new features really shouldn't add much in the way of overheads, particularly at the client. Client ID and Page Name rooms are automatically created and destroyed on the server and all connections are shared.

Other

At the moment, those are the 2 headlines but plenty of other things are coming along for the ride. Such as:

  • New navigate function and command. Triggers a page change or a route change either from front-end JavaScript or via a command message in Node-RED. Put a client into Kiosk mode and rotate pages or route displays all from Node-RED!

  • New scrollTo function and command. Scrolls the visible page to a specific location either from front-end JavaScript or via a command message in Node-RED.

  • No-code and low-code features now all allow more flexible class handling (add, remove, and replace using lists). HTML element data outputs also now return an array of class names, not just a combined string.

  • Front-end commands issued from Node-RED can now take a quiet option set to true to prevent the return message. e.g. {"_uib": {"command":"navigate","prop":"#newroute","quiet":true}}

  • Front-end developers now have full access to the ui.js library via the $ui global.

  • addClass(classNames, el) and removeClass(classNames, el) UI functions added to the client library

  • connect() and disconnect() functions added to the client library to manually connect/disconnect the Socket.IO connections

And behind-the-scenes:

  • More work to move filing system access into the single libs/fs.js library
  • All nodes now have Editor properties that track how the node was added to the Editor. This enables Edit-time code to differentiate between newly added, pasted and updated nodes. Particularly useful to be able to blank out some node properties when copying/pasting.
5 Likes

Lots of work going on behind the scenes for v6.8 - here are some updated highlights:

  • The uibrouter library gets some serious updates in this version. Including automatic menu updates (to highlight the current route) and new uibuilder variables to use with <uib-var> to show titles and descriptions that update automatically.

  • The <uib-var> HTML component gets

    • This is BIG! - A topic attribute (use instead of the variable attribute) that automatically watches for messages from Node-RED matching the topic and outputs the payload onto the page. This becomes the easiest way to automatically update the page! It is similar to mustache tags ({{varname}}) in frameworks but has the advantage that it is 100% vanilla standard HTML.

    • A filter attribute that can be used along-side variable or topic or on its own. The attribute receives the name of a function to run whenever the source data changes. Use for formatting output. A new function uibuilder.formatNumber has been added that is compatible, it outputs a formatted version of an input number according to the locale and number of decimal places specified. <uib-var topic="mytopic" filter="uibuilder.formatNumber(2, 'de-DE')">[...]</uib-var>. You can, of course, create your own filter functions.

    • Access to your ./index.css style sheet file. This lets output be styled like the rest of your page.

  • The client library gets

    • Connected to a new "global" socket.io "room" allowing uibuilder connected pages to talk to each other.

    • A new navigate function and command. Triggers a page change or a route change either from front-end JavaScript or via a command message in Node-RED. Put a client into Kiosk mode and rotate pages or route displays all from Node-RED!

    • A new scrollTo function and command. Scrolls the visible page to a specific location either from front-end JavaScript or via a command message in Node-RED.

    • New UI functions addClass(classNames, el) and removeClass(classNames, el) to make class handling easier.

    • New connect() and disconnect() functions to manually connect/disconnect the Socket.IO connections.

  • No-code and low-code features now all allow more flexible class handling (add, remove, and replace using lists). HTML element data outputs also now return an array of class names, not just a combined string.

  • Front-end commands issued from Node-RED can now take a quiet option set to true to prevent the return message. e.g. {"_uib": {"command":"navigate","prop":"#newroute","quiet":true}}

  • Front-end developers now have full access to the ui.js library via the $ui global.

1 Like

And more example flows!