Using Axure to control your house

How you can use Node.js and web frames to extend Axure’s functionality beyond the screen


Designing and prototyping products can be difficult when you need to bridge the divide between the virtual and the physical. Axure is fine for digital prototypes, but what if you need to control something in the real world?

Over the past few months we’ve been designing an app that is used to control the lights within your home. We’d built a functional prototype for user testing. But to create a more realistic experience for our users wanted to find a way to control real lights within the app prototype. Here’s how we did it.


Hack and Scrounge

Because the real lighting technology the app would eventually be using wasn’t ready yet, we hacked together a solution from readily available parts and open source software. This is often a good way to go – someone else has already done a lot of the hard work for you! For our particular problem, we hacked together a solution using Philips Hue lights and a simple web server built in Node.js. Then we used a hidden Inline Frame widget to communicate to the server and trigger the lights within our Axure prototype.

Lights

Philips’ Hue lights are an LED light bulb with a wifi controller built in. The real power of the lights come from the fact that they have an API, which can be used to control the them using any number of apps (not just the official Hue one).

Server

Next we needed a server that the prototype could communicate with. The answer here was a simple web server built using Node.js. Node is a platform that enables Javascript to be run as server-side code. The real magic comes in Node’s wonderful package manager (a piece of software that enables easy use of code written by other people) and developer community. A quick google for ‘philips hue api node.js’ led me to the the Peter Murray’s Node Hue APIpackage. A handful of lines of code later, and I had a server running on my computer that could detect the the Hue lights in the office.

// load dependancies
var express = require('express');
var app = express();
var hue = require("node-hue-api");
var lightState = hue.lightState;

// create the server
var server = app.listen(3000, function() {
console.log('Listening on port %d', server.address().port);
});

// log out the light's status for debugging purposes
var displayResult = function(result) {
console.log(JSON.stringify(result, null, 2));
};

// discover lights
hue.locateBridges().done(function(){
hueApi = new HueApi( hostname, userName );
hueApi.lights().then(displayResult).done();
});

I needed to respond to specific requests. Here’s how I turned the light on and off: visiting 192.168.0.10:3000/on (my computer’s IP address and the server port number, plus the /on path) would turn on a light in the office. Visiting 192.168.0.1:3000/off would turn the light off.

// when the “/on” url is loaded
app.get(‘/on’, function(req, res){
// turn the light on
var state = lightState.create().on().white(400, 100);
hueApi.setLightState(1, state).then(displayResult).done();
res.send(‘light on’);
});
// when the “/off” url is loaded 
app.get(‘/off’, function(req, res){
// turn the light off
var state = lightState.create().off();
hueApi.setLightState(1, state).then(displayResult).done();
res.send(‘light off’);
});

Axure

We had the lights, and we could control them. The final part was adjusting the lights from within the Axure prototype we had built.

Luckily there is an escape hatch: the humble URL. Using Axure’s Inline Framewidget, you can load an arbitrary URL. Whenever the button in the prototype was toggled on, the inline frame widget would be told to load 192.168.0.10:3000/on. When the button was toggled off, the widget would load 192.168.0.10:3000/off. When these URLs were loaded, the server responded by turning the light on and off in the real world.

Success!

We had managed to create a prototype that demonstrated real-world interactivity, and provided users with a more authentic experience when testing the app.

Prototyping products that bridge the gap between the physical and the virtual can be challenging, but this technique shows that a lot can be achieved if you look for ways to build on existing products.

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.