Prérequis :
- 1 x Carte ESP32
- 1 x DHT22
- 1 x résistance 10KΩ
- Fils de connexion
Version IDE :
Bibliothèque :
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();
Post Views: 137
J’aime ça :
J’aime chargement…
