Uibuilder v6.2 Dev - Progress update #1

Share Your Nodes
1

Hi all, quick update on uibuilder development.

v6.2 is now under way. So far, mostly focused on some additional client library improvements and extensions. If you want to follow what is happening, as always, you can install from the v6.2.0 branch on GitHub, I try to keep that in working order.

I'm still debating how much change will go into v6.2, I may try to limit it so I can pick up the cadence of change a bit more. There are a bunch more new functions to go into the client library and they mostly don't need any changes to any of the nodes, so I may sneak in v6.2 as a client update with the proposed new nodes pushed into v6.3.

I'm also working on the design for a new Node module that would act as an exemplar for people wanting to build their own uibuilder extensions.

Client Library

  • New functions - can be run from Node-RED as well as front-end code:

    • include() - include external files. Includes HTML, Images, Video, PDF's and more.

      This makes it trivial to load files into your web page. Whether that is a fragment of HTML, an image, video, PDF or pretty much anything else that the browser can render.

    • uiWatch() - watches for any changes to the selected page elements & sends the updates back to Node-RED.

      This means that you can have multiple flows and front-end JavaScript all updating the page but have a separate flow that captures any changed data, settings, visuals, etc.

    • htmlSend() - sends the current web page back to Node-RED.

      Great if you want to save the current state of the UI.

  • New internal functions:

    • nodeGet(domNode) - gets standard data from a DOM node (used internally by uiGet and uiWatch for consistency).

  • Updated functions:

    • uiGet - now uses nodeGet for consistency with uiWatch.

    • $ - now returns first child if selector returns a <template> tag. Warn/Error logging added.

      The ability to use a pre-defined <template> tag in your HTML means that you can create many copies of the template dynamically.

uib-brand.css - the default CSS for uibuilder

A few nice additions for brighter colours and other tweaks.

uib-sender node

Now records the node ID of the linked uibuilder node so that if its URL changes, the linked sender node is marked for re-deployment. The name changes automatically.