✨ UIBUILDER feature release v6.6

Share Your Nodes
1

image
image835×532 96.1 KB

UIB
UIB1920×1080 73.7 KB

Something to brighten up those darker nights! A few nice new features along with the usual documentation updates and bug fixes.

Highlights

  • A new "Quick Start" example in the node-red import library. Simple flow to get going quickly.

  • New node uib-html - hydrates low-code JSON (e.g. msg._ui) to full HTML in Node-RED just like the client library does in the browser. Lets you use UIBUILDER's low-code config style for things other than just UIBUILDER, for example http-in/-out and Dashboard. Note that the ui.js library is also available stand alone, you can use it in your own projects in and out of Node-RED.

  • New node uib-save - saves a file to a uibuilder instance folder. For example, grab the latest HTML after dynamic updates using the htmlSend command and replace the existing src/index.html file (for efficiency). Or use the uib-html node to hydrate low-code JSON config into HTML and save to the index.html or a new file. Or perhaps use to save an image or data obtained from MQTT or a REST API.

  • New custom HTML tag <uib-var variable="myvar"></uib-var> shows and dynamically updates a uibuilder managed variable. Use the uibuilder set command to create or update the variable. You can use the new getManagedVarList command to see all managed variables.

  • New uib-element element type markdown. This is similar to the html type but takes markdown (CommonMark) as input. Requires loading the Markdown-IT library.

  • A bunch of new client library functions (see details below) making hard things easy.

  • Some simple branding changes. "uibuilder" is now "UIBUILDER" with colouring where feasible. The UIBUILDER icon is now a much lighter blue. There is also a new 3d logo kindly produced by forum member Marcus Davies.

  • Lots of documentation updates and improvements.

More detail as always in the changelog.

Right, some videos now and then on with v6.7! Enjoy.

7 Likes
2

Hi Julian,

I don't use dashboard's in general, but I do hear great things with uibuilder UIBUILDER.

Very Nice!

1 Like
3

Thanks Marcus. Though UIBUILDER isn't just a dashboard. It can create dashboards for sure. But it is actually a data-driven web application builder.

Use it to create any kind of web app driven by data from Node-RED.

Dashboards are only one of the many things you can do with it. :grinning:

1 Like
4

I can't go into much detail - but I have a project to allow Part Suppliers to be able to see photos taken by engineers via some web interface of sorts (they are not attached to orders) that I need to build - so you never know :smile:

1 Like
5

Very big release ! Thank you !
Especially love the <uib-var variable="myvar"></uib-var> functionnality !!
Do you have examples of use of uib-html et uib-save ??
Thanks again :slight_smile:

6

Thanks!

Still working up some examples and videos. I noticed an obvious improvement for uib-html as well so expect another update fairly quickly. That will let you merge with a provided page template or with the default uibuilder "blank" template page. Will be an option for max. flexibility.

Also some of the options in uib-save didn't get wired up so they need sorting as well. For example, there is a flag that should automatically tell connected clients to reload after a save but that isn't working yet.

For examples, uib-save can be really simple - this reads an mp4 video file from somewhere and saves it to the uibuilder node's serving folder so it is available in the front-end:

image
image692×94 7.56 KB

Or a bit more complex (this one grabs the current live page, adds some stuff and replaces the live page:

image
image1535×308 30.4 KB

Though note that this example needs the updated uib-html node - otherwise the flow needs to be more complex.

1 Like