MicroPython : ESP32/ESP8266 avec serveur Web DHT11/DHT22

MicroPython : ESP32/ESP8266 avec serveur Web DHT11/DHT22

Dans ce tutoriel, vous allez apprendre à créer un serveur Web simple avec l’ESP32 ou l’ESP8266 pour afficher les lectures des capteurs de température et d’humidité DHT11 ou DHT22.

MicroPython ESP32 ESP8266 avec serveur Web DHT11 DHT22 Température et humidité

Pour une introduction aux capteurs de température et d’humidité DHT11/DHT22 avec MicroPython, lisez le guide suivant :

Prérequis – Flasher MicroPython

Pour suivre ce tutoriel, vous avez besoin du firmware MicroPython installé dans vos cartes ESP32 ou ESP8266. Vous avez également besoin d’un IDE pour écrire et télécharger le code sur votre carte. Nous vous suggérons d’utiliser Thonny IDE ou uPyCraft IDE :

Pièces requises

Pour suivre ce tutoriel vous devez câbler le capteur DHT11 ou DHT22 à l’ESP32 ou à l’ESP8266. Vous devez utiliser une résistance pull-up de 10k Ohm.

Voici une liste des pièces dont vous avez besoin pour construire le circuit :

Vous pouvez utiliser les liens précédents ou aller directement sur MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !

MicroPython ESP32ESP8266 avec serveur Web DHT11DHT22

Schéma : ESP32 avec DHT11/DHT22

Câblez le capteur DHT22 ou DHT11 à la carte de développement ESP32 comme indiqué dans le schéma suivant.

MicroPython ESP32 avec DHT11 DHT22 Web Server Circuit de température et d'humidité Câblage schématique

Dans cet exemple, nous connectons la broche de données DHT à GPIO 14. Cependant, vous pouvez utiliser n’importe quelle autre broche numérique appropriée.

Apprenez à utiliser les GPIO ESP32 avec notre guide : Référence de brochage ESP32 : Quelles broches GPIO devriez-vous utiliser ?

Schéma : ESP8266 avec DHT11/DHT22

Suivez le tutoriel suivant si vous utilisez une carte ESP8266.

MicroPython ESP8266 avec DHT11 DHT22 Serveur Web Circuit de température et d'humidité Câblage schématique

Code

Pour ce projet, vous aurez besoin d’un boot.py fichier et unmain.py déposer. le boot.py contient le code qui n’a besoin de s’exécuter qu’une seule fois au démarrage. Cela inclut l’importation de bibliothèques, d’informations d’identification réseau, d’instanciation de broches, de connexion à votre réseau et d’autres configurations.

le main.py fichier contient le code qui exécute le serveur Web pour servir les fichiers et effectuer des tâches en fonction des demandes reçues par le client.

boot.py

Créez un nouveau fichier dans votre IDE MicroPython. Copiez le code suivant dans votre boot.py déposer.

# Complete project details at https://Raspberryme.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))

Afficher le code brut

Nous avons couvert en détail le code du serveur Web dans un didacticiel précédent. Nous allons donc simplement jeter un œil aux parties pertinentes pour cet exemple.

Importez les bibliothèques nécessaires pour créer un serveur Web.

try:
  import usocket as socket
except:
  import socket

import network

Importer le Épingler classe de la machine module et le dht module à lire depuis le capteur DHT.

from machine import Pin
import dht

Vous devez également initialiser le capteur en créant un dht exemple sur GPIO 14 comme suit:

sensor = dht.DHT22(Pin(14))

Si vous utilisez un capteur DHT11, décommentez la ligne suivante et commentez la précédente :

sensor = dht.DHT11(Pin(14))

N’oubliez pas d’ajouter vos identifiants réseau sur les lignes suivantes :

ssid = 'REPLACE_WITH_YOUR_SSID'
password = 'REPLACE_WITH_YOUR_PASSWORD'

main.py

Copiez le code suivant dans votre main.py déposer.

# Complete project details at https://Raspberryme.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()

Afficher le code brut

Lecture du capteur DHT

