Exemple ESP32 WebDigitalPins - Tutoriel sur l'interface de contrôle des broches numériques
Aperçu
L'exemple WebDigitalPins offre une interface Web pour contrôler et surveiller toutes les broches numériques de votre Arduino. Conçu pour la plateforme éducative ESP32 avec des capacités GPIO améliorées, des configurations de broches étendues et des fonctionnalités éducatives intégrées pour l'apprentissage de l'électronique numérique. Vous pouvez allumer/éteindre les broches, surveiller leur état en temps réel et effectuer des opérations en masse via une interface Web intuitive.
Fonctionnalités
- Contrôle individuel des broches numériques: Contrôle séparément chaque broche numérique (0 à 13)
- État en temps réel: Surveiller l'état des broches avec des indicateurs visuels
- Opérations en bloc: Contrôle toutes les broches en une seule fois (Tout Activé, Tout Désactivé, Basculer tout)
- Configuration des broches: Définir les broches comme Entrée ou Sortie via l'interface web
- Rétroaction visuelle: Des boutons codés par couleur affichent l'état des broches (vert = ON, rouge = OFF)
- Conception réactive: Fonctionne sur ordinateur de bureau, tablette et appareils mobiles
- Communication WebSocket: Mises à jour instantanées sans actualisation de la page
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.
Instructions d'installation
Étapes rapides
Suivez ces instructions étape par étape :
- Si c'est votre première utilisation de l'ESP32, reportez-vous au tutoriel sur Installation du logiciel ESP32..
- 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 Dev Module) et le port COM.
- Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino.
- Recherchez «DIYables ESP32 WebApps», puis trouvez la bibliothèque DIYables ESP32 WebApps par DIYables.
- Cliquez sur le bouton Install pour installer la bibliothèque.
- Il vous sera demandé d'installer d'autres dépendances de bibliothèque.
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebDigitalPins l'exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE Arduino
/*
* DIYables WebApp Library - Web Digital Pins Example
*
* This example demonstrates the Web Digital Pins feature with automatic command handling:
* - Control output pins 0-13 via web interface
* - Monitor input pins 0-13 in real-time
* - Individual pin ON/OFF control for outputs
* - Real-time pin status feedback for inputs
* - Bulk operations (All ON, All OFF, Toggle All) for outputs
*
* Hardware: ESP32 Boards
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/webdigitalpins
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances using platform abstraction
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebDigitalPinsPage webDigitalPinsPage;
// Array to store the state of each digital pin (0-13). Index corresponds to pin number.
int pinStates[16] = { 0 }; // Initialize all states to LOW (0)
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web Digital Pins Example");
// Add home and digital pins pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webDigitalPinsPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Pin Configuration Examples:
// Method 1: Enable specific pins individually for output control
webDigitalPinsPage.enablePin(0, WEB_PIN_OUTPUT); // Enable pin 0 (TX - use with caution)
webDigitalPinsPage.enablePin(1, WEB_PIN_OUTPUT); // Enable pin 1 (RX - use with caution)
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(4, WEB_PIN_OUTPUT);
//webDigitalPinsPage.enablePin(5, WEB_PIN_OUTPUT); // Comment/uncomment to disable/enable
//webDigitalPinsPage.enablePin(6, WEB_PIN_OUTPUT); // Comment/uncomment to disable/enable
webDigitalPinsPage.enablePin(13, WEB_PIN_OUTPUT); // Enable pin 13 (built-in LED)
// Method 2: Enable pins for input monitoring
webDigitalPinsPage.enablePin(8, WEB_PIN_INPUT);
webDigitalPinsPage.enablePin(9, WEB_PIN_INPUT);
//webDigitalPinsPage.enablePin(10, WEB_PIN_INPUT); // Comment/uncomment to disable/enable
//webDigitalPinsPage.enablePin(11, WEB_PIN_INPUT); // Comment/uncomment to disable/enable
// Method 3: Enable all pins at once (uncomment to use)
// for (int pin = 0; pin <= 13; pin++) {
// webDigitalPinsPage.enablePin(pin, WEB_PIN_OUTPUT); // or WEB_PIN_INPUT as needed
// }
// Method 4: Enable pins in a range using for loop (uncomment to use)
// for (int pin = 7; pin <= 11; pin++) {
// webDigitalPinsPage.enablePin(pin, WEB_PIN_OUTPUT); // or WEB_PIN_INPUT as needed
// }
// Initialize enabled pins
int outputPins[] = { 0, 1, 2, 3, 4, 13 }; // Note: Pins 0,1 are TX/RX - use with caution
for (int i = 0; i < 6; i++) {
int pin = outputPins[i];
pinMode(pin, OUTPUT);
digitalWrite(pin, LOW);
pinStates[pin] = LOW;
}
int inputPins[] = { 8, 9 };
for (int i = 0; i < 2; i++) {
int pin = inputPins[i];
pinMode(pin, INPUT); // Use INPUT_PULLUP if needed
pinStates[pin] = digitalRead(pin);
}
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Return the current state to display on Web App
webDigitalPinsPage.onPinRead([](int pin) {
return pinStates[pin]; // Return the current state of the pin
// You can implement custom read logic here if needed
});
// Handle the control request from Web App (for output pins)
webDigitalPinsPage.onPinWrite([](int pin, int state) {
digitalWrite(pin, state);
pinStates[pin] = state;
// You can implement custom control logic here if needed
});
// Handle pin mode change requests (optional)
webDigitalPinsPage.onPinModeChange([](int pin, int mode) {
if (mode == WEB_PIN_OUTPUT) {
pinMode(pin, OUTPUT);
digitalWrite(pin, LOW);
pinStates[pin] = LOW;
} else if (mode == WEB_PIN_INPUT) {
pinMode(pin, INPUT); // or INPUT_PULLUP as needed
pinStates[pin] = digitalRead(pin);
}
// You can implement custom mode change logic here if needed
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Monitor input pins for real-time updates
static unsigned long lastInputCheck = 0;
if (millis() - lastInputCheck > 100) { // Check every 100ms
lastInputCheck = millis();
// Check input pins for changes and send real-time updates
int inputPins[] = { 8, 9 };
for (int i = 0; i < 2; i++) {
int pin = inputPins[i];
int currentState = digitalRead(pin);
if (currentState != pinStates[pin]) {
pinStates[pin] = currentState;
// Send real-time update to web clients
webDigitalPinsPage.updatePinState(pin, currentState);
}
}
}
// Add your main application code here
delay(10);
}
- Configurez les identifiants Wi‑Fi dans le code en mettant à jour ces lignes :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code vers l'ESP32
- Ouvrez le Moniteur série
- Consultez le résultat dans le Moniteur série. Cela ressemble à ce qui suit.
COM6
WebSocket client connected from: 192.168.0.5
New WebSocket connection established
WebSocket message received: SLIDER:GET_VALUES
WebSocket client connected from: 192.168.0.5
New WebSocket connection established
WebSocket message received: SLIDER:64,128
DIYables WebApp - Web Digital Pins Example
INFO: Added app /
INFO: Added app /web-digital-pins
DEBUG: Enabling pin 0 with mode OUTPUT
DEBUG: Enabling pin 1 with mode OUTPUT
DEBUG: Enabling pin 2 with mode OUTPUT
DEBUG: Enabling pin 3 with mode OUTPUT
DEBUG: Enabling pin 4 with mode OUTPUT
DEBUG: Enabling pin 13 with mode OUTPUT
DEBUG: Enabling pin 8 with mode INPUT
DEBUG: Enabling pin 9 with mode INPUT
DIYables WebApp Library
Platform: ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
📟 Digital Pins: http://192.168.0.2/web-digital-pins
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Si vous ne voyez rien, redémarrez la carte ESP32.
- Notez l'adresse IP affichée, puis entrez cette adresse dans la barre d'adresse d'un navigateur Web sur votre smartphone ou votre PC.
- Exemple : http://192.168.0.2
- Vous verrez la page d'accueil comme sur l'image ci-dessous :
- Cliquez sur le lien Web Digital Pins, vous verrez l'interface utilisateur de l'application Web Digital Pins comme ci-dessous :
- Ou vous pouvez également accéder à la page directement par l'adresse IP suivie de /web-digital-pins. Par exemple : http://192.168.0.2/web-digital-pins
- Essayez de contrôler les broches numériques en cliquant sur les boutons des broches pour les mettre en ON/OFF et observez la LED intégrée (broche 13) qui répond à vos commandes.
Personnalisation créative – Adaptez le code à votre projet
L'exemple montre différentes façons de configurer les broches pour répondre aux besoins de votre projet créatif :
2. Configurer les paramètres des broches
L'exemple montre différentes façons de configurer les broches:
Méthode 1 : Activer des broches spécifiques
// Enable individual pins for output control
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // Pin 2 as output
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT); // Pin 3 as output
webDigitalPinsPage.enablePin(4, WEB_PIN_INPUT); // Pin 4 as input
Méthode 2 : Activer les plages de broches
// Enable a range of pins for output control
webDigitalPinsPage.enableOutputPins(2, 13); // Pins 2-13 as outputs
Méthode 3 : Activer toutes les broches
// Enable all pins 0-13 for control (use with caution for pins 0,1)
webDigitalPinsPage.enableAllPins();
4. Importez le croquis
- Sélectionnez votre carte ESP32 : Outils → Carte → ESP32
- Sélectionnez le port correct : Outils → Port → [Votre port ESP32]
- Cliquez sur le bouton Téléverser
5. Obtenir l'adresse IP
- Ouvrez Outils → Moniteur série
- Réglez le débit à 9600 bauds
- Attendez que l'ESP32 se connecte au Wi‑Fi
- Notez l'adresse IP affichée (par ex., 192.168.1.100)
6. Accéder à l'interface des broches numériques
Ouvrez votre navigateur Web et accédez à :
http://[ARDUINO_IP_ADDRESS]/digital-pins
Exemple : http://192.168.1.100/digital-pins
Comment utiliser
Interface de contrôle des broches
L'interface web affiche toutes les broches configurées avec :
- Numéro de broche: Indique quelle broche ESP32 (0-13)
- État actuel: indicateur allumé (vert) ou éteint (rouge)
- Bouton de contrôle: Cliquez pour basculer l'état de la broche
- Type de broche: Indique si elle est configurée comme entrée ou sortie
Contrôle individuel des broches
- Activer l'épingle: Cliquez sur le bouton d'épingle lorsqu'il affiche « ARRÊT »
- Désactiver l'épingle: Cliquez sur le bouton d'épingle lorsqu'il affiche « MARCHE »
- État du moniteur: Les boutons d'épingle se mettent à jour automatiquement pour afficher l'état actuel
Opérations en masse
Utilisez les boutons de contrôle en lot pour contrôler plusieurs broches à la fois :
Tous allumés
- Placez toutes les broches de sortie configurées à l'état haut.
- Les broches d'entrée ne sont pas affectées.
- Utile pour tester tous les périphériques connectés.
Tout éteint
- Met toutes les broches de sortie configurées à l'état bas
- Les broches d'entrée ne sont pas affectées
- Méthode sûre pour désactiver toutes les sorties
Tout sélectionner
- Inverse l'état de toutes les broches de sortie
- Les broches en état ON deviennent OFF, les broches en état OFF deviennent ON
- Crée des effets d'éclairage intéressants
Surveillance en temps réel
- Les états des broches se mettent à jour automatiquement via WebSocket
- Les modifications apportées dans le code se reflètent dans l'interface web
- Plusieurs utilisateurs peuvent surveiller le même ESP32 simultanément
Connexions matérielles
Exemples de broches de sortie
Contrôle des DEL
Arduino Pin → LED (with resistor) → Ground
Pin 2 → LED Anode → 220Ω Resistor → Ground
Pin 3 → LED Anode → 220Ω Resistor → Ground
Contrôle du relais
Arduino Pin → Relay Input
Pin 4 → Relay IN1
Pin 5 → Relay IN2
Contrôle du moteur (via le pilote de moteur)
Arduino Pin → Motor Driver Input
Pin 6 → Motor Driver IN1
Pin 7 → Motor Driver IN2
Pin 9 → Motor Driver ENA (PWM)
Exemples de codes PIN
Entrée de commutateur
Switch → ESP32 Pin (with pull-up resistor)
Switch → Pin 8 → 10kΩ resistor → 5V
→ GND
Entrée du capteur
Sensor Signal → ESP32 Pin
PIR Sensor → Pin 10
Ultrasonic → Pin 11 (Echo)
Personnalisation du code
Ajout de fonctions de rappel pour les changements de broches
Surveiller les changements d'état des broches :
void setup() {
// Set callback for pin state changes
webDigitalPinsPage.onPinChange([](int pin, bool state) {
Serial.print("Pin ");
Serial.print(pin);
Serial.print(" changed to: ");
Serial.println(state ? "HIGH" : "LOW");
// Add your custom logic here
if (pin == 13 && state == HIGH) {
Serial.println("Built-in LED turned ON!");
}
});
}
Initialisation personnalisée des broches
Configurer des broches spécifiques à des états souhaités au démarrage :
void setup() {
// Initialize pins to specific states
webDigitalPinsPage.setPinState(2, HIGH); // Turn on pin 2
webDigitalPinsPage.setPinState(3, LOW); // Turn off pin 3
// Configure pin modes
pinMode(4, INPUT_PULLUP); // Pin 4 as input with pull-up
pinMode(5, OUTPUT); // Pin 5 as output
}
Lecture des broches d'entrée
Surveillez les broches d'entrée dans votre boucle principale :
void loop() {
static unsigned long lastRead = 0;
if (millis() - lastRead > 1000) { // Read every second
// Read input pins and update web interface
for (int pin = 0; pin <= 13; pin++) {
if (webDigitalPinsPage.isPinEnabled(pin) &&
webDigitalPinsPage.getPinMode(pin) == WEB_PIN_INPUT) {
bool currentState = digitalRead(pin);
webDigitalPinsPage.updatePinState(pin, currentState);
}
}
lastRead = millis();
}
}
Fonctionnalités avancées
Groupes de broches
Créer des groupes logiques de broches pour des fonctions associées :
// Define pin groups
const int LED_PINS[] = {2, 3, 4, 5};
const int RELAY_PINS[] = {6, 7, 8, 9};
void controlLEDGroup(bool state) {
for (int pin : LED_PINS) {
webDigitalPinsPage.setPinState(pin, state);
}
}
void controlRelayGroup(bool state) {
for (int pin : RELAY_PINS) {
webDigitalPinsPage.setPinState(pin, state);
}
}
Génération de motifs
Créer des motifs d'éclairage ou des séquences :
void runLightPattern() {
static unsigned long lastChange = 0;
static int currentPin = 2;
if (millis() - lastChange > 500) { // Change every 500ms
// Turn off all pins
for (int pin = 2; pin <= 13; pin++) {
webDigitalPinsPage.setPinState(pin, LOW);
}
// Turn on current pin
webDigitalPinsPage.setPinState(currentPin, HIGH);
// Move to next pin
currentPin++;
if (currentPin > 13) currentPin = 2;
lastChange = millis();
}
}
Intégration du contrôle PWM
Combinez avec le contrôle analogique pour des fonctionnalités avancées :
void setup() {
// Enable digital pins for on/off control
webDigitalPinsPage.enablePin(9, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(10, WEB_PIN_OUTPUT);
// Set PWM pins for brightness control
analogWrite(9, 128); // 50% brightness
analogWrite(10, 255); // 100% brightness
}
Considérations de sécurité
Bonnes pratiques d'utilisation des broches
Broches 0 et 1 (TX/RX)
- Utilisé pour la communication série
- À éviter sauf si absolument nécessaire
- Peut interférer avec la programmation et le débogage
Broche 13 (LED intégrée)
- Sûr à utiliser pour les tests
- Une LED intégrée fournit un retour visuel
- Bon pour les tests initiaux
Broches 2 à 12
- Sûr pour les E/S numériques en général
- Recommandé pour la plupart des applications
- Aucune considération particulière
Limitations actuelles
Courant maximal par broche : 40 mA
- Utilisez des résistances de limitation du courant avec des LEDs
- Utilisez des transistors ou des relais pour des charges à fort courant
- Prenez en compte la consommation totale de courant
Niveaux de tension : logique 3,3 V
- ESP32 utilise une logique de 3,3 V
- Assurez-vous que les périphériques connectés soient compatibles
- Utilisez des convertisseurs de niveau pour les périphériques 5 V si nécessaire
Dépannage
Problèmes fréquents
- Le code PIN ne répond pas
- Vérifiez que la broche est activée dans le code
- Vérifiez les connexions matérielles
- Vérifiez l'absence de court-circuit
- Confirmez le mode de la broche (ENTRÉE/SORTIE)
- L'interface Web ne se met pas à jour
- Vérifier l'état de la connexion WebSocket
- Rafraîchir la page du navigateur
- Vérifier la connectivité réseau
- Vérifier le moniteur série pour les erreurs
3. Les opérations en masse ne fonctionnent pas
- Assurez-vous que les broches sont configurées comme sorties
- Vérifiez les limitations matérielles
- Vérifiez la capacité de l'alimentation
- Surveillez les conditions de surintensité
4. Les broches d'entrée affichent des états incorrects
- Vérifier les résistances de pull-up et de pull-down appropriées
- Vérifier les niveaux du signal d'entrée
- Vérifier les interférences électromagnétiques
- Confirmer la configuration des broches
Astuces de débogage
Activer la sortie de débogage :
void debugPinStates() {
Serial.println("=== Pin States ===");
for (int pin = 0; pin <= 13; pin++) {
if (webDigitalPinsPage.isPinEnabled(pin)) {
Serial.print("Pin ");
Serial.print(pin);
Serial.print(": ");
Serial.print(digitalRead(pin) ? "HIGH" : "LOW");
Serial.print(" (");
Serial.print(webDigitalPinsPage.getPinMode(pin) == WEB_PIN_OUTPUT ? "OUTPUT" : "INPUT");
Serial.println(")");
}
}
Serial.println("==================");
}
Idées de projets
Domotique
- Éclairage de la salle de contrôle
- Actionner les stores
- Contrôler les systèmes de chauffage et de climatisation
- Intégration du système de sécurité
Automatisation du jardin
- Contrôle du système d'irrigation
- Gestion des lampes de culture
- Régulation de la température
- Contrôle de l'humidité
Contrôle de l'atelier
- Contrôle de l'alimentation de l'outil
- Gestion de l'éclairage
- Système de ventilation
- Interverrouillages de sécurité
Projets éducatifs
- Démonstrations de portes logiques
- Simulation de feux de circulation
- Projets de systèmes d'alarme
- Expériences de contrôle à distance
Exemples d'intégration
Éclairage à détection de mouvement
void setup() {
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // LED
webDigitalPinsPage.enablePin(3, WEB_PIN_INPUT); // PIR sensor
pinMode(3, INPUT);
}
void loop() {
if (digitalRead(3) == HIGH) { // Motion detected
webDigitalPinsPage.setPinState(2, HIGH); // Turn on LED
delay(5000); // Keep on for 5 seconds
webDigitalPinsPage.setPinState(2, LOW); // Turn off LED
}
}
Ventilateur à température contrôlée
void loop() {
float temperature = getTemperature(); // Your temperature reading function
if (temperature > 25.0) {
webDigitalPinsPage.setPinState(4, HIGH); // Turn on fan
} else {
webDigitalPinsPage.setPinState(4, LOW); // Turn off fan
}
}
Prochaines étapes
Après avoir maîtrisé l'exemple WebDigitalPins, essayez :
- WebSlider - Pour le contrôle PWM et analogique
- WebJoystick - Pour le contrôle directionnel
- WebMonitor - Pour le débogage et la surveillance
- MultipleWebApps - Pour combiner toutes les fonctionnalités