Uibuilder v6.1 dev progress #4

Another update on progress. 3 notable new things to share.

  1. I am very pleased to say that @mudwalker has agreed to help out with some documentation improvements. This is very much appreciated.

  2. In the past, all of the templates had a <pre> element in the html and some JavaScript that updated it with the latest msg from Node-RED. Well, you don't have to do that now. :grin: You also had to define some CSS to make the display look reasonabl. All of that boilerplate code will be removed from all templates before release. In its place, is a single, optional line in your JavaScript uibuilder.showMsg(true). That does it all for you. There is also an optional 2nd argument that lets you choose a "parent" HTML element to add the display to. Just do uibuilder.showMsg(false) to turn it off.

  3. Some additional new functions in the client library. Most notably uibuilder.watchDom(true). This tells the browser to watch for any changes at all to your web page. When it sees any, it automatically saves the whole page into the browser's localStorage which persists across browser and device restarts.

    To make use of that data, simply add uibuilder.restoreHtmlFromCache() to the start of your index.js file and, on (re)load, the page will be restored to the last saved view.

    If you don't want to automatically save, you can manually save whenever you like using uibuilder.saveHtmlCache(). And you can clear the cache with uibuilder.clearHtmlCache().

There are still a few things to tidy up in the uib-element node and the processing in uib-update isn't quite working yet. Other than that and whatever documentation updates we can squeeze in, we are pretty close to release.

I've already started planning for the v6.2 release. The roadmap document has the details.

Here is the summary of the notable changes for v6.1 so far:

  • New zero-code nodes uib-element and uib-update let you use simple data to create dynamic web UI's.

  • The client library has a number of fixes and new features

    • Extensions to the eventSend function to include form data and value changes. Should greatly simplify creating and using FORMs and providing quick inputs for Node-RED flows.

    • New function: uibuilder.showMsg(true) Displays an on-screen card at the end of the current display that automatically updates with the last msg received from Node-RED. uibuilder.showMsg(false) turns it off.

    • New function: uibuilder.watchDom(true) Starts watching the content of the page and saves it to browser localStorage so that it can be recovered at any time. Use uibuilder.restoreHtmlFromCache() to recover the stored HTML (e.g. on page load). Use uibuilder.watchDom(false) to turn off and uibuilder.clearHtmlCache() to remove the saved HTML. If desired, you can also manually save the HTML at any point using uibuilder.saveHtmlCache().

    • New functions: uibuilder.syntaxHighlight(json), uibuilder.logToServer(...), uibuilder.beaconLog('text').

    • Reports changes of visibility of the page back to node-red via a new control msg.

    • Creates a browser tabId which is reported back to node-red when messages are sent. Helps identify the origin. Future uibuilder versions will let you send messages to a specific tab id which does not change even if the page is reloaded (only if the tab is closed).

    • Messages sent from the client either inherit the topic from the last inbound msg or from a default set using uibuilder.set('topic', 'my topic string'). The default will take preference.

  • If you turn on the advanced option "Include msg._uib in standard msg output.", messages from the client now include client details for you to use in your own security processing or just to identify where things have come from (e.g. what page name as well as what client).

  • All of the templates and example flows have been refreshed with the latest standards.

  • Plenty of documentation updates and additions.

As always, there is a working version in the v6.1.0 branch on GitHub that you can install if you want to try out the latest features.

1 Like

Just for interest because I doubt that I will ever be using this (although - never say never) can this be reverted to using the last inbound msg?

Yes, of course, just set it to an empty string. :grin: