ESP8266 DHT11/DHT22 Servidor Web de Temperatura y Humedad con Arduino IDE

Cómo mostrar iconos

Para seleccionar los iconos, vaya a Sitio web de Font Awesome Icons.

Busque el símbolo que está buscando. Por ejemplo “termómetro”.

Haga clic en el símbolo deseado. Luego todo lo que tienes que hacer es copiar el texto HTML proporcionado.

<i class="fas fa-thermometer-half">

Para seleccionar el color, todo lo que necesitas hacer es pasar el parámetro de estilo con el color en formato hexadecimal así:

<i class="fas fa-tint" style="color:#00add6;"></i> 

Continúe con el texto HTML…

La siguiente línea escribe la palabra «Temperatura» en la página web.

<span class="dht-labels">Temperature</span>

El texto TEMPERATURA entre caracteres % es un marcador de posición para el valor de temperatura.

<span id="temperature">%TEMPERATURE%</span>

Eso significa que estos %TEMPERATURA% El texto es como una variable que se reemplaza con el valor de temperatura real del sensor DHT. Los marcadores de posición en el texto HTML deben tener entre % caracteres.

Finalmente, agregamos el símbolo de grado.

<sup class="units">°C</sup>

El ^</sup> Las etiquetas hacen que el texto sea superíndice.

Usamos el mismo enfoque para la sección de humedad pero usamos un símbolo diferente y el %HUMEDAD% Marcador de posición.

<p>
  <i class="fas fa-tint" style="color:#00add6;"></i> 
  <span class="dht-labels">Humidity</span>
  <span id="humidity">%HUMIDITY%</span>
  <sup class="units">%</sup>
</p>

Actualizaciones automáticas

Finalmente, hay un código JavaScript en nuestro sitio web que actualiza automáticamente la temperatura y la humedad cada 10 segundos.

Los scripts en el texto HTML deben estar entre Palabras clave.

<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humidity").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 10000 ) ;
</script>

Para actualizar la temperatura en segundo plano tenemos uno establecerintervalo() Función que se ejecuta cada 10 segundos.

Básicamente hace una petición en el /Temperatura URL para obtener el último valor de temperatura.

  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

Cuando se recibe este valor, actualiza el elemento HTML con el ID. temperatura.

if (this.readyState == 4 && this.status == 200) {
  document.getElementById("temperature").innerHTML = this.responseText;
}

En resumen, este apartado anterior se encarga de actualizar de forma asincrónica la temperatura. El mismo proceso se repite para las mediciones de humedad.

Importante: Dado que el sensor DHT tarda bastante en obtener lecturas, recomendamos aumentar el intervalo de solicitud o eliminar las actualizaciones automáticas si desea conectar varios clientes a un ESP8266 al mismo tiempo.

procesador

Ahora tenemos que Procesador() Función que reemplaza los marcadores de posición de nuestro texto HTML por los valores reales de temperatura y humedad.

String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return String
  }
  else if(var == "HUMIDITY"){
    return String(h);
  }
  return String();
}

Al acceder al sitio web, comprobamos si el HTML contiene marcadores de posición. Si es el %TEMPERATURA% Comodín devolvemos la temperatura que está en el t Variable.

if(var == "TEMPERATURE"){
  return String
}

Si el marcador de posición %HUMEDAD%devolvemos el valor de humedad.

else if(var == "HUMIDITY"){
  return String(h);
}

configuración()

En el configuración()inicialice el monitor serie para fines de depuración.

Serial.begin(115200);

Inicialice el sensor DHT.

dht.begin();

Conéctese a su red local e imprima la dirección IP del ESP8266.

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi..");
}

Finalmente, agregue las siguientes líneas de código para manejar el servidor web.

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", String
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", String(h).c_str());
});

Cuando realizamos una solicitud a la URL raíz, enviamos el texto HTML que está almacenado allí. índice_html Variable. Tenemos que hacer eso también procesadorFunción que reemplaza todos los marcadores de posición con los valores correctos.

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});

Necesitamos agregar dos controladores adicionales para actualizar los valores de temperatura y humedad. Cuando recibimos una solicitud en /Temperatura URL solo necesitamos enviar el valor de temperatura actualizado. Es texto sin formato y debe enviarse como un carácter, así que lo usaremos cadena_c() Método.

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", String
});

Se repite el mismo proceso para la humedad.

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", String(h).c_str());
});

Finalmente podemos iniciar el servidor.

server.begin();

