Arduino and the real time web

Arduino and the real time web

Linux Conf AU – Arduino Miniconf16 January, 2012

@ajfisher

Slides, notes & code...

@ajfisherslideshare.net/andrewjfishergithub.com/ajfisher

Arduino❤

Web

Arduino networkingintroduction

Photo (CC): Flickr rfranklinaz

Arduino networking resources

Arduino IDEExamples/Ethernet/Web Client & Web Server

Arduino documentationarduino.cc/it/Reference/Ethernet

@ajfisher @superhighfives

Sensor serving doesn't have to be plain

Simple web serving

Arduino web server examplesExamples/Ethernet/Web Server

ArduServerwww.arduserver.com

Web interaction using an arduino

ReSTduinogithub.com/jjg/RESTduino

webduinogithub.com/sirleech/Webduino

duino.jsgithub.com/ecto/duino

Generic network pulsergist.github.com/1290670

Why is real time webinteraction important for an arduino?

World dominationby arduino

Photo (CC): Flickr marcus ramberg

@kevinrohling 's web sockets controlled robot

Difficult?

Photo (CC): Flickr Vrogy

Photo (CC): Flickr InertiaCreeps

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

Real time architecture

WebSocketsServer

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

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}); });

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);}

Arduino client

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

"\"foo\": bar }";

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

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

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);}

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

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 ); });});

Static view of data that was presented locally live

Other applications

Scale out sensor network

Web controlled installations

M2M

Things to try out

Pusherpusher.com

Socket IOsocket.io

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

Arduino and the real time web

@ajfisherslideshare.net/andrewjfishergithub.com/ajfisher