SlideShare una empresa de Scribd logo
1 de 27
Descargar para leer sin conexión
Arduino and the real time web



Linux Conf AU – Arduino Miniconf
16 January, 2012


@ajfisher
Slides, notes & code...




@ajfisher
slideshare.net/andrewjfisher
github.com/ajfisher
Arduino
  ❤
 Web
Arduino networking
  introduction




Photo (CC): Flickr rfranklinaz
Arduino networking resources
Arduino IDE
Examples/Ethernet/Web Client & Web Server


Arduino documentation
arduino.cc/it/Reference/Ethernet
Sensor serving doesn't 
have to be plain          @ajfisher @superhighfives
Simple web serving
Arduino web server examples
Examples/Ethernet/Web Server
ArduServer
www.arduserver.com
Web interaction using an arduino
ReSTduino
github.com/jjg/RESTduino
webduino
github.com/sirleech/Webduino
duino.js
github.com/ecto/duino
Generic network pulser
gist.github.com/1290670
Why is real time web
interaction important 
for an arduino?
World domination
  by 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 spec
dev.w3.org/html5/websockets/
Wikipedia
en.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




                 Web
               Sockets
                Server
Web server
from 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 client
var 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>
// defs
WebSocketClient 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
Pusher
pusher.com
Socket IO
socket.io
Arduino Web Sockets Clients
github.com/krohling/ArduinoWebsocketClient
github.com/krohling/ArduinoPusherClient
Arduino and the real time web




@ajfisher
slideshare.net/andrewjfisher
github.com/ajfisher

Más contenido relacionado

La actualidad más candente

异常检测在苏宁的实践
异常检测在苏宁的实践异常检测在苏宁的实践
异常检测在苏宁的实践Leo Zhou
 
[2019] 하이퍼파라미터 튜닝으로 모델 성능 개선하기
[2019] 하이퍼파라미터 튜닝으로 모델 성능 개선하기[2019] 하이퍼파라미터 튜닝으로 모델 성능 개선하기
[2019] 하이퍼파라미터 튜닝으로 모델 성능 개선하기NHN FORWARD
 
Python tools to deploy your machine learning models faster
Python tools to deploy your machine learning models fasterPython tools to deploy your machine learning models faster
Python tools to deploy your machine learning models fasterJeff Hale
 
AI分野におけるコンテナオーケストレーションとは
AI分野におけるコンテナオーケストレーションとはAI分野におけるコンテナオーケストレーションとは
AI分野におけるコンテナオーケストレーションとはTetsurou Yano
 
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」Ken'ichi Matsui
 
paizaのオンラインジャッジを支えるDockerとその周辺
paizaのオンラインジャッジを支えるDockerとその周辺paizaのオンラインジャッジを支えるDockerとその周辺
paizaのオンラインジャッジを支えるDockerとその周辺paiza
 
關於履歷表, 我想說的其實是...
關於履歷表, 我想說的其實是...關於履歷表, 我想說的其實是...
關於履歷表, 我想說的其實是...Keynes Cheng
 
RubyとRのおいしい関係
RubyとRのおいしい関係RubyとRのおいしい関係
RubyとRのおいしい関係sady_nitro
 
FIWARE Training: NGSI-LD Advanced Operations
FIWARE Training: NGSI-LD Advanced OperationsFIWARE Training: NGSI-LD Advanced Operations
FIWARE Training: NGSI-LD Advanced OperationsFIWARE
 
Pythonによる非同期プログラミング入門
Pythonによる非同期プログラミング入門Pythonによる非同期プログラミング入門
Pythonによる非同期プログラミング入門Hironori Sekine
 
大学研究室レベルでLocal 5Gを導入するための手法の考察
大学研究室レベルでLocal 5Gを導入するための手法の考察大学研究室レベルでLocal 5Gを導入するための手法の考察
大学研究室レベルでLocal 5Gを導入するための手法の考察Yutaka Kikuchi
 
社内のマニュアルをSphinxで作ってみた
社内のマニュアルをSphinxで作ってみた社内のマニュアルをSphinxで作ってみた
社内のマニュアルをSphinxで作ってみたIosif Takakura
 
