Post on 30-Aug-2014
description
Building the Internet of Things with HTML5 and Node.js2 FEBRUARY 2013 - HTML5.tx
Sunday, February 3, 13
@jdcravensgithub.com/jessecravensfrog
Sunday, February 3, 13
Amsterdam, Netherlands
Austin, USA Bangalore, India Boston, USA Chennai, India
Gurgaon, India Johannesburg, South Africa
Kiev, Ukraine Milan, Italy Munich, Germany
New York, USA San Francisco, USA Seattle, USA Shanghai, China Vinnitsa, Ukraine
2 FEB 2013HTML5.tx 2013
We are a global team of 1,600 diverse people with deep insights into the behaviors and technologies driving the connected world.
3
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
We combine research, strategy, design and engineering to link insights to ideas and bring ideas to markets.
4
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013 5
Sunday, February 3, 13
Building the
Internet of Thingswith HTML5 and Node.js
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
7
Offline Storage CSS3 Styling Device Access Connectivity
Effects Multimedia Semantics Perf/Integrate
2012
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
8
Something Different,
...Yet Complimentary
and fun for the whole family.
New Challenge
Sunday, February 3, 13
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
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
Now: To find the right mobile environment to ‘house’ the prototype.
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
Cool ... but never could fit
12
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
13
Perfect ... didn’t get passed my wife
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
14
well...
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
Practical ... Fleetwood Pegasus
15
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
trailr.io
16
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
17
Solar Battery Charge (100 W Solar Panel, Charge Controller, 12 V Car Battery)
Wind Turbine (Wind Direction, Speed)
Refridgerator/Cabin/Outside TempGeoLocation / WeatherWeb Cam (Streaming)MotionFlame Detection
research
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
Arduino Uno
18
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 pins6 analog inputs
USB connection
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5.tx 2013
trailr - build and deploy Arduino ‘environment-aware’ sketches over WebSockets
trailr
19
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
20
Ace Editor
Websocket ----> sketchObj
nodejs parse JSON
FS
nodejs (EJS) template replacements
set Environmental variables
make
make upload
trailr
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
21
<script src="ace.js" ></script>
<script> editor = ace.edit("editor"); editor.setTheme("ace/theme/twilight"); editor.getSession().setMode("ace/mode/c_cpp");</script>
Ace
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
22
$("#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);});
Sketch Object
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
23
ejs.open = '{{'; ejs.close = '}}';
//finds the name property in appconfig var c = ejs.render(data, { name: sketchConfig["name"], sketch: sketchConfig["sketch"] })
EJS template
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
24
fs = require('fs')
fs.readFile(tmplDir + inFile, 'utf8', function (err,data) { // .. fs.writeFile(builtDir + outFile, c, function (err,data) { // ... })});
fs
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
25
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);
.exec()
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
26
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';
Make
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5.tx 2013
arduino uno w/ simple LEDnode.js node-serialport moduledu.ino sketch
noduino web applicationhtml5 web sockets
Web Sockets with noduino
27
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
Node.js Interfacing with Arduino
28
Node.jsHTTP / WEB SOCKET SERVER
Serial
HTML5 Web Socket Protocol
node-serialport
duino
noduino
duino
socket.io
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
29
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.
Overview
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
30
var SerialPort = require("serialport").SerialPort
var serialPort = new SerialPort("/dev/tty-usbserial1", { baudrate: 57600 });
node-serialport
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
31
serialPort.on("open", function () { console.log('open'); serialPort.on('data', function(data) { console.log('data received: ' + data); });
serialPort.write("ls\n", function(err, results) { console.log('err ' + err); console.log('results ' + results); }); });
node-serialport
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
32
board.withLED({pin: 13}, function(err, LED) { LED.blink(250); LED.on('on', function() { console.log('LED is on!'); });});
noduino
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
33
define(['./DigitalOutput.js'], function(LED) { LED.prototype.blink = function(interval) {
//.... }; return LED;});
noduino
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
34
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'}); });});
noduino
Sunday, February 3, 13
ok.
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
BeagleBone by TI
36
Processor720MHz super-scalar ARM Cortex-A8 (armv7a)3D graphics acceleratorARM Cortex-M3 for power management
ConnectivityUSB clientUSB hostEthernet2x 46 pin headers2x I2C, 5x UART, I2S, SPI, CAN, 66x 3.3V GPIO, 7x ADC
Software4GB microSD card with Angstrom DistributionCloud9 IDE on Node.JS with Bonescript library
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5.tx 2013
firmata protocolnode.js firmata.js modulenode.js johnny-five modulePIR motion sensornode.js bonescript module
Node 2 Node
37
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
Arduino Interfacing with Beaglebone
38
Node.jsHTTP / WEB SOCKET SERVER
Serial
node-serialport firmata
HTTP
johnny-five
firmata.js
Node.jsHTTP / WEB SOCKET SERVER
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
39
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 });
});
johnny-five
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
40
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); }});
boneScript
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
41
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.
Conclusions
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
Raspberry Pi
42
Processor700MHz ARM1176 JZF-S (armv6k) - overclock at 800MHzBroadcam VideoCore IV
ConnectivityUSB clientUSB hostEthernet17 GPIOs pins
SoftwareDebian as defaultWebIDE with Python Library
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
Raspberry Pi and Arduino (serial connection)
43
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
Raspberry Pi and Arduino
44
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
Raspberry Pi , Beaglebone, Arduino
45
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
trailr
46
Node.jsHTTP / WEB SOCKET SERVER
Node.jsHTTP / WEB SOCKET SERVER
Node.jsHTTP / WEB SOCKET SERVER
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5.tx 2013
trailr-admin app running on a central hub (Beaglebone)
trailr-admin ‘Floor Plan View’ with HTML5 Canvas
trailr - Solar Charge voltage divider
trailr-admin
47
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
48
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();});
trailr-admin HTML5 canvas
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
49
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
Next Steps
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
50
Solar Charge
ACS715 Hall Effect sensor
Grape Solar 100-Watt Monocrystalline
Off-Grid PV Solar Panel
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
51
Solar ChargeGrape Solar 100-Watt Monocrystalline
Off-Grid PV Solar Panel
12V 10Amp Charge Controlller
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
52
Solar Charge
Voltage Divider
Sunday, February 3, 13
2 FEB 2013HTML5.tx 2013
HTML5 and the Internet of Things
53
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");}
solar sketch
Sunday, February 3, 13
© 2012 frog. All rights reserved.
Sunday, February 3, 13