AmbientMonitor

by luca
35 comments

In altri post, vi ho già mostrato come sia possibile ricevere dati da Arduino utilizzando una applicazione .Net oppure script server-side. Oggi invece vedremo come, utilizzando JavaScript, sia possibile ricevere e visualizzare dati utilizzando il solo browser Web.

Architettura logica

Il progetto ha due componenti principali:

  • Arduino, collegato ad un sensore AM2302 per rilevare temperatura e umidità
  • una pagina HTML con alcune risorse esterne (file JavaScript e CSS) visualizzata dal browser

Il codice JavaScript all’interno della pagina HTML invierà delle richieste JSONP ad Arduino il quale risponderà leggendo i dati dal sensore. Utilizzando due librerie opensource, questi dati verranno visualizzati in forma grafica e attraverso un gauge.

Risorse

Tutti i files (pagina HTML, elementi JavaScript, sketch Arduino…) sono disponibili nel mio repository su GitHub:

JavaScript

Aprendo con il browser la pagina ambientMonitor.html, vengono caricati i vari elementi JavaScript necessari all’interazione con Arduino e alla visualizzazione dei dati.

La richiesta di dati ad Arduino avviene tramite una chiamata JSONP effettuata sfruttando la libreria jQuery, come spiegato in un precedente articolo. Per semplificare lo sketch Arduino, ho deciso di rendere statico il nome della funzione di callback (myCB):

var jqxhr = $.ajax({
 url: 'http://192.168.1.1/?callback=?',
 dataType: 'jsonp',
 jsonpCallback:'myCB'})
Cambiate l’indirizzo IP del parametro url mettendo quello che Arduino ha nella vostra rete

La visualizzazione dei dati ricevuti avviene tramite due componenti JavaScript:

e i dati vengono aggiornati ogni 30 secondi:

setInterval(updateValues, 30000);

Tutto il codice è stato commentato per essere leggibile: naturalmente per qualsiasi dubbio o domanda potete lasciare un commento a questo articolo!

Arduino

Lo sketch Arduino è simile ad altri esempi del mio tutorial sul controller enc28j60.

E’ ora disponibile anche una versione dello sketch per lo shield ufficiale basato su chip W5100.

la lettura del sensore (connesso al PIN 3) avviene tramite la libreria fornita da Adafruit:

#define DHTPIN   3
#define DHTTYPE  DHT22
DHT dht(DHTPIN, DHTTYPE);
[...]
dht.begin();
[...]
float h = dht.readHumidity();
float t = dht.readTemperature();

Ad ogni richiesta del browser, viene preparata una risposta in formato JSONP:

BufferFiller bfill = ether.tcpOffset();
bfill.emit_p(PSTR("HTTP/1.0 200 OK\r\n"
 "Content-Type: text/html\r\n\r\n"
 "myCB({'temperature':$S,'humidity':$S})"), 
 t_string, h_string);

La risposta avrà quindi la forma: myCB({‘temperature’:tt.tt,’humidity’:hh.hh})

Conclusioni

Utilizzando solo codice client-side (in esecuzione nel browser) è possibile realizzare una completa dashboard per visualizzare i dati provenienti da Arduino, evitando la necessità di un server web.

Related Posts

35 comments

Michele 10 agosto 2013 - 18:07

Salve, bellissimo blog, complimenti!
Articolo molto interessante, ho una piccola curiosità, come fanno i servizi ad esempio di google play che una volta registrato il proprio cellulare, una volta cliccata l’icona per scaricare un app dal proprio pc , automaticamente lo scarica al cellulare.
Funziona allo stesso modo? ma IP non cambia mai della connessione al cellulare? scusami, ho un pò di confusione

Reply
luca 14 agosto 2013 - 13:57

Ciao Michele,

in quel caso il cellulare (un “servizio” che è in esecuzione anche se non lo vedi) periodicamente controlla se vi sono delle APP da installare chiedendo ai server di Google Play e – in caso affermativo – le scarica e le installa sul tuo cellulare.

Reply
Philip 16 agosto 2013 - 16:41

NIcely done! im going to make a blog post for this on my blog!

Reply
luca 22 agosto 2013 - 08:35

Thanks Philip!

