Select Page

¿Alguna vez quisiste tener sensores dispersos por toda tu casa y jardín, informando su temperatura regularmente a un servidor central? ¡Entonces, este proyecto de IoT podría ser el punto de partida sólido para usted! Este proyecto utiliza ESP32 como el dispositivo de control que se conecta fácilmente a la red WiFi existente y crea un servidor web. Cuando cualquier dispositivo conectado accede a este servidor web, ESP32 lee la temperatura y la humedad relativa del sensor DHT11, DHT22 / AM2302 y lo envía al browser de ese dispositivo con una interfaz agradable. Un auténtico esp32 dht con servidor web ¿Emocionado? ¡Empecemos!

Puede parecer intimidante, pero hay algunos conceptos con los que deberías estar familiarizado antes de aventurarse más en este tutorial. Si alguno de los conceptos le suena extraño, considere averiguar (al menos echale un vistazo), antes de continuar.

Problema con el sensor de temperatura interna de ESP32

Si no lo sabía, ESP32 viene con un sensor de temperatura interno que tiene un rango de -40 ° C a 125 ° C. El sensor de temperatura genera un voltaje proporcional a la temperatura >que se convierte en forma digital, a través de un convertidor interno analógico a digital.

Según la hoja de datos ESP32, el problema con este sensor de temperatura es que, el desplazamiento del sensor varía de un chip a otro debido a la variación del proceso. Además, el >calor generado por los circuitos de Wi-Fi afecta las mediciones de temperatura. Por lo tanto, el sensor de temperatura interno solo es adecuado para aplicaciones que detectan >cambios de temperatura en lugar de temperaturas absolutas.

Sin embargo, puede lograr resultados precisos calibrando el sensor de temperatura y utilizando ESP32 en una aplicación mínimamente encendida para reducir la temperatura de la CPU. Pero los resultados nunca serán tan precisos como con sensores de temperatura económicos como DHT11, DHT22 / AM2302.

Cableado: conexión del sensor DHT11, DHT22/AM2302 a ESP32

Conectar el sensor DHT11 / DHT22 / AM2302 a ESP32 es bastante simple. Empiece colocando el ESP32 en su placa de prueba, asegurándose de que cada lado de la placa esté en un lado separado de la placa de prueba.

Ahora coloque el sensor en su placa de prueba además de ESP32. Conecte el pin VCC en el sensor al pin 3.3V en el ESP32 y tierra a tierra. Conecte también el pin de datos del sensor al pin D4 en el ESP32. Finalmente, necesitamos colocar una resistencia pull-up de 10KΩ entre VCC y la línea de datos para mantenerla ALTA, para una comunicación adecuada entre el sensor y el MCU. Si tiene una placa de conexión del sensor, no necesita agregar ningún pull-up externo. Viene con una resistencia pull-up incorporada.

Una vez terminado, debería tener algo similar a la ilustración que se muestra a continuación.

Interfaz DHT11 DHT22 con ESP32 usando un servidor web 2
Cableado del sensor de temperatura y humedad DHT22 con ESP32
Interfaz DHT11 DHT22 con ESP32 usando un servidor web 3
Cableado del sensor de temperatura y humedad DHT11 con ESP32

Instalando la librería de sensores DHT

La comunicación con DHT11, los sensores DHT22 / AM2302 es mucho trabajo, ya que tienen su propio protocolo de un solo cable para la transferencia de datos. Y este protocolo requiere una sincronización precisa. Afortunadamente, no tenemos que preocuparnos mucho por esto porque vamos a usar la librería DHT de Adafruit que se encarga de casi todo. La librería es tan poderosa que se ejecuta en arquitecturas Arduino y ESP.

Para instalar la librería, diríjase a Sketch > Include Library > Manage Libraries… Espere a que el Library Manager descargue el índice de librerías y actualice la lista de las instaladas.

Arduino Library Installation - Selecting Manage Libraries in Arduino IDE
En español, sería Sketch > Incluir librería > Administrar librerías

Filtre su búsqueda escribiendo «DHT sensor». Debería haber un par de entradas. Busque la librería de sensores DHT de Adafruit. Haga click en esa entrada y luego seleccione Instalar.

