Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5.tx 2013: Embedded JavaScript, HTML5 and t...

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

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.

Jesse Cravens

February 02, 2013
Tweet

More Decks by Jesse Cravens

Other Decks in Technology

Transcript

  1. Building the Internet of Things with HTML5 and Node.js 2

    FEBRUARY 2013 - HTML5.tx Sunday, February 3, 13
  2. 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
  3. 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
  4. 2 FEB 2013 HTML5.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
  5. 2 FEB 2013 HTML5.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
  6. 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
  7. 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
  8. 2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of

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

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

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

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

    Things trailr.io 16 Sunday, February 3, 13
  13. 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
  14. 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
  15. 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
  16. 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
  17. 2 FEB 2013 HTML5.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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 2 FEB 2013 HTML5.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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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-five Sunday, February 3, 13
  35. 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
  36. 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
  37. 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
  38. 2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of

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

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

    Things Raspberry Pi , Beaglebone, Arduino 45 Sunday, February 3, 13
  41. 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
  42. 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
  43. 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
  44. 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) Offline First App (parse.com dataKit) trailr-admin SPA (ember.js) Continue Down the List of Cases Next Steps Sunday, February 3, 13
  45. 2 FEB 2013 HTML5.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
  46. 2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of

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

    Things 52 Solar Charge Voltage Divider Sunday, February 3, 13
  48. 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