Reply
Ed 23 dicembre 2013 - 23:05

A great project. Is it posible to use the Arduino WiFi shield instead of the Ethernet shield? I suppose the question I’m asking is does the WiFi library have enough similarity to the Ethernet library to transpose the code. I’m relatively new to the Arduino but have a specific interest in using the WiFi shield. Could you advise me.

Reply
luca 24 dicembre 2013 - 08:48

Hi Ed

I’m working on a code for the “official” ethernet shield, you should be able to adapt it for the wifi shield too!

Reply
Massimo 20 gennaio 2014 - 19:41

Ciao, in attesa che tu riesca a modificare il tutto per lo shield ethernet ufficiale, ho acquistato un enc28j60. Premesso che il tutto funziona da rete interna, anche tramite il collegamento con TL-WR702N, ho due dubbi:
– quando apro la pagina ambient monitor i valori, inizialmente sono a zero, per poi aggiornarsi dopo trenta secondi. Se digito ip arduino sono in tempo reale. Posso ovviare al problema solo riducendo il tempo della richiesta dati ad arduino?
– da rete esterna visualizzo la mia bella pagina, ma i valori non si aggiornano. Mi sa che devo aprire le porte del router per ip arduino vero?
In futuro sarebbe bello ristrutturare la pagina includendo la pressione atmosferica e più sensori di temp e umidità…..assorbimento elettrico abitazione….mi sto allargando scusa.
Grazie mille.

Reply
luca 27 gennaio 2014 - 22:10

Ciao Massimo

puoi cambiare la frequenza di “refresh” dei dati via AJAX modificando la pagina (cerca “setInterval” e cambia il valore 30000).
per utilizzarlo via internet devi configurare il router per girare la porta 80 sull’IP di Arduino e, sempre nella pagina, inserire il tuo IP pubblico invece che quello della rete locale.

Reply
Giovanni 20 gennaio 2014 - 22:42

Bellissimo articolo. Bel sistema. Io ho creato un progettino con Arduino, dht22 e un barometro. Il problema che avevo era l’interfaccia web. Devo creare una pagina semplicissima in html perché Arduino fa da server e non supporta pagine troppo complesse. In questo caso invece Arduino funge da client. Appena sono a casa provo il tuo progetto. Potrei ampliarlo usando anche i dati del barometro.

Grazie davvero per i contenuti che condividi.

Reply
luca 27 gennaio 2014 - 22:10

grazie mille Giovanni e fammi sapere come va il tuo progetto!

Reply
Lanni Fabrizio 22 gennaio 2014 - 08:42

Buongiorno Luca, apprezzo molto i tuoi progetti molto interessanti. Avrei una domanda da farti. Avendo a disposizione una sheda Ethernet Shield W5100 al posto della enc28j60 quali adattamenti al codice devo fare? GRAZIE!!!

Reply
luca 27 gennaio 2014 - 22:11

Ciao Fabrizio,

purtroppo è molto diversa e il codice Arduino va rifatto quasi completamente… ci sto lavorando!

Reply
Lucas 13 febbraio 2014 - 10:01

Hi Luca, Excellent project and tutorials you have on the enc28j60

Reply
Lucas 13 febbraio 2014 - 12:02

Hi Luca, Excellent project and tutorials you have on the enc28j60, any plans on creating one which would allow monitoring a DHT and switching on/off ports via a web page ?

Reply
Andrerds 31 marzo 2014 - 16:38

Ola Chede.. Lucas , Excelente Projeto, Parabéns !
Aguardo ansioso pela adaptação que ira fazer para o Shield Ethernet W5100 ..
Abraços Sucesso !

Reply
Graciano 4 aprile 2014 - 07:19

Hello Luca.

Congratulations because your work. I have test all your projects and they work ok. I have one question to do. Is there any library to work with an UDP client under IPv6 for arduino?

Thank you very much.

Reply
luca 13 aprile 2014 - 19:39

Hi Graciano! Thanks… unfortunately as far as I know no ipv6 libraries for Arduino exist at the moment

Reply
Shane 8 aprile 2014 - 18:24

