Grafico della temperatura con Arduino e PHP

Come potete leggere dal titolo oggi vedremo come realizzare una piccola “Stazione Meteo“, misurando la temperatura di una stanza, memorizzando i dati sul DB e visualizzando il tutto su un grafico accessibile da remoto.
Per comprendere meglio il funzionamento di questo sistema ho realizzato uno schema (Fig.1) dove si possono distinguere fondamentalmente due fasi:

  1. Salvataggio dei dati
  2. Recupero dei dati
Fig1. Schema del progetto “grafico della temperatura con Arduino e PHP”

Nella prima fase Arduino ogni 5 minuti legge il valore della temperatura, grazie al sensore DHT22, e invia una richiesta HTTP GET alla pagina addTemperature.php (presente sul server Altervista), che si occupa del salvataggio della temperatura sul db MySQL.
Nella seconda fase per il recupero dei dati ci basta aprire la pagina grafico.php, questa si occuperà di richiamare getTemperature.php la quale preleverà i dati dal db e li restituirà permettendo così di visualizzare il grafico della temperatura.

Per realizzare questo progetto ci occorre:

  • Arduino UNO o simili
  • Arduino Ethernet Shield
  • Servizio di hosting dove caricare la pagina web (es: http://it.altervista.org/)
  • Sensore di temperatura DHT22
  • Libreria del sensore DHT22 (DHTlib)
  • Libreria Chart per realizzare il grafico (Chart.js)

DHT22 – Sensore di temperatura

Prima di iniziare a parlare del codice di arduino vediamo come collegare il sensore di temperatura alla scheda e alcune sue caratteristiche.

Il DHT22 si presenta con 4 pin dei quali uno non è usato (NC-Not Connected) come si vede in Fig.2, inoltre questo sensore presenta al suo interno un chip che fa la conversione del segnale da analogico a digitale ottenendo così un treno di impulsi (bit), che sono poi correttamente letti dalla libreria DHTlib scaricabile qui.

Fig.2 DHT22-PinOut

Un corretto collegamento del DHT22 ad Arduino è visibile in Fig.3 dove si nota la presenza di una resistenza di pull-up da 10KΩ necessaria per stabilizzare l’uscita del sensore.

Fig.3 Collegamento DHT22 ad Arduino

Ora che sappiamo come collegarlo ad Arduino possiamo dare un breve sguardo alle sue caratteristiche:

  • Sensore digitale di umidità e temperatura DHT22 (AM2302)
  • Range misura umidità: 0-99,9 %RH
  • Accuratezza: ±2 %RH
  • Range misura temperatura: -40 +80°C
  • Accuratezza: ±0,5°C

Dalle caratteristiche si evince che questo sensore permette la lettura sia della temperatura che dell’umidità,in questo caso per rendere il progetto più semplice si utilizzerà solo il valore della temperatura.
Il datasheet del sensore lo potere scaricare qui.

Sketch Arduino

Il codice da caricare su arduino si compone principalmente da due parti:

  1. Lettura dei dati del sensore DHT22
  2. Invio della richiesta HTTP GET

La prima parte può essere ridotta a due semplici comandi:

Il primo utilizzato per leggere i dati del sensore e verificare eventuali errori della lettura: OK, Checksum error, Time out error, Connect error, Ack Low error, Ack High error, Unknown error.
Il secondo necessario per salvare il valore della temperatura e poterlo così utilizzare per costruire la richiesta HTTP GET.

La seconda parte invece si occupa di costruire la richiesta ed inviarla al server, da notare però che Altervista come la maggior parte degli host gratuiti utilizzano Virtual Server ossia non esiste un rapporto 1:1 tra il sito web  e l’indirizzo ip.
Altervista infatti per capire a quale pagina vogliamo accedere utilizza il fqdn (Fully Qualified Domain Name) presente nella chiamata, indirizzando cosi la richiesta al server virtuale corretto.
Tutto questo si traduce nel utilizzare come indirizzo ip del server quello di Altervista (136.243.88.137) e specificare nella richiesta il nome dell’host.

Codice PHP

Per realizzare il codice PHP si è utilizzata la programmazione ad oggetti, e per la connessione al DB si è sfruttata la potenzialità delle PDO.
PDO (PHP Data Object) non è altro che una classe contenente diversi metodi e proprietà che permettono di garantire un accesso sicuro ad un database. Uno dei punti di forza di questa classe è la portabilità, infatti è possibile cambiare tipologia di database (es: da MySQL a PostgreSQL) cambiando semplicemente qualche keyword, senza riscrivere completamente lo script.
Per maggiori info http://phpro.org/tutorials/Introduction-to-PHP-PDO.html.

Iniziamo con il vedere come sono strutturate le cartelle del progetto (Fig.4).

Fig.4 Struttura cartelle del progetto PHP

 

Senza entrare nel dettaglio di tutti i file, trovate comunque i commenti all’interno, notiamo che il progetto è strutturato secondo il pattern MVC (Model-View-Controller):

  • View: visualizza i dati contenuti nel “model” e si occupa dell’interazione con gli utenti.
  • Controller: riceve i comandi dell’utente (in genere attraverso il view) e li attua inviando le richieste al model.
  • Model: fornisce i metodi per accedere ai dati utili all’applicazione, ossia in questo progetto esegue le query di insert e select sul db.

A queste cartelle si aggiungono anche shared e js, la prima contenente le classi utilizzate da DBManager:

  • Logger.php: utilizzata per salvare su file log.csv eventuali errori.
  • PDO_Connector.php: utilizzata per la connessione al db.
  • Temperature_Config.php: usata per definire host, name, username e password del db.

 mentre nella seconda è presente la libreria javascript Chart.js utilizzata per creare il grafico.

I file principali del progetto sono quelli presenti in controller, che sfruttando la classe DBManager permettono il salvataggio (addTemperature.php) e la lettura (getTemperature.php) dei valori della temperatura, e la pagina grafico.php che si occupa di realizzare il grafico.

Il grafico è realizzato grazie la libreria Chart.js che vuole come input due array uno per identificare i valori dell’asse x (labels) e uno per i valori dell’asse y (datasets).
Per maggiori informazioni su come utilizzare questa libreria potete controllare il link diretto http://www.chartjs.org/ oppure utilizzare questa guida http://www.html.it/articoli/chart-js-creare-grafici-interattivi/.

Il risultato finale della pagina grafico.php è visibile nella Fig.5.

Fig.5 Grafico della temperatura

Tutto il progetto lo potete scaricare cliccando sull’icona qui sotto.

Download
Download

Ti potrebbe interessare

  • Luciano Di Paolo

    molto interessante e molto chiaro ..

    • Emanuele

      Grazie

  • pandaro

    ciao, stò intraprendendo un progetto simile. avevo già iniziato prima di trovare questo articolo, ma credo che riscriverò parte del codice ispirandomi al tuo.
    una differenza è che anzichè utilizzare una shield ethernet ne userò una gsm. per il resto dovrebbe essere tutto più o meno uguale

  • Giax Dicor

    Bravissimo, bel progetto