HTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of Things

Building the Internet of Things with HTML5 and Node.js
2 FEBRUARY 2013 - HTML5.tx

Sunday, February 3, 13

@jdcravens
github.com/jessecravens
frog


Amsterdam, Austin, USA Bangalore, India Boston, USA Chennai, India
Netherlands

Gurgaon, India Johannesburg, Kiev, Ukraine Milan, Italy Munich, Germany
South Africa

New York, USA San Francisco, USA Seattle, USA Shanghai, China Vinnitsa, Ukraine

We are a global team of 1,600 diverse people with deep
insights into the behaviors and technologies driving the
connected world.
HTML5.tx 2013 2 FEB 2013 3


We combine research, strategy, design and
engineering to link insights to ideas and bring ideas
to markets.

HTML5.tx 2013 2 FEB 2013 4


HTML5.tx 2013 2 FEB 2013 5


Building the
Internet of Things
with HTML5 and Node.js


HTML5 and the Internet of Things

2012

Oﬄine Storage CSS3 Styling Device Access Connectivity

Eﬀects Multimedia Semantics Perf/Integrate

HTML5.tx 2013 2 FEB 2013 7



New Challenge
Something Diﬀerent,
...Yet Complimentary

and fun for the whole family.

HTML5.tx 2013 2 FEB 2013 8


Goal 1: Build an Internet of Things
using Open Hardware and Open Web
Technologies

Goal 2: Keep the cost reasonable

Goal 3: Create some real, homegrown
data

Goal 4: Learn, teach, share


In other Words:
Build an ‘Internet of Things’ with as
little C and Python as possible...and
as much JavaScript that is
available...on the cheap.

And create data that I can pretend like
is important to me.


Now:
To ﬁnd the right mobile environment
to ‘house’ the prototype.



Cool ...
but never could ﬁt

HTML5.tx 2013 2 FEB 2013 12



Perfect ...
didn’t get passed my wife

HTML5.tx 2013 2 FEB 2013 13



well...

HTML5.tx 2013 2 FEB 2013 14



Practical ...
Fleetwood Pegasus

HTML5.tx 2013 2 FEB 2013 15



trailr.io

HTML5.tx 2013 2 FEB 2013 16



research
Solar Battery Charge (100 W Solar Panel,
Charge Controller, 12 V Car Battery)

Wind Turbine (Wind Direction, Speed)

Refridgerator/Cabin/Outside Temp
GeoLocation / Weather
Web Cam (Streaming)
Motion
Flame Detection

HTML5.tx 2013 2 FEB 2013 17



Arduino Uno
Microcontroller board based on the ATmega328

Flash Memory 32 KB (ATmega328)
SRAM 2 KB (ATmega328)

Clock Speed 16 MHz

Operating Voltage 5V

14 digital input/output pins
6 analog inputs

USB connection

HTML5.tx 2013 2 FEB 2013 18


HTML5.tx 2013

trailr

trailr - build and deploy Arduino ‘environment-aware’
sketches over WebSockets

HTML5.tx 2013 2 FEB 2013 19



trailr
Ace Editor
Websocket ----> sketchObj
nodejs parse JSON
FS
nodejs (EJS) template replacements
set Environmental variables
make
make upload

HTML5.tx 2013 2 FEB 2013 20



Ace
<script src="ace.js" ></script>

<script>
editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.getSession().setMode("ace/mode/c_cpp");
</script>

HTML5.tx 2013 2 FEB 2013 21



Sketch Object
$("#sketch").click(function() {

var sketch = Editor.session.getValue();
Trailr = {};
Trailr.env = {};

var sketchObj = {
"id": "1",
"name":"BlinkLED",
"type":"ino",
"template":"blink.ino",
"author": {
"name": "Jesse Cravens",
"email": "jesse.cravens@gmail.com",
"url": "http://jessecravens.com"
},
"keywords": ["blink"],
"sketch": sketch,
"env": Trailr.env
}

socket.emit('createSketch', sketchObj);
});

HTML5.tx 2013 2 FEB 2013 22



EJS template
ejs.open = '{{';
ejs.close = '}}';

