Building the Internet of Things with HTML5 and Node.js       2 FEBRUARY 2013 - HTML5.txSunday, February 3, 13
@jdcravens       github.com/jessecravens       frogSunday, February 3, 13
Amsterdam,                       Austin, USA          Bangalore, India   Boston, USA            Chennai, IndiaNetherlandsG...
We combine research, strategy, design and                engineering to link insights to ideas and bring ideas            ...
HTML5.tx 2013   2 FEB 2013   5Sunday, February 3, 13
Building the       Internet of Things       with HTML5 and Node.jsSunday, February 3, 13
HTML5 and the Internet of Things       2012             Offline Storage                CSS3 Styling   Device Access         ...
HTML5 and the Internet of Things       New Challenge                    Something Different,                    ...Yet Comp...
Goal 1: Build an Internet of Things       using Open Hardware and Open Web       Technologies       Goal 2: Keep the cost ...
In other Words:       Build an ‘Internet of Things’ with as       little C and Python as possible...and       as much Java...
Now:       To find the right mobile environment       to ‘house’ the prototype.Sunday, February 3, 13
HTML5 and the Internet of Things       Cool ...       but never could fit                 HTML5.tx 2013            2 FEB 20...
HTML5 and the Internet of Things       Perfect ...       didn’t get passed my wife                 HTML5.tx 2013          ...
HTML5 and the Internet of Things       well...                 HTML5.tx 2013            2 FEB 2013   14Sunday, February 3,...
HTML5 and the Internet of Things       Practical ...       Fleetwood Pegasus                 HTML5.tx 2013            2 FE...
HTML5 and the Internet of Things       trailr.io                 HTML5.tx 2013            2 FEB 2013   16Sunday, February ...
HTML5 and the Internet of Things       research                  Solar Battery Charge (100 W Solar Panel,                 ...
HTML5 and the Internet of Things       Arduino Uno                  Microcontroller board based on the ATmega328          ...
HTML5.tx 2013       trailr        trailr - build and deploy Arduino ‘environment-aware’        sketches over WebSockets   ...
HTML5 and the Internet of Things       trailr                    Ace Editor                    Websocket ----> sketchObj  ...
HTML5 and the Internet of Things       Ace                  <script src="ace.js" ></script>                  <script>     ...
HTML5 and the Internet of Things       Sketch Object                  $("#sketch").click(function() {                   va...
HTML5 and the Internet of Things       EJS template                   ejs.open = {{;                   ejs.close = }};    ...
HTML5 and the Internet of Things       fs                  fs = require(fs)                  fs.readFile(tmplDir + inFile,...
HTML5 and the Internet of Things       .exec()                  var exec = require(child_process).exec                  va...
HTML5 and the Internet of Things       Make                  var command =                   cd "node_modules/trailr/sketc...
HTML5.tx 2013       Web Sockets with noduino        arduino uno w/ simple LED        node.js node-serialport module       ...
HTML5 and the Internet of Things       Node.js Interfacing with Arduino                                                   ...
HTML5 and the Internet of Things       Overview                    Serial protocol is defined between the                  ...
HTML5 and the Internet of Things       node-serialport                  var SerialPort = require("serialport").SerialPort ...
HTML5 and the Internet of Things       node-serialport                  serialPort.on("open", function () {               ...
HTML5 and the Internet of Things       noduino                  board.withLED({pin: 13}, function(err, LED) {             ...
HTML5 and the Internet of Things       noduino                  define([./DigitalOutput.js], function(LED) {              ...
HTML5 and the Internet of Things       noduino                  that.sockets[socket.id].on(board.connect, function(data) {...
ok.Sunday, February 3, 13
HTML5 and the Internet of Things       BeagleBone by TI                  Processor                  720MHz super-scalar AR...
HTML5.tx 2013       Node 2 Node        firmata protocol        node.js firmata.js module        node.js johnny-five module   ...
HTML5 and the Internet of Things       Arduino Interfacing with Beaglebone                                                ...
HTML5 and the Internet of Things       johnny-five                  var five = require("johnny-five"),                    b...
HTML5 and the Internet of Things       boneScript                  require(bonescript);                  ledPin = bone.P8_...
HTML5 and the Internet of Things       Conclusions                    Serial Cable tail is annoying                    Hos...
HTML5 and the Internet of Things       Raspberry Pi                  Processor                  700MHz ARM1176 JZF-S (armv...
HTML5 and the Internet of Things       Raspberry Pi and Arduino (serial connection)                 HTML5.tx 2013         ...
HTML5 and the Internet of Things       Raspberry Pi and Arduino                 HTML5.tx 2013            2 FEB 2013   44Su...
HTML5 and the Internet of Things       Raspberry Pi , Beaglebone, Arduino                 HTML5.tx 2013            2 FEB 2...
HTML5 and the Internet of Things       trailr                                          Node.js                            ...
HTML5.tx 2013       trailr-admin        trailr-admin app running on a central hub (Beaglebone)        trailr-admin ‘Floor ...
HTML5 and the Internet of Things       trailr-admin HTML5 canvas                  var anim = new Kinetic.Animation(functio...
HTML5 and the Internet of Things       Next Steps                    Right Protocol for the Right Job                    F...
HTML5 and the Internet of Things       Solar Charge            Grape Solar 100-Watt Monocrystalline            Off-Grid PV ...
HTML5 and the Internet of Things       Solar Charge                                          Grape Solar 100-Watt Monocrys...
HTML5 and the Internet of Things       Solar Charge                                          Voltage Divider              ...
HTML5 and the Internet of Things       solar sketch                  void loop() {                    // read the input on...
© 2012 frog. All rights reserved.Sunday, February 3, 13
Upcoming SlideShare
Loading in …5
×

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

4,116
-1

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,116
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
44
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Building the Internet of Things with HTML5 and Node.js 2 FEBRUARY 2013 - HTML5.txSunday, February 3, 13
  2. 2. @jdcravens github.com/jessecravens frogSunday, February 3, 13
  3. 3. Amsterdam, Austin, USA Bangalore, India Boston, USA Chennai, IndiaNetherlandsGurgaon, India Johannesburg, Kiev, Ukraine Milan, Italy Munich, Germany South AfricaNew 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 3Sunday, February 3, 13
  4. 4. We combine research, strategy, design and engineering to link insights to ideas and bring ideas to markets. HTML5.tx 2013 2 FEB 2013 4Sunday, February 3, 13
  5. 5. HTML5.tx 2013 2 FEB 2013 5Sunday, February 3, 13
  6. 6. Building the Internet of Things with HTML5 and Node.jsSunday, February 3, 13
  7. 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 7Sunday, February 3, 13
  8. 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 8Sunday, February 3, 13
  9. 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, shareSunday, February 3, 13
  10. 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. 11. Now: To find the right mobile environment to ‘house’ the prototype.Sunday, February 3, 13
  12. 12. HTML5 and the Internet of Things Cool ... but never could fit HTML5.tx 2013 2 FEB 2013 12Sunday, February 3, 13
  13. 13. HTML5 and the Internet of Things Perfect ... didn’t get passed my wife HTML5.tx 2013 2 FEB 2013 13Sunday, February 3, 13
  14. 14. HTML5 and the Internet of Things well... HTML5.tx 2013 2 FEB 2013 14Sunday, February 3, 13
  15. 15. HTML5 and the Internet of Things Practical ... Fleetwood Pegasus HTML5.tx 2013 2 FEB 2013 15Sunday, February 3, 13
  16. 16. HTML5 and the Internet of Things trailr.io HTML5.tx 2013 2 FEB 2013 16Sunday, February 3, 13
  17. 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 17Sunday, February 3, 13
  18. 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 18Sunday, February 3, 13
  19. 19. HTML5.tx 2013 trailr trailr - build and deploy Arduino ‘environment-aware’ sketches over WebSockets HTML5.tx 2013 2 FEB 2013 19Sunday, February 3, 13
  20. 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 20Sunday, February 3, 13
  21. 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 21Sunday, February 3, 13
  22. 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 22Sunday, February 3, 13
  23. 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 23Sunday, February 3, 13
  24. 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 24Sunday, February 3, 13
  25. 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 25Sunday, February 3, 13
  26. 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 26Sunday, February 3, 13
  27. 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 27Sunday, February 3, 13
  28. 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 28Sunday, February 3, 13
  29. 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 29Sunday, February 3, 13
  30. 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 30Sunday, February 3, 13
  31. 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 31Sunday, February 3, 13
  32. 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 32Sunday, February 3, 13
  33. 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 33Sunday, February 3, 13
  34. 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 34Sunday, February 3, 13
  35. 35. ok.Sunday, February 3, 13
  36. 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 36Sunday, February 3, 13
  37. 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 37Sunday, February 3, 13
  38. 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 38Sunday, February 3, 13
  39. 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 39Sunday, February 3, 13
  40. 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 40Sunday, February 3, 13
  41. 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 41Sunday, February 3, 13
  42. 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 42Sunday, February 3, 13
  43. 43. HTML5 and the Internet of Things Raspberry Pi and Arduino (serial connection) HTML5.tx 2013 2 FEB 2013 43Sunday, February 3, 13
  44. 44. HTML5 and the Internet of Things Raspberry Pi and Arduino HTML5.tx 2013 2 FEB 2013 44Sunday, February 3, 13
  45. 45. HTML5 and the Internet of Things Raspberry Pi , Beaglebone, Arduino HTML5.tx 2013 2 FEB 2013 45Sunday, February 3, 13
  46. 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 46Sunday, February 3, 13
  47. 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 47Sunday, February 3, 13
  48. 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 48Sunday, February 3, 13
  49. 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 49Sunday, February 3, 13
  50. 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 50Sunday, February 3, 13
  51. 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 51Sunday, February 3, 13
  52. 52. HTML5 and the Internet of Things Solar Charge Voltage Divider HTML5.tx 2013 2 FEB 2013 52Sunday, February 3, 13
  53. 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 53Sunday, February 3, 13
  54. 54. © 2012 frog. All rights reserved.Sunday, February 3, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×