Arduino and the real time web

27
Arduino and the real time web Linux Conf AU – Arduino Miniconf 16 January, 2012 @ajfisher

description

Using real time aspects of the web and Socket IO (Django SocketIO) to pull data from an Arduino or to control one.

Transcript of Arduino and the real time web

Page 1: Arduino and the real time web

Arduino and the real time web

Linux Conf AU – Arduino Miniconf16 January, 2012

@ajfisher

Page 2: Arduino and the real time web

Slides, notes & code...

@ajfisherslideshare.net/andrewjfishergithub.com/ajfisher

Page 3: Arduino and the real time web

Arduino❤

Web

Page 4: Arduino and the real time web

Arduino networkingintroduction

Photo (CC): Flickr rfranklinaz

Page 5: Arduino and the real time web

Arduino networking resources

Arduino IDEExamples/Ethernet/Web Client & Web Server

Arduino documentationarduino.cc/it/Reference/Ethernet

Page 6: Arduino and the real time web

@ajfisher @superhighfives

Sensor serving doesn't have to be plain

Page 7: Arduino and the real time web

Simple web serving

Arduino web server examplesExamples/Ethernet/Web Server

ArduServerwww.arduserver.com

Page 8: Arduino and the real time web

Web interaction using an arduino

ReSTduinogithub.com/jjg/RESTduino

webduinogithub.com/sirleech/Webduino

duino.jsgithub.com/ecto/duino

Generic network pulsergist.github.com/1290670

Page 9: Arduino and the real time web

Why is real time webinteraction important for an arduino?

Page 10: Arduino and the real time web

World dominationby arduino

Photo (CC): Flickr marcus ramberg

Page 12: Arduino and the real time web

Difficult?

Photo (CC): Flickr Vrogy

Page 13: Arduino and the real time web

Photo (CC): Flickr InertiaCreeps

Page 14: Arduino and the real time web

Web sockets resources

W3C web sockets specdev.w3.org/html5/websockets/

Wikipediaen.wikipedia.org/wiki/WebSocket

Socket.IO (JS Library)github.com/LearnBoost/socket.io-spec

Django Socket.IO (Django app)github.com/stephenmcd/django-socketio

Page 15: Arduino and the real time web

Real time architecture

WebSocketsServer

Page 16: Arduino and the real time web

Web serverfrom django_socketio import events, broadcast, broadcast_channel

@events.on_subscribe(channel="channel-name")def channel_subscription(request, socket, context, channel): #do some stuff related to a subscription

@events.on_message(channel="^channel-name")def message_processor(request, socket, context, message): message = message[0] foo = message["foo"] bar = message["bar"] #do some processing

socket.send({"value":some_value}) socket.broadcast({"foo": foo, "value": some_value})

Page 17: Arduino and the real time web

Web browser clientvar room = 'channel-name';var socket;

$(function() { socket = new io.Socket(); socket.connect(); socket.on('connect', function() { socket.subscribe(room); }); socket.on('message', function(data) { console.log(data.value); }); socket.send({room: room, foo: foo, bar: bar}); });

Page 18: Arduino and the real time web

Arduino client

#include <WebSocketClient.h>// defsWebSocketClient client(server, "/socket.io/websocket/", 80);

void setup() { Ethernet.begin(mac, ip); delay(1000); if(client.connect()) { client.setDataArrivedDelegate(dataArrived); client.subscribe("channel-name"); delay(1000); } else { while(1) {} }}

void dataArrived(WebSocketClient client, String data) { Serial.println("Data Arrived: " + data);}

Page 19: Arduino and the real time web

Arduino client

void loop() { client.monitor(); // send a message String message = "{\"room\":\"channel-name\",

"\"foo\": bar }";

client.send(message); delay(1000);}

Page 20: Arduino and the real time web

Example – real time sensor data display

Stream live temperature data from two distinct sensors on the network to a web based display that overlays the data

Full code available at https://github.com/ajfisher/realtime-temperature

Page 21: Arduino and the real time web

Arduino sensor

void loop() { char _s[8]; String message = "{\"room\":\"tempsensor\", "; message += "\"sensor\":"; message += sensor_id; message += ", \"value\":"; message += dtostrf(get_temp(0), 8, 3, _s); message += "}";

client.send(message); delay(100);}

Page 22: Arduino and the real time web

Web server

from django_socketio import events, broadcast_channel

#other views @events.on_message(channel="^tempsensor")def get_temperature(request, socket, context, message): message = message[0] value = message["value"] sensor_id = message["sensor"] socket.broadcast_channel( {"sensor": sensor_id, "value":value}, channel="tempvalues" )

Page 23: Arduino and the real time web

Discussion

$(function() { socket = new io.Socket(); socket.connect(); socket.on('connect', function() { socket.subscribe('tempvalues');

CreateTimeline(); }); socket.on('message', function(data) { tempdata[data.sensor].append( new Date().getTime(), data.value ); });});

Page 24: Arduino and the real time web

Static view of data that was presented locally live

Page 25: Arduino and the real time web

Other applications

Scale out sensor network

Web controlled installations

M2M

Page 26: Arduino and the real time web

Things to try out

Pusherpusher.com

Socket IOsocket.io

Arduino Web Sockets Clientsgithub.com/krohling/ArduinoWebsocketClientgithub.com/krohling/ArduinoPusherClient

Page 27: Arduino and the real time web

Arduino and the real time web

@ajfisherslideshare.net/andrewjfishergithub.com/ajfisher