Exemple Arduino WebDigitalPins - Tutoriel sur l’interface de contrôle des broches numériques
Vue d'ensemble
L'exemple WebDigitalPins fournit une interface Web pour contrôler et surveiller toutes les broches numériques de votre Arduino. Conçu pour la plate-forme éducative Arduino Uno R4 WiFi et DIYables STEM V4 IoT avec des capacités GPIO améliorées, des configurations de broches étendues et des fonctionnalités éducatives intégrées pour apprendre l'électronique numérique. Vous pouvez activer/désactiver les broches, surveiller leurs états en temps réel et effectuer des opérations en masse via une interface Web intuitive.
Fonctionnalités
- Contrôle individuel des broches: Contrôlez chaque broche numérique (0-13) séparément
- État en temps réel: Surveillez l'état des broches à l'aide d'indicateurs visuels
- Opérations groupées: Contrôlez toutes les broches d'un seul coup (Tout allumé, Tout éteint, Basculer tout)
- Configuration des broches: Définissez 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=allumé, rouge=éteint)
- Conception réactive: Fonctionne sur ordinateur de bureau, tablette et appareils mobiles
- Communication WebSocket: Mises à jour instantanées sans rafraîchissement de la page
- Plateforme extensible: Actuellement implémentée pour Arduino Uno R4 WiFi, mais peut être étendue à d'autres plateformes matérielles. Voir DIYables_WebApps_ESP32
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino 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 la première fois que vous utilisez l'Arduino Uno R4 WiFi/DIYables STEM V4 IoT, reportez-vous au tutoriel sur Arduino UNO R4 - Installation du logiciel..
- Connectez la carte Arduino Uno R4/DIYables STEM V4 IoT à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte Arduino Uno R4 appropriée (par exemple, Arduino Uno R4 WiFi) et le port COM.
- Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino.
- Recherchez "DIYables WebApps", puis trouvez la bibliothèque DIYables WebApps par DIYables.
- Cliquez sur le bouton Install pour installer la bibliothèque.
- On vous demandera d'installer certaines autres dépendances de bibliothèque.
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de bibliothèque.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables WebApps WebDigitalPins 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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 <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
UnoR4ServerFactory 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 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 sur l'Arduino UNO R4/DIYables STEM V4 IoT
- Ouvrez le Moniteur série
- Vérifiez le résultat dans le Moniteur série. Il 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: Arduino Uno R4 WiFi
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 Arduino.
- Notez l'adresse IP affichée et saisissez cette adresse dans la barre d'adresse d'un navigateur 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 directement à la page en utilisant 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 allumer/éteindre 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. Importer le croquis
- Sélectionnez votre carte Arduino : Outils → Carte → Arduino UNO R4 WiFi
- Sélectionnez le port correct : Outils → Port → [Votre port Arduino]
- Cliquez sur le bouton Téléverser
5. Obtenir l'adresse IP
- Ouvrez Outils → Moniteur série
- Réglez le débit en bauds à 9600
- Attendez que l'Arduino se connecte au Wi‑Fi
- Notez l'adresse IP affichée (par exemple, 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 Arduino (0-13)
- État actuel: 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 en entrée ou en sortie
Contrôle individuel des broches
- Activer l'épingle: Cliquez sur le bouton d'épingle lorsqu'il affiche "ÉTEINT"
- Désactiver l'épingle: Cliquez sur le bouton d'épingle lorsqu'il affiche "ALLUMÉ"
- État du moniteur: Les boutons d'épingle se mettent automatiquement à jour pour afficher l'état actuel.
Opérations en masse
Utilisez les boutons de contrôle groupés pour contrôler plusieurs broches à la fois :
Tous allumés
- Met 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 appareils 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
- Façon sûre de désactiver toutes les sorties
Tout sélectionner
- Inverse l'état de toutes les broches de sortie
- Les broches allumées deviennent éteintes, les broches éteintes deviennent allumées
- 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 au code se reflètent dans l'interface Web
- Plusieurs utilisateurs peuvent surveiller le même Arduino 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 moteur (via le pilote moteur)
Arduino Pin → Motor Driver Input
Pin 6 → Motor Driver IN1
Pin 7 → Motor Driver IN2
Pin 9 → Motor Driver ENA (PWM)
Exemples de saisie du PIN
Basculer l'entrée
Switch → Arduino Pin (with pull-up resistor)
Switch → Pin 8 → 10kΩ resistor → 5V
→ GND
Entrée du capteur
Sensor Signal → Arduino Pin
PIR Sensor → Pin 10
Ultrasonic → Pin 11 (Echo)
Personnalisation du code
Ajout de rappels de changement 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 du code PIN
Initialiser 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 d'épingles
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é
Consignes d'utilisation du code PIN
Broches 0 et 1 (Émission/Réception)
- Utilisé pour la communication série
- Éviter d'utiliser sauf si cela est 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
- La LED intégrée offre un retour visuel
- Bon pour les tests initiaux
Broches 2 à 12
- Sûr pour les E/S numériques générales
- Recommandé pour la plupart des applications
- Aucune précaution particulière
Limitations actuelles
Courant maximal par broche: 40 mA
- Utilisez des résistances de limitation de courant avec les LED
- Utilisez des transistors ou des relais pour les charges à fort courant
- Prenez en compte la consommation totale de courant
Niveaux de tension : logique 3,3 V
- L'Arduino Uno R4 WiFi utilise une logique en 3,3 V
- Assurez-vous que les périphériques connectés sont compatibles
- Utilisez des convertisseurs de niveau pour les dispositifs fonctionnant en 5 V si nécessaire
Dépannage
Problèmes courants
- Le code PIN ne répond pas
- Vérifier que la broche est activée dans le code
- Vérifier les connexions matérielles
- Vérifier l'absence de courts-circuits
- Confirmer le mode de la broche (Entrée/Sortie)
- L'interface Web ne se met pas à jour.
- Vérifier l'état de la connexion WebSocket
- Actualiser la page du navigateur
- Vérifier la connectivité réseau
- Vérifier le moniteur série pour les erreurs
3. Les opérations en lot ne fonctionnent pas
- Assurez-vous que les broches sont configurées en sorties
- Vérifiez les limitations matérielles
- Vérifiez la capacité de l'alimentation
- Surveillez les conditions de surintensité
4. Broches d'entrée affichant 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
- Contrôler l'é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 de l'éclairage de croissance
- Régulation de la température
- Contrôle de l'humidité
Contrôle de l'atelier
- Contrôle de l'alimentation des outils
- 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 télécommande
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 PWM et le contrôle analogique
- WebJoystick - Pour le contrôle directionnel
- WebMonitor - Pour le débogage et la surveillance
- MultipleWebApps - Combiner toutes les fonctionnalités
Assistance
Pour obtenir de l'aide supplémentaire :
- Consultez la documentation de référence de l’API.
- Visitez les tutoriels DIYables : https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Forums de la communauté Arduino.