Tout d’abord, créez une fonction appelée read_sensor() qui lit la température et l’humidité. Vous pouvez utiliser cette fonction dans tout autre projet dans lequel vous devez effectuer des lectures de capteurs à partir de capteurs DHT.

def read_sensor():

La fonction commence par créer deux variables globales, nous pouvons donc les utiliser dans toutes les parties du script (elles sont initialisées comme 0).

global temp, hum
temp = hum = 0

le température variable maintient la température lue par le capteur et le Hum contient l’humidité lue par le capteur.

Ensuite, utilisez essayer et à l’exception déclarations. À l’intérieur de essayer déclaration, nous essayons d’obtenir les valeurs de température et d’humidité.

Noter: try and except nous permet de continuer l’exécution du programme lorsqu’une exception se produit. Par exemple, lorsqu’une erreur se produit, l’exécution d’un code de bloc try est arrêtée et transférée vers le bloc except. Dans notre exemple, l’exception est particulièrement utile pour empêcher le serveur Web de planter lorsque nous ne sommes pas en mesure de lire à partir du capteur.

Nous mesurons le capteur en utilisant le mesure() méthode sur le capteur objet.

try:
 sensor.measure()

Ensuite, lisez la température avec capteur.température() et l’humidité avec capteur.humidité(). Enregistrez ces lectures sur le température et Hum variables.

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

Les lectures de température et d’humidité valides doivent être de type float (si vous utilisez un capteur DHT22) ou de type int (si vous utilisez un capteur DHT11). Donc, nous vérifions si nous avons des lectures valides en utilisant le isinstance() fonction avant de continuer.

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

Noter: la isinstance() fonction accepte comme arguments la variable et le type de données : isinstance(variable, type de données). ça revient Vrai si la variable correspond au type de données inséré et Faux si ce n’est pas le cas.

Si les lectures sont valides, préparez un message à imprimer sur la coque qui comprend les lectures de température et d’humidité :

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

Si vous souhaitez afficher la température en Fahrenheit, décommentez la ligne suivante :

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

Arrondissez la lecture d’humidité à deux décimales. Celui-ci sera imprimé ultérieurement sur la page du serveur Web.

hum = round(hum, 2)

Enfin, retournez le message avec la température et l’humidité :

return(msg)

Dans le cas où nous n’obtenons pas de lectures de capteur valides (pas de type flottant), nous retournons Lectures de capteur non valides. message.

else:
    return('Invalid sensor readings.')

Si nous ne sommes pas en mesure de lire à partir du capteur (par exemple, au cas où il se déconnecterait), renvoyez un message d’erreur.

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

Page Web

le page Web() La fonction renvoie la page HTML. Nous allons parcourir chaque ligne du code HTML et voir ce qu’il fait.

Ce qui suit La balise rend votre page Web réactive dans n’importe quel navigateur.

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

le tag est nécessaire pour charger les icônes utilisées dans la page Web à partir du site Web fontawesome.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

modes

Entre le

balises, nous ajoutons du CSS pour styliser la page 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>

Fondamentalement, nous configurons la page HTML pour afficher le texte avec la police Arial en bloc sans marge et aligné au centre.

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

Nous définissons la taille de la police pour le titre (h2), paragraphe (p) et les unités(.unités) des lectures.

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

Les étiquettes pour les lectures sont stylisées comme indiqué ci-dessous :

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

Toutes les balises précédentes doivent se situer entre le et Mots clés. Ces balises sont utilisées pour inclure du contenu qui n’est pas directement visible pour l’utilisateur, comme le , la les balises et les styles.

Corps HTML

À l’intérieur de tags est l’endroit où nous ajoutons le contenu de la page Web.

le

les balises ajoutent un en-tête à la page Web. Dans ce cas, le texte « ESP DHT server », mais vous pouvez ajouter n’importe quel autre texte.

<h2>ESP DHT Server</h2>

Ensuite, il y a deux paragraphes. L’un pour afficher la température et l’autre pour afficher l’humidité. Les paragraphes sont délimités par le

et

Mots clés. Le paragraphe pour la température est le suivant :

<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>

Et le paragraphe pour l’humidité est sur l’extrait suivant :

<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>

le Les balises affichent les icônes fontawesome.

