Exemple de serveur Web à pages multiples pour ESP32
Exemple de serveur Web à plusieurs pages
Vue d'ensemble
Cet exemple démontre comment créer un serveur web à plusieurs pages sur ESP32 avec plusieurs pages interconnectées pour l'accueil, la surveillance de la température et le contrôle des LED.
Fonctionnalités
- Navigation multi-pages avec des transitions de page fluides
- Page d'accueil avec un menu de navigation et des informations système
- Page de surveillance de la température avec affichage en temps réel de la température et capacité de rafraîchissement
- Page de contrôle LED avec une fonctionnalité de bascule ON/OFF
- HTML basé sur des modèles avec remplacement dynamique du contenu
- Fonctions utilitaires pour un code propre et maintenable
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables ESP32 (ESP32 inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Installation de la bibliothèque
Suivez ces instructions étape par étape :
- Si c'est votre première utilisation de l'ESP32, reportez-vous au tutoriel sur configurer l'environnement pour l'ESP32 dans l'IDE Arduino.
- Connectez la carte ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte ESP32 appropriée (par exemple, ESP32) et le port COM.
- Ouvrez le Gestionnaire de bibliothèques en cliquant sur l'icône sur le côté gauche de l'IDE Arduino.
- Recherchez Web Server for ESP32 et localisez le mWebSockets par DIYables.
- Cliquez sur le bouton Install pour ajouter la bibliothèque mWebSockets.
Exemple de serveur Web
- Dans l'IDE Arduino, allez dans Fichier Exemples Serveur Web pour ESP32 WebServer l'exemple pour ouvrir le code de l'exemple
Connexion du circuit
Aucun composant externe requis - cet exemple utilise la LED intégrée sur la broche 13.
Structure du code
- home.h: Modèle HTML de la page d'accueil
- temperature.h: Modèle de page de surveillance de la température
- led.h: Modèle de page de contrôle des LED
- WebServer.ino: Logique principale du serveur
Instructions d'installation
1. Configuration du réseau
Modifiez les identifiants Wi‑Fi directement dans le fichier WebServer.ino :
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. Télécharger le code et surveiller la sortie
- Connectez votre ESP32 à votre ordinateur
- Sélectionnez la bonne carte et le bon port dans l'IDE Arduino
- Téléversez le sketch WebServer.ino
- Ouvrez le moniteur série (9600 bauds)
- Attendez la connexion Wi-Fi
- Notez l'adresse IP affichée
- Si vous ne voyez pas l'adresse IP dans le moniteur série, appuyez sur le bouton de réinitialisation sur la carte ESP32
Utilisation
Ouvrez votre navigateur Web et saisissez l'adresse IP affichée dans le Moniteur Série pour accéder au serveur Web ESP32.
Tester la fonction de surveillance de la température :
- Cliquez sur le menu « Température ».
- Affichez l'affichage de la température.
Tester la fonction de contrôle des LED :
- Cliquez sur le menu « Contrôle des LED ». Vous verrez l’interface Web comme ci-dessous :
- Allumer et éteindre la LED à l'aide des boutons fournis.
- Observez l'état de la LED intégrée sur la carte ESP32 qui se met à jour instantanément.
Pages disponibles
Page d'accueil (`/`)
- URL: http://your-esp32-ip/
- Fonctionnalités:
- Message de bienvenue avec des informations système
- Menu de navigation vers toutes les pages
Mise en page propre et professionnelle
Page de température (`/temperature`)
- URL: http://your-esp32-ip/temperature
- Fonctionnalités:
- Affichage en temps réel de la température en degrés Celsius
- Actualisation automatique toutes les 5 secondes
- Bouton d'actualisation manuelle
- Retour à la navigation d'accueil
Page de contrôle des LED (`/led`)
- URL: http://your-esp32-ip/led
- URL ALLUMÉE: http://your-esp32-ip/led/on
- URL ÉTEINTE: http://your-esp32-ip/led/off
- Fonctionnalités:
- Affichage de l'état actuel des LED
- Des itinéraires séparés pour les actions d'activation et de désactivation
- Mises à jour de statut immédiates après un changement d'état
Retour à la navigation d'accueil
Explication du code
Routes du serveur
// Configure routes with custom handler functions
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
server.addRoute("/led", handleLed);
server.addRoute("/led/on", handleLedOn);
server.addRoute("/led/off", handleLedOff);
// Handler function examples
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = 25.5; // Simulated temperature value
String response = TEMPERATURE_PAGE;
response.replace("%TEMP_C%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = LOW;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
Système de modèles
L'exemple utilise un système de remplacement des espaces réservés pour le contenu dynamique :
- %TEMP_C%: Remplacé par la valeur actuelle de la température en degrés Celsius
- %LED_STATUS%: Remplacé par l'état actuel de la LED (« ON » ou « OFF »)
Fonctions utilitaires
// Helper function to send LED page with current status
void sendLedPage(WiFiClient& client) {
String ledStatus = (ledState == HIGH) ? "ON" : "OFF";
String response = LED_PAGE;
response.replace("%LED_STATUS%", ledStatus);
server.sendResponse(client, response.c_str());
}
// LED state tracking
int ledState = LOW; // Track LED state (LOW = OFF, HIGH = ON)
Personnalisation
Ajout de nouvelles pages
- Créer un modèle HTML dans un nouveau fichier d'en-tête
- Ajouter un gestionnaire de route dans la boucle principale
- Mettre à jour le menu de navigation dans les pages existantes
Mise en forme
Modifier le CSS dans les modèles HTML pour changer l'apparence :
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
.container { max-width: 600px; margin: 0 auto; }
/* Add your custom styles here */
</style>
Ajout de capteurs
Remplacez la valeur de la température simulée par les relevés réels du capteur :
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Replace with actual sensor reading
// e.g., DHT22, DS18B20, etc.
float tempC = readActualTemperatureSensor(); // Your sensor function here
String response = TEMPERATURE_PAGE;
response.replace("%TEMP_C%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
Dépannage
Problèmes courants
Échec de la connexion Wi‑Fi
- Vérifier le SSID et le mot de passe dans le fichier WebServer.ino
- Vérifier la disponibilité du réseau WiFi
- Assurez-vous que l'ESP32 est à portée du réseau WiFi
Les pages ne se chargent pas
- Vérifiez l'adresse IP dans le moniteur série
- Vérifiez que l'URL du navigateur correspond à l'adresse IP de l'ESP32
- Essayez de rafraîchir la page
LED ne répond pas
- Vérifier que la LED est connectée à la broche 13
- Vérifier le moniteur série pour les messages de débogage
- Vérifier que les gestionnaires de routes sont enregistrés
Sortie de débogage
Activer un débogage supplémentaire en ajoutant des appels à Serial.println() :
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("LED route accessed");
Serial.println("Method: " + method);
Serial.println("Request: " + request);
sendLedPage(client);
}
Étapes suivantes
- Explorez l'exemple WebServerJson.ino pour le développement d'API REST
- Essayez WebServerQueryStrings.ino pour la gestion avancée des paramètres
- Découvrez WebServerWithWebSocket.ino pour la communication en temps réel