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

Slide 1

Slide 1 text

Building the Internet of Things with HTML5 and Node.js 2 FEBRUARY 2013 - HTML5.tx Sunday, February 3, 13

Slide 2

Slide 2 text

@jdcravens github.com/jessecravens frog Sunday, February 3, 13

Slide 3

Slide 3 text

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 2013 HTML5.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

Slide 4

Slide 4 text

2 FEB 2013 HTML5.tx 2013 We combine research, strategy, design and engineering to link insights to ideas and bring ideas to markets. 4 Sunday, February 3, 13

Slide 5

Slide 5 text

2 FEB 2013 HTML5.tx 2013 5 Sunday, February 3, 13

Slide 6

Slide 6 text

Building the Internet of Things with HTML5 and Node.js Sunday, February 3, 13

Slide 7

Slide 7 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things 7 Oﬄine Storage CSS3 Styling Device Access Connectivity Eﬀects Multimedia Semantics Perf/Integrate 2012 Sunday, February 3, 13

Slide 8

Slide 8 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things 8 Something Diﬀerent, ...Yet Complimentary and fun for the whole family. New Challenge Sunday, February 3, 13

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Now: To ﬁnd the right mobile environment to ‘house’ the prototype. Sunday, February 3, 13

Slide 12

Slide 12 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Cool ... but never could ﬁt 12 Sunday, February 3, 13

Slide 13

Slide 13 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things 13 Perfect ... didn’t get passed my wife Sunday, February 3, 13

Slide 14

Slide 14 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things 14 well... Sunday, February 3, 13

Slide 15

Slide 15 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Practical ... Fleetwood Pegasus 15 Sunday, February 3, 13

Slide 16

Slide 16 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things trailr.io 16 Sunday, February 3, 13

Slide 17

Slide 17 text

2 FEB 2013 HTML5.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 Temp GeoLocation / Weather Web Cam (Streaming) Motion Flame Detection research Sunday, February 3, 13

Slide 18

Slide 18 text

2 FEB 2013 HTML5.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 pins 6 analog inputs USB connection Sunday, February 3, 13

Slide 19

Slide 19 text

2 FEB 2013 HTML5.tx 2013 HTML5.tx 2013 trailr - build and deploy Arduino ‘environment-aware’ sketches over WebSockets trailr 19 Sunday, February 3, 13

Slide 20

Slide 20 text

2 FEB 2013 HTML5.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

Slide 21

Slide 21 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things 21 editor = ace.edit("editor"); editor.setTheme("ace/theme/twilight"); editor.getSession().setMode("ace/mode/c_cpp"); Ace Sunday, February 3, 13

Slide 22

Slide 22 text

2 FEB 2013 HTML5.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": "[email protected]", "url": "http://jessecravens.com" }, "keywords": ["blink"], "sketch": sketch, "env": Trailr.env } socket.emit('createSketch', sketchObj); }); Sketch Object Sunday, February 3, 13

Slide 23

Slide 23 text

2 FEB 2013 HTML5.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

Slide 24

Slide 24 text

2 FEB 2013 HTML5.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

Slide 25

Slide 25 text

2 FEB 2013 HTML5.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

Slide 26

Slide 26 text

2 FEB 2013 HTML5.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

Slide 27

Slide 27 text

2 FEB 2013 HTML5.tx 2013 HTML5.tx 2013 arduino uno w/ simple LED node.js node-serialport module du.ino sketch noduino web application html5 web sockets Web Sockets with noduino 27 Sunday, February 3, 13

Slide 28

Slide 28 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Node.js Interfacing with Arduino 28 Node.js HTTP / WEB SOCKET SERVER Serial HTML5 Web Socket Protocol node-serialport duino noduino duino socket.io Sunday, February 3, 13

Slide 29

Slide 29 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things 29 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. Overview Sunday, February 3, 13

Slide 30

Slide 30 text

2 FEB 2013 HTML5.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

Slide 31

Slide 31 text

2 FEB 2013 HTML5.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

Slide 32

Slide 32 text

2 FEB 2013 HTML5.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

Slide 33

Slide 33 text

2 FEB 2013 HTML5.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

Slide 34

Slide 34 text

2 FEB 2013 HTML5.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

Slide 35

Slide 35 text

ok. Sunday, February 3, 13

Slide 36

Slide 36 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things BeagleBone by TI 36 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 Sunday, February 3, 13

Slide 37

Slide 37 text

2 FEB 2013 HTML5.tx 2013 HTML5.tx 2013 firmata protocol node.js firmata.js module node.js johnny-five module PIR motion sensor node.js bonescript module Node 2 Node 37 Sunday, February 3, 13

Slide 38

Slide 38 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Arduino Interfacing with Beaglebone 38 Node.js HTTP / WEB SOCKET SERVER Serial node-serialport firmata HTTP johnny-five firmata.js Node.js HTTP / WEB SOCKET SERVER Sunday, February 3, 13

Slide 39

Slide 39 text

2 FEB 2013 HTML5.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-ﬁve Sunday, February 3, 13

Slide 40

Slide 40 text

2 FEB 2013 HTML5.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

Slide 41

Slide 41 text

2 FEB 2013 HTML5.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

Slide 42

Slide 42 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Raspberry Pi 42 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 Sunday, February 3, 13

Slide 43

Slide 43 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Raspberry Pi and Arduino (serial connection) 43 Sunday, February 3, 13

Slide 44

Slide 44 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Raspberry Pi and Arduino 44 Sunday, February 3, 13

Slide 45

Slide 45 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Raspberry Pi , Beaglebone, Arduino 45 Sunday, February 3, 13

Slide 46

Slide 46 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things trailr 46 Node.js HTTP / WEB SOCKET SERVER Node.js HTTP / WEB SOCKET SERVER Node.js HTTP / WEB SOCKET SERVER Sunday, February 3, 13

Slide 47

Slide 47 text

2 FEB 2013 HTML5.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

Slide 48

Slide 48 text

2 FEB 2013 HTML5.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

Slide 49

Slide 49 text

2 FEB 2013 HTML5.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) Oﬄine First App (parse.com dataKit) trailr-admin SPA (ember.js) Continue Down the List of Cases Next Steps Sunday, February 3, 13

Slide 50

Slide 50 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things 50 Solar Charge ACS715 Hall Eﬀect sensor Grape Solar 100-Watt Monocrystalline Oﬀ-Grid PV Solar Panel Sunday, February 3, 13

Slide 51

Slide 51 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things 51 Solar Charge Grape Solar 100-Watt Monocrystalline Oﬀ-Grid PV Solar Panel 12V 10Amp Charge Controlller Sunday, February 3, 13

Slide 52

Slide 52 text

2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things 52 Solar Charge Voltage Divider Sunday, February 3, 13

Slide 53

Slide 53 text

2 FEB 2013 HTML5.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