En el Cinta() Aquí recibimos nuevos valores de temperatura del sensor cada 10 segundos.

Básicamente comprobamos si es el momento de obtener nuevos valores de sensor:

if (currentMillis - previousMillis >= interval) {

Si este es el caso, guardamos una nueva lectura de temperatura en el Tritón variable

float newT = dht.readTemperature();

Si eso Tritón La variable es una lectura de temperatura válida, la actualizamos t Variable.

else {
  t = newT;
  Serial.println
}

Se repite el mismo proceso para la humedad.

// Read Humidity
float newH = dht.readHumidity();
// if humidity read failed, don't change h value 
if (isnan(newH)) {
   Serial.println("Failed to read from DHT sensor!");
}
else {
  h = newH;
  Serial.println(h);
}

En términos generales, así es como funciona el código.

Sube el código

Después de modificar el boceto con los cambios necesarios, si es necesario, cargue el código en su ESP8266 (si no puede cargar el código en su ESP8266, consulte esta guía de solución de problemas).

Asegúrese de haber seleccionado la placa y el puerto COM correctos. Ir a Herramientas > Tablero y seleccione el modelo ESP8266 que está utilizando. En nuestro caso utilizamos el Kit ESP8266 12-E NodeMCU.

Ir a Herramientas > Puerto y seleccione el puerto COM al que está conectado el ESP8266.

Haga clic en el botón de carga de Arduino IDE.

Nota: Si está utilizando un ESP-01, necesitará uno adaptador serie o un programador FTDI para cargar el código.

Dirección IP ESP8266

Después de cargar el código, abra el monitor serie con una velocidad de baudios de 115200. Presione el botón de reinicio ESP8266. La dirección IP del ESP8266 está impresa en el monitor serie como se muestra en la siguiente figura.

demostración

Abra un navegador en su red local e ingrese la dirección IP del ESP8266. Luego debería ver la siguiente página web con las últimas lecturas del sensor.

Los valores de temperatura y humedad se actualizan automáticamente cada 10 segundos sin necesidad de actualizar el sitio web.

2. Servidor web HTTP simple ESP8266

En esta sección, le mostraremos cómo crear un servidor web HTTP simple que muestre la temperatura y la humedad en una página HTML. Este servidor web envía una respuesta HTTP cuando su navegador realiza una solicitud a la dirección IP ESP8266.

Vídeo de demostración

Primero, mire el video de demostración del proyecto del servidor web ESP8266 a continuación.

código

Estamos programando el ESP8266 usando Arduino IDE, por lo que el complemento ESP8266 debe estar instalado en su Arduino IDE. Si no, sigue primero el siguiente tutorial.

• Instale la placa ESP8266 en el IDE de Arduino

Abra su IDE de Arduino y copie el siguiente código.

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

// Including the ESP8266 WiFi library
#include <ESP8266WiFi.h>
#include "DHT.h"

// Uncomment one of the lines below for whatever DHT sensor type you're using!
#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
//#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

// Replace with your network details
const char* ssid = "YOUR_NETWORK_NAME";
const char* password = "YOUR_NETWORK_PASSWORD";

// Web Server on port 80
WiFiServer server(80);

// DHT Sensor
const int DHTPin = 5;
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);

// Temporary variables
static char celsiusTemp[7];
static char fahrenheitTemp[7];
static char humidityTemp[7];

// only runs once on boot
void setup() {
  // Initializing serial port for debugging purposes
  Serial.begin(115200);
  delay(10);

  dht.begin();
  
  // Connecting to WiFi network
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
  
  // Starting the web server
  server.begin();
  Serial.println("Web server running. Waiting for the ESP IP...");
  delay(10000);
  
  // Printing the ESP IP address
  Serial.println(WiFi.localIP());
}