Comment afficher les icônes

Pour choisir les icônes, allez dans le Site Web de Font Awesome Icons.

Icônes de page HTML du serveur Web ESP32/ESP8266

Recherchez l’icône que vous recherchez. Par exemple, « thermomètre ».

Icônes de page HTML du serveur Web ESP32/ESP8266

Cliquez sur l’icône souhaitée. Ensuite, il vous suffit de copier le texte HTML fourni.

<i class="fas fa-thermometer-half">
Icônes de page HTML du serveur Web ESP32/ESP8266

Pour choisir la couleur, il suffit de passer le style paramètre avec la couleur en hexadécimal, comme suit :

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

Continuer avec le texte HTML…

La ligne suivante écrit le mot « Température » ​​dans la page Web.

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

Après cela, nous ajoutons la valeur de température réelle à la page HTML en concaténant le température variable comme indiqué ci-dessous.

<span>"""+str(temp)+"""</span>

Enfin, nous ajoutons le symbole du degré.

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

le </sup> les balises rendent le texte en exposant.

Nous utilisons la même approche pour le paragraphe humidité.

<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>

Création du serveur web

Après cela, effectuez les procédures habituelles pour créer un serveur 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()

Pour une explication détaillée de cette procédure, reportez-vous à ce didacticiel.

Dans le tandis que boucle, lorsque nous appelons le read_sensor() fonction pour imprimer les lectures du capteur et pour mettre à jour les variables globales température et Hum.

sensor_readings = read_sensor()
print(sensor_readings)

Alors le page Web() La fonction génère du texte HTML avec les dernières lectures du capteur.

response = web_page()

Téléchargement du code

Après avoir copié le code et apporté les modifications nécessaires, vous pouvez télécharger le code sur votre ESP32 ou ESP8266.

Tout d’abord, téléchargez le boot.py, puis le main.py fichier sur votre ESP32 ou ESP8266.

Si vous utilisez Thonny IDE, il vous suffit d’aller sur Appareil > Télécharger le script actuel en tant que script de démarrage ou Télécharger le script actuel en tant que script principal. Après avoir téléchargé le code, appuyez sur le bouton RESET intégré à l’ESP.

L’adresse IP ESP32 ou ESP8266 doit être imprimée sur le Shell MicroPython.

ESP32/ESP8266 DHT11 DHT22 Adresse IP du serveur Web MicroPython

Si vous utilisez uPyCraft IDE et que vous rencontrez des problèmes pour télécharger le code, accédez au didacticiel suivant et faites défiler jusqu’à la section « Exécution de votre premier script » : Premiers pas avec MicroPython sur ESP32 et ESP8266.

Problème de téléchargement de code avec Thonny IDE ? Accédez à ce didacticiel et faites défiler jusqu’au Conseils de dépannage pour Thonny IDE section.

Manifestation

Ouvrez votre navigateur et saisissez l’adresse IP de l’ESP. Vous devriez accéder à la page Web avec les dernières lectures du capteur :

ESP32/ESP8266 DHT11 DHT22 Démonstration MicroPython du serveur Web

En même temps, vous pouvez voir sur le MicroPython Shell, ce qui se passe en arrière-plan.

ESP32/ESP8266 DHT11 DHT22 Démonstration MicroPython du serveur Web

Pour obtenir les dernières lectures des capteurs, il vous suffit d’actualiser la page Web.

Dépannage

Si votre capteur DHT ne parvient pas à obtenir les lectures, lisez notre Guide de dépannage DHT pour vous aider à résoudre le problème.

Emballer

Pour créer un serveur Web pour afficher les lectures de température et d’humidité, il vous suffit de concaténer les variables qui contiennent les lectures du capteur avec le texte HTML. Assurez-vous d’obtenir les lectures du capteur avant d’afficher la page Web, afin d’avoir toujours la température et l’humidité mises à jour.

Nous espérons que vous avez trouvé ce tutoriel utile. Si vous souhaitez en savoir plus sur MicroPython avec les ESP32 et ESP8266, jetez un œil à notre eBook :

Vous aimerez peut-être aussi les tutoriels suivants :

Merci d’avoir lu.