Skip to content

Instantly share code, notes, and snippets.

View TotallyInformation's full-sized avatar

Julian Knight TotallyInformation

109 followers · 3 following
View GitHub Profile
@TotallyInformation
TotallyInformation / README.md
Last active January 5, 2024 21:17
uibuilder dynamic SVG example - no framework needed

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 requirement. So this version does not use any frameworks, just plain old HTML, SVG, CSS and a bit of JavaScript thrown in.

The bulb images are cloned from a template and are clickable. Clicking them toggles them on and off as expected.

@TotallyInformation
TotallyInformation / index.html
Created May 25, 2022 17:35
Test web component
/** 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
@TotallyInformation
TotallyInformation / index.html
Last active May 25, 2022 17:54
<!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>
@TotallyInformation
TotallyInformation / iot-schemas.js
Created November 28, 2020 16:54
/** 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.
@TotallyInformation
TotallyInformation / README.md
Last active September 10, 2019 20:06
Debug messages using uibuilder

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.

@TotallyInformation
TotallyInformation / README.md
Created September 7, 2019 16:54
How many node.js packages are installed

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?

@TotallyInformation
TotallyInformation / README.md
Last active December 17, 2020 22:29
Simple uibuilder flow (Quote of the Day)

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.

@TotallyInformation
TotallyInformation / test.md
Last active December 14, 2018 12:42
Example of GitHub Markdown & Gravizo

Alt text

custom_mark10 digraph G { size ="4,4"; main [shape=box]; main -> parse [weight=8]; parse -> execute;
@TotallyInformation
TotallyInformation / README.md
Last active September 7, 2019 17:01
Flow to capture all node modules installed

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($)
@TotallyInformation
TotallyInformation / README.md
Last active September 7, 2019 17:02
Extract data from a complex HTML table

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