Julian Knight 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

Well maybe "debug" is slightly over selling it!

This example will dump any msg you send to the uibuilder node out to the front-end web page and will nicely format it.

You will get an entry on the page for every topic that you send.

Not really a flow, sorry about that, because you need to change directory to the userDir which may be different on different installations.

However, when you are in the right folder, you can issue the following command to find out how many node.js packages you have installed. Including all of the sub-dependencies for every package (e.g. everything!).

npm ls | sed '/deduped$/d' | wc -l

You do need sed and wc though so this will only really work from Linux command lines (including the Windows WSL) - maybe Mac too?

This simple flow will deliver a random quote of the day to a web URL using uibuilder.

All of the front-end html, javascript and css is included in the flow so simply add the flow and edit the front-end code using uibuilder's built-in editor.

See if you can work out how to use the control outputs (output port #2 on the uibuilder node) to trigger a new quote when you reload the page. (Hint: See the GitHub page for this example as it has another flow attached).

The real purpose of this flow is to help you learn a little bit about VueJS which is the default front-end framework provided with uibuilder v2 and v3.

The front-end code is extremely simple so do take a look and see how it works.

custom_mark10 digraph G { size ="4,4"; main [shape=box]; main -> parse [weight=8]; parse -> execute;

Count of total modules + list of module names

If you want to know which node modules you have installed, the answer is in the ~/.node-red/.config.json file.

So we can easily grab that data and summarise it using the marvelous JSONata:

payload.nodes {
    "TOTAL": $count($keys($)),
    "node_modules": $keys($)

While Node-RED has some nodes for extracting data from HTML, the nodes are rather simplistic.

To do more complex processing, you can use the cheerio npm module directly. This module is used by the existing nodes but not all of the options are exposed in order to keep the node more easily comprehensible.

I've already published this info on my dev website so I won't repeat everything here. You can find the details at:

https://it.knightnet.org.uk/kb/nr-qa/extract-html-table.html

	/** 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

	<!doctype html>
	<html lang="en"><head>
	<meta charset="utf-8">
	<title>Web Component Test: nav-bar</title>

	<script type="module" async >
	import './nav-bar.js'
	</script>

	</head><body>

	/** Standardised data schema's for IoT Home Automation
	*/

	const schemas = {

	/** network table
	* A table of network devices (logical and physical)
	* This schema uses a structure suitable for use with VueJS/bootstrap-vue `b-table` options.
	* The table is an object of objects with the ID as the primary key
	* It is periodically updated by an NMAP scan.