• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of Things
 

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

on

  • 3,577 views

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

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.

Statistics

Views

Total Views
3,577
Views on SlideShare
3,239
Embed Views
338

Actions

Likes
1
Downloads
30
Comments
0

1 Embed 338

https://twitter.com 338

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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, 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
    • 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
    • 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 Connectivity Effects Multimedia Semantics Perf/Integrate HTML5.tx 2013 2 FEB 2013 7Sunday, February 3, 13
    • 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
    • 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
    • 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
    • HTML5 and the Internet of Things Cool ... but never could fit HTML5.tx 2013 2 FEB 2013 12Sunday, February 3, 13
    • HTML5 and the Internet of Things Perfect ... didn’t get passed my wife HTML5.tx 2013 2 FEB 2013 13Sunday, February 3, 13
    • HTML5 and the Internet of Things well... HTML5.tx 2013 2 FEB 2013 14Sunday, February 3, 13
    • HTML5 and the Internet of Things Practical ... Fleetwood Pegasus HTML5.tx 2013 2 FEB 2013 15Sunday, February 3, 13
    • HTML5 and the Internet of Things trailr.io HTML5.tx 2013 2 FEB 2013 16Sunday, February 3, 13
    • 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
    • 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
    • HTML5.tx 2013 trailr trailr - build and deploy Arduino ‘environment-aware’ sketches over WebSockets HTML5.tx 2013 2 FEB 2013 19Sunday, February 3, 13
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • ok.Sunday, February 3, 13
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • HTML5 and the Internet of Things Raspberry Pi and Arduino (serial connection) HTML5.tx 2013 2 FEB 2013 43Sunday, February 3, 13
    • HTML5 and the Internet of Things Raspberry Pi and Arduino HTML5.tx 2013 2 FEB 2013 44Sunday, February 3, 13
    • HTML5 and the Internet of Things Raspberry Pi , Beaglebone, Arduino HTML5.tx 2013 2 FEB 2013 45Sunday, February 3, 13
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • HTML5 and the Internet of Things Solar Charge Voltage Divider HTML5.tx 2013 2 FEB 2013 52Sunday, February 3, 13
    • 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
    • © 2012 frog. All rights reserved.Sunday, February 3, 13