En el post anterior comenté que había adquirido un ESP8266. En esta ocasión traigo un proyecto clásico pero entretenido para quien acaba de adquirir uno de estos microcontroladores.
Utilizaremos un módulo sensor de temperatura y humedad, más específicamente un DHT11 y mostraremos las mediciones del mismo a través de una página web utilizando el esp8266 como servidor web. Además mostraremos la hora actual, para esto nos conectaremos a un servidor NTP.
Network Time Protocol (NTP) es un protocolo de Internet para sincronizar los relojes de los sistemas informáticos a través del enrutamiento de paquetes en redes con latencia variable. NTP utiliza UDP como su capa de transporte, usando el puerto 123. Está diseñado para resistir los efectos de la latencia variable.
Algunos detalles del DHT11:
- Voltaje de Operación: 3V - 5V DC.
- Rango de medición de temperatura: 0 a 50 °C.
- Precisión de medición de temperatura: ±2.0 °C.
- Rango de medición de humedad: 20% a 90% RH.
- Precisión de medición de humedad: 5% RH.
- Tiempo de sensado: 1 seg.
Quiero aclarar que no se nada de CSS por lo que en este proyecto utilizaremos únicamente código HTML para crear la página web que mostraremos. Si usaremos fuentes e íconos de https://fonts.google.com/icons.
El código está bastante comentado para ir siguiéndolo paso a paso. Pero quiero resaltar algunas partes:
Vamos a utilizar varias librerías para:
- Conectarnos a nuestra red WiFi.
- Crear nuestro servidor web.
- Crear conexiones UDP.
- Conectarnos al servidor NTP.
En relación al servidor NTP utilizo un servidor pero esto no es necesario especificarlo y por defecto se usa el servidor ‘pool.ntp.org’.#include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include "DHT.h" #include <WiFiUdp.h> #include <NTPClient.h>
-10800 Corresponde al offset, en mi caso Buenos Aires es -3 GMT por lo que resto 10.800 segundos del horario que devuelve el servidor NTP. 6000 Corresponde al intervalo de refresco en milisegundos.NTPClient timeClient(ntpUDP, "1.ar.pool.ntp.org", -10800, 6000);
Dentro de la función SendHtml que devuelve la página web a mostrar se indica:
ptr += "<head> <meta http-equiv=\"refresh\" content=\"10\">\n";
Con esta línea le indicaremos al navegador web que actualice automáticamente la página web o después de un intervalo de tiempo determinado (en este caso 10 segundos).
En mi caso (dado que es la primera vez que trabajaba con código HTML, me sirvió crear primero el bosquejo de la página en un editor web online como este y luego reemplazar los datos con las variables dentro del código en el IDE.
Dejo debajo el link al código, espero les haya interesado. Si este es el caso no se olviden de dejar un comentario y compartir. Lo mismo si utilizan el código y lo embellecen un poco. Me gustaría ver una versión estéticamente más agradable a la vista XD.
Sketch: https://gist.github.com/mcattani/91e7d6d876fbd70174282f23927227ae
Saludos!
