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.
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 !
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.
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.
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))
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 networkImporter le Épingler classe de la machine module et le dht module à lire depuis le capteur DHT.
from machine import Pin
import dhtVous 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">°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()
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 = 0le 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.0Arrondissez 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
<meta name="viewport" content="width=device-width, initial-scale=1">le
<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
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.
Recherchez l’icône que vous recherchez. Par exemple, « thermomètre ».
Cliquez sur l’icône souhaitée. Ensuite, il vous suffit de copier le texte HTML fourni.
<i class="fas fa-thermometer-half">
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.
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 :
En même temps, vous pouvez voir sur le MicroPython Shell, ce qui se passe en arrière-plan.
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.
Conclusion
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.