"Convierte tu ESP32/ESP8266 en una estación meteorológica con servidor web usando MicroPython y DHT11/DHT22"

En este artículo, aprenderás a crear una estación meteorológica con un servidor web utilizando MicroPython en los microcontroladores ESP32/ESP8266. Con la ayuda de un sensor DHT11/DHT22, podrás monitorear la temperatura y humedad en tiempo real desde cualquier dispositivo con conexión a internet. ¡Sigue leyendo para descubrir cómo hacerlo paso a paso!

En este tutorial aprenderá cómo crear un servidor web simple usando ESP32 o ESP8266 para mostrar lecturas de los sensores de temperatura y humedad DHT11 o DHT22.

MicroPython: ESP32/ESP8266 con servidor web DHT11/DHT22 (estación meteorológica)

Para obtener una introducción a los sensores de temperatura y humedad DHT11/DHT22 con MicroPython, consulte la siguiente guía:

MicroPython: ESP32/ESP8266 con sensor de temperatura y humedad DHT11/DHT22

Requisitos: flashear MicroPython

Para seguir este tutorial, debe tener instalado el firmware MicroPython en sus placas ESP32 o ESP8266. También necesitarás un IDE para escribir el código y subirlo a tu placa. Recomendamos utilizar Thonny IDE o uPyCraft IDE:

IDE de Thonny:
- Instalación y primeros pasos con Thonny IDE
- Actualización del firmware MicroPython con esptool.py
IDE de UpyCraft:
- Instale uPyCraft IDE (Windows, Mac OS X, Linux)
- Flashear/cargar firmware MicroPython a ESP32 y ESP8266

Piezas requeridas

Para seguir este tutorial necesitas conectar el sensor DHT11 o DHT22 al ESP32 o ESP8266. Necesitas usar una resistencia pullup de 10k ohmios.

Aquí hay una lista de las piezas que necesitará para construir el circuito:

ESP32 o ESP8266 (leer ESP32 frente a ESP8266)
DHT11 o DHT22 Sensor de temperatura y humedad
resistencia de 10k ohmios
tablero de circuitos
Cables de puente

Puedes utilizar los enlaces anteriores o ir directamente MakerAdvisor.com/tools ¡Para encontrar todas las piezas para tus proyectos al mejor precio!

Esquema: ESP32 con DHT11/DHT22

Conecte el sensor DHT22 o DHT11 a la placa de desarrollo ESP32 como se muestra en el siguiente diagrama de circuito.

En este ejemplo conectamos el pin de datos DHT a GPIO 14. Sin embargo, también puedes utilizar cualquier otro pin digital adecuado.

Aprenda a utilizar los GPIO ESP32 en nuestra guía: Referencia de distribución de pines ESP32: ¿Qué pines GPIO debería utilizar?

Diagrama de circuito: ESP8266 con DHT11/DHT22

Siga el siguiente tutorial si está utilizando una placa ESP8266.

código

Para este proyecto necesitarás un arranque.py archivo y unoprincipal.py Archivo. El arranque.py El archivo contiene el código que solo debe ejecutarse una vez al arrancar. Esto incluye importar bibliotecas, credenciales de red, crear instancias de pines, conectarse a su red y otras configuraciones.

El principal.py El archivo contiene el código que ejecuta el servidor web para servir archivos y realizar tareas basadas en las solicitudes recibidas del cliente.

arranque.py

Cree un nuevo archivo en su IDE de MicroPython. Copie el siguiente código en su arranque.py Archivo.

# Complete project details at https://RandomNerdTutorials.com

try:
  import usocket as socket
except:
  import socket

import network
from machine import Pin
import dht

import esp
esp.osdebug(None)

import gc
gc.collect()

ssid = 'REPLACE_WITH_YOUR_SSID'
password = 'REPLACE_WITH_YOUR_PASSWORD'

station = network.WLAN(network.STA_IF)

station.active(True)
station.connect(ssid, password)

while station.isconnected() == False:
  pass

print('Connection successful')
print(station.ifconfig())

sensor = dht.DHT22(Pin(14))
#sensor = dht.DHT11(Pin(14))

Ver código sin formato

Cubrimos el código del servidor web en detalle en un tutorial anterior. Por lo tanto, para este ejemplo solo veremos las partes relevantes.

Importe las bibliotecas necesarias para crear un servidor web.

