Some Background

Far too often in blogs like this we “assume” that everyone is following along, so for the sake of boring regular readers…. the background to much of what you will see in this blog, revolves around my home control project which started off using an Atmega1284 chip as a controller and Arduino and wireless as end-points, mutating over time into it’s current state where I use any Raspberry-Pi “compatible” board to run Node-Red and talk to ESP8266-based end-points by the MQTT protocol – most of the programming being in C and NodeJS as appropriate – and a need to understand how best to make use of available widgets for general home control, in the now widely-used Node-Red (thanks partly to it’s adoption by Raspberry Pi).

I’ve followed the fantastic Node-Red since the beginning as it seemed like a good contender for home control even before the original “ui” – a community addition, eventually absorbed into the main Node-Red project to become “desktop”.  To find out more about Node-Red and Node-Red Dashboard you can join the discussion group over at Google+

Within the desktop you have a “node” called “template” which can display simple web pages inside a window in the desktop and can accept inputs and send information from its output – a near-perfect “black box” if you like. The problem is understanding just exactly what you can and cannot do inside the template, how to display items inside the template and making sure such items scale appropriately.

This is part of the journey that some of us are on – and I’ve written several articles on this now in the blog here. I hope you find them useful.

Within Node-Red there is a file called settings.js (usually on a Pi or a machine you’ve set up with a Pi user, this would be located at /home/pi/.node-red/settings.js) and you can set directories for your own javascript and css. As Node-Red already has such directories I’ve chosen to standardize on mjs, mycss,myimages, myicons etc.. using this as the base:

httpStatic: ‘/home/pi/.node-red/public’,

Javascript can then be accessed as /myjs/xxxx.js  etc

As one would normally use an 8GB or larger SD for such projects (smaller are often as expensive and sometimes hard to get) there is usually no shortage of space to store libraries of images, routines, css etc…  jQuery is already available inside the desktop without including it.

A good direction to go in (so it would seem) is to use widgets based on HTML5 Canvas. Keep an eye out for new widgets based on this and feel free to send us links to anything new and exciting.