Physical Web Node-RED nodes

Been playing playing with some NodeJS to build Eddystone beacons after watching this:

And having a poke round here

I had earlier been looking at BLE and NodeJS to build BLE devices that can have their state updated via MQTT

Physical web nodes

I’ve written 2 new nodes, the first will listen for any Eddystone beacons in the area and publish the details about the beacon.

The second creates a Eddystone beacon and broadcasts a given URL, it can also update the URL with the msg.payload value.

The code is here* and it can be installed from npmjs with:

npm install node-red-node-physical-web

* this will be moved to the node-red-nodes repo shortly

Finally got round to updating site home page

I’ve had the same basic home page for this domain since I set it up. It was never meant to last, it was just there until I got wordpress set up to host the blog.

I was playing with the Google Webmaster tools last week and it pointed out some broken links on the home page so I decided it was time to finally update it.

The old version shows just how badly I understood the HTML box model and lack in graphic design skills. Also widgets are very old.

home page
My original home page

Rather than work out how to do it all properly these days there are any number of frameworks that will do it all for you. I’ve picked Bootstrap which supports responsive layouts which should mean that it should look good no matter what the screen size of the device that views it. The old version really didn’t work on phone/tablet screens.

I wanted to keep the live feed from the power meter and weather centre, but it was time to update them from the dojo and Google charts versions to something a bit newer. The line charts are now Rickshaw/D3JS. I’ve used D3JS before for a things like my MQTT topic tree viewer.

The wind direction indicator is just a background image with a ‘↑’ character at a large font size rotated using CSS transforms.

All the data comes in as a set of subscriptions to the MQTT broker running on my box via Websockets.

New home page
New home page

You can see the results for real here.

Sublime Text 3 UML tool

I’ve been using Sublime Text as my editor of choice for about a year. Every now and again I install another little plugin to help out.

For my current project we’ve been using plantuml to build sequence diagrams and UML models for the data structures.

I had a bit of a search round for a suitable plugin that would use plantuml to generate the images on the fly from with in Sublime. I found this project on github that looked perfect.

It was working fine, but it had 2 small niggles, the first was that it called out to Eye of Gnome to actually display the images which was a bit of a pain. The second is the random chars it appends to the end of the file name for the images it generates.

Sublime with EoG

There was an open issue that seamed to described the first issue problem and a comment from the original author stating that he didn’t have time but would welcome contributions. I thought I’d have a look at seeing how hard it would be to add what was needed.

It turned out to be very simple:

from .base import BaseViewer
import sublime

class Sublime3Viewer(BaseViewer):
	def load(self):
		if not sublime.version().startswith('3'):
			raise Exception("Not Sublime 3!")

	def view(self,diagram_files):
		for diagram_file in diagram_files:

I’ve submitted a pull request or you can pull from my fork.

Side By Side

I’ve also tweaked the code to remove the random chars in the name for my version but I’ve not checked that in yet as I don’t think the upstream author will accept that change at the moment.

Contributing to OpenStreetMap

I had a day off on Monday, there were a couple of things I needed to get done and I just needed another day out of the office.

On the Sunday evening while working out what to do with the rest of the day I happened to be looking at the OpenStreetMap site for the area round my flat. I noticed that the latest set of roads for the second phase of the development hadn’t been included yet.

As it was
As it was

I use data from the OpenStreetMap project on my Garmin Edge 810 cycle computer to provide both maps and routing information (it’s free vs paying Garmin for map packages) so I really appreciate all the work that has gone into this project so I decided to have a look at how to contribute these new roads.

I knew that people tended to upload GPS data in the form of GPX files that then got used to build the maps. The best tool I had to record the GPS data was my Garmin Edge 810 so I decided to have a quick ride round the new roads.

Strava’s preview has dropped a lot of points, but the actual track looked more like this.

gpx trace

As well as using the 810 I put my Garmin Virb Camera on to record a video of the ride. I mainly did this to catch the street name signs so I could name things properly.

YouTube Preview Image

Signing up on the OpenStreetMap site was trivial, just fill in a username and email address, then click on the link in the email that was sent to verify the address. Now I had the option to upload the GPX file. From there I followed the instructions here and use the Potlatch 2 editor to overlay my GPX trace on the existing map. I then traced on the extension of Tinning Way and George Raymond Road and added Annealing Way. I need to go back over the video to double check the names of the other new roads so I can add them as well.

