AmbientMonitor

luca 07/08/2013 27

In different blog posts, I’ve already explained how to receive data from Arduino using a .Net application or a server-side script. Today I’m going to show you how it’s possible, using JavaScript, to receive and show data using only a Web browser.

Logical architecture

The project has two main elements:

  • Arduino, connected to an AM2302 sensor to get temperature and humidity values
  • an HTML page, with some external resources (JavaScript and CSS files) opened in a browser

the JavaScript code in the HTML page sends JSONP requests to Arduino, which responds with a JSON message that contains the values obtained from the sensor. With the help of two opensource libraries, received data will is displayed on a chart and with a gauge.

Resources

All the files for this project (HTML page, JavaScript libraries, Arduino sketch…) are available in my GitHub’s repository:

JavaScript

When you open the ambientMonitor.html page in your browser, the different JavaScript libraries are loaded and executed.

The code requests data from Arduino using a JSONP call with the help of the jQuery library, as explained in a previous post. To make the sketch simpler, I decided to use a static name for the callback function (myCB):

var jqxhr = $.ajax({
 url: 'http://192.168.1.1/?callback=?',
 dataType: 'jsonp',
 jsonpCallback:'myCB'})
Change the IP address in the url parameter with the one Arduino has in your network

Data is displayed using two JavaScript libraries:

and the update function runs every 30 seconds:

setInterval(updateValues, 30000);

All the code was commented to make it easy to understand it: of course for doubts and questions leave a message at the end of this post!

Arduino

The Arduino sketch is similar to other examples in my tutorial about the enc28j60 controller.

Now it’s also available a version of the sketch for the official ethernet shield, based on the W5100 chip.

The sensor (connected to PIN 3) is read using the Adafruit library:

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

When the browser requests data, a response is prepared and sent in JSONP format:

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

The response body is: myCB({‘temperature':tt.tt,’humidity':hh.hh})

Conclusions

Using only client-side code (running in the browser) it’s possible to write a complete dashboard for requesting and displaying data from Arduino, without the need of a web server.

27 Comments »

  1. Michele 10/08/2013 at 18:07 - Reply

    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

    • luca 14/08/2013 at 13:57 - Reply

      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.

  2. Philip 16/08/2013 at 16:41 - Reply

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

    • luca 22/08/2013 at 08:35 - Reply

      Thanks Philip!

  3. Ed 23/12/2013 at 23:05 - Reply

    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.

    • luca 24/12/2013 at 08:48 - Reply

      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!

  4. Massimo 20/01/2014 at 19:41 - Reply

    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.

    • luca 27/01/2014 at 22:10 - Reply

      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.

  5. Giovanni 20/01/2014 at 22:42 - Reply

    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.

    • luca 27/01/2014 at 22:10 - Reply

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

  6. Lanni Fabrizio 22/01/2014 at 08:42 - Reply

    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!!!

    • luca 27/01/2014 at 22:11 - Reply

      Ciao Fabrizio,

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

  7. Lucas 13/02/2014 at 10:01 - Reply

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

  8. Lucas 13/02/2014 at 12:02 - Reply

    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 ?

  9. Andrerds 31/03/2014 at 16:38 - Reply

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

  10. Graciano 04/04/2014 at 07:19 - Reply

    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.

    • luca 13/04/2014 at 19:39 - Reply

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

  11. Shane 08/04/2014 at 18:24 - Reply

    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.

    • luca 13/04/2014 at 19:34 - Reply

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

  12. matej 13/07/2014 at 15:55 - Reply

    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

    • luca 14/07/2014 at 15:21 - Reply

      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!

  13. Franco 24/11/2014 at 08:22 - Reply

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

  14. mp 07/05/2015 at 11:05 - Reply

    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?

    • luca 07/05/2015 at 11:33 - Reply

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

  15. MidnightCow 12/11/2015 at 05:45 - Reply

    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.

    • luca 13/11/2015 at 08:28 - Reply

      Of course! Thanks

Leave A Response »

This website uses cookies to ensure you get the best experience on our website maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi