Pubblicare in tempo reale il valore di un sensore sul web

Partcl Logo

Cari amici oggi vi voglio mostrare un progetto molto interessante che vede protagonista il nostro Arduino e il mondo del web. L’obiettivo sarà quello di pubblicare real-time il valore di un sensore e di visualizzarlo in una pagina web senza refresh della pagina! Finora questo veniva realizzato attraverso continue chiamate ajax (linguaggio javascript elaborato) o refresh di iframe incorporati (non consigliabili perché sovraccaricano i browser). Oggi vogliamo invece utilizzare un metodo “davvero” real-time, che non prevede continue chiamate al server ma sfrutta i websocket per inviare al browser dei dati. Tutto ciò che ci serve è:

1)      Account gratuito su partcl.com

2)      Arduino + Ethernet shield

3)      Sensore (nell’esempio un sensore di luminosità) + resistenza (nell’esempio 100 Ω)

4)      Breadboard con cavetti

5)      Opzionale: possibilità di ospitare la pagina in un hosting web gratuito (ad esempio altervista).

Pronti? Il nostro lavoro parte dal collegare il sensore alla scheda ethernet che abbiamo montato su arduino, ecco lo schema disegnato con Fritzing:

Dopo aver collegato arduino al pc ed avviato il software ufficiale, incolliamo questo codice sketch:


#include
#include

byte mac[] = { 0×00, 0xAB, 0xCB, 0xCD, 0xDE, 0×02 }; //mac address della scheda
IPAddress ip(192,168,1,9); // indirizzo ip qualunque, acquisito dalla scheda
IPAddress server(67,202,35,165); // il server di partcl.com
EthernetClient client;
int sensore;

void connect() {
if (client.connect(server, 80))
{
sensore = (analogRead(0)); // in analogRead c’è il valore del nostro sensore collegato al pin 0
delay(50);
client.print(“GET /publish?publish_key=LA_TUA_PUBLISH_KEY&id=sensoreluce&value=”);
client.print(sensore);
client.print(” HTTP/1.1\r\n”); //inviamo la stringa alla nostra API di partcl attraverso metodo GET
client.print(“Host: partcl.com\r\n”);
client.print(“Accept: text/html\r\n”);
client.println(“Connection: close\r\n”);
client.println();

}

else {
Serial.println(“Connessione Fallita “);
}
}

void setup() {
Serial.begin(9600);
delay(1000);
Ethernet.begin(mac, ip);
connect();
}

void loop()
{

if (client.available())
{
char c = client.read();
}
if (!client.connected())
{
client.stop();
delay(20000);
connect();
}

}

Prima di caricare questo sketch su arduino dobbiamo creare un account su Partcl.com, un server gratuito con websocket che permette di incorporare sulla nostra pagina web dati realtime.

Una volta creato l’account, avrete accesso alle 2 chiavi principali in home page:

La chiave di pubblicazione o Publishing Key è proprio quella sequenza univoca per ogni account da inserire nel nostro sketch arduino al posto di LA_TUA_PUBLISH_KEY. Non dimentichiamo di compilare il codice con l’indirizzo IP che vogliamo far acquisire dalla scheda e il suo mac address!

Bene, una volta caricato lo sketch su arduino non siamo ancora in grado di visualizzare il valore perchè ci manca una pagina web da pubblicare. Questo è il codice html che fa per noi:








Valore luminosità:

Una volta editato il codice con la Web Key fornita da Partcl al posto di LA_TUA_WEB_KEY, salviamo questo codice in formato html ed il nostro lavoro è giunto al termine: basta pubblicare su un servizio di hosting come Altervista la nostra pagina, per far si che sia accessibile da web.

Dovremmo ottenere un risultato del genere: 

Ovviamente si aggiornerà in tempo reale senza refresh della pagina (in media 2 volte al secondo). Lascio alla vostra creatività la possibilità di creare un pannello con diversi sensori e una pagina web formattata a piacimento con valori realtime! Alla prossima ragazzi!

Carlo Peluso

Ho 22 anni, studio Architettura a Torino e sono appassionato di musica, programmazione web e fotografia. Arduino mi ha permesso di realizzare progetti legati a questi 3 meravigliosi ambiti, che con piacere condivido con gli utenti di AutomazioneOS!


Tags:
By Carlo Peluso | gennaio 22nd, 2013 | SHOW COMMENTS (11)

