Skip to content

Instantly share code, notes, and snippets.

Avatar

Julian Knight TotallyInformation

89 followers · 3 following
View GitHub Profile
@TotallyInformation
TotallyInformation / index.html
Created May 25, 2022
Test web component
View index.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
@TotallyInformation
TotallyInformation / index.html
Last active May 25, 2022
View index.html
<!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 Nov 28, 2020
View iot-schemas.js
/** 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 Sep 10, 2019
Debug messages using uibuilder
View README.md

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 Sep 7, 2019
How many node.js packages are installed
View README.md

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 Dec 17, 2020
Simple uibuilder flow (Quote of the Day)
View README.md

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 Dec 14, 2018
Example of GitHub Markdown & Gravizo
View test.md

Alt text

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

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 Sep 7, 2019
Extract data from a complex HTML table
View README.md

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

@TotallyInformation
TotallyInformation / README.md
Created Feb 11, 2018
Secure Home Automation Control via a Telegram Bot
View README.md

Those who know me from the Google group and Slack will know that I have a bit of a "thing" about security. It isn't easy to secure a web service at the best of times and trying to do so via your home network with minimal resources is even harder.

So why not avoid the issue altogether! By instead using a bot with a secure messaging service, you don't need to expose Node-RED or a web server, mess with certificates, authentication and authorisation. Nor worry about how to secure websockets.

The flow listed here demonstrates a simple Telegram bot that shows the current status of a set of wireless switches (in my case that control lights) and that let you turn them on and off via a simple text interaction.

If you want the full details, including pictures and some info on wiring up MQTT and the other dependencies, you can find them on the Totally Information development blog.