OpenStreetMap tiles get regenerated from time to time so after an hour or two my updates became visible to everybody else.

After adding new roads
After adding new roads

I’ll have to regenerate the maps for my Garmin Edge 810 sometime to see if it now directs me via these new roads when I set off on my next ride. button finally arrived

Along with a lot of other people I’ve been waiting for these to drop through my door for most of the year.

A flic button

I even started to look at building something similar (if a fair bit bigger) using a Raspberry Pi and the noble Node.JS module. buttons are small silicon rubber buttons that can be used to trigger up to three different actions based on a single click, double click and a push and hold. They connect to your phone via BLE. The app comes with support for a whole bunch of actions such as WeMO, Philips Hue, Android actions such as taking photos and IFTTT for a bunch of extra web actions.

I’m starting to look at what it will take to build a Node-RED node for these as I want to set them up to control my WeMO lights at home and a bunch of other stuff. There is talk of a C library for use on the Raspberry Pi as well as the iOS/Android SDKs which I should be able to wrap as a Node.js module if I can get hold of it. Otherwise I’ll have to get down and dirty with reverse engineering the GATT profile. box open box

4 in the box

Updated WEMO control script

A while ago I wrote a little nodejs script to control WeMo devices. At the time I only had two bulbs that I had in different rooms so it didn’t make sense to support light groups.

Towards the end of 2014 Belkin and Osram announced that Osram’s Lightify bulbs would support WeMo’s bridge controller. In this line was a GU10 bulb and I recently purchased two of these.

Both of these have been fitted into a single light fitting so it made sense to group them together, but this left me with a problem that my script wouldn’t work. After a little bit of playing (and another fruitless back and forth with @WEMOCares on twitter) I managed to get group support working properly. It could do with a bit of cleaning up and refactoring but it works:

Building Bluetooth LE devices

While waiting for my buttons to turn up I’ve been playing with building my own Bluetooth Low Energy devices.

Since I already had a couple of sensors hooked up to publish their values via MQTT I thought I would try and build a bridge between MQTT and BLE.

I’m using a Raspberry Pi, a Bluetooth 4.0 USB dongle and a NodeJS npm module called bleno.

It turned out to be petty easy, first a short file to set up the BLE service and connect to MQTT:

var util = require('util');
var bleno = require('bleno');
var mqtt = require('mqtt');

var BlenoPrimarySerivce = bleno.PrimaryService;

var TopicCharacteristic = require('./topicCharacteristic');

var config = require("./config");