Vertex AI Pipelinesで BigQuery MLのワークフローを管理 (ETL ~ デプロイまで)
Vertex AI Pipelinesで BigQuery MLのワークフローを管理 (ETL ~ デプロイまで)Vertex AI Pipelinesで BigQuery MLのワークフローを管理 (ETL ~ デプロイまで)
Vertex AI Pipelinesで BigQuery MLのワークフローを管理 (ETL ~ デプロイまで)幸太朗 岩澤
 
FIWARE Wednesday Webinars - How to Design DataModels
FIWARE Wednesday Webinars - How to Design DataModelsFIWARE Wednesday Webinars - How to Design DataModels
FIWARE Wednesday Webinars - How to Design DataModelsFIWARE
 
Graph Database Meetup in Korea #4. 그래프 이론을 적용한 그래프 데이터베이스 활용 사례
Graph Database Meetup in Korea #4. 그래프 이론을 적용한 그래프 데이터베이스 활용 사례 Graph Database Meetup in Korea #4. 그래프 이론을 적용한 그래프 데이터베이스 활용 사례
Graph Database Meetup in Korea #4. 그래프 이론을 적용한 그래프 데이터베이스 활용 사례 bitnineglobal
 
How to win data science competitions with Deep Learning
How to win data science competitions with Deep LearningHow to win data science competitions with Deep Learning
How to win data science competitions with Deep LearningSri Ambati
 

La actualidad más candente (20)

私とOSSの25年
私とOSSの25年私とOSSの25年
私とOSSの25年
 
异常检测在苏宁的实践
异常检测在苏宁的实践异常检测在苏宁的实践
异常检测在苏宁的实践
 
[2019] 하이퍼파라미터 튜닝으로 모델 성능 개선하기
[2019] 하이퍼파라미터 튜닝으로 모델 성능 개선하기[2019] 하이퍼파라미터 튜닝으로 모델 성능 개선하기
[2019] 하이퍼파라미터 튜닝으로 모델 성능 개선하기
 
Python tools to deploy your machine learning models faster
Python tools to deploy your machine learning models fasterPython tools to deploy your machine learning models faster
Python tools to deploy your machine learning models faster
 
AI分野におけるコンテナオーケストレーションとは
AI分野におけるコンテナオーケストレーションとはAI分野におけるコンテナオーケストレーションとは
AI分野におけるコンテナオーケストレーションとは
 
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
 
paizaのオンラインジャッジを支えるDockerとその周辺
paizaのオンラインジャッジを支えるDockerとその周辺paizaのオンラインジャッジを支えるDockerとその周辺
paizaのオンラインジャッジを支えるDockerとその周辺
 
關於履歷表, 我想說的其實是...
關於履歷表, 我想說的其實是...關於履歷表, 我想說的其實是...
關於履歷表, 我想說的其實是...
 
RubyとRのおいしい関係
RubyとRのおいしい関係RubyとRのおいしい関係
RubyとRのおいしい関係
 
FIWARE Training: NGSI-LD Advanced Operations
FIWARE Training: NGSI-LD Advanced OperationsFIWARE Training: NGSI-LD Advanced Operations
FIWARE Training: NGSI-LD Advanced Operations
 
Pythonによる非同期プログラミング入門
Pythonによる非同期プログラミング入門Pythonによる非同期プログラミング入門
Pythonによる非同期プログラミング入門
 
MLOps入門
MLOps入門MLOps入門
MLOps入門
 
大学研究室レベルでLocal 5Gを導入するための手法の考察
大学研究室レベルでLocal 5Gを導入するための手法の考察大学研究室レベルでLocal 5Gを導入するための手法の考察
大学研究室レベルでLocal 5Gを導入するための手法の考察
 
Edge AI ソリューションを支える Azure IoT サービス
Edge AI ソリューションを支える Azure IoT サービスEdge AI ソリューションを支える Azure IoT サービス
Edge AI ソリューションを支える Azure IoT サービス
 
社内のマニュアルをSphinxで作ってみた
社内のマニュアルをSphinxで作ってみた社内のマニュアルをSphinxで作ってみた
社内のマニュアルをSphinxで作ってみた
 
Vertex AI Pipelinesで BigQuery MLのワークフローを管理 (ETL ~ デプロイまで)
Vertex AI Pipelinesで BigQuery MLのワークフローを管理 (ETL ~ デプロイまで)Vertex AI Pipelinesで BigQuery MLのワークフローを管理 (ETL ~ デプロイまで)
Vertex AI Pipelinesで BigQuery MLのワークフローを管理 (ETL ~ デプロイまで)
 