try:
  import usocket as socket
except:
  import socket

import network

Importar el Bolígrafo clase de la máquina módulo y que dht Módulo de lectura del sensor DHT.

from machine import Pin
import dht

También necesita inicializar el sensor ingresando un dht instancia GPIO 14 como sigue:

sensor = dht.DHT22(Pin(14))

Si está utilizando un sensor DHT11, descomente la siguiente línea y comente la anterior:

sensor = dht.DHT11(Pin(14))

No olvide agregar sus credenciales de red en las siguientes líneas:

ssid = 'REPLACE_WITH_YOUR_SSID'
password = 'REPLACE_WITH_YOUR_PASSWORD'

principal.py

Copie el siguiente código en su principal.py Archivo.

# Complete project details at https://RandomNerdTutorials.com

def read_sensor():
  global temp, hum
  temp = hum = 0
  try:
    sensor.measure()
    temp = sensor.temperature()
    hum = sensor.humidity()
    if (isinstance(temp, float) and isinstance(hum, float)) or (isinstance(temp, int) and isinstance(hum, int)):
      msg = (b'{0:3.1f},{1:3.1f}'.format(temp, hum))

      # uncomment for Fahrenheit
      #temp = temp * (9/5) + 32.0

      hum = round(hum, 2)
      return(msg)
    else:
      return('Invalid sensor readings.')
  except OSError as e:
    return('Failed to read sensor.')

def web_page():
  html = """<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP DHT Server</h2>
  <p>
    <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    <span class="dht-labels">Temperature</span> 
    <span>"""+str(temp)+"""</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidity</span>
    <span>"""+str(hum)+"""</span>
    <sup class="units">%</sup>
  </p>
</body>
</html>"""
  return html

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)

while True:
  conn, addr = s.accept()
  print('Got a connection from %s' % str(addr))
  request = conn.recv(1024)
  print('Content = %s' % str(request))
  sensor_readings = read_sensor()
  print(sensor_readings)
  response = web_page()
  conn.send('HTTP/1.1 200 OKn')
  conn.send('Content-Type: text/htmln')
  conn.send('Connection: closenn')
  conn.sendall(response)
  conn.close()

Ver código sin formato

Lectura del sensor DHT

Primero crea una función llamada Leer sensor() que mide la temperatura y la humedad. Puede utilizar esta función en cualquier otro proyecto en el que necesite recopilar valores de sensores DHT.

def read_sensor():

La función comienza creando dos variables globales para que podamos usarlas en todas las partes del script (se inicializan como 0).

global temp, hum
temp = hum = 0

El temperatura La variable contiene la temperatura leída por el sensor y la zumbido mantiene la lectura de humedad del sensor.

Próximo uso intentar Y excepto Testificar. Dentro de intentar -Instrucción intentamos obtener los valores de temperatura y humedad.

Nota: try y except nos permiten continuar ejecutando el programa si ocurre una excepción. Por ejemplo, cuando ocurre un error, la ejecución del código en un bloque try se detiene y se transfiere al bloque except. En nuestro ejemplo, la excepción es particularmente útil para evitar que el servidor web falle si no podemos leer desde el sensor.

Medimos el sensor con el medida() método en el sensor Objeto.

try:
 sensor.measure()

Luego lee la temperatura. sensor.temperatura() y la humedad del aire sensor.humedad(). Guarde estas medidas en el temperatura Y zumbido Variables.

temp = sensor.temperature()
hum = sensor.humidity()

Los valores válidos de temperatura y humedad deben ser de tipo float (si se usa un sensor DHT22) o tipo int (si se usa un sensor DHT11). Entonces comprobamos si tenemos medidas válidas mediante esInstancia() función antes de continuar.

if (isinstance(temp, float) and isinstance(hum, float)) or (isinstance(temp, int) and isinstance(hum,int)):

Nota: El esInstancia() La función acepta la variable y el tipo de datos como argumentos: es instancia (variable, tipo de datos). Vuelve VERDADERO si la variable corresponde al tipo de datos insertado y INCORRECTO a menos que.

Si las lecturas son válidas, prepare un mensaje para imprimir en el caparazón que contenga las lecturas de temperatura y humedad:

msg = (b'{0:3.1f},{1:3.1f}'.format(temp, hum))

Si desea mostrar la temperatura en Fahrenheit, descomente la siguiente línea:

