TotallyInformation

This tiny flow will use the apt package manager. It firstly updates the currently available package list and then reports back which packages can be upgraded along with some details.

TotallyInformation

My Sunday afternoon project.

I imagine that many people have the same problem I do. On my daily-driver Windows PC, tons of stuff gets dumped into the Downloads folder and it can become a bit crazy after a while.

I've seen examples of people building AutoHotKey scripts to help sort out the folder but Node-RED does it better - much better!

So this is my quick flow for organising it.

If you want to use this flow, do check and change the location of the downloads folder.

TotallyInformation

This is a very simple to use charting method. It requires no JavaScript to be loaded at all (apart from the UIBUILDER client library of course) - none written by you anyway. 🙂

The example flow loads the font from Google and sends data updates for the 3 different chart types every 10 seconds.

---

TotallyInformation

#svgImg {
  --uib-world-fill: green;
  width: 50%;
}

TotallyInformation

This is the flow that goes along with the YouTube video "UIBUILDER for Node-RED: 004 - The uib-tag node".

It demonstrates how to use the uib-tag zero-code node to add and update single elements or collections of elements on your UIBUILDER web page.

TotallyInformation

This is an example using UIBUILDER to create a debug output page for Node-RED. It was inspired, as so often, by a question in the Node-RED forum.

The issue with Node-RED's debug panel is that it limits the size of the information that can be output. If you have really large messages you need to debug, this can be a challenge. While you can increase the allowed max message size, it will eventually slow down the editor.

This flow also gives an example of how to use UIBUILDER's low-code capabilities in your front-end code. Each inbound msg is processed and turned into a new set of HTML elements with new msgs being shown at the top of the list for easy access.

Each output msg also shows some meta-data and has buttons that copy to clipboard and delete an entry.

There are also buttons to pause the display of messages and to clear all the messages.

TotallyInformation

This flow goes along with the YouTube video titled Simple, zero-code user input forms using uibuilder and Node-RED.

It demonstrates how to create a really simple, zero-code form using uibuilder and uib-element nodes. It also demonstrates how to cache the setup so that any newly connected clients or refreshed pages automatically get the form.

You don't need to have any coding skills to use this but you get access to the full range of HTML form capabilities. By default, the form is well laid out and is accessible for people with limited vision or movement.

Details on how to use the "Simple Form" type with the uib-element node are available in the uibuilder documentation: https://totallyinformation.github.io/node-red-contrib-uibuilder/#/elements/forms

Viedo: https://youtu.be/ePkqV02uwgE

TotallyInformation

UPDATE July 2025: I have refreshed the flow to use newer UIBUILDER features, namely the uib-save node. I've also updated the instructions for downloading the background.svg file which is too big to include in the flows site.

UPDATE Jan 2024: Looks like there is a problem on the Node-RED Flows site that messes up some flows. This one being a case in point. So I've made the Gist public, you can access the correct code at: https://gist.github.com/TotallyInformation/89487d20c635d54d9b98d963656ce429

UPDATE May 2023: There was a slight bug in the index.js file. It was using an internal function that is no longer visible to end-user code. Sorry about that. I've fixed the code so it works again.

I thought it was high-time I produced a better and updated version of an old favourite - uibuilder, VueJS and SVG: Quick floorplan IoT example (flow) - Node-RED (nodered.org).

That example requires VueJS to work which seems overkill for a simple requir

TotallyInformation

This example flow shows how you can generate an HTML web page report from Node-RED.

The example was inspired by a question in the forum about creating PDF reports from Node-RED. The suggestion was to use pdfmake. When I looked at that library, I realised that I'd come up with a very similar solution for uibuilder's low-code, configuration-driven UI creation features.

So I decided to illustrate this by reproducing one of pdfmake's examples - the "TABLES" example from their "playground".

uibuilder effectively outputs to HTML rather than PDF of course. However, not only is that a lot more flexible (uibuilder lets you use the full range of HTML/CSS and JavaScript if you need it) but it still lets you easily convert the resulting web page to PDF most likely via a print-to-pdf type feature built into your OS. though other ways are possible too.

The example flow simply inputs the data direct via an inject node that uses JSON type in

TotallyInformation

/** Define a new zero dependency custom web component ECMA module that can be used as an HTML tag
 *
 * TO USE THIS TEMPLATE: CHANGE ALL INSTANCES OF 'NavBar' and 'nav-bar' & change version below
 *
 * @version 0.1 2022-05-25 Pre-release
 *
 * See: https://web.dev/custom-elements-v1/, https://web.dev/shadowdom-v1/
 *
 * See https://github.com/runem/web-component-analyzer#-how-to-document-your-components-using-jsdoc on how to document
 * Use `npx web-component-analyzer ./components/button-send.js` to create/update the documentation