Adafruit DHT library Installation

La librería del sensor DHT utiliza el soporte backend del sensor Adafruit. Entonces, busque en el administrador de librerías el sensor unificado Adafruit (Adafruit Unified Sensor) e instálelo también (puede que tenga que scrollear un poco).

Adafruit Unified Sensor library Installation

Crear un esp32 dht con servidor web usando el modo WiFi Station (STA)

¡Ahora pasemos a las partes más interesantes!

Como sugiere el título, vamos a configurar nuestro ESP32 en modo Estación (STA) y crear un servidor web para servir páginas web a cualquier cliente conectado en las redes actuales.

Antes de comenzar a cargar el sketch, hace falta hacer algunos cambios para que te funcione. Vas a necesitar modificar las siguientes dos variables con sus credenciales de red, para que el ESP32 pueda establecer una conexión con la red actual.

Change SSID & Password before trying STA mode web server sketch

Una vez que termines, ya podés probar el sketch. Luego lo diseccionaremos con cierto detalle.

#include <WiFi.h>
#include <WebServer.h>
#include "DHT.h"

// ¡Descomente una de las lineas abajo para cualquier tipo de sensor DHT que uses!
//#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

/*Escriba su SSID y contraseña*/
const char* ssid = "YourNetworkName";  // Escriba su SSID acá
const char* password = "YourPassword";  // Escriba su contraseña acá

WebServer server(80);

// El Sensor DHT
uint8_t DHTPin = 4; 

// Inicializar sensor DHT.
DHT dht(DHTPin, DHTTYPE);                

float Temperature;
float Humidity;

void setup() {
  Serial.begin(115200);
  delay(100);

  pinMode(DHTPin, INPUT);

  dht.begin();              

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //conectar a su red wi-fi local
  WiFi.begin(ssid, password);

  //comprobar si el dispositivo wi-fi está conectado a la red wi-fi
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");

}
void loop() {

  server.handleClient();

}

