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

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

Jesse Cravens
February 02, 2013

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

    View full-size slide

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

    View full-size slide

  3. 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

    View full-size slide

  4. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 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

    View full-size slide

  18. 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

    View full-size slide

  19. 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

    View full-size slide

  20. 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

    View full-size slide

  21. 2 FEB 2013
    HTML5.tx 2013
    HTML5 and the Internet of Things
    21

    <br/>editor = ace.edit("editor");<br/>editor.setTheme("ace/theme/twilight");<br/>editor.getSession().setMode("ace/mode/c_cpp");<br/>
    Ace
    Sunday, February 3, 13

    View full-size slide

  22. 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

    View full-size slide

  23. 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

    View full-size slide

  24. 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

    View full-size slide

  25. 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

    View full-size slide

  26. 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

    View full-size slide

  27. 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

    View full-size slide

  28. 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

    View full-size slide

  29. 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

    View full-size slide

  30. 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

    View full-size slide

  31. 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

    View full-size slide

  32. 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

    View full-size slide

  33. 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

    View full-size slide

  34. 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

    View full-size slide

  35. ok.
    Sunday, February 3, 13

    View full-size slide

  36. 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

    View full-size slide

  37. 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

    View full-size slide

  38. 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

    View full-size slide

  39. 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

    View full-size slide

  40. 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

    View full-size slide

  41. 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

    View full-size slide

  42. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. 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

    View full-size slide

  47. 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

    View full-size slide

  48. 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

    View full-size slide

  49. 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

    View full-size slide

  50. 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

    View full-size slide

  51. 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

    View full-size slide

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

    View full-size slide

  53. 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

    View full-size slide

  54. © 2012 frog. All rights reserved.
    Sunday, February 3, 13

    View full-size slide