#temp = temp * (9/5) + 32.0

Redondee el valor de humedad a dos decimales. Esto luego se imprimirá en el lado del servidor web.

hum = round(hum, 2)

Finalmente, envíe el mensaje de vuelta con la temperatura y la humedad:

return(msg)

Si no obtenemos valores de sensor válidos (sin tipo flotante), regresamos Valores de sensor no válidos. Noticias.

else:
    return('Invalid sensor readings.')

En caso de que no podamos leer desde el sensor (por ejemplo, si se pierde la conexión), devolverá un mensaje de error.

except OSError as e:
  return('Failed to read sensor.')

sitio web

El sitio web() La función devuelve la página HTML. Revisamos cada línea de HTML y vemos qué hace.

La siguiente La etiqueta hace que su sitio web responda en cualquier navegador.

<meta name="viewport" content="width=device-width, initial-scale=1">

El La etiqueta es necesaria para cargar los íconos utilizados en la página web del sitio web Fontawesome.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

estilo

Entre A las etiquetas agregamos algo de CSS para darle estilo a la página web.

<style>
 html {
   font-family: Arial;
   display: inline-block;
   margin: 0px auto;
   text-align: center;
  }
  h2 { font-size: 3.0rem; }
  p { font-size: 3.0rem; }
  .units { font-size: 1.2rem; }
  .dht-labels{
    font-size: 1.5rem;
    vertical-align:middle;
    padding-bottom: 15px;
  }
</style>

Básicamente, configuramos la página HTML para que el texto se muestre en fuente Arial en bloques sin borde y centrado.

html {
  font-family: Arial;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
 }

Establecemos el tamaño de fuente para el encabezado (h2), párrafo (PAG) y las unidades (.Unidades) de los valores medidos.

h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }

Las etiquetas para los valores medidos están diseñadas de la siguiente manera:

dht-labels {
  font-size: 1.5rem;
  vertical-align:middle;
  padding-bottom: 15px;
}

Todas las etiquetas anteriores deben estar entre Y etiquetas. Estas etiquetas se utilizan para incluir contenido que no es directamente visible para el usuario, como por ejemplo: b. El Etiquetas y estilos.

texto HTML

Dentro de En etiquetas añadimos el contenido de la página web.

Las etiquetas agregan un encabezado a la página web. En este caso el texto “ESP DHT Server”, pero puedes agregar cualquier otro texto.

<h2>ESP DHT Server</h2>

Luego hay dos párrafos. Uno muestra la temperatura y el otro muestra la humedad. Los párrafos están a través del

etiquetas. El párrafo de temperatura es el siguiente:

<p>
  <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
  <span class="dht-labels">Temperature</span> 
  <span>"""+str(temp)+"""</span>
  <sup class="units">°C</sup>
</p>

Y el párrafo sobre la humedad está en el siguiente fragmento:

<p>
  <i class="fas fa-tint" style="color:#00add6;"></i> 
  <span class="dht-labels">Humidity</span>
  <span>"""+str(hum)+"""</span>
  <sup class="units">%</sup>
</p>

El Las etiquetas muestran los íconos de Fontawesome.

Cómo mostrar iconos

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

Busque el icono que desee. Por ejemplo “termómetro”.

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



Para elegir el color sólo tienes que estilo Parámetros con el color en formato hexadecimal de la siguiente manera:



Continúe con el texto HTML…

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

Temperature

Luego agregamos el valor de temperatura real a la página HTML usando el temperatura Variable como se muestra a continuación.

"""+str(temp)+"""

Finalmente, agregamos el símbolo de grado.

°C

El ^ Las etiquetas hacen que el texto sea superíndice.

Usamos el mismo enfoque para la sección de humedad.

 Humidity """+str(hum)+""" % 

Creando el servidor web

A continuación, siga los pasos habituales para crear un servidor de socket.

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s.bind(('', 80)) s.listen(5) while True: conn, addr = s.accept() print('Got a connection from %s' % str(addr)) request = conn.recv(1024) print('Content = %s' % str(request)) sensor_readings = read_sensor() print(sensor_readings) response = web_page() conn.send('HTTP/1.1 200 OKn') conn.send('Content-Type: text/htmln') conn.send('Connection: closenn') conn.sendall(response) conn.close()

Para obtener una explicación detallada de este procedimiento, consulte este tutorial.

