Another update on progress. 3 notable new things to share.
-
I am very pleased to say that @mudwalker has agreed to help out with some documentation improvements. This is very much appreciated.
-
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.
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 douibuilder.showMsg(false)to turn it off. -
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'slocalStoragewhich 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 withuibuilder.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-elementanduib-updatelet you use simple data to create dynamic web UI's. -
The client library has a number of fixes and new features
-
Extensions to the
eventSendfunction 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. Useuibuilder.restoreHtmlFromCache()to recover the stored HTML (e.g. on page load). Useuibuilder.watchDom(false)to turn off anduibuilder.clearHtmlCache()to remove the saved HTML. If desired, you can also manually save the HTML at any point usinguibuilder.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
tabIdwhich 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.