11 Responses

  1. Omnos says

    E’ normale che ogni volta che tento di registrarmi a Partcl.com il sito mi dà errore?

  2. D Saiu says

    Ciao progetto interessante il tuo, io invece cercavo di far comunicare una pagina Html messa nella SD dell’ethernet shield e lo sketch di arduino…. ,ma senza risultati…. hai mica qualche idea o qualche esempio da suggerirmi? 

    • Luca Panebianco says

      Ciao, 
      avevo fatto uno sketch simile…
      Ogni risorsa (immagine, file javascript, file CSS) viene richiesto dal browser all’Arduino attraverso una richiesta di tipo GET.
      A questa richiesta deve essere fatto un semplice parsing con una funzione creata ad hoc (o ci si può appoggiare a librerie più elaborate come WebDuino) e a seconda di ogni file richiesto si va a leggere il corrispondente contenuto nella SD che viene rispedito come risposta al client(byte a byte).
      Come si può capire il problema principale è la lentezza che ci può essere nella trasmissione della risorsa se essa è troppo grande, una soluzione che ho adottato è l’utilizzare un buffer di un centinaio di byte nel quale copio parte della risorsa e poi la rispedisco al client. Dopo aver mandato tutto il contenuto della risorsa si manda per ultimo un client.println() e si chiude la comunicazione.
      Appena lo ritrovo ti allego il codice di cui ti parlo…..

  3. Kcss9 says

    ciao Carlo,
    bellissimo progetto, volevo chiederti se è possibile visualizzare direttamente sul sito/server  Partcl.com il valore del sensore “analogRead(0)” .
    Grazie Stefano

    • Luca Panebianco says

      Ciao, 
      Girando un po’ per il sito partcl.com non mi è sembrato ci fosse un metodo per visualizzare i tuoi dati, ma si può rimediare utilizzando un sito come jsfiddle.com. Ho creato appositamente un semplice Fiddle all’indirizzo: http://jsfiddle.net/CRjwx/.
      Ho semplicemente messo il codice del primo tutorial sul sito. 
      Aggiungendo la tua webkey e mandando in “run” il codice puoi vederne il risultato nella finestra in basso a destra.

      • Kcss9 says

        Ciao Luca,
        grazie per l’aiuto ma non riesco a ottenere nessun risultato 🙁
        posso postare il mio codice?
        Grazie

        • Luca Panebianco says

          Ok non c’è problema 🙂

          • Kcss9 says

            il mio codice…

            #include #include  byte mac[] = { 0x90, 0xA2, 0xDA, 0x00, 0x23, 0x5D };char serverName[] = “www.partcl.com”;EthernetClient client;int sensore;const char pubKey[] = “xxxxxxxxxxxxxxxxxxxxx”;const char keyId[] = “sensoreluce”;void connect() {       if (client.connect(serverName, 80))          {             Serial.println(“Connessione OK”);                       sensore = (analogRead(0));             delay(50);            Serial.println(sensore);                            client.print(“GET /publish?publish_key=”);                client.print(pubKey);                client.print(“&id=”);                client.print(keyId);                client.print(“&value=”);                client.print(sensore);                client.print(” HTTP/1.1n”);                client.print(“Host: partcl.comn”);                client.print(“User-Agent: Arduino For Teh Win!n”);                client.print(“Accept: text/htmln”);                client.println(“Connection: closen”);                client.println();          }          else {         Serial.println(“Connessione Fallita”);         }} void setup() {       Serial.begin(9600);        delay(1000);       Ethernet.begin(mac);       connect();} void loop(){   if (client.available())  {    char c = client.read();  }  if (!client.connected())   {     client.stop();    delay(20000);    connect();  }    }

          • Luca Panebianco says

            Alcune cose: 
            – Sulla seriale leggi che va tutto bene? 
            – Nel loop non vengono richiamate le istruzioni per mandare un dato a partcl? Perchè l’unica cosa che sembra fare è leggere qualcosa…e al massimo riceve la risposta “ok” di partcl dopo che ha fatto l’upload….l’unico che viene fatto all’interno di connect.
            – L’Arduino è connesso ad un router o ha bisogno del DHCP?
            – Il codice è un po’ diverso da quello proposto da Carlo…hai provato ad utilizzare direttamente il suo?

          • Kcss9 says

            meglio cosi… 😉

            http://dropcanvas.com/bndpp

          • Luca Panebianco says

            L’unica cosa che mi viene in mente è il fatto di dover scrivere(ad esempio)  client.print(” HTTP/1.1rn”); invece di  client.print(” HTTP/1.1n”); 
            Sfortunatamente però non posso provare se faccia veramente differenza….