FIWARE Wednesday Webinars - How to Design DataModels
FIWARE Wednesday Webinars - How to Design DataModelsFIWARE Wednesday Webinars - How to Design DataModels
FIWARE Wednesday Webinars - How to Design DataModels
 
Graph Database Meetup in Korea #4. 그래프 이론을 적용한 그래프 데이터베이스 활용 사례
Graph Database Meetup in Korea #4. 그래프 이론을 적용한 그래프 데이터베이스 활용 사례 Graph Database Meetup in Korea #4. 그래프 이론을 적용한 그래프 데이터베이스 활용 사례
Graph Database Meetup in Korea #4. 그래프 이론을 적용한 그래프 데이터베이스 활용 사례
 
Amazon SageMaker で始める機械学習
Amazon SageMaker で始める機械学習Amazon SageMaker で始める機械学習
Amazon SageMaker で始める機械学習
 
How to win data science competitions with Deep Learning
How to win data science competitions with Deep LearningHow to win data science competitions with Deep Learning
How to win data science competitions with Deep Learning
 

Destacado

Web Facilitated Play in the Real World
Web Facilitated Play in the Real WorldWeb Facilitated Play in the Real World
Web Facilitated Play in the Real WorldAndrew Fisher
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS BasicsRavi Mone
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS IntroductionCarlos Morales
 
node.js and the AR.Drone: building a real-time dashboard using socket.io
node.js and the AR.Drone: building a real-time dashboard using socket.ionode.js and the AR.Drone: building a real-time dashboard using socket.io
node.js and the AR.Drone: building a real-time dashboard using socket.ioSteven Beeckman
 
Advanced programming with #nodecopter
Advanced programming with #nodecopterAdvanced programming with #nodecopter
Advanced programming with #nodecopterLaurent Eschenauer
 

Destacado (6)

Web Facilitated Play in the Real World
Web Facilitated Play in the Real WorldWeb Facilitated Play in the Real World
Web Facilitated Play in the Real World
 
Arduino basics
Arduino basicsArduino basics
Arduino basics
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS Introduction
 
node.js and the AR.Drone: building a real-time dashboard using socket.io
node.js and the AR.Drone: building a real-time dashboard using socket.ionode.js and the AR.Drone: building a real-time dashboard using socket.io
node.js and the AR.Drone: building a real-time dashboard using socket.io
 
Advanced programming with #nodecopter
Advanced programming with #nodecopterAdvanced programming with #nodecopter
Advanced programming with #nodecopter
 

Similar a Arduino and the real time web

DevSum'15 : Microsoft Azure and Things
DevSum'15 : Microsoft Azure and ThingsDevSum'15 : Microsoft Azure and Things
DevSum'15 : Microsoft Azure and ThingsThomas Conté
 
Networking and Data Access with Eqela
Networking and Data Access with EqelaNetworking and Data Access with Eqela
Networking and Data Access with Eqelajobandesther
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch
 
Athens IoT meetup #7 - Create the Internet of your Things - Laurent Ellerbach...
Athens IoT meetup #7 - Create the Internet of your Things - Laurent Ellerbach...Athens IoT meetup #7 - Create the Internet of your Things - Laurent Ellerbach...
Athens IoT meetup #7 - Create the Internet of your Things - Laurent Ellerbach...Athens IoT Meetup
 
AWS IoTで家庭内IoTをやってみた【JAWS DAYS 2016】
AWS IoTで家庭内IoTをやってみた【JAWS DAYS 2016】AWS IoTで家庭内IoTをやってみた【JAWS DAYS 2016】
AWS IoTで家庭内IoTをやってみた【JAWS DAYS 2016】tsuchimon
 
Chatting dengan beberapa pc laptop
Chatting dengan beberapa pc laptopChatting dengan beberapa pc laptop
Chatting dengan beberapa pc laptopyayaria
 
Introduction to Things board (An Open Source IoT Cloud Platform)
Introduction to Things board (An Open Source IoT Cloud Platform)Introduction to Things board (An Open Source IoT Cloud Platform)
Introduction to Things board (An Open Source IoT Cloud Platform)Amarjeetsingh Thakur
 