Nice job. I will look at it in more detail, as I would prefer to use RS422 for multiple Arduinos, in a boat. This is to show twin engine stats, as well as fuel levels in 6 tanks.
I am very much NOT a programmer, but can usually adapt programs to mee my needs.
Thanks for sharing your work.

Reply
luca 13 aprile 2014 - 19:34

Thanks Shane! I’m using RS485 too for multi-node wired network… let me know the progress of your project!

Reply
matej 13 luglio 2014 - 15:55

Hi Luca,

amazing tutorial. You are doing really gret job. You wrote that you would be doing this to work with official ethernet shiled. I just want to ask if you are still planning to do it because Im using eth shield and I dont know how to respond to a jsonp request. Thx for answer

Reply
luca 14 luglio 2014 - 15:21

Hi Matej

thanks for your comment: at the moment I don’t own an original shield; however it’s well supported on the official forum, try asking there your request, I’m sure they will help you!

Reply
Franco 24 novembre 2014 - 08:22

Ciao Luca, i tuoi lavori sono molto interessanti…. complimenti. Ti volevo chiedere se sei riuscito a convertire lo sketch per la shield ethernet W5100.

Reply
luca 14 febbraio 2015 - 11:00

Ciao Franco, grazie ad un amico del blog lo sketch per W5100 è disponibile:
http://www.lucadentella.it/2015/02/14/ambientmonitor-client-w5100/

Reply
mp 7 maggio 2015 - 11:05

Hi luca, this is amazing project. Thanks for this tutorial.
If I want place the html file to SD card on Ethernet so we can access via IP address. Can you help me?

Reply
luca 7 maggio 2015 - 11:33

Hi, give a look to my SDWebServer example, it does exactly what you need (with some restrictions)

Reply
MidnightCow 12 novembre 2015 - 05:45

Hi,
Your project is very nice reference for WIZnet solution.
I’m an engineer worked at WIZnet provide W5100 to Arduino Ethernet Shield.

Can I introduce your project on the WIZnet museum site(http://wiznetmuseum.com/)?

Thanks in advace.

Reply
luca 13 novembre 2015 - 08:28

Of course! Thanks

Reply
Antonio 8 febbraio 2017 - 17:36

Ciao, ottimo lavoro, due sole domande:
mi da errore nella compilazione in queste due prime righe:
#define DHTTYPE DHT22
DHT dht(DHTPIN, DHTTYPE);
idee???
l’indirizzo ip;
se metto uno ip fisso ovviamente posso tramite cellulare collegarmi da qualsiasi parte del mondo?
giusto?
grazie
A.

Reply
luca 9 febbraio 2017 - 11:25

Ciao, hai caricato la libreria DHT? Per quanto riguarda l’IP, per poter raggiungere la scheda da Internet dovrai configurare il NAT sul tuo router

Reply
Antonio 9 febbraio 2017 - 15:22

ciao, le ho provate tutte cmq, alla fine sono riuscito cmanbiando nel tuo codice questa riga:

da:
ether.printIp(“Netmask:\t”, ether.mymask);

a:
ether.printIp(“Netmask:\t”, ether.netmask);

saluti
A.

Reply
Irfan Karpude 11 febbraio 2017 - 09:30

Hi,
I want to show 3 more sensor data, Pressure, Ph and Electric Conductivity in to this graph. I have Arduino program ready, i am stuck with html program, can you pls guide me how to do this.

Thank you.

Regards,
Irfan

Reply
arren 28 agosto 2017 - 20:15

hello sir.,.just wanna ask if how to save the data of the sensor to a database? and what database should i use?

Reply
luca 29 agosto 2017 - 12:57

Hi! It’s not so easy to directly interface Arduino with a database, you’d better to add an external piece of software (php…) and use a simpler protocol (HTTP, MQTT) to send data to that software.

Reply
arren 29 agosto 2017 - 15:58

okay sir.,.in this project of yours.,.can i use ESP 8266 instead of ethernet shield? do u have a tutorial how to do it?

thank you for the response sir! much appreciated
very helpful to my thesis project

Reply
luca 31 agosto 2017 - 11:57

well if you use the W5100 tutorial you should be able to run the sketch also on ESP8266

Reply

Rispondi a luca Cancel Reply

due × 2 =