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