Going real time with Socket.io
Going real time with Socket.ioGoing real time with Socket.io
Going real time with Socket.ioArnout Kazemier
 
Programming IoT Gateways in JavaScript with macchina.io
Programming IoT Gateways in JavaScript with macchina.ioProgramming IoT Gateways in JavaScript with macchina.io
Programming IoT Gateways in JavaScript with macchina.ioGünter Obiltschnig
 
Laporan multi client
Laporan multi clientLaporan multi client
Laporan multi clientichsanbarokah
 
MultiClient chatting berbasis gambar
MultiClient chatting berbasis gambarMultiClient chatting berbasis gambar
MultiClient chatting berbasis gambaryoyomay93
 
Bending the IoT to your will with JavaScript
Bending the IoT to your will with JavaScriptBending the IoT to your will with JavaScript
Bending the IoT to your will with JavaScriptAll Things Open
 
Raspberry pi Part 23
Raspberry pi Part 23Raspberry pi Part 23
Raspberry pi Part 23Techvilla
 
Writing robust Node.js applications
Writing robust Node.js applicationsWriting robust Node.js applications
Writing robust Node.js applicationsTom Croucher
 
Laporan multiclient chatting berbasis grafis (gambar)
Laporan multiclient chatting berbasis grafis (gambar)Laporan multiclient chatting berbasis grafis (gambar)
Laporan multiclient chatting berbasis grafis (gambar)Rara Ariesta
 
WebRTC 101 - How to get started building your first WebRTC application
WebRTC 101 - How to get started building your first WebRTC applicationWebRTC 101 - How to get started building your first WebRTC application
WebRTC 101 - How to get started building your first WebRTC applicationDan Jenkins
 

Similar a Arduino and the real time web (20)

DevSum'15 : Microsoft Azure and Things
DevSum'15 : Microsoft Azure and ThingsDevSum'15 : Microsoft Azure and Things
DevSum'15 : Microsoft Azure and Things
 
Networking and Data Access with Eqela
Networking and Data Access with EqelaNetworking and Data Access with Eqela
Networking and Data Access with Eqela
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.js
 
Athens IoT meetup #7 - Create the Internet of your Things - Laurent Ellerbach...
Athens IoT meetup #7 - Create the Internet of your Things - Laurent Ellerbach...Athens IoT meetup #7 - Create the Internet of your Things - Laurent Ellerbach...
Athens IoT meetup #7 - Create the Internet of your Things - Laurent Ellerbach...
 
AWS IoTで家庭内IoTをやってみた【JAWS DAYS 2016】
AWS IoTで家庭内IoTをやってみた【JAWS DAYS 2016】AWS IoTで家庭内IoTをやってみた【JAWS DAYS 2016】
AWS IoTで家庭内IoTをやってみた【JAWS DAYS 2016】
 
Chatting dengan beberapa pc laptop
Chatting dengan beberapa pc laptopChatting dengan beberapa pc laptop
Chatting dengan beberapa pc laptop
 
Introduction to Things board (An Open Source IoT Cloud Platform)
Introduction to Things board (An Open Source IoT Cloud Platform)Introduction to Things board (An Open Source IoT Cloud Platform)
Introduction to Things board (An Open Source IoT Cloud Platform)
 
Socket Programming
Socket ProgrammingSocket Programming
Socket Programming
 
Going real time with Socket.io
Going real time with Socket.ioGoing real time with Socket.io
Going real time with Socket.io
 
Programming IoT Gateways in JavaScript with macchina.io
Programming IoT Gateways in JavaScript with macchina.ioProgramming IoT Gateways in JavaScript with macchina.io
Programming IoT Gateways in JavaScript with macchina.io
 
Laporan multi client
Laporan multi clientLaporan multi client
Laporan multi client
 
Arduino práctico ethernet
Arduino práctico   ethernetArduino práctico   ethernet
Arduino práctico ethernet
 
MultiClient chatting berbasis gambar
MultiClient chatting berbasis gambarMultiClient chatting berbasis gambar
MultiClient chatting berbasis gambar
 
Bending the IoT to your will with JavaScript
Bending the IoT to your will with JavaScriptBending the IoT to your will with JavaScript
Bending the IoT to your will with JavaScript
 