En el mientras bucle si nosotros el Leer sensor() Función para imprimir los valores del sensor y actualizar las variables globales. temperatura Y zumbido.

sensor_readings = read_sensor() print(sensor_readings)

El sitio web() La función genera texto HTML con los últimos valores del sensor.

response = web_page()

Sube el código

Después de copiar el código y realizar los cambios necesarios, puede cargar el código en su ESP32 o ESP8266.

Primero cargue el arranque.pyy luego eso principal.py Archivo en su ESP32 o ESP8266.

Si está utilizando Thonny IDE, sólo necesita Dispositivo > Cargar el script actual como script de arranque o Cargar el script actual como script principal. Después de cargar el código, presione el botón RESET integrado del ESP.

La dirección IP de ESP32 o ESP8266 debe imprimirse en el shell de MicroPython.

Si está utilizando uPyCraft IDE y tiene problemas para cargar el código, vaya al siguiente tutorial y desplácese hacia abajo hasta la sección «Ejecutando su primer script»: Introducción a MicroPython en ESP32 y ESP8266.

¿Problemas para cargar código con Thonny IDE? Vaya a este tutorial y desplácese hasta el final Consejos para solucionar problemas de Thonny IDE Sección.

demostración

Abra su navegador e ingrese la dirección IP de ESP. Debes acceder a la página web con las últimas lecturas de los sensores:

Al mismo tiempo, puede ver lo que sucede en segundo plano en MicroPython Shell.

Para obtener las últimas lecturas del sensor, sólo 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

Para crear un servidor web para mostrar los valores de temperatura y humedad, solo necesita vincular las variables que contienen los valores del sensor al texto HTML. Asegúrese de obtener las lecturas del sensor antes de ver la página web para tener siempre las últimas lecturas de temperatura y humedad.

Esperamos que este tutorial te haya resultado útil. Si desea obtener más información sobre MicroPython con ESP32 y ESP8266, consulte nuestro libro electrónico:

Programación MicroPython con ESP32 y ESP8266 eBook

También te pueden interesar los siguientes tutoriales:

GPIO ESP32/ESP8266 explicados con MicroPython

ESP32/ESP8266 Valores medidos analógicos con MicroPython

ESP32/ESP8266 PWM con MicroPython – Atenuación de LED

Servidor web ESP32/ESP8266 MicroPython: salidas de control

Gracias por leer.

Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded

MicroPython: ESP32/ESP8266 con servidor web DHT11/DHT22 (estación meteorológica)

En este tutorial, aprenderás a crear un servidor web simple con el ESP32 o ESP8266 para mostrar lecturas de los sensores de temperatura y humedad DHT11 o DHT22.

Introduccion

Para obtener una introducción a los sensores de temperatura y humedad DHT11/DHT22 con MicroPython, lee la siguiente guía:

MicroPython: ESP32/ESP8266 con Sensor de Temperatura y Humedad DHT11/DHT22

Requisitos previos – Flash de MicroPython

Para seguir este tutorial, necesitas tener instalado el firmware de MicroPython en tus placas ESP32 o ESP8266. También necesitas un IDE para escribir y subir el código a tu placa. Te sugerimos utilizar Thonny IDE o uPyCraft IDE:

Thonny IDE:

Flashear Firmware MicroPython con esptool.py

uPyCraft IDE:

Instalar uPyCraft IDE (Windows, Mac OS X, Linux)

Flash/Subir Firmware MicroPython a ESP32 y ESP8266

Related Posts:
MicroPython: ESP32/ESP8266 con sensor de temperatura…
MicroPython: ESP32/ESP8266 con sensor de temperatura…
Interfaz DHT11 DHT22 con ESP8266 NodeMCU usando servidor web
ESP8266 DHT11/DHT22 Servidor Web de Temperatura y…
Servidor web ESP32 DHT11/DHT22 – Temperatura y…
Interfaz DHT11 DHT22 con ESP32 y visualización de…

1 comentario en «MicroPython: ESP32/ESP8266 con servidor web DHT11/DHT22 (estación meteorológica)»

vallottzv

3 de septiembre de 2022 a las 10:49

Wow, qué interesante poder crear una estación meteorológica con MicroPython y ESP32/ESP8266. Definitivamente voy a intentarlo en mi proyecto. ¡Gracias por compartir esto!
Accede para responder

Deja un comentario Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.