var client = mqtt.connect(;

var topicCharacteristic = new TopicCharacteristic(config);

client.on('connect', function(){

client.on('message',function(topic, message){

bleno.on('stateChange', function(state){
  if (state === 'poweredOn') {
    bleno.startAdvertising('mqtt', ['ba42561bb1d2440a8d040cefb43faece']);
  } else {

bleno.on('advertisingStart', function(error){
  if(!error) {
  	  new BlenoPrimarySerivce({
  	  	uuid: 'ba42561bb1d2440a8d040cefb43faece',
  	  	characteristics: [

And then something to add the characteristic for the topic:

var util = require('util');
var bleno = require('bleno');

function TopicCharacteristic(config, client) {, {
		uuid: '6bcb06e2747542a9a62a54a1f3ce11e6',
		properties: ['read', 'write', 'notify'],
		descriptors: [
			new bleno.Descriptor({
				uuid: '2901',
				value: 'Topic: ' + config.topic

	this._value = new Buffer(0);
	this._updateValueCallback = null;
	this._client = client;
	this._topic = config.topic;

util.inherits(TopicCharacteristic, bleno.Characteristic);

TopicCharacteristic.prototype.onWriteRequest = function(data, offset, withoutResponse, callback) {
	this._value = data;
	client.publish(this._topic, data);

TopicCharacteristic.prototype.onReadRequest = function(offset, callback) {
	callback(this.RESULT_SUCCESS, this._value);

TopicCharacteristic.prototype.onSubscribe = function(maxValueSize, updateValueCallback) {
	this._updateValueCallback = updateValueCallback;

TopicCharacteristic.prototype.onUnsubscribe = function () {
	this._updateValueCallback = null;

TopicCharacteristic.prototype.update = function(value) {
	this._value = value;
	if (this._updateValueCallback) {

module.exports = TopicCharacteristic;

I’ve used 2 randomly generated UUIDs, one for the service and one for the characteristic.

The code should allow you to read the last value published, publish a new value and subscribe to notifications when new values arrive.

I pulled together a quick Android app to subscribe to the notifications and update when a new value is published and it seams to be working well.

The code is all up on Github and on npmjs so feel free to have a play.

You can test it with the Bluez gatttoool.

[hardillb@bagend ~]$ gatttool -b 00:1A:7D:DA:71:15 -I
[00:1A:7D:DA:71:15][LE]> connect
Attempting to connect to 00:1A:7D:DA:71:15
Connection successful
[00:1A:7D:DA:71:15][LE]> primary
attr handle: 0x0001, end grp handle: 0x0005 uuid: 00001800-0000-1000-8000-00805f9b34fb
attr handle: 0x0006, end grp handle: 0x0009 uuid: 00001801-0000-1000-8000-00805f9b34fb
attr handle: 0x000a, end grp handle: 0x000e uuid: ba42561b-b1d2-440a-8d04-0cefb43faece
[00:1A:7D:DA:71:15][LE]> characteristics 
handle: 0x0002, char properties: 0x02, char value handle: 0x0003, uuid: 00002a00-0000-1000-8000-00805f9b34fb
handle: 0x0004, char properties: 0x02, char value handle: 0x0005, uuid: 00002a01-0000-1000-8000-00805f9b34fb
handle: 0x0007, char properties: 0x20, char value handle: 0x0008, uuid: 00002a05-0000-1000-8000-00805f9b34fb
handle: 0x000b, char properties: 0x1a, char value handle: 0x000c, uuid: 6bcb06e2-7475-42a9-a62a-54a1f3ce11e6
[00:1A:7D:DA:71:15][LE]> char-write-req 0x000d 0300
Characteristic value was written successfully
Notification handle = 0x000c value: 42 61 72 
Notification handle = 0x000c value: 48 65 6c 6c 6f 57 6f 72 6c 64 
Notification handle = 0x000c value: 54 65 73 74 69 6e 67 20 31 32 33 
[00:1A:7D:DA:71:15][LE]> quit

The lines that start Notification handle contain the bytes published, in this case

  • Bar
  • HelloWorld
  • Testing 123

Securing Node-RED

Node-RED added some new authentication/authorisation code in the 0.10 release that allows for a plugable scheme. In this post I’m going to talk about how to use this to make Node-RED use a LDAP server to look up users.


First of all, to do this properly we will need to enable HTTPS to ensure the communication channel between the browser and Node-RED is properly protected. This is done by adding a https value to the settings.js file like this:

https: {
  key: fs.readFileSync('privkey.pem'),
  cert: fs.readFileSync('cert.pem')

You also need to un-comment the var fs = require(‘fs’); line at the top of settings.js.

You can generate the privkey.pem and cert.pem with the following commands in your node-red directory:

pi@raspberrypi ~/node-red $ openssl genrsa -out privkey.pem
Generating RSA private key, 1024 bit long modulus
e is 65537 (0x10001)
pi@raspberrypi ~/node-red $ openssl req -new -x509 -key privkey.pem -out cert.pem -days 1095
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
Country Name (2 letter code) [AU]:GB
State or Province Name (full name) [Some-State]:Hampshire
Locality Name (eg, city) []:Eastleigh
Organization Name (eg, company) [Internet Widgits Pty Ltd]:Node-RED
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:raspberrypi.local
Email Address []:

The important bit is the Common Name value, this needs to match either the name or IP address that you will use to access your Node-RED console. In my case I have avahi enabled so I can access my pi using it’s host name raspberrypi with .local as the domain, but you may be more used to using an IP address like

Since this is a self signed certificate your browser will reject it the first time you try to connect with a warning like this:

Chrome warning about unsafe cert.
Chrome warning about unsafe cert.

This is because your certificate is not signed by one of the trusted certificate authorities, you can get past this error by clicking on Advanced then Proceed to raspberrypi.local (unsafe). With Chrome this error will be shown once every time you access the page, you can avoid this by copying the cert.pem file to your client machine and import it into Chrome:

  1. Open Chrome settings page chrome://settings
  2. Scroll to the bottom of page and click on the “+Show advanced settings” link
  3. Scroll to the HTTPS/SSL and click on “Manage certificates…”
  4. Select the Servers tab and select import
  5. Select the cert.pem you copied from your Raspberry Pi

Usernames and Passwords

In previous Node-RED releases you could set a single username and password for the admin interface, any static content or one that covered bh. This was done by adding a object to the settings.js file containing the user name and password. This was useful but could be a little limited. Since the 0.10 release there is now a pluggable authentication interface that also includes support for things like read only access to the admin interface. Details of these updates can be found here.

To implement a authentication plugin you need to create a NodeJS module based on this skeleton:

var when = require("when");

module.exports = {
   type: "credentials",
   users: function(username){
      //returns a promise that checks the authorisation for a given user
      return when.promise(function(resolve) {
         if (username == 'foo') {
            resolve({username: username, permissions: "*"});
         } else {
   authenticate: function(username, password) {
      //returns a promise that completes when the user has been authenticated
      return when.promise(function(resolve) {
         if (username == 'foo' && password == 'bar' ) {
            resolve({username: username, permissions: "*"});
         } else {
   default: function() {
      // Resolve with the user object for the default user.
      // If no default user exists, resolve with null.
      return when.promise(function(resolve) {

This comprises on 3 functions, one to authenticate a user against the backend, one to check the level of authorisation (used by Node-REDs built in oAuth mechanism once a user has been authenticated), and finally default which matches unauthenticated users.

For my LDAP example I’m not going to implement different read only/write levels of authorisation to make things a little easier.

The source for the module can be found here or on npmjs here. The easiest way to install it is with:

npm install -g node-red-contrib-ldap-auth

Then edit the Node-RED settings.js to include the following:

adminAuth: require('node-red-contrib-ldap-auth').setup({
    base: 'ou=group,', 
    filterTemplate: 'mail={{username}}'

The filterTemplate is a mustache template to use to search the LDAP for the username, in this case the username is mail address.

Once it’s all up and running Node-RED should present you with something that looks like this:

Node-RED asking for credentials
Node-RED asking for credentials

Openstreetmap Video overlays

So as I mentioned in my last post I’ve been playing with generating map overlays for the cycling videos I’ve been making while out training. I’d run into a rate limiting problem when using Google Maps static map API.

To work round this I thought I’d see what I could do using Openstreetmap. Openstreetmap doesn’t have a static image API so I’m going to try and build something similar using LeafletJS and a way to grab images of the pages generated.

	<link type="text/css" href="leaflet.css" rel="stylesheet"/>
	<script type="application/javascript" src="leaflet.js"></script>
	<style >
	#map { 
		height: 250px; 
		width: 250px;
	<div id="map"/>
	<script type="application/javascript">
function getUrlVars()
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
        hash = hashes[i].split('=');
        vars[hash[0]] = hash[1];
    return vars;

var args = getUrlVars();

var line = args["line"].split("|");

var last = line[(line.length - 1)];

var centre = [last.split(',')[0], last.split(',')[1]];

var map ='map',{
	zoomControl: false,
	zoom: 15
map.setView(centre, 15);

		maxZoom: 20,

var latlngs = [];

for (var i=0; i<line.length; i++) {

var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

This generates the map tiles and overlays the route, but it’s as a web page, now I needed a way to convert this into a PNG image. There are two options, html2canvas or PhantomJS. I decided to go with PhantomJS first. The following loads and renders the page and then generates a PNG image.

var page = require('webpage').create();
var system = require('system');

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  //console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');

page.viewportSize = {
  width: 265,
  height: 250

var url = "file:///opt/share/playing/map-overlay/index.html?" + system.args[1];

console.log(url);, function(){
  setTimeout(function() {	

The coordinates for the line are passed in on the command line along with the file name to write the file to.


phantomjs --local-to-remote-url-access=true --max-disk-cache-size=1024 --disk-cache=true map.js [Path] [file name]

Running PhantomJS with the disk cache enabled should keep the load on the Openstreetmap servers to a minimum but I’m also looking at how easy it is to set up my own tile server.

I can now feed this in to the scripts I spun up last time.

YouTube Preview Image