// runs over and over again
void loop() {
  // Listenning for new clients
  WiFiClient client = server.available();
  
  if (client) {
    Serial.println("New client");
    // bolean to locate when the http request ends
    boolean blank_line = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        
        if (c == 'n' && blank_line) {
            // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
            float h = dht.readHumidity();
            // Read temperature as Celsius (the default)
            float t = dht.readTemperature();
            // Read temperature as Fahrenheit (isFahrenheit = true)
            float f = dht.readTemperature(true);
            // Check if any reads failed and exit early (to try again).
            if (isnan(h) || isnan
              Serial.println("Failed to read from DHT sensor!");
              strcpy(celsiusTemp,"Failed");
              strcpy(fahrenheitTemp, "Failed");
              strcpy(humidityTemp, "Failed");         
            }
            else{
              // Computes temperature values in Celsius + Fahrenheit and Humidity
              float hic = dht.computeHeatIndex(t, h, false);       
              dtostrf(hic, 6, 2, celsiusTemp);             
              float hif = dht.computeHeatIndex(f, h);
              dtostrf(hif, 6, 2, fahrenheitTemp);         
              dtostrf(h, 6, 2, humidityTemp);
              // You can delete the following Serial.print's, it's just for debugging purposes
              Serial.print("Humidity: ");
              Serial.print(h);
              Serial.print(" %t Temperature: ");
              Serial.print
              Serial.print(" *C ");
              Serial.print(f);
              Serial.print(" *Ft Heat index: ");
              Serial.print(hic);
              Serial.print(" *C ");
              Serial.print(hif);
              Serial.print(" *F");
              Serial.print("Humidity: ");
              Serial.print(h);
              Serial.print(" %t Temperature: ");
              Serial.print
              Serial.print(" *C ");
              Serial.print(f);
              Serial.print(" *Ft Heat index: ");
              Serial.print(hic);
              Serial.print(" *C ");
              Serial.print(hif);
              Serial.println(" *F");
            }
            client.println("HTTP/1.1 200 OK");
            client.println("Content-Type: text/html");
            client.println("Connection: close");
            client.println();
            // your actual web page that displays temperature and humidity
            client.println("<!DOCTYPE HTML>");
            client.println("<html>");
            client.println("<head></head><body><h1>ESP8266 - Temperature and Humidity</h1><h3>Temperature in Celsius: ");
            client.println(celsiusTemp);
            client.println("*C</h3><h3>Temperature in Fahrenheit: ");
            client.println(fahrenheitTemp);
            client.println("*F</h3><h3>Humidity: ");
            client.println(humidityTemp);
            client.println("%</h3><h3>");
            client.println("</body></html>");     
            break;
        }
        if (c == 'n') {
          // when starts reading a new line
          blank_line = true;
        }
        else if (c != 'r') {
          // when finds a character on the current line
          blank_line = false;
        }
      }
    }  
    // closing the client connection
    delay(1);
    client.stop();
    Serial.println("Client disconnected.");
  }
}   

Ver código sin formato

Ingrese sus credenciales de red en las siguientes variables y el código funcionará inmediatamente.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Así es como funciona el código

Explicamos en detalle cómo funciona un servidor web muy similar en un tutorial anterior. Consulte el siguiente tutorial para obtener una explicación detallada de cada línea de código: Cree un servidor web ESP8266.

En esta sección, solo echaremos un vistazo a las partes relevantes de este ejemplo.

Importando bibliotecas

Importe las bibliotecas DHT para leer DHT sensor y el ESP8266WiFi Biblioteca para crear el servidor web:

#include <Adafruit_Sensor.h>
#include <DHT.h>

Tipo de sensor DHT

Descomente una de las siguientes líneas para el tipo de sensor que está utilizando. Si utiliza un sensor DHT22, no necesita cambiar nada.

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

Configuración de sus credenciales de red

Ingrese sus credenciales de red en las siguientes variables para que el ESP8266 pueda conectarse a su red local.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Inicializar sensor DHT

Defina el GPIO al que está conectado el pin de datos DHT. En este caso está conectado a GPIO5 (D1).

#define DHTPIN 5     // Digital pin connected to the DHT sensor

Crear una instancia DHT Objeto con el tipo y pin previamente definido.

DHT dht(DHTPIN, DHTTYPE);

configuración()

En el configuración()inicialice el sensor DHT.

dht.begin();

Cinta()

En el Cinta()Comprobamos si un nuevo cliente realiza una consulta:

if (client) {
    Serial.println("New client");
    // bolean to locate when the http request ends
    boolean blank_line = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

Cuando un nuevo cliente realiza una solicitud, leemos la humedad, la temperatura en grados Celsius y Fahrenheit y la almacenamos en el h, t Y F Variables:

float h = dht.readHumidity();
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float f = dht.readTemperature(true);

Finalmente envía la respuesta al cliente con el texto HTML para estructurar la página así como la temperatura y humedad:

client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head></head><body><h1>ESP8266 - Temperature and Humidity</h1><h3>Temperature in Celsius: ");
client.println(celsiusTemp);
client.println("*C</h3><h3>Temperature in Fahrenheit: ");
client.println(fahrenheitTemp);
client.println("*F</h3><h3>Humidity: ");
client.println(humidityTemp);
client.println("%</h3><h3>");
client.println("</body></html>");  

La temperatura y humedad se envían al cliente en estas variables: Temperatura Celsius, Temperatura Fahrenheit Y HumedadTemp.

demostración

Después de realizar los cambios necesarios, cargue el código en ESP8266 como se describe en la sección anterior.

Abra el monitor serie Arduino IDE con una velocidad de baudios de 115200. Después de unos segundos, debería aparecer su dirección IP. En nuestro caso es 192.168.1.95.

Abra cualquier navegador en un dispositivo conectado al mismo enrutador que su ESP. Luego ingrese la dirección IP y haga clic en “Entrar”.

Ahora debería ver las últimas lecturas de temperatura y humedad. Para actualizar los valores, solo necesita actualizar la página web.

Solución de problemas

Si su sensor DHT no proporciona lecturas, consulte nuestra Guía de solución de problemas de DHT para ayudarle a resolver el problema.

Envolver

En este proyecto, le mostramos cómo mostrar las lecturas de un sensor DHT en una página web. Hemos proporcionado dos ejemplos: un servidor web simple y un servidor web asíncrono con actualizaciones automáticas.

Ahora puede modificar fácilmente los ejemplos proporcionados para mostrar lecturas de otros sensores. Si te gustan los proyectos ESP8266 e IoT, echa un vistazo a algunos de nuestros recursos:

• Domótica con ESP8266 (curso)
• Aprende ESP32 con Arduino IDE (Curso)
• Programación MicroPython con ESP32 y ESP8266 (libro electrónico)

Es posible que también le gusten algunos de nuestros proyectos más populares que utilizan ESP8266:

• Hackear un sensor de movimiento PIR con un ESP8266
• Cree un escudo multisensor para ESP8266
• Botón WiFi ESP8266: clon DIY del botón Amazon Dash
• Más de 30 proyectos ESP8266

¿Tiene usted alguna pregunta? ¡Deja un comentario a continuación!

Gracias por leer.

ESP8266 DHT11/DHT22 Servidor Web de Temperatura y Humedad con Arduino IDE

En este proyecto, crearemos un servidor web independiente con un ESP8266 que mostrará la temperatura y la humedad con un sensor DHT11 o DHT22 utilizando el Arduino IDE. El servidor web que construiremos puede ser accedido con cualquier dispositivo que tenga un navegador en tu red local.

A lo largo de este tutorial, mostraremos cómo construir dos servidores web diferentes:

Servidor Web #1:

Un servidor web asíncrono que actualiza la temperatura y humedad automáticamente sin la necesidad de refrescar la página web y con CSS personalizado para dar estilo a la página web.

Servidor Web #2:

Un servidor web HTTP simple que muestra las lecturas del sensor más recientes cuando la página se actualiza en una página HTML sin formato.

Recursos recomendados:

• Cómo instalar el ESP8266 Board en el Arduino IDE
• Esp8266 Servidor Web
• Comparación de Placas ESP8266
• Sensor de Humedad y Temperatura DHT11/DHT22 con Arduino
• Guía de Pines ESP8266: Guía Últimos GPIOs

Aprende más sobre el ESP8266 con nuestro curso: Automatización del Hogar con ESP8266.

Partes requeridas:

Para construir este proyecto, necesitarás las siguientes partes:

• Placa de desarrollo ESP8266 (lea la comparación de placas de desarrollo ESP8266)
• Sensor de Temperatura y Humedad DHT22 o DHT11
• Resistencia de 4.7k Ohm
• Protoboard
• Cables de puente

Puedes utilizar los enlaces anteriores o ir directamente a MakerAdvisor.com/tools para encontrar todas las partes para tus proyectos al mejor precio.

Diagrama Esquemático del ESP8266 y DHT11/DHT22:

Antes de proceder con el tutorial, conecta el sensor de temperatura y humedad DHT11 o DHT22 al ESP8266 como se muestra en el siguiente diagrama esquemático.

En este ejemplo, estamos cableando el pin de datos DHT al GPIO5 (D1), pero puedes usar cualquier otro GPIO adecuado. Lee nuestra Guía de Referencia de GPIO ESP8266 para aprender más sobre los GPIOs del ESP8266.

Si estás utilizando un ESP-01, GPIO 2 es el pin más adecuado para conectar al pin de datos del DHT, como se muestra en el siguiente diagrama.

Para conocer más sobre este contenido, visita el siguiente enlace: Referencia de Contenido.

Continúa leyendo en el siguiente enlace…