JavaScript is everywhere, but one of the most fascinating areas is in the crossroads of distributed, real time applications and microcontrollers. Take a look into the world of Node.js, HTML5 Connectivity APIs, and Embedded Linux, and how this world is changing the traditional client and server relationship. Explore the impact these trends are having on the HTML5 user interface, see demos of JavaScript powered microcontrollers (Arduino, XBee, Beaglebone, and the Raspberry Pi), learn asynchronous coding patterns, and discover some of the newer APIs that are helping JavaScript developers step out of the web browser and into the world of physical computing, robotics, and hardware.
1. Building the Internet of Things with HTML5 and Node.js
2 FEBRUARY 2013 - HTML5.tx
Sunday, February 3, 13
2. @jdcravens
github.com/jessecravens
frog
Sunday, February 3, 13
3. 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
Sunday, February 3, 13
4. We combine research, strategy, design and
engineering to link insights to ideas and bring ideas
to markets.
HTML5.tx 2013 2 FEB 2013 4
Sunday, February 3, 13
6. Building the
Internet of Things
with HTML5 and Node.js
Sunday, February 3, 13
7. HTML5 and the Internet of Things
2012
Offline Storage CSS3 Styling Device Access Connectivity
Effects Multimedia Semantics Perf/Integrate
HTML5.tx 2013 2 FEB 2013 7
Sunday, February 3, 13
8. HTML5 and the Internet of Things
New Challenge
Something Different,
...Yet Complimentary
and fun for the whole family.
HTML5.tx 2013 2 FEB 2013 8
Sunday, February 3, 13
9. 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
Sunday, February 3, 13
10. 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.
Sunday, February 3, 13
11. Now:
To find the right mobile environment
to ‘house’ the prototype.
Sunday, February 3, 13
12. HTML5 and the Internet of Things
Cool ...
but never could fit
HTML5.tx 2013 2 FEB 2013 12
Sunday, February 3, 13
13. HTML5 and the Internet of Things
Perfect ...
didn’t get passed my wife
HTML5.tx 2013 2 FEB 2013 13
Sunday, February 3, 13
14. HTML5 and the Internet of Things
well...
HTML5.tx 2013 2 FEB 2013 14
Sunday, February 3, 13
15. HTML5 and the Internet of Things
Practical ...
Fleetwood Pegasus
HTML5.tx 2013 2 FEB 2013 15
Sunday, February 3, 13
16. HTML5 and the Internet of Things
trailr.io
HTML5.tx 2013 2 FEB 2013 16
Sunday, February 3, 13
17. HTML5 and the Internet of Things
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
Sunday, February 3, 13
18. HTML5 and the Internet of Things
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
Sunday, February 3, 13
19. HTML5.tx 2013
trailr
trailr - build and deploy Arduino ‘environment-aware’
sketches over WebSockets
HTML5.tx 2013 2 FEB 2013 19
Sunday, February 3, 13
20. HTML5 and the Internet of Things
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
Sunday, February 3, 13
21. HTML5 and the Internet of Things
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
Sunday, February 3, 13
22. HTML5 and the Internet of Things
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
Sunday, February 3, 13
23. HTML5 and the Internet of Things
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
Sunday, February 3, 13
24. HTML5 and the Internet of Things
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
Sunday, February 3, 13
25. HTML5 and the Internet of Things
.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
Sunday, February 3, 13
26. HTML5 and the Internet of Things
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
Sunday, February 3, 13
27. 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
Sunday, February 3, 13
28. HTML5 and the Internet of Things
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
Sunday, February 3, 13
29. HTML5 and the Internet of Things
Overview
Serial protocol is defined 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
Sunday, February 3, 13
30. HTML5 and the Internet of Things
node-serialport
var SerialPort = require("serialport").SerialPort
var serialPort = new SerialPort("/dev/tty-usbserial1", {
baudrate: 57600
});
HTML5.tx 2013 2 FEB 2013 30
Sunday, February 3, 13
31. HTML5 and the Internet of Things
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
Sunday, February 3, 13
32. HTML5 and the Internet of Things
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
Sunday, February 3, 13
33. HTML5 and the Internet of Things
noduino
define(['./DigitalOutput.js'], function(LED) {
LED.prototype.blink = function(interval) {
//....
};
return LED;
});
HTML5.tx 2013 2 FEB 2013 33
Sunday, February 3, 13
34. HTML5 and the Internet of Things
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
Sunday, February 3, 13
36. HTML5 and the Internet of Things
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
Sunday, February 3, 13
37. 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
Sunday, February 3, 13
38. HTML5 and the Internet of Things
Arduino Interfacing with Beaglebone
Node.js
HTTP / WEB SOCKET SERVER
HTTP
Node.js
HTTP / WEB SOCKET SERVER
johnny-five
firmata.js
Serial
node-serialport firmata
HTML5.tx 2013 2 FEB 2013 38
Sunday, February 3, 13
39. HTML5 and the Internet of Things
johnny-five
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
Sunday, February 3, 13
40. HTML5 and the Internet of Things
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
Sunday, February 3, 13
41. HTML5 and the Internet of Things
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
Sunday, February 3, 13
42. HTML5 and the Internet of Things
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
Sunday, February 3, 13
43. HTML5 and the Internet of Things
Raspberry Pi and Arduino (serial connection)
HTML5.tx 2013 2 FEB 2013 43
Sunday, February 3, 13
44. HTML5 and the Internet of Things
Raspberry Pi and Arduino
HTML5.tx 2013 2 FEB 2013 44
Sunday, February 3, 13
45. HTML5 and the Internet of Things
Raspberry Pi , Beaglebone, Arduino
HTML5.tx 2013 2 FEB 2013 45
Sunday, February 3, 13
46. HTML5 and the Internet of Things
trailr
Node.js
HTTP / WEB SOCKET SERVER
Node.js
HTTP / WEB SOCKET SERVER
Node.js
HTTP / WEB SOCKET SERVER
HTML5.tx 2013 2 FEB 2013 46
Sunday, February 3, 13
47. 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
Sunday, February 3, 13
48. HTML5 and the Internet of Things
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
Sunday, February 3, 13
49. HTML5 and the Internet of Things
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)
Offline First App (parse.com dataKit)
trailr-admin SPA (ember.js)
Continue Down the List of Cases
HTML5.tx 2013 2 FEB 2013 49
Sunday, February 3, 13
50. HTML5 and the Internet of Things
Solar Charge
Grape Solar 100-Watt Monocrystalline
Off-Grid PV Solar Panel
ACS715 Hall Effect sensor
HTML5.tx 2013 2 FEB 2013 50
Sunday, February 3, 13
51. HTML5 and the Internet of Things
Solar Charge
Grape Solar 100-Watt Monocrystalline
Off-Grid PV Solar Panel
12V 10Amp Charge Controlller
HTML5.tx 2013 2 FEB 2013 51
Sunday, February 3, 13
52. HTML5 and the Internet of Things
Solar Charge
Voltage Divider
HTML5.tx 2013 2 FEB 2013 52
Sunday, February 3, 13
53. HTML5 and the Internet of Things
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
Sunday, February 3, 13