//finds the name property in appconfig
var c = ejs.render(data, {
name: sketchConfig["name"],
sketch: sketchConfig["sketch"]
})

HTML5.tx 2013 2 FEB 2013 23



fs
fs = require('fs')

fs.readFile(tmplDir + inFile, 'utf8', function (err,data) {
// ..

fs.writeFile(builtDir + outFile, c, function (err,data) {
// ...
})
});

HTML5.tx 2013 2 FEB 2013 24



.exec()
var exec = require('child_process').exec

var command = 'cd "node_modules/trailr/sketches/
built" && make && make upload';

function puts(error, stdout, stderr) {
sys.puts(stdout);
return stdout;
}

exec(command, puts);

HTML5.tx 2013 2 FEB 2013 25



Make
var command = '
cd "node_modules/trailr/sketches/built"
&& make
&& make upload
&& export ARDMK_DIR=/arduino-mk-0.10
&& export ARDUINO_DIR=/Applications/Arduino.app/
Contents/Resources/Java';

HTML5.tx 2013 2 FEB 2013 26


HTML5.tx 2013

Web Sockets with noduino

arduino uno w/ simple LED
node.js node-serialport module
du.ino sketch

noduino web application
html5 web sockets

HTML5.tx 2013 2 FEB 2013 27



Node.js Interfacing with Arduino
socket.io

HTML5 Web Socket Protocol

noduino

Node.js
HTTP / WEB SOCKET SERVER

duino

node-serialport
Serial

duino

HTML5.tx 2013 2 FEB 2013 28



Overview
Serial protocol is deﬁned between the
Arduino and the host (duino)

The board object is an Event Emitter.
(connected, ready, data)

Noduino (client) sends data over Web
Sockets to noduino and duino.

HTML5.tx 2013 2 FEB 2013 29



node-serialport
var SerialPort = require("serialport").SerialPort

var serialPort = new SerialPort("/dev/tty-usbserial1", {
baudrate: 57600
});

HTML5.tx 2013 2 FEB 2013 30



node-serialport
serialPort.on("open", function () {
console.log('open');
serialPort.on('data', function(data) {
console.log('data received: ' + data);
});

serialPort.write("lsn", function(err, results) {
console.log('err ' + err);
console.log('results ' + results);
});
});

HTML5.tx 2013 2 FEB 2013 31



noduino
board.withLED({pin: 13}, function(err, LED) {
LED.blink(250);
LED.on('on', function() {
console.log('LED is on!');
});
});

HTML5.tx 2013 2 FEB 2013 32



noduino
define(['./DigitalOutput.js'], function(LED) {

LED.prototype.blink = function(interval) {
//....
};

return LED;
});

HTML5.tx 2013 2 FEB 2013 33



noduino
that.sockets[socket.id].on('board.connect', function(data) {
if (that.current() && that.current().connected == true) {
return socket.emit('response', {
'msg': 'board.connect',
'response': 'ready'});
}
that.arduinos[0] = new Noduino({'debug': true},
Connector, Logger);

//..

that.current().connected = true;
return socket.emit('response',
{'msg': 'board.connect',
'response': 'ready'});
});
});

HTML5.tx 2013 2 FEB 2013 34



BeagleBone by TI
Processor
720MHz super-scalar ARM Cortex-A8 (armv7a)
3D graphics accelerator
ARM Cortex-M3 for power management

Connectivity
USB client
USB host
Ethernet
2x 46 pin headers
2x I2C, 5x UART, I2S, SPI,
CAN, 66x 3.3V GPIO, 7x ADC

Software
4GB microSD card with Angstrom Distribution
Cloud9 IDE on Node.JS with Bonescript library

HTML5.tx 2013 2 FEB 2013 36


HTML5.tx 2013

Node 2 Node

firmata protocol
node.js firmata.js module
node.js johnny-five module
PIR motion sensor
node.js bonescript module

HTML5.tx 2013 2 FEB 2013 37



Arduino Interfacing with Beaglebone
Node.js
HTTP

Node.js

johnny-five

firmata.js
Serial

node-serialport firmata

