Affichage des valeurs DHT22 via un serveur Web rafraichi automatiquement avec LittleFS avec un ESP32
Description :
Projet utilisant un ESP32 pour lire la température et l’humidité via un capteur DHT22 et les afficher sur une page Web.
Les fichiers HTML/JS sont stockés dans la mémoire LittleFS de l’ESP32.
Le serveur Web intégré actualise automatiquement les valeurs mesurées sans recharger la page, offrant un suivi en temps réel des données environnementales.
Prérequis :
- 1 x Carte ESP32
- 1 x DHT22
- 1 x résistance 10KΩ
- 1 x Breadboard
- Fils de connexion
Version IDE :
- Arduino IDE 2.3.5
Bibliothèque :
- LittleFS.h (Tuto dispo)
- DHT.h (version: 3.4.4 par Adafruit)
- Adafruit_Sensor.h (version: 1.1.15 par Adafruit)
- ESPAsyncWebServer.h (version: 3.7.7 par ESP32Async)
- AsyncTCP.h (version 3.4.0 par ESP32Async)
Vidéo de démonstration :
Schéma de câblage :
Code :
Code Arduino :
#include <Arduino.h>
#include <AsyncTCP.h>
#include <WiFi.h>
#include <WebServer.h>
#include <LittleFS.h>
#include <ESPAsyncWebServer.h>
const char *ssid = "......"; // "Votre Nom_du_routeur"
const char *password = "......"; // "Votre Mot_de_passe_du_routeur"
AsyncWebServer server(80);
#include "DHT.h"
#define DHTPIN 4
#define DHTTYPE DHT22
DHT dht(DHTPIN, DHTTYPE);
float Temp = 0;
float Hum = 0;
void setup() {
Serial.begin(115200);
Serial.println(F("DHTxx test!"));
dht.begin();
delay(10);
if (!LittleFS.begin()) {
Serial.println("An Error has occurred while mounting LittleFS");
return;
}
// Connectez-vous au Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Imprimer l'adresse IP locale ESP
Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/index.html", "text/html");
});
server.on("/lire_Temp", HTTP_GET, [](AsyncWebServerRequest *request) {
String BufferTemp1 = String(Temp);
request->send(200, "text/plain", BufferTemp1);
});
server.on("/lire_Hum", HTTP_GET, [](AsyncWebServerRequest *request) {
String BufferHum1 = String(Hum);
request->send(200, "text/plain", BufferHum1);
});
server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/script.js", "text/javascript");
});
server.begin();
}
void loop() {
float h = dht.readHumidity();
float t = dht.readTemperature();
if (isnan(h) || isnan(t)) {
Serial.println(F("Failed to read from DHT sensor!"));
return;
}
Temp = t;
Hum = h;
delay(2000);
}
Code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>ESP</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
<script type="text/javascript" src="https://webapps1.chicago.gov/cdn/jQuery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<center>
<div>
<h3>Température :</h3>
<h2><span id="Temp"></span> °C<h2>
</div>
<div>
<h3>Humidité :</h3>
<h2><span id="Hum"></span> %<h2>
</div>
</center>
</body>
</html>
Code Javascript :
function getDataTemp() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Temp").innerHTML = this.responseText;
}
};
xhttp.open("GET", "lire_Temp", true);
xhttp.send();
};
function getDataHum() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Hum").innerHTML = this.responseText;
}
};
xhttp.open("GET", "lire_Hum", true);
xhttp.send();
};
function functioninterval() {
getDataTemp();
getDataHum();
}
setInterval( functioninterval, 1000 );
getDataTemp();
getDataHum();