Raspberry pi Part 23
Raspberry pi Part 23Raspberry pi Part 23
Raspberry pi Part 23
 
Writing robust Node.js applications
Writing robust Node.js applicationsWriting robust Node.js applications
Writing robust Node.js applications
 
Pemrograman Jaringan
Pemrograman JaringanPemrograman Jaringan
Pemrograman Jaringan
 
Laporan multiclient chatting berbasis grafis (gambar)
Laporan multiclient chatting berbasis grafis (gambar)Laporan multiclient chatting berbasis grafis (gambar)
Laporan multiclient chatting berbasis grafis (gambar)
 
WebRTC 101 - How to get started building your first WebRTC application
WebRTC 101 - How to get started building your first WebRTC applicationWebRTC 101 - How to get started building your first WebRTC application
WebRTC 101 - How to get started building your first WebRTC application
 
Os 2
Os 2Os 2
Os 2
 

Más de Andrew Fisher

Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.Andrew Fisher
 
Droids, java script and web connected hardware
Droids, java script and web connected hardwareDroids, java script and web connected hardware
Droids, java script and web connected hardwareAndrew Fisher
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScriptAndrew Fisher
 
A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014Andrew Fisher
 
How well are you delivering your experience?
How well are you delivering your experience?How well are you delivering your experience?
How well are you delivering your experience?Andrew Fisher
 
Designing a Moving Experience
Designing a Moving ExperienceDesigning a Moving Experience
Designing a Moving ExperienceAndrew Fisher
 
The Wonderful-Amazing-Orientation-Motion-Sensormatic Machine
The Wonderful-Amazing-Orientation-Motion-Sensormatic MachineThe Wonderful-Amazing-Orientation-Motion-Sensormatic Machine
The Wonderful-Amazing-Orientation-Motion-Sensormatic MachineAndrew Fisher
 
Responsive content and user context
Responsive content and user contextResponsive content and user context
Responsive content and user contextAndrew Fisher
 
Datatium - radiation free responsive experiences
Datatium - radiation free responsive experiencesDatatium - radiation free responsive experiences
Datatium - radiation free responsive experiencesAndrew Fisher
 
Getting Touchy Feely with the Web
Getting Touchy Feely with the WebGetting Touchy Feely with the Web
Getting Touchy Feely with the WebAndrew Fisher
 
How the web is going physical
How the web is going physicalHow the web is going physical
How the web is going physicalAndrew Fisher
 
Device API - now with added fun
Device API - now with added funDevice API - now with added fun
Device API - now with added funAndrew Fisher
 
ad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailersad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailersAndrew Fisher
 
The future of Australian mobile
The future of Australian mobileThe future of Australian mobile
The future of Australian mobileAndrew Fisher
 
Cloud Sourcing the Business
Cloud Sourcing the BusinessCloud Sourcing the Business
Cloud Sourcing the BusinessAndrew Fisher
 

Más de Andrew Fisher (15)

Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.
 
Droids, java script and web connected hardware
Droids, java script and web connected hardwareDroids, java script and web connected hardware
Droids, java script and web connected hardware
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScript
 
A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014
 
How well are you delivering your experience?
How well are you delivering your experience?How well are you delivering your experience?
How well are you delivering your experience?
 
Designing a Moving Experience
Designing a Moving ExperienceDesigning a Moving Experience
Designing a Moving Experience
 
The Wonderful-Amazing-Orientation-Motion-Sensormatic Machine
The Wonderful-Amazing-Orientation-Motion-Sensormatic MachineThe Wonderful-Amazing-Orientation-Motion-Sensormatic Machine
The Wonderful-Amazing-Orientation-Motion-Sensormatic Machine
 
Responsive content and user context
Responsive content and user contextResponsive content and user context
Responsive content and user context
 
Datatium - radiation free responsive experiences
Datatium - radiation free responsive experiencesDatatium - radiation free responsive experiences
Datatium - radiation free responsive experiences
 
Getting Touchy Feely with the Web
Getting Touchy Feely with the WebGetting Touchy Feely with the Web
Getting Touchy Feely with the Web
 
How the web is going physical
How the web is going physicalHow the web is going physical
How the web is going physical
 
Device API - now with added fun
Device API - now with added funDevice API - now with added fun
Device API - now with added fun
 
ad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailersad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailers
 
