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

Building the Internet of Things with HTML5 and Node.js2 FEBRUARY 2013 - HTML5.tx

Sunday, February 3, 13

@jdcravensgithub.com/jessecravensfrog


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


2 FEB 2013HTML5.tx 2013

We combine research, strategy, design and engineering to link insights to ideas and bring ideas to markets.

4


2 FEB 2013HTML5.tx 2013 5


Building the

Internet of Thingswith HTML5 and Node.js


2 FEB 2013HTML5.tx 2013

HTML5 and the Internet of Things

7

Offline Storage CSS3 Styling Device Access Connectivity

Effects Multimedia Semantics Perf/Integrate

2012


2 FEB 2013HTML5.tx 2013


8

Something Different,

...Yet Complimentary

and fun for the whole family.

New Challenge


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


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.


Now: To find the right mobile environment to ‘house’ the prototype.


2 FEB 2013HTML5.tx 2013


Cool ... but never could fit

12


2 FEB 2013HTML5.tx 2013


13

Perfect ... didn’t get passed my wife


2 FEB 2013HTML5.tx 2013


14

well...


2 FEB 2013HTML5.tx 2013


Practical ... Fleetwood Pegasus

15


2 FEB 2013HTML5.tx 2013


trailr.io

16


2 FEB 2013HTML5.tx 2013


17

Solar Battery Charge (100 W Solar Panel, Charge Controller, 12 V Car Battery)

Wind Turbine (Wind Direction, Speed)

Refridgerator/Cabin/Outside TempGeoLocation / WeatherWeb Cam (Streaming)MotionFlame Detection

research


2 FEB 2013HTML5.tx 2013


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 pins6 analog inputs

USB connection


2 FEB 2013HTML5.tx 2013

HTML5.tx 2013

trailr - build and deploy Arduino ‘environment-aware’ sketches over WebSockets

trailr

19


2 FEB 2013HTML5.tx 2013


20

Ace Editor

Websocket ----> sketchObj

nodejs parse JSON

FS

nodejs (EJS) template replacements

set Environmental variables

make

make upload

trailr


2 FEB 2013HTML5.tx 2013


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


http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js

http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js

2 FEB 2013HTML5.tx 2013


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


mailto:[email protected]

mailto:[email protected]

http://jessecravens.com

http://jessecravens.com

2 FEB 2013HTML5.tx 2013


23

ejs.open = '{{'; ejs.close = '}}';

//finds the name property in appconfig var c = ejs.render(data, { name: sketchConfig["name"], sketch: sketchConfig["sketch"] })

EJS template


2 FEB 2013HTML5.tx 2013


24

fs = require('fs')

fs.readFile(tmplDir + inFile, 'utf8', function (err,data) { // .. fs.writeFile(builtDir + outFile, c, function (err,data) { // ... })});

fs


2 FEB 2013HTML5.tx 2013


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()


2 FEB 2013HTML5.tx 2013


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


2 FEB 2013HTML5.tx 2013

HTML5.tx 2013

arduino uno w/ simple LEDnode.js node-serialport moduledu.ino sketch

noduino web applicationhtml5 web sockets

Web Sockets with noduino

27


2 FEB 2013HTML5.tx 2013


Node.js Interfacing with Arduino

28

Node.jsHTTP / WEB SOCKET SERVER

Serial

HTML5 Web Socket Protocol

node-serialport

duino

noduino

duino

socket.io


2 FEB 2013HTML5.tx 2013


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


2 FEB 2013HTML5.tx 2013


30

var SerialPort = require("serialport").SerialPort

var serialPort = new SerialPort("/dev/tty-usbserial1", { baudrate: 57600 });

node-serialport


2 FEB 2013HTML5.tx 2013


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


2 FEB 2013HTML5.tx 2013


32

board.withLED({pin: 13}, function(err, LED) { LED.blink(250); LED.on('on', function() { console.log('LED is on!'); });});

noduino


2 FEB 2013HTML5.tx 2013


33

define(['./DigitalOutput.js'], function(LED) { LED.prototype.blink = function(interval) {

//.... }; return LED;});

noduino


2 FEB 2013HTML5.tx 2013


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


ok.


2 FEB 2013HTML5.tx 2013


BeagleBone by TI

36

Processor720MHz super-scalar ARM Cortex-A8 (armv7a)3D graphics acceleratorARM Cortex-M3 for power management

ConnectivityUSB clientUSB hostEthernet2x 46 pin headers2x I2C, 5x UART, I2S, SPI, CAN, 66x 3.3V GPIO, 7x ADC

Software4GB microSD card with Angstrom DistributionCloud9 IDE on Node.JS with Bonescript library


2 FEB 2013HTML5.tx 2013

HTML5.tx 2013

firmata protocolnode.js firmata.js modulenode.js johnny-five modulePIR motion sensornode.js bonescript module

Node 2 Node

37


2 FEB 2013HTML5.tx 2013


Arduino Interfacing with Beaglebone

38


Serial

node-serialport firmata

HTTP

johnny-five

firmata.js



2 FEB 2013HTML5.tx 2013


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


2 FEB 2013HTML5.tx 2013


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


2 FEB 2013HTML5.tx 2013


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


2 FEB 2013HTML5.tx 2013


Raspberry Pi

42

Processor700MHz ARM1176 JZF-S (armv6k) - overclock at 800MHzBroadcam VideoCore IV

ConnectivityUSB clientUSB hostEthernet17 GPIOs pins

SoftwareDebian as defaultWebIDE with Python Library


2 FEB 2013HTML5.tx 2013


Raspberry Pi and Arduino (serial connection)

43


2 FEB 2013HTML5.tx 2013


Raspberry Pi and Arduino

44


2 FEB 2013HTML5.tx 2013


Raspberry Pi , Beaglebone, Arduino

45


2 FEB 2013HTML5.tx 2013


trailr

46





2 FEB 2013HTML5.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


2 FEB 2013HTML5.tx 2013


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


2 FEB 2013HTML5.tx 2013


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


2 FEB 2013HTML5.tx 2013


50

Solar Charge

ACS715 Hall Effect sensor

Grape Solar 100-Watt Monocrystalline

Off-Grid PV Solar Panel


2 FEB 2013HTML5.tx 2013


51

Solar ChargeGrape Solar 100-Watt Monocrystalline

Off-Grid PV Solar Panel

12V 10Amp Charge Controlller


2 FEB 2013HTML5.tx 2013


52

Solar Charge

Voltage Divider


2 FEB 2013HTML5.tx 2013


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


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

Technology

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