HTML5.tx 2013 2 FEB 2013 38



johnny-ﬁve
var five = require("johnny-five"),
board = new five.Board();

board.on("ready", function() {
led = new five.Led(13);
var pir = new five.Pir({"pin": 2});
pir.on("motionstart", function() {
led.strobe();
// POST to beaglebone
});
});

HTML5.tx 2013 2 FEB 2013 39



boneScript
require('bonescript');

ledPin = bone.P8_3;
ledPin2 = bone.P8_4;

app.post('/motion', function(req, res, next) {
res.send('Motion data collected for ' + req.body['eventType'] + ' event');

if (req.body['eventType'] == "motionstart"){
digitalWrite(ledPin2, HIGH);
digitalWrite(ledPin, LOW);
}
else if (req.body['eventType'] == "motionend") {
digitalWrite(ledPin, HIGH);
digitalWrite(ledPin2, LOW);
}
});

HTML5.tx 2013 2 FEB 2013 40



Conclusions
Serial Cable tail is annoying
Host needs to get smaller
I want Node to Node communication, but
the Bone is pricey.
...the Bone might make a good Hub.

HTML5.tx 2013 2 FEB 2013 41



Raspberry Pi
Processor
700MHz ARM1176 JZF-S (armv6k) - overclock at 800MHz
Broadcam VideoCore IV

Connectivity
USB client
USB host
Ethernet
17 GPIOs pins

Software
Debian as default
WebIDE with Python Library

HTML5.tx 2013 2 FEB 2013 42



Raspberry Pi and Arduino (serial connection)

HTML5.tx 2013 2 FEB 2013 43



Raspberry Pi and Arduino

HTML5.tx 2013 2 FEB 2013 44



Raspberry Pi , Beaglebone, Arduino

HTML5.tx 2013 2 FEB 2013 45



trailr
Node.js

Node.js
Node.js

HTML5.tx 2013 2 FEB 2013 46


HTML5.tx 2013

trailr-admin

trailr-admin app running on a central hub (Beaglebone)

trailr-admin ‘Floor Plan View’ with HTML5 Canvas

trailr - Solar Charge voltage divider

HTML5.tx 2013 2 FEB 2013 47



trailr-admin HTML5 canvas
var anim = new Kinetic.Animation(function(frame) {
var scale = Math.sin(frame.time * 2 * Math.PI /
period) + 0.001;
a1.setScale(scale);
}, layer);

socket.on('motionstart', function (data) {
anim.start();
});

HTML5.tx 2013 2 FEB 2013 48



Next Steps
Right Protocol for the Right Job
Follow a Common Spec for Env Object
Wireless deploys to Arduino (Xbee, TFTP,
Master/Slave)
Wireless deploys to Pi - (private NPM)
Node Streams (events)
Oﬄine First App (parse.com dataKit)
trailr-admin SPA (ember.js)
Continue Down the List of Cases
HTML5.tx 2013 2 FEB 2013 49



Solar Charge
Grape Solar 100-Watt Monocrystalline
Oﬀ-Grid PV Solar Panel

ACS715 Hall Eﬀect sensor

HTML5.tx 2013 2 FEB 2013 50



Solar Charge
Grape Solar 100-Watt Monocrystalline
Oﬀ-Grid PV Solar Panel
12V 10Amp Charge Controlller

HTML5.tx 2013 2 FEB 2013 51



Solar Charge

Voltage Divider

HTML5.tx 2013 2 FEB 2013 52



solar sketch
void loop() {
// read the input on analog pin 0:
int sensor0Value = analogRead(A0);
float pinVoltage = sensor0Value * 0.00488;
float battVoltage = pinVoltage * ((10+20)/10);
// Vout = (R2/(R1+R2))
//float solarPower = solarPanelVoltage * solarPanelCurrent;
// P = V*I , power = voltage * current , measured in W i.e. 79% of
100W MAX capacity

Serial.print(battVoltage);
Serial.println(" V - battery");
}

HTML5.tx 2013 2 FEB 2013 53


HTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of Things

More Related Content

Similar to HTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of Things (20)

Recently uploaded (20)

HTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of Things