The future of Australian mobile
The future of Australian mobileThe future of Australian mobile
The future of Australian mobile
 
Cloud Sourcing the Business
Cloud Sourcing the BusinessCloud Sourcing the Business
Cloud Sourcing the Business
 

Último

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGSujit Pal
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 

Último (20)

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAG
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 

Arduino and the real time web

Notas del editor

  1. Thanks Jon – Good afternoon everyone and thanks for coming along for at the end of the day. My session is going to be a little different from some of the others this afternoon as it&apos;s a little more software and network oriented than the others.
  2. Housekeeping wise – my presso will be up at slideshare with all my notes and all my code is in github so don&apos;t feel like you need to write much of this down. It&apos;s the end of what&apos;s been a great day so sit back, relax and just think about how you can play around with some of what I&apos;m going to show you this afternoon.
  3. So before we get started let&apos;s get a sense of knowledge level. Who has done some sort of web development involving server side coding? Okay who has played with Arduino&apos;s ethernet library? Arduino Ethernet Server? Arduino Ethernet Client? Okay so there&apos;s a few that haven&apos;t used the Ethernet library at all
  4. Very quickly, arduino&apos;s can connect to the network with an ethernet shield or using an etherten or similar like this. If you haven&apos;t played with the library think of it like a networked version of a serial connection you can pass data back and forth and your arduino can be either a server or a client. http://www.flickr.com/photos/88548643@N00/139617711/
  5. To get up to speed with this I&apos;d thoroughly working through and digesting the various examples in the Arduino IDE and trawling all the API documentation on the site. Don&apos;t worry too much though the principles and architecture I&apos;ll be talking about are just as important as the code so you&apos;ll follow along even if you haven&apos;t played with it much.
  6. There are some great ways to connect an arduino to the web and you might find some of these useful for your particular needs before we get into realtime. .
  7. If all you want to do is get some data to present onto a single web page nice and simply then I can suggest you check out the examples in the Arduino Networking library. If you want something a little more robust but still quite simple check our ArduServer These are a bit limited in terms of interaction but they are quick to produce
  8. If you&apos;re looking to control IO pins using URLs in a more restful manner then check out restduino or webduino. These are more fully featured web servers – Webduino is getting pretty clever now. These types of applications generally give you a lot of URLs to play with, often customisable, you can serve images, turn pins on or off and read state and serve content as HTML or JSON.
  9. So there&apos;s clearly lots of ways to use an arduino with the web already. Given that, why would I want to hook it up to the real time web? Surely using one of these methods already should be sufficient.
  10. Quite simply it&apos;s so you can create your robot army to take over the world that you control via the web browser on your mobile phone. http://www.flickr.com/photos/marcusramberg/430115937/
  11. Realistically they probably look a bit more like this – but conquest will happen – just really slowly. Actually in the traditional web model we face some limitations when we start playing with arduinos. http://kevinrohling.wordpress.com/2011/09/14/world-domination-using-arduinos-and-websockets/
  12. Arduinos don&apos;t scale well with concurrent users. If you try and build a web app on your arduino you end up with thousands of lines of code in your program. Likewise processing thousands of lines of HTML can be error prone and result in buffer overruns and crashes. Many projects offload this processing to another machine and then communicate via serial but clearly that&apos;s going to affect your mobility. So to deal with this we have to get a method that works consistently knowing these limitations. http://www.flickr.com/photos/vrogy/514733529
  13. So the architecture for interaction with the web in real time is a little more complex than the stock request response method and at the heart of how I do this is to use Web Sockets. Who here is familiar with how web sockets work? Very briefly for those that aren&apos;t – web sockets are a full duplex bidirectional connection over a single TCP connection. In practice this usually means a client – typically a web browser connects to a server and holds open a connection that data is streamed back and forwards through http://www.flickr.com/photos/inertiacreeps/1414845543
  14. There&apos;s some good resources for how this all works and I won&apos;t explain the detail now but suffice to say Web Sockets allows us to hold a single connection open between the client and server and stream data back and forth in real time which provides an efficient method of communication over HTTP without the overhead of lots of handshaking and header passing for every request.
  15. There are three main components First is the web socket server which provides application logic – it could service other functions as well such as authentication, hooking to messaging systems or other web application components or a database. The next part is the Web Browser Client – this provides the UI component and is typically a mix of JS and HTML. Finally is the client that sits on the arduino that can processes messages coming in. Web scokets are generally set up as a pub / sub model on channels so you push data to a channel and listen for messages which you can action.
  16. To show you how this works then in some code. I&apos;m a python guy so I use Django Socket IO for this but the same principles hold for things like Node and what not as well. You can see here I have some code that sets up a channel that clients can subscribe to. After that I then have some code that executes when it receives message events which process the message and do something with it. I can send messages back to the originating client or I can broadcast messages to everyone on a channel as well.
  17. Here&apos;s the web browser code. I have some JS here that is connecting to the channel and you can see here I have code that sends a message and receives one back. Web sockets typically use JSON in order to send messages back and forth so that makes it very suitable for use in web pages and JSON plays nicely with obviously Node and Python which is why these two stacks tend to get used for Web Sockets most often.
  18. This then is the arduino client. This is an adaptation of the Arduino Web Sockets library by Kevin Rohling to work with Socket IO. It&apos;s worth noting that this version of the library now only works with Arduino 1.0. Again I subscribe to a channel like the others. Note a couple of the pauses I do to let everything have time to catch up. Once I&apos;m subscribed I create a delegate function that handles my messages which in this case is just going to print a message
  19. So in my main loop I then call monitor to just check if a message has come in and in this instance I&apos;m going to just send a message off to the server every second on the channel.
  20. Now we understand the building blocks let&apos;s put them together in an example. We&apos;re going to take data from two independent sensors on two arduinos and get it to come together in real time to a display that you&apos;ll all be able to view on your web browsers if you join my network.
  21. Let&apos;s start with the arduino code which is pretty simple. I have two ether tens connected to the network. Attached to them are simply a temperature sensor using a LM335 sensor. I won&apos;t go through the temperature code as it&apos;s irrelevant but here you can see my loop just calls the web sockets send command with the current state of the temperature and the node id every second. Note that I haven&apos;t calibrated these sensors either as it&apos;s just a quick and dirty example.
  22. Now on the server, we take the message sent to the channel and we process it to grab the node ID and the temperature value. This is then broadcast in a package to any client that&apos;s subscribed to listen on a broadcast channel. The reason we do this as well is to stop an echo chamber from developing where you flood the sender back with echoes of it&apos;s own messages. It&apos;s just a nice way to limit the amount of data you&apos;re pushing around.
  23. On the browser side we then process the message as it comes in and hand that data off to a graphing library called smoothie which makes pretty charts from web socket streamed data. Pretty straight forward huh?
  24. Now let&apos;s see this working – assuming my code works. You can actually see this if you jump on my network and then hit this IP address. It should work with just about all modern browsers and works okay on iPhone and newish Android devices Switch to screen &lt;RIGHT&gt; So you can see here the two charts from the two sensors. If I hold one to heat it up you can see it goes up, then down as I let it go. You get the average between them below as well in the chart below. So this is a pretty basic example but you can see how this can start to work – hopefully your brains are starting to shift into project applications now.
  25. So you now you understand the principles involved there&apos;s lots of applications for this. You could scale a sensor mesh quite easily using this set up or else you could flip it and use a web browser as the controller or input which then gets piped to one or many arduinos to react in some fashion – this is how you&apos;d make your mobile phone browser controlled robot army. Similarly for M2M there are some good options here as because of the pub/sub model a subscriber for data could be an arduino, a web service or some other application, so could a publisher. Using the same stack across the whole network creates new opportunities for data to move around. So you can see it&apos;s possible to create some interesting interactions using the real time aspects of modern web browsers - all with some web tech and an arduino and it&apos;s getting a lot easier to do it.
  26. Now if you don&apos;t want to muck around with setting up Node or Django servers there are some other options available. There&apos;s a site called pusher.com that provides web sockets infrastructure. There&apos;s a pusher port of the web sockets library as well so that makes it very simple. It is a paid service if you want more than 20 connections or 100 thousand messages per day though. Also Socket.IO is the library I use which is a very good web sockets library with a lot of fall backs for older browsers and handles things like different media types very well also.
  27. So thanks very much for your attention at the end of the day - I think we have time for probably a question or two. I&apos;m around after this so if you want to grab me please feel free. My details are all up here too so get in touch to talk further about your project or application.