Ce tutoriel montre comment construire une station météo de serveur Web avec l’ESP32 pour afficher les lectures du capteur du capteur environnemental BME680 : gaz (qualité de l’air), température, humidité et pression. Les lectures sont mises à jour automatiquement sur le serveur Web à l’aide des événements envoyés par le serveur (SSE). L’ESP32 sera programmé à l’aide de l’IDE Arduino.
Pour créer le serveur Web, nous utiliserons la bibliothèque ESP Async Web Server qui fournit un moyen simple de créer un serveur Web asynchrone.
Capteur environnemental BME680
Le BME680 est un capteur environnemental qui combine des capteurs de gaz, de température, d’humidité et de pression. Le capteur de gaz peut détecter une large gamme de gaz comme les composés organiques volatils (COV). Pour cette raison, le BME680 peut être utilisé dans le contrôle de la qualité de l’air intérieur.
Le BME680 contient un capteur MOX (oxyde métallique) qui détecte les COV dans l’air. Ce capteur vous donne une idée qualitative de la somme des COV/contaminants dans l’air ambiant. En tant que signal brut, le BME680 génère des valeurs de résistance. Ces valeurs changent en raison des variations des concentrations de COV :
- Plus haute concentration de COV » Inférieur la résistance
- Inférieur concentration de COV » Plus haute la résistance
Pour plus d’informations sur le BME680, lisez notre guide de démarrage : ESP32 : capteur environnemental BME680 utilisant l’IDE Arduino (gaz, pression, humidité, température).
Pièces requises
Pour terminer ce tutoriel, vous avez besoin des pièces suivantes :
Vous pouvez utiliser les liens précédents ou accéder directement à MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !
Schéma – ESP32 avec BME680
Le BME680 peut communiquer à l’aide des protocoles de communication I2C ou SPI. Dans ce tutoriel, nous utiliserons le protocole de communication I2C.
Suivez le diagramme schématique suivant pour câbler le BME680 à l’ESP32 en utilisant les broches I2C par défaut.
Lecture recommandée : ESP32 Pinout Reference – Quelles broches GPIO devez-vous utiliser ?
Préparation de l’IDE Arduino
Nous allons programmer la carte ESP32 à l’aide de l’IDE Arduino. Assurez-vous donc que le module complémentaire ESP32 est installé. Suivez le tutoriel suivant :
Vous devez également installer les bibliothèques suivantes.
Suivez les instructions suivantes pour les installer.
Installation de la bibliothèque BME680
Pour obtenir des lectures du module de capteur BME680, nous utiliserons le Bibliothèque Adafruit_BME680. Suivez les étapes suivantes pour installer la bibliothèque dans votre IDE Arduino :
Ouvrez votre IDE Arduino et accédez à Esquisser > Inclure la bibliothèque > Gérer les bibliothèques. Le gestionnaire de bibliothèque devrait s’ouvrir.
Rechercher « adafruit bme680 ” dans la zone de recherche et installez la bibliothèque.
Installation de la bibliothèque Adafruit_Sensor
Pour utiliser la bibliothèque BME680, vous devez également installer le Bibliothèque Adafruit_Sensor. Suivez les étapes suivantes pour installer la bibliothèque dans votre IDE Arduino :
Aller à Esquisser > Inclure la bibliothèque > Gérer les bibliothèques et tapez « Capteur unifié Adafruit” dans le champ de recherche. Faites défiler vers le bas pour trouver la bibliothèque et installez-la.
Installation de la librairie ESPAsyncWebServer
le ESPAsyncWebServer La bibliothèque n’est pas disponible pour être installée dans le gestionnaire de bibliothèque de l’IDE Arduino. Vous devez donc l’installer manuellement.
Suivez les étapes suivantes pour installer la bibliothèque ESPAsyncWebServer :
- Cliquez ici pour télécharger la librairie ESPAsyncWebServer. Vous devriez avoir un dossier .zip dans votre dossier Téléchargements
- Décompressez le dossier .zip et vous devriez obtenir ESPAsyncWebServer-maître dossier
- Renommez votre dossier de
ESPAsyncWebServer-maîtreà ESPAsyncWebServer - Bouge le ESPAsyncWebServer dossier dans le dossier des bibliothèques d’installation de votre IDE Arduino
Alternativement, dans votre IDE Arduino, vous pouvez accéder à Esquisser > Inclure la bibliothèque > Ajouter une bibliothèque .zip et sélectionnez la bibliothèque que vous venez de télécharger.
Installation de la bibliothèque ESPAsync TCP
La librairie ESPAsyncWebServer nécessite le ESPAsyncTCP bibliothèque pour travailler. Suivez les étapes suivantes pour installer cette bibliothèque :
- Cliquez ici pour télécharger la librairie ESPAsyncTCP. Vous devriez avoir un dossier .zip dans votre dossier Téléchargements
- Décompressez le dossier .zip et vous devriez obtenir ESPAsyncTCP-maître dossier
- Renommez votre dossier de
ESPAsyncTCP-maîtreà ESPAsyncTCP - Bouge le ESPAsyncTCP dossier dans le dossier des bibliothèques d’installation de votre IDE Arduino
- Enfin, rouvrez votre IDE Arduino
Alternativement, dans votre IDE Arduino, vous pouvez accéder à Esquisser > Inclure la bibliothèque > Ajouter une bibliothèque .zip et sélectionnez la bibliothèque que vous venez de télécharger.
Code serveur Web ESP32 BME680
Ouvrez votre IDE Arduino et copiez le code suivant. Pour le faire fonctionner, vous devez insérer vos identifiants réseau : SSID et mot de passe.
/*********
Rui Santos
Complete project details at https://Raspberryme.com/esp32-bme680-sensor-arduino/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*********/
#include <Wire.h>
#include <SPI.h>
#include <Adafruit_Sensor.h>
#include "Adafruit_BME680.h"
#include <WiFi.h>
#include "ESPAsyncWebServer.h"
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
//Uncomment if using SPI
/*#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/
Adafruit_BME680 bme; // I2C
//Adafruit_BME680 bme(BME_CS); // hardware SPI
//Adafruit_BME680 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);
float temperature;
float humidity;
float pressure;
float gasResistance;
AsyncWebServer server(80);
AsyncEventSource events("/events");
unsigned long lastTime = 0;
unsigned long timerDelay = 30000; // send readings timer
void getBME680Readings(){
// Tell BME680 to begin measurement.
unsigned long endTime = bme.beginReading();
if (endTime == 0) {
Serial.println(F("Failed to begin reading :("));
return;
}
if (!bme.endReading()) {
Serial.println(F("Failed to complete reading :("));
return;
}
temperature = bme.temperature;
pressure = bme.pressure / 100.0;
humidity = bme.humidity;
gasResistance = bme.gas_resistance / 1000.0;
}
String processor(const String& var){
getBME680Readings();
//Serial.println(var);
if(var == "TEMPERATURE"){
return String(temperature);
}
else if(var == "HUMIDITY"){
return String(humidity);
}
else if(var == "PRESSURE"){
return String(pressure);
}
else if(var == "GAS"){
return String(gasResistance);
}
}
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>BME680 Web Server</title>
<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">
<link rel="icon" href="data:,">
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
p { font-size: 1.2rem;}
body { margin: 0;}
.topnav { overflow: hidden; background-color: #4B1D3F; color: white; font-size: 1.7rem; }
.content { padding: 20px; }
.card { background-color: white; box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); }
.cards { max-width: 700px; margin: 0 auto; display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.reading { font-size: 2.8rem; }
.card.temperature { color: #0e7c7b; }
.card.humidity { color: #17bebb; }
.card.pressure { color: #3fca6b; }
.card.gas { color: #d62246; }
</style>
</head>
<body>
<div class="topnav">
<h3>BME680 WEB SERVER</h3>
</div>
<div class="content">
<div class="cards">
<div class="card temperature">
<h4><i class="fas fa-thermometer-half"></i> TEMPERATURE</h4><p><span class="reading"><span id="temp">%TEMPERATURE%</span> °C</span></p>
</div>
<div class="card humidity">
<h4><i class="fas fa-tint"></i> HUMIDITY</h4><p><span class="reading"><span id="hum">%HUMIDITY%</span> %</span></p>
</div>
<div class="card pressure">
<h4><i class="fas fa-angle-double-down"></i> PRESSURE</h4><p><span class="reading"><span id="pres">%PRESSURE%</span> hPa</span></p>
</div>
<div class="card gas">
<h4><i class="fas fa-wind"></i> GAS</h4><p><span class="reading"><span id="gas">%GAS%</span> KΩ</span></p>
</div>
</div>
</div>
<script>
if (!!window.EventSource) {
var source = new EventSource('/events');
source.addEventListener('open', function(e) {
console.log("Events Connected");
}, false);
source.addEventListener('error', function(e) {
if (e.target.readyState != EventSource.OPEN) {
console.log("Events Disconnected");
}
}, false);
source.addEventListener('message', function(e) {
console.log("message", e.data);
}, false);
source.addEventListener('temperature', function(e) {
console.log("temperature", e.data);
document.getElementById("temp").innerHTML = e.data;
}, false);
source.addEventListener('humidity', function(e) {
console.log("humidity", e.data);
document.getElementById("hum").innerHTML = e.data;
}, false);
source.addEventListener('pressure', function(e) {
console.log("pressure", e.data);
document.getElementById("pres").innerHTML = e.data;
}, false);
source.addEventListener('gas', function(e) {
console.log("gas", e.data);
document.getElementById("gas").innerHTML = e.data;
}, false);
}
</script>
</body>
</html>)rawliteral";
void setup() {
Serial.begin(115200);
// Set the device as a Station and Soft Access Point simultaneously
WiFi.mode(WIFI_AP_STA);
// Set device as a Wi-Fi Station
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Setting as a Wi-Fi Station..");
}
Serial.print("Station IP Address: ");
Serial.println(WiFi.localIP());
Serial.println();
// Init BME680 sensor
if (!bme.begin()) {
Serial.println(F("Could not find a valid BME680 sensor, check wiring!"));
while (1);
}
// Set up oversampling and filter initialization
bme.setTemperatureOversampling(BME680_OS_8X);
bme.setHumidityOversampling(BME680_OS_2X);
bme.setPressureOversampling(BME680_OS_4X);
bme.setIIRFilterSize(BME680_FILTER_SIZE_3);
bme.setGasHeater(320, 150); // 320*C for 150 ms
// Handle Web Server
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Handle Web Server Events
events.onConnect([](AsyncEventSourceClient *client){
if(client->lastId()){
Serial.printf("Client reconnected! Last message ID that it got is: %u\n", client->lastId());
}
// send event with message "hello!", id current millis
// and set reconnect delay to 1 second
client->send("hello!", NULL, millis(), 10000);
});
server.addHandler(&events);
server.begin();
}
void loop() {
if ((millis() - lastTime) > timerDelay) {
getBME680Readings();
Serial.printf("Temperature = %.2f ºC \n", temperature);
Serial.printf("Humidity = %.2f % \n", humidity);
Serial.printf("Pressure = %.2f hPa \n", pressure);
Serial.printf("Gas Resistance = %.2f KOhm \n", gasResistance);
Serial.println();
// Send Events to the Web Server with the Sensor Readings
events.send("ping",NULL,millis());
events.send(String(temperature).c_str(),"temperature",millis());
events.send(String(humidity).c_str(),"humidity",millis());
events.send(String(pressure).c_str(),"pressure",millis());
events.send(String(gasResistance).c_str(),"gas",millis());
lastTime = millis();
}
}
Insérez vos informations d’identification réseau dans les variables suivantes et le code fonctionnera immédiatement.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Comment fonctionne le code
Lisez cette section pour savoir comment le code fonctionne, ou passez à la section suivante.
Y compris les bibliothèques
Commencez par inclure les bibliothèques nécessaires. le Fil bibliothèque est nécessaire pour le protocole de communication I2C. Nous incluons également le IPS bibliothèque si vous souhaitez utiliser la communication SPI à la place.
#include <Wire.h>
#include <SPI.h>le Adafruit_Sensor et Adafruit_BME680 des bibliothèques sont nécessaires pour s’interfacer avec le capteur BME680.
#include <Adafruit_Sensor.h>
#include "Adafruit_BME680.h"le Wifi et ESPAsyncWebServer les bibliothèques sont utilisées pour créer le serveur Web.
#include <WiFi.h>
#include "ESPAsyncWebServer.h"Informations d’identification réseau
Insérez vos informations d’identification réseau dans les variables suivantes, afin que l’ESP32 puisse se connecter à votre réseau local en utilisant le Wi-Fi.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Communication I2C
Créé un Adafruit_BME680 objet appelé bme sur les broches ESP32 I2C par défaut.
Adafruit_BME680 bme; // I2CSi vous souhaitez utiliser la communication SPI à la place, vous devez définir les broches ESP32 SPI sur les lignes suivantes (pour décommenter, supprimez le /* et */):
/*#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 15*/Et ensuite, créez un Adafruit_BME680 objet à l’aide de ces broches (pour décommenter supprimer le //).
//Adafruit_BME680 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);Déclaration de variables
le Température, humidité, pression et gazrésistance les variables flottantes seront utilisées pour conserver les lectures du capteur BME680.
float temperature;
float humidity;
float pressure;
float gasResistance;le dernière fois et le timerDelay les variables seront utilisées pour mettre à jour les lectures du capteur toutes les X secondes. Par exemple, nous obtiendrons de nouvelles lectures de capteur toutes les 30 secondes (30 000 millisecondes). Vous pouvez modifier ce délai dans le timerDelay variable.
unsigned long lastTime = 0;
unsigned long timerDelay = 30000;Créez un serveur Web asynchrone sur le port 80.
AsyncWebServer server(80);Créer une source d’événement
Pour afficher automatiquement les informations sur le serveur Web lorsqu’une nouvelle lecture arrive, nous utiliserons Server-Sent Events (SSE).
La ligne suivante crée une nouvelle source d’événement sur /événements.
AsyncEventSource events("/events");Les événements envoyés par le serveur permettent à une page Web (client) d’obtenir des mises à jour d’un serveur. Nous l’utiliserons pour afficher automatiquement de nouvelles lectures sur la page du serveur Web lorsque de nouvelles lectures BME680 seront disponibles.
Important: Les événements envoyés par le serveur ne sont pas pris en charge sur Internet Explorer.
Obtenez des lectures BME680
le getBME680Lecture() La fonction obtient les lectures de gaz, de température, d’humidité et de pression du capteur BME680 et les enregistre sur le gazrésistance, Température, humidité et pression variables.
void getBME680Readings(){
// Tell BME680 to begin measurement.
unsigned long endTime = bme.beginReading();
if (endTime == 0) {
Serial.println(F("Failed to begin reading :("));
return;
}
if (!bme.endReading()) {
Serial.println(F("Failed to complete reading :("));
return;
}
temperature = bme.temperature;
pressure = bme.pressure / 100.0;
humidity = bme.humidity;
gasResistance = bme.gas_resistance / 1000.0;
}Processeur
le processeur() La fonction remplace tous les espaces réservés sur le texte HTML utilisé pour créer la page Web avec les lectures actuelles du capteur.
String processor(const String& var){
getBME680Readings();
//Serial.println(var);
if(var == "TEMPERATURE"){
return String(temperature);
}
else if(var == "HUMIDITY"){
return String(humidity);
}
else if(var == "PRESSURE"){
return String(pressure);
}
else if(var == "GAS"){
return String(gasResistance);
}
}Cela nous permet d’afficher les lectures actuelles du capteur sur la page Web lorsque vous y accédez pour la première fois. Sinon, vous verriez un espace vide jusqu’à ce que de nouvelles lectures soient disponibles (ce qui peut prendre un certain temps en fonction du délai que vous avez défini sur le code).
Construire la page Web
le index_html La variable contient tout le HTML, CSS et JavaScript pour construire la page Web. Nous n’entrerons pas dans les détails sur le fonctionnement du HTML et du CSS. Nous allons juste voir comment gérer les événements envoyés par le serveur.
Jetons un coup d’œil rapide à la ligne qui affiche la température :
<h4><i class="fas fa-thermometer-half"></i> TEMPERATURE</h4><p><span class="reading"><span id="temp">%TEMPERATURE%</span> °C</span></p>Vous pouvez voir que le %TEMPÉRATURE% l’espace réservé est entouré de Mots clés. Le HTML identifiant L’attribut est utilisé pour spécifier un identifiant unique pour un élément HTML.
Il est utilisé pour pointer vers un style spécifique ou il peut être utilisé par JavaScript pour accéder et manipuler l’élément avec cet identifiant spécifique. C’est ce que nous allons faire.
Par exemple, lorsque le serveur Web reçoit un nouvel événement avec la dernière lecture de température, nous mettrons à jour l’élément HTML avec l’id « temp» avec la nouvelle lecture.
Un processus similaire est effectué pour mettre à jour les autres lectures.
Gérer les événements
Créer un nouveau Source de l’événement objet et indiquez l’URL de la page envoyant les mises à jour. Dans notre cas, c’est /événements.
if (!!window.EventSource) {
var source = new EventSource('/events');Une fois que vous avez instancié une source d’événement, vous pouvez commencer à écouter les messages du serveur avec addEventListener().
Ce sont les écouteurs d’événements par défaut, comme indiqué ici dans AsyncWebServer Documentation.
source.addEventListener('open', function(e) {
console.log("Events Connected");
}, false);
source.addEventListener('error', function(e) {
if (e.target.readyState != EventSource.OPEN) {
console.log("Events Disconnected");
}
}, false);
source.addEventListener('message', function(e) {
console.log("message", e.data);
}, false);Ensuite, ajoutez l’écouteur d’événement pour « Température”.
source.addEventListener('temperature', function(e) {Lorsqu’une nouvelle lecture de température est disponible, l’ESP32 envoie un événement (« Température”) au client. Les lignes suivantes gèrent ce qui se passe lorsque le navigateur reçoit cet événement.
console.log("temperature", e.data);
document.getElementById("temp").innerHTML = e.data;Fondamentalement, imprimez les nouvelles lectures sur la console du navigateur et placez les données reçues dans l’élément avec l’identifiant correspondant (« temp« ) sur la page Web.
Un processeur similaire est fait pour l’humidité, la pression et la résistance aux gaz.
source.addEventListener('humidity', function(e) {
console.log("humidity", e.data);
document.getElementById("hum").innerHTML = e.data;
}, false);
source.addEventListener('pressure', function(e) {
console.log("pressure", e.data);
document.getElementById("pres").innerHTML = e.data;
}, false);
source.addEventListener('gas', function(e) {
console.log("gas", e.data);
document.getElementById("gas").innerHTML = e.data;
}, false);mettre en place()
Dans le mettre en place(), initialisez le moniteur série.
Serial.begin(115200);Connectez l’ESP32 à votre réseau local et imprimez l’adresse IP de l’ESP32.
// Set device as a Wi-Fi Station
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Setting as a Wi-Fi Station..");
}
Serial.print("Station IP Address: ");
Serial.println(WiFi.localIP());
Serial.println();Initialisez le capteur BME680.
// Init BME680 sensor
if (!bme.begin()) {
Serial.println(F("Could not find a valid BME680 sensor, check wiring!"));
while (1);
}
// Set up oversampling and filter initialization
bme.setTemperatureOversampling(BME680_OS_8X);
bme.setHumidityOversampling(BME680_OS_2X);
bme.setPressureOversampling(BME680_OS_4X);
bme.setIIRFilterSize(BME680_FILTER_SIZE_3);
bme.setGasHeater(320, 150); // 320*C for 150 msTraiter les demandes
Lorsque vous accédez à l’adresse IP ESP32 à la root / URL, envoyez le texte qui est stocké sur le index_html variable pour construire la page Web et transmettre la processeur comme argument, afin que tous les espaces réservés soient remplacés par les dernières lectures de capteur.
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});Source d’événement du serveur
Configurez la source d’événement sur le serveur.
// Handle Web Server Events
events.onConnect([](AsyncEventSourceClient *client){
if(client->lastId()){
Serial.printf("Client reconnected! Last message ID that it got is: %u\n", client->lastId());
}
// send event with message "hello!", id current millis
// and set reconnect delay to 1 second
client->send("hello!", NULL, millis(), 10000);
});
server.addHandler(&events);Enfin, démarrez le serveur.
server.begin();boucler()
Dans le boucler(), obtenez de nouvelles lectures de capteur :
getBME680Readings();Imprimez les nouvelles lectures dans le moniteur série.
Serial.printf("Temperature = %.2f ºC \n", temperature);
Serial.printf("Humidity = %.2f % \n", humidity);
Serial.printf("Pressure = %.2f hPa \n", pressure);
Serial.printf("Gas Resistance = %.2f KOhm \n", gasResistance);
Serial.println();Enfin, envoyez des événements au navigateur avec les dernières lectures de capteur pour mettre à jour la page Web.
// Send Events to the Web Server with the Sensor Readings
events.send("ping",NULL,millis());
events.send(String(temperature).c_str(),"temperature",millis());
events.send(String(humidity).c_str(),"humidity",millis());
events.send(String(pressure).c_str(),"pressure",millis());
events.send(String(gasResistance).c_str(),"gas",millis());Le schéma suivant résume le fonctionnement des événements envoyés par le serveur pour mettre à jour la page Web.
Télécharger le code
Maintenant, téléchargez le code sur votre ESP32. Assurez-vous d’avoir sélectionné la bonne carte et le bon port COM.
Après le téléchargement, ouvrez le moniteur série à un débit en bauds de 115200. Appuyez sur le bouton RST/EN embarqué ESP32. L’adresse IP ESP32 doit être imprimée dans le moniteur série.
Manifestation
Ouvrez un navigateur sur votre réseau local et saisissez l’adresse IP ESP32. Vous devriez avoir accès au serveur Web ESP32 avec les dernières lectures BME680.
Les lectures sont mises à jour automatiquement à l’aide des événements envoyés par le serveur.
Conclusion
Dans ce didacticiel, vous avez appris à créer une station météorologique de serveur Web asynchrone avec l’ESP32 pour afficher les lectures du capteur BME680 – gaz (qualité de l’air), température, humidité et pression – et comment mettre à jour les lectures automatiquement sur la page Web à l’aide de Server -Événements envoyés.
Nous avons d’autres tutoriels de serveur Web que vous pourriez aimer :
Nous espérons que vous avez trouvé ce projet intéressant. En savoir plus sur l’ESP32 avec nos ressources :
Merci d’avoir lu.