void handle_OnConnect() {

 Temperature = dht.readTemperature(); // Retorna los valores de la temperatura
  Humidity = dht.readHumidity(); // Retorna los valores de la humedad
  server.send(200, "text/html", SendHTML(Temperature,Humidity)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(float Temperaturestat,float Humiditystat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>ESP32 Weather Report</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
  ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<div id=\"webpage\">\n";
  ptr +="<h1>ESP32 Weather Report</h1>\n";

  ptr +="<p>Temperature: ";
  ptr +=(int)Temperaturestat;
  ptr +="°C</p>";
  ptr +="<p>Humidity: ";
  ptr +=(int)Humiditystat;
  ptr +="%</p>";

  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Accediendo al Servidor Web

Después de cargar el sketch, abrí el Monitor de serie a una velocidad en baudios de 115200. Y presione el botón RESET en ESP32. Si todo está bien, esto generará una IP dinámica obtenida de su router y mostrará el mensaje «HTTP server started«.

ESP32 Web Server Station Mode Serial Monitor Output - Server Started

Luego, abrí el browser y apuntalo a la dirección IP que se muestra en el monitor en serie. El ESP32 debería inicializar una página web que muestre la temperatura y la humedad relativa.

Interfaz DHT11 DHT22 con ESP32 usando un servidor web 4

Explicación detallada del código

El sketch comienza con la integración de la librería WiFi.h. Esta librería proporciona métodos WiFi específicos de ESP32 a los que llamamos para conectarnos a la red. A continuación, también incluimos la librería WebServer.h, que tiene algunos métodos disponibles que nos ayudarán a configurar un servidor y manejar las HTTP requests entrantes sin tener que preocuparnos por los detalles de implementación de bajo nivel. Finalmente incluimos la librería DHT.h.

#include <WiFi.h>
#include <WebServer.h>
#include "DHT.h"

A continuación, debemos definir el tipo de sensor DHT que estamos utilizando. ¡Descomente acorde, una de las líneas abajo!

//#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

Como estamos configurando ESP32 en modo Estación (STA), se unirá a la actual red WiFi. Por lo que debemos proporcionarle de tu red: el SSID y la contraseña.

/*Escriba su SSID y contraseña*/
const char* ssid = "YourNetworkName";  // Escriba su SSID acá
const char* password = "YourPassword";  // Escriba su contraseña acá

A continuación, declaramos un objeto de la librería WebServer, para que podamos acceder a sus funciones. El constructor de este objeto toma el puerto (donde el servidor estará como receptor) como parámetro. Como el puerto predeterminado para HTTP es el 80, utilizaremos este valor. Ahora podés acceder al servidor sin necesidad de especificar el puerto en la URL.

// declare un objeto de la librería WebServer
WebServer server(80);

Luego, debemos definir el número pin del ESP32 al que está conectado el pin de datos de nuestro sensor y crear un objeto DHT. De esta forma, podemos acceder a las funciones especiales relacionadas con la librería DHT.

// Sensor DHT.
uint8_t DHTPin = 4;

// Inicializar sensor DHT.
DHT dht(DHTPin, DHTTYPE);

Dos variables float a tomar en cuenta: Temperature y Humidity (temperatura y humedad, respectivamente) son declaradas para almacenar sus respectivos valores.

float Temperature;
float Humidity;

Dentro de la función Setup()

Dentro de la función Setup() configuramos nuestro servidor HTTP antes de ejecutarlo. Primero que nada, abrimos una conexión en serie para fines de depuración y seteamos los puertos GPIO a INPUT. También necesitamos inicializar el objeto DHT usando la función begin().

Serial.begin(115200);
delay(100);
  
pinMode(DHTPin, INPUT);

dht.begin();

Ahora, necesitamos unirnos a la red WiFi usando la función WiFi.begin(). La función toma SSID (Nombre de red) y contraseña como parámetro.

Serial.println("Connecting to ");
Serial.println(ssid);

//conectar a su red wi-fi local

WiFi.begin(ssid, password);

Mientras el ESP32 intenta conectarse a la red, podemos comprobar el estado de conectividad con la función WiFi.status().

//comprobar si el dispositivo wi-fi está conectado a la red wi-fi
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }

Cuando el ESP32 es conectado a la red, el sketch muestra la IP asignada a ESP32, mostrando el valor que WiFi.localIP() retorna en el monitor en serie.

Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");
  Serial.println(WiFi.localIP());

Para manejar las HTTP requests entrantes, necesitamos especificar qué código ejecutar cuando una URL es accedida. Para hacerlo, utilizamos el método on. Este método toma dos parámetros. El primero es una dirección URL y el segundo es el nombre de la función que queremos ejecutar cuando esa URL es accedida.

El siguiente código indica que, cuando un servidor recibe un HTTP request en el root (/), se activará la función handle_OnConnect. Tenga en cuenta que la URL especificada es una ruta relativa.

server.on("/", handle_OnConnect);

No hemos especificado qué debe hacer el server si el cliente solicita cualquier otra URL de la especificada con server.on. Debería responder con un HTTP status 404 (Not Found) y un mensaje al usuario. Pondremos esto también en una función y usamos server.onNotFound para decirle que debe ejecutarlo cuando recibe un URI request que no se especificó con server.on

server.onNotFound(handle_NotFound);

Ahora, para iniciar nuestro server, llamamos al método begin() en el objeto del server.

server.begin();
Serial.println("HTTP server started");

Dentro de la función Loop()

Para realmente manejar las HTTP requests entrantes, necesitamos llamar al método handleClient() en el objeto del server.

server.handleClient();

Luego, necesitamos crear una función adjuntada a la URL root (/) con server.on. ¿Te acordás? Al comienzo de esta función, obtenemos los valores de temperatura y humedad desde el sensor. Para responder a la HTTP request, utilizamos el método send. Aunque el método puede ser llamado con un diferente set de argumentos, su forma más simple consiste del HTTP response code, el tipo de contenido y el contenido mismo.

En nuestro caso, estamos enviando el código 200 (uno de los códigos de HTTP status), que corresponde a dar un OK como respuesta. Luego, estamos especificando el tipo de contenido como «text/html», y finalmente estamos llamando a la función personalizada SendHTML() que crea una página HTML dinámica que contiene los valores de temperatura y humedad.

void handle_OnConnect() 
{
  Temperature = dht.readTemperature(); // Retorna los valores de temperatura
  Humidity = dht.readHumidity(); // Retorna los valores de humedad
  server.send(200, "text/html", SendHTML(Temperature,Humidity)); 
}

De la misma forma, necesitamos crear una función para manejar la página de Error 404.

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

Mostrar la página web HTML

La función SendHTML() es responsable de generar una página web cada vez que el servidor web ESP32 recibe una request de un cliente web. Esto solo concatena el código HTML en una gran string y retorna a la función server.send() de la que habíamos hablado. La función toma valores de temperatura y humedad como parámetros para generar dinámicamente el contenido HTML.

El primer texto que siempre deberías enviar, es la declaración &lt;!DOCTYPE&gt; que indica que estamos enviando código HTML.

String SendHTML(float Temperaturestat,float Humiditystat){
String ptr = "<!DOCTYPE html> <html>\n";

A continuación, el elemento de viewport <meta> hace que la página web responda en cualquier web browser, mientras que la etiqueta title setea el título de la página.

ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>ESP32 Weather Report</title>\n";

Estilizando la página web

Lo siguiente, tenemos algo de CSS para estilizar la página web. Elegimos la fuente Helvetica, definimos el contenido que se mostrará como un inline-block y alineado al centro.

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

En el siguiente código setea el color, font y margen alrededor de los tags body, H1 y p.

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";

Estableciendo el encabezado de la página web

A continuación, se establece el encabezado de la página web; podés cambiar este texto a cualquier cosa que favorezca a su aplicación.

ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP32 Weather Report</h1>\n";

Mostrando la temperatura y humedad en la página web

Para mostrar continuamente los valores de temperatura y humedad, colocamos esos valores en el p tag (o etiqueta p). Estos valores son convertidos a enteros por type casting. Para mostrar el símbolo de grado, utilizamos la entidad HTML ° .

  ptr +="<p>Temperature: ";
  ptr +=(int)Temperaturestat;
  ptr +="°C</p>";
  ptr +="<p>Humidity: ";
  ptr +=(int)Humiditystat;
  ptr +="%</p>";

  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Estilizando la página web para que luzca más profesional

Los programadores como nosotros se sienten frecuentemente intimidados por el diseño — pero con un pequeño esfuerzo puede hacer que su página web se vea más atractiva y profesional. El siguiente screenshot le dará una idea básica de lo que vamos a hacer.

Interfaz DHT11 DHT22 con ESP32 usando un servidor web 5

Bastante sorprendente, ¿no? Sin más, vamos a aplicarle algo de estilo a nuestra anterior página HTML. Desde el vamos, copie y pegue el siguiente código para reemplazar la función SendHTML() del sketch anterior. Pruebe el nuevo sketch y luego haremos su desglose detallado.

String SendHTML(float TempCstat,float TempFstat,float Humiditystat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";
  ptr +="<title>ESP32 Weather Report</title>\n";
  ptr +="<style>html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #333333;}\n";
  ptr +="body{margin-top: 50px;}\n";
  ptr +="h1 {margin: 50px auto 30px;}\n";
  ptr +=".side-by-side{display: inline-block;vertical-align: middle;position: relative;}\n";
  ptr +=".humidity-icon{background-color: #3498db;width: 30px;height: 30px;border-radius: 50%;line-height: 36px;}\n";
  ptr +=".humidity-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".humidity{font-weight: 300;font-size: 60px;color: #3498db;}\n";
  ptr +=".temperature-icon{background-color: #f39c12;width: 30px;height: 30px;border-radius: 50%;line-height: 40px;}\n";
  ptr +=".temperature-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".temperature{font-weight: 300;font-size: 60px;color: #f39c12;}\n";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;right: -20px;top: 15px;}\n";
  ptr +=".data{padding: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  
   ptr +="<div id=\"webpage\">\n";
   
   ptr +="<h1>ESP32 Weather Report</h1>\n";
   ptr +="<div class=\"data\">\n";
   ptr +="<div class=\"side-by-side temperature-icon\">\n";
   ptr +="<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
   ptr +="width=\"9.915px\" height=\"22px\" viewBox=\"0 0 9.915 22\" enable-background=\"new 0 0 9.915 22\" xml:space=\"preserve\">\n";
   ptr +="<path fill=\"#FFFFFF\" d=\"M3.498,0.53c0.377-0.331,0.877-0.501,1.374-0.527C5.697-0.04,6.522,0.421,6.924,1.142\n";
   ptr +="c0.237,0.399,0.315,0.871,0.311,1.33C7.229,5.856,7.245,9.24,7.227,12.625c1.019,0.539,1.855,1.424,2.301,2.491\n";
   ptr +="c0.491,1.163,0.518,2.514,0.062,3.693c-0.414,1.102-1.24,2.038-2.276,2.594c-1.056,0.583-2.331,0.743-3.501,0.463\n";
   ptr +="c-1.417-0.323-2.659-1.314-3.3-2.617C0.014,18.26-0.115,17.104,0.1,16.022c0.296-1.443,1.274-2.717,2.58-3.394\n";
   ptr +="c0.013-3.44,0-6.881,0.007-10.322C2.674,1.634,2.974,0.955,3.498,0.53z\"/>\n";
   ptr +="</svg>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"side-by-side temperature-text\">Temperature</div>\n";
   ptr +="<div class=\"side-by-side temperature\">";
   ptr +=(int)TempCstat;
   ptr +="<span class=\"superscript\">°C</span></div>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"data\">\n";
   ptr +="<div class=\"side-by-side humidity-icon\">\n";
   ptr +="<svg version=\"1.1\" id=\"Layer_2\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\"; width=\"12px\" height=\"17.955px\" viewBox=\"0 0 13 17.955\" enable-background=\"new 0 0 13 17.955\" xml:space=\"preserve\">\n";
   ptr +="<path fill=\"#FFFFFF\" d=\"M1.819,6.217C3.139,4.064,6.5,0,6.5,0s3.363,4.064,4.681,6.217c1.793,2.926,2.133,5.05,1.571,7.057\n";
   ptr +="c-0.438,1.574-2.264,4.681-6.252,4.681c-3.988,0-5.813-3.107-6.252-4.681C-0.313,11.267,0.026,9.143,1.819,6.217\"></path>\n";
   ptr +="</svg>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"side-by-side humidity-text\">Humidity</div>\n";
   ptr +="<div class=\"side-by-side humidity\">";
   ptr +=(int)Humiditystat;
   ptr +="<span class=\"superscript\">%</span></div>\n";
   ptr +="</div>\n";

  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Ya sabemos que la declaración &lt;!DOCTYPE&gt; le dice al browser que estamos enviando código HTML y el elemento de ventana &lt;meta&gt; hace que la página web responda. La única adición acá es que vamos a usar Google Fonts. Google tiene cientos de fonts y son gratuitas para uso comercial y personal. ¡Joya!

Utilizaremos la font Open Sans comisionada por Google para nuestra página web. La font de Google se inserta usando el &lt;link&gt; tag en &lt;head&gt; de su documento HTML. Hemos seleccionado 300 (Light), 400 (Regular) y 600 (bold) de font-weight para nuestra página. Puede seleccionar tantos como desee, pero tome en cuenta que seleccionar font-weights adicionales dificultan el tiempo de carga de la página. También puede agregar estilo cursiva con simplemente agregando el caracter i al final del peso de la font, ej. 400i incorporará estilo cursiva.

Tome en cuenta que no puede ver la font de Google, sin tener conexión a Internet en el dispositivo. Las fonts de Google se cargan sobre la marcha.

String SendHTML(float TempCstat,float TempFstat,float Humiditystat){
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";

A continuación, vamos a aplicar la font ‘Open Sans’ para todo nuestro HTML. También necesitamos especificar sans-serif como nuestra font alternativa, para garantizar la máxima compatibilidad entre navegadores / sistemas operativos. Si el navegador no admite la primera font, intenta con la siguiente font.

ptr +="<title>ESP32 Weather Report</title>\n";
ptr +="<style>html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #333333;}\n";
ptr +="body{margin-top: 50px;}\n";
ptr +="h1 {margin: 50px auto 30px;}\n";

A continuación, debemos aplicar CSS para la humedad y la temperatura — sus iconos, títulos y valores reales. Todas estas tres cosas están hechas en línea y alineadas verticalmente. El fondo de los íconos se hace en círculo con un radio de borde del 50%, con un alto y ancho de 30 píxeles.

ptr +=".side-by-side{display: inline-block;vertical-align: middle;position: relative;}\n";
ptr +=".humidity-icon{background-color: #3498db;width: 30px;height: 30px;border-radius: 50%;line-height: 36px;}\n";
ptr +=".humidity-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
ptr +=".humidity{font-weight: 300;font-size: 60px;color: #3498db;}\n";
ptr +=".temperature-icon{background-color: #f39c12;width: 30px;height: 30px;border-radius: 50%;line-height: 40px;}\n";
ptr +=".temperature-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
ptr +=".temperature{font-weight: 300;font-size: 60px;color: #f39c12;}\n";
ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;right: -20px;top: 15px;}\n";
ptr +=".data{padding: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";

A continuación, mostraremos lecturas de temperatura con este agradable y pequeño ícono:

El icono de temperatura es, en realidad, un gráfico vectorial escalable (SVG) definido en la etiqueta &lt;svg&gt;. Crear SVG no requiere ninguna habilidad especial de programación. Puede usar Google SVG Editor para crear gráficos para su página. Después del icono, vamos a mostrar el valor real de temperature del sensor.

    ptr +="<div id=\"webpage\">\n";
    ptr +="<h1>ESP32 Weather Report</h1>\n";
    ptr +="<div class=\"data\">\n";

    ptr +="<div class=\"side-by-side temperature-icon\">\n";
    ptr +="<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
    ptr +="width=\"9.915px\" height=\"22px\" viewBox=\"0 0 9.915 22\" enable-background=\"new 0 0 9.915 22\" xml:space=\"preserve\">\n";
    ptr +="<path fill=\"#FFFFFF\" d=\"M3.498,0.53c0.377-0.331,0.877-0.501,1.374-0.527C5.697-0.04,6.522,0.421,6.924,1.142\n";
    ptr +="c0.237,0.399,0.315,0.871,0.311,1.33C7.229,5.856,7.245,9.24,7.227,12.625c1.019,0.539,1.855,1.424,2.301,2.491\n";
    ptr +="c0.491,1.163,0.518,2.514,0.062,3.693c-0.414,1.102-1.24,2.038-2.276,2.594c-1.056,0.583-2.331,0.743-3.501,0.463\n";
    ptr +="c-1.417-0.323-2.659-1.314-3.3-2.617C0.014,18.26-0.115,17.104,0.1,16.022c0.296-1.443,1.274-2.717,2.58-3.394\n";
    ptr +="c0.013-3.44,0-6.881,0.007-10.322C2.674,1.634,2.974,0.955,3.498,0.53z\"/>\n";
    ptr +="</svg>\n";
    ptr +="</div>\n";

    ptr +="<div class=\"side-by-side temperature-text\">Temperature</div>\n";
    ptr +="<div class=\"side-by-side temperature\">";
    ptr +=(int)TempCstat;
    ptr +="<span class=\"superscript\">°C</span></div>\n";
    ptr +="</div>\n";

A continuación, mostraremos lecturas de humedad con este ícono:

De nuevo es un SVG. Después de mostrar los valores de humedad, vamos a finalizar todos los tags abiertos como body y html.

    ptr +="<div class=\"data\">\n";
    ptr +="<div class=\"side-by-side humidity-icon\">\n";
    ptr +="<svg version=\"1.1\" id=\"Layer_2\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\"; width=\"12px\" height=\"17.955px\" viewBox=\"0 0 13 17.955\" enable-background=\"new 0 0 13 17.955\" xml:space=\"preserve\">\n";
    ptr +="<path fill=\"#FFFFFF\" d=\"M1.819,6.217C3.139,4.064,6.5,0,6.5,0s3.363,4.064,4.681,6.217c1.793,2.926,2.133,5.05,1.571,7.057\n";
    ptr +="c-0.438,1.574-2.264,4.681-6.252,4.681c-3.988,0-5.813-3.107-6.252-4.681C-0.313,11.267,0.026,9.143,1.819,6.217\"></path>\n";
    ptr +="</svg>\n";
    ptr +="</div>\n";
    ptr +="<div class=\"side-by-side humidity-text\">Humidity</div>\n";
    ptr +="<div class=\"side-by-side humidity\">";
    ptr +=(int)Humiditystat;
    ptr +="<span class=\"superscript\">%</span></div>\n";
    ptr +="</div>\n";

    ptr +="</div>\n";
    ptr +="</body>\n";
    ptr +="</html>\n";
    return ptr;
}

Mejorando el código – Auto Refresh de página

Una de las mejoras que puede hacer con nuestro código es darle un refresh automático a la página para actualizar el valor del sensor.

Con la adición de un solo meta tag en su documento HTML, puede indicarle al browser que vuelva a cargar automáticamente la página, en un determinado intervalo.

<meta http-equiv="refresh" content="2" >

Coloque este código en la etiqueta &lt;head&gt; de su documento, este meta tag indicará al browser a que actualice cada dos segundos. ¡Bastante ingenioso!

Cargando dinámicamente los datos del sensor con AJAX

Actualizar una página web no es tan práctico si tienes una que es pesada para tiempos de carga. Un método mejor es usar JavaScript asíncrono y XML (AJAX) para que podamos hacer request de datos del server de forma asincrónica (o en segundo plano) sin necesidad de actualizar la página.

El objeto XMLHttpRequest dentro de JavaScript se usa comúnmente para ejecutar AJAX en páginas web. Este realiza silenciosamente la solicitud GET al server y actualiza el elemento de la página. AJAX no es una nueva tecnología, o un lenguaje diferente, solo tecnologías existentes utilizadas de nuevas maneras. Además de esto, AJAX también hace posible

  • Hacer un request de datos de un server después de que la página se haya cargado
  • Recibir datos de un server después de que la página se haya cargado
  • Enviar datos a un server en segundo plano

Acá está el AJAX script que vamos a usar. Coloque este script justo antes de cerrar el tag con &lt;/head&gt;.

ptr +="<script>\n";
ptr +="setInterval(loadDoc,200);\n";
ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";
ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 &amp;&amp; this.status == 200) {\n";
ptr +="document.getElementById(\"webpage\").innerHTML =this.responseText}\n";
ptr +="};\n";
ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";
ptr +="</script>\n";

El script comienza con la etiqueta &lt;script&gt;, ya que el AJAX script no es más que un JavaScript, por lo que debemos escribirlo en la etiqueta &lt;script&gt;. Para que esta función se llame repetidamente, utilizaremos la función JavaScript setInterval(). Se necesitan dos parámetros: una función que se ejecutará, y un intervalo de tiempo (en milisegundos) sobre la frecuencia con la que se ejecuta la función.

ptr +="<script>\n";
ptr +="setInterval(loadDoc,200);\n";

El corazón de este script es una función loadDoc(). Dentro de esta función, se crea un objeto XMLHttpRequest(). Este objeto se utiliza para solicitar datos de un servidor web.

ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";

La función xhttp.onreadystatechange() es llamada cada vez que readyState cambia. La propiedad readyState contiene status de XMLHttpRequest. Tiene uno de los siguientes valores.

  • 0: request no inicializada
  • 1: conexión del server establecida
  • 2: request recibida
  • 3: procesando request
  • 4: request finalizada y la respuesta está lista

La propiedad status contiene el estado del objeto XMLHttpRequest. Tiene uno de los siguientes valores.

  • 200: «OK»
  • 403: «Prohibido»
  • 404: «Pagina no encontrada»

Cuando readyState es 4 y status es 200, la respuesta está lista. Ahora, se actualiza el contenido del elemento con el id webpage (el div contiene los valores actualizados de temperatura y humedad).

ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 &amp;&amp; this.status == 200) {\n";
ptr +="document.getElementById(\"webpage\").innerHTML =this.responseText}\n";
ptr +="};\n";

El HTTP request se inicia a través de las funciones open() y send().

ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";
A %d blogueros les gusta esto: