Contrôle des broches numériques Web Arduino Nano ESP32 avec la bibliothèque DIYables ESP32 WebApps
Vue d'ensemble
Ce tutoriel couvre la classe DIYablesWebDigitalPinsPage de la bibliothèque DIYables ESP32 WebApps. La page présente chaque broche enregistrée sous forme de bouton dans le navigateur. Les broches de sortie peuvent être basculées ; les broches d'entrée affichent leur état actuel. La configuration des broches se fait entièrement dans le sketch — le navigateur reflète le mode que le sketch définit.
Ce que ce tutoriel couvre
- Activation des broches individuelles comme WEB_PIN_OUTPUT ou WEB_PIN_INPUT
- Lecture des changements d'état de sortie depuis le navigateur via un callback
- Fourniture des valeurs de broches d'entrée au navigateur via un callback de lecture
- Envoi des mises à jour d'état aux navigateurs connectés depuis le sketch
Matériel nécessaire
Ou vous pouvez acheter les kits suivants:
| 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.
Étapes
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'Arduino Nano ESP32, consultez le tutoriel sur Installation du logiciel Arduino Nano ESP32..
- Connectez la carte Arduino Nano ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'Arduino IDE sur votre ordinateur.
- Sélectionnez la carte appropriée (par ex. Arduino Nano ESP32) et le port COM.
- Accédez à l'icône Bibliothèques dans la barre gauche de l'Arduino IDE.
- Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps par DIYables
- Cliquez sur le bouton Installer pour installer la bibliothèque.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Il vous sera demandé d'installer d'autres dépendances de bibliothèques
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.
- Dans Arduino IDE, allez dans Fichier Exemples DIYables ESP32 WebApps WebDigitalPins, ou copiez le code ci-dessus et collez-le dans l'éditeur Arduino IDE
/*
* 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);
}
- Mettez à jour les identifiants WiFi dans le sketch :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Téléverser dans Arduino IDE pour téléverser le code sur Arduino Nano ESP32
- Ouvrez le Moniteur Série
- La sortie du Moniteur Série devrait ressembler à ce qui suit :
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
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: Arduino Nano 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
==========================================
- Si rien n'apparaît, appuyez sur le bouton de réinitialisation de la carte.
- Entrez l'adresse IP du Moniteur Série dans un navigateur sur le même réseau.
- Exemple : http://192.168.0.2
- La page d'accueil affiche une carte pour l'application de broches numériques :
- Sélectionnez la carte Broches numériques pour ouvrir la page de contrôle des broches :
- La page est également accessible directement à http://192.168.0.2/web-digital-pins.
- Basculez les broches de sortie en cliquant sur les boutons correspondants. La broche 13 (LED intégrée) devrait répondre immédiatement.
Méthodes de configuration des broches
Les broches doivent être enregistrées avant webAppsServer.begin(). Trois modèles sont pris en charge :
Activation des broches individuelles
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // Broche 2 en sortie
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT); // Broche 3 en sortie
webDigitalPinsPage.enablePin(4, WEB_PIN_INPUT); // Broche 4 en entrée
Activation d'une plage de broches de sortie
// Enregistre les broches 2 à 13 comme sorties
webDigitalPinsPage.enableOutputPins(2, 13);
Activation de toutes les broches
// Enregistre toutes les broches 0-13 (à utiliser avec précaution pour les broches 0 et 1 — UART)
webDigitalPinsPage.enableAllPins();
Callbacks
Callback d'écriture (broches de sortie)
Appelé quand le navigateur bascule une broche de sortie :
webDigitalPinsPage.onPinWrite([](int pin, int state) {
digitalWrite(pin, state);
Serial.println("Pin " + String(pin) + " set to " + String(state));
});
Callback de lecture (broches d'entrée)
Appelé quand le navigateur demande l'état actuel d'une broche d'entrée :
webDigitalPinsPage.onPinRead([](int pin) -> int {
return digitalRead(pin);
});
Envoi de l'état depuis le sketch
Quand une entrée change d'état en dehors d'une requête du navigateur, envoyez la mise à jour manuellement :
void loop() {
webAppsServer.loop();
int currentState = digitalRead(buttonPin);
if (currentState != lastButtonState) {
lastButtonState = currentState;
webDigitalPinsPage.updatePinState(buttonPin, currentState);
}
}
Contrôles de l'interface web
- Bouton de broche : Cliquez pour basculer une broche de sortie entre HIGH et LOW. Le vert indique HIGH ; le rouge indique LOW.
- Tout ON : Met toutes les broches de sortie enregistrées à HIGH.
- Tout OFF : Met toutes les broches de sortie enregistrées à LOW.
- Tout basculer : Inverse l'état actuel de toutes les broches de sortie.
Les broches d'entrée affichent leur état actuel sans bouton de basculement — le navigateur les rafraîchit périodiquement via WebSocket.
Dépannage
L'état de la broche ne change pas lors du clic
- Vérifiez que le callback onPinWrite est enregistré avant webAppsServer.begin()
- Confirmez que la broche est enregistrée avec WEB_PIN_OUTPUT
- Vérifiez le Moniteur Série pour les messages WebSocket entrants
La broche d'entrée affiche un état incorrect
- Confirmez que le callback onPinRead est enregistré
- Ajoutez une résistance de pull-up ou pull-down pour éviter les entrées flottantes
- Vérifiez que digitalRead() retourne la valeur attendue dans le callback
Page non accessible
- Vérifiez l'adresse IP affichée dans le Moniteur Série
- Assurez-vous que le port 80 est ouvert sur le réseau
- La carte et l'appareil du navigateur doivent être sur le même réseau WiFi 2,4 GHz