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.

Transcript

1. Building the Internet of Things with HTML5 and Node.js 2 FEBRUARY 2013 - HTML5.tx Sunday, February 3, 13
2. @jdcravens github.com/jessecravens frog Sunday, February 3, 13
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
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
5. 2 FEB 2013 HTML5.tx 2013 5 Sunday, February 3, 13
6. Building the Internet of Things with HTML5 and Node.js Sunday, February 3, 13
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
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
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
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. Now: To find the right mobile environment to ‘house’ the prototype. Sunday, February 3, 13
12. 2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Cool ... but never could fit 12 Sunday, February 3, 13
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
14. 2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things 14 well... Sunday, February 3, 13
15. 2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Practical ... Fleetwood Pegasus 15 Sunday, February 3, 13
16. 2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things trailr.io 16 Sunday, February 3, 13
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
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
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
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
21. 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
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": "jesse.cravens@gmail.com", "url": "http://jessecravens.com" }, "keywords": ["blink"], "sketch": sketch, "env": Trailr.env } socket.emit('createSketch', sketchObj); }); Sketch Object Sunday, February 3, 13
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
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
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
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
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
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
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
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
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
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
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
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
35. ok. Sunday, February 3, 13
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
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
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
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
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
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
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
43. 2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Raspberry Pi and Arduino (serial connection) 43 Sunday, February 3, 13
44. 2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Raspberry Pi and Arduino 44 Sunday, February 3, 13
45. 2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things Raspberry Pi , Beaglebone, Arduino 45 Sunday, February 3, 13
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
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
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
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
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
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
52. 2 FEB 2013 HTML5.tx 2013 HTML5 and the Internet of Things 52 Solar Charge Voltage Divider Sunday, February 3, 13
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
54. © 2012 frog. All rights reserved. Sunday, February 3, 13