Skip to content

Exemple 2: Mostrant dades capturades pel D1 mini

Jump to bottom
Jordi Orts edited this page Mar 15, 2020 · 11 revisions

Monitoritzant dades de temperatura i humitat relativa amb el DHT shield

Anem a visualitzar dades de temperatura i humitat relativa remotament amb una interfície web de 4 pàgines:

  • index.htm per visualitzar la temperatura
  • hr.html per visualitzar la humitat relativa
  • maquinari.html amb la descripció del maquinari
  • sensor.html amb informació del sensor DHT
  • credits.html amb informació de l'autor

Com veieu l'estructura és molt semblant a la de l'exemple1. Per tant farem una còpia de la carpeta exemple1 amb el nom exemple2 i canviarem el nom del fitxer exemple1.ino per exemple2.ino.

La barra lateral de menú i els darrers tres fitxers són lleugeres modificacions dels utilitzats a l'exemple1. Ens centrarem en els canvis al codi arduino i els canvis més importants de les dos primeres pàgines HTML

Canvis al codi arduino

Ara tindrem dues URL per llegir les dades, que utilitzarem per recollir les dades amb AJAX. D'aquesta manera actualitzarem les dades a les pàgines web sense recarregar tota la pàgina:

#include "FSManager.h"
extern ESP8266WebServer server;

#include <WEMOS_DHT12.h>
DHT12 dht12;

void setup() {
  pinMode(LED_BUILTIN, OUTPUT);  
  pinMode(D1, OUTPUT);  
  SPIFFS.begin();
  initHelper(); //inclou connexió Wifi i server
                // Aquí podem afegir altres funcions server.on()
  server.on("/ajax_t.txt", HTTP_GET, []() {
     dht12.get();
     String txt = String(dht12.cTemp);
     server.send(200, "text/plain", txt);
     txt = String();
     });
  server.on("/ajax_hr.txt", HTTP_GET, []() {
     dht12.get();
     String txt = String(dht12.humidity);
     server.send(200, "text/plain", txt);
     txt = String();
     });
  server.begin();  
}

void loop() {
   digitalWrite(LED_BUILTIN,LOW);  
   espera(1000);      
   digitalWrite(LED_BUILTIN,HIGH);  
   espera(1000);      
  
}

Com farem servir imatges SVG haurem de modificar el codi de FSManager.cpp afegint a la funció getContentType() les línies

  } else if (filename.endsWith(".svg")) {
    return "image/svg+xml";

Interfície web

A la carpeta data farem una còpia de index.htm amb el nom hr.html, esborrarem les imatges pròpies de exemple1 i posarem les imatges de exemple2. En aquest cas hem fet servir fitxers vectorials SVG lliures de freesvg.org.

hr.html

Canviarem el contingut propi de la pàgina por:

<!--  ************* INICI CONTINGUT PROPI DE LA PÀGINA ****************   -->
<div class="w3-container w3-center">
	<br/>
	<button class="w3-button w3-round-xxlarge w3-blue" id="valor">N/A</button>
	<br/><br/>
</div>

<img class="nuvols" src='sivvus_weather_symbols_1.svg'>
<img class="nuvols" src='sivvus_weather_symbols_2.svg'>
<img class="nuvols" src='sivvus_weather_symbols_3.svg'>
<img class="nuvols" src='sivvus_weather_symbols_4.svg'>
<img class="nuvols" src='sivvus_weather_symbols_5.svg'>
<img class="nuvols" src='sivvus_weather_symbols_6.svg'>


<script>
  function loadHR() {
    var xhttp = new XMLHttpRequest();
	var temp = 0;
	xhttp.open('GET', 'ajax_hr.txt', false);
	xhttp.send();
	temp = parseFloat(xhttp.responseText);
	return (temp);
	}
	
  var myVar = setInterval(myTimer, 3000);
  function myTimer() {
	var t= loadHR();
	document.getElementById('valor').innerHTML = t+" % HR";
	}

  myTimer();
  w3.slideshow(".nuvols");  
</script>


<!--  *************** FI CONTINGUT PROPI DE LA PÀGINA *****************   -->

Fixeu-vos com he declarat un button amb l'identificador valor.

La funció myTimer() recupera la dada de la humitat relativa cridant a la funció loadHR que utilitza la comunicació AJAX. Activem un temporitzador de 3 segons per a aquesta funció amb setInterval i la cridem una primera vegada per mostrar el valor inicial.

També he posat una sèrie d'imatges amb class="nuvols" que es veuran en forma de carrusel gràcies a la funció w3.slideshow de la llibreria w3.js. Realment us suggereixo fer una ullada a aquesta llibreria i també a w3.css ja que trobareu eines molt útils per millorar l'aspecte de les vostres pàgines web.

index.htm

Canviarem el contingut propi de la pàgina por:

<!--  ************* INICI CONTINGUT PROPI DE LA PÀGINA ****************   -->
<br/>
<table class="w3-table w3-centered ">
	<tr>
		<td>
		</td>
		<td>
			<button class="w3-button w3-round-xxlarge w3-green" id="valor">N/A</button>
		</td>
		<td style="width:50%">
			<img id='icona' src='cold.svg'>			
		</td>
	</tr>
	</table>

<script>
  function loadT() {
    var xhttp = new XMLHttpRequest();
	var temp = 0;
	xhttp.open('GET', 'ajax_t.txt', false);
	xhttp.send();
	temp = parseFloat(xhttp.responseText);
	return (temp);
	}
	
  var myVar = setInterval(myTimer, 3000);
  function myTimer() {
	var t= loadT();
	document.getElementById('valor').innerHTML = t+" &deg;C";
	if (t>27) {
	   document.getElementById('icona').src = 'hot.svg';
           }
        else {
           document.getElementById('icona').src = 'warm.svg';
           }
	}

  myTimer();
	
</script>


<!--  *************** FI CONTINGUT PROPI DE LA PÀGINA *****************   -->

Molt semblant a hr.html, fixeu-vos com a la funció myTimer() canviem la imatge amb id='icona' en funció de la temperatura amb codi del tipus

	   document.getElementById('icona').src = 'hot.svg';
Humitat relativa Temperatura
humitat relativa temperatura
Clone this wiki locally