Dashboard minimaliste — ESP32 + IA Embarquée

4. 2.3 Serveur web asynchrone avec ESPAsyncWebServer

4.2. Dashboard minimaliste

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <DHT.h>

const char* ssid     = "VOTRE_SSID";
const char* password = "VOTRE_MOT_DE_PASSE";

AsyncWebServer server(80);
DHT dht(4, DHT22);

float currentTemp = 0;
float currentHum  = 0;

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="refresh" content="5">
  <title>ESP32 Dashboard</title>
  <style>
    body { font-family: sans-serif; text-align: center; margin-top: 50px; }
    .card { display: inline-block; margin: 20px; padding: 30px;
            border-radius: 10px; background: #f0f0f0; min-width: 150px; }
    .value { font-size: 48px; font-weight: bold; color: #333; }
    .label { font-size: 14px; color: #666; margin-top: 5px; }
  </style>
</head>
<body>
  <h1>ESP32 Sensor Dashboard</h1>
  <div class="card">
    <div class="value">%TEMP%°C</div>
    <div class="label">Température</div>
  </div>
  <div class="card">
    <div class="value">%HUM%%%</div>
    <div class="label">Humidité</div>
  </div>
</body>
</html>
)rawliteral";

String processor(const String& var) {
  if (var == "TEMP") return String(currentTemp, 1);
  if (var == "HUM")  return String(currentHum, 1);
  return String();
}

void sensorTask(void *param) {
  dht.begin();
  for (;;) {
    float t = dht.readTemperature();
    float h = dht.readHumidity();
    if (!isnan(t)) currentTemp = t;
    if (!isnan(h)) currentHum  = h;
    vTaskDelay(pdMS_TO_TICKS(2000));
  }
}

void setup() {
  Serial.begin(115200);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.printf("\nConnecté ! IP : %s\n", WiFi.localIP().toString().c_str());

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send_P(200, "text/html", index_html, processor);
  });
  server.begin();

  xTaskCreatePinnedToCore(sensorTask, "Sensor", 4096, NULL, 1, NULL, 0);
}

void loop() {
  delay(1000);
}

Ouvrez l'adresse IP affichée dans le moniteur série — vous verrez le tableau de bord avec la température et l'humidité rafraîchies toutes les 5 secondes.