Exemple ESP32 WebSlider - Tutoriel sur l’interface de contrôle à double curseur

Vue d'ensemble

L'exemple WebSlider fournit deux curseurs indépendants accessibles via un navigateur web. Conçu pour la plateforme éducative ESP32 avec des capacités analogiques améliorées, des fonctionnalités de contrôle de précision et des modules éducatifs intégrés pour apprendre le PWM et l'électronique analogique. Chaque curseur offre des valeurs de 0 à 255, ce qui les rend parfaits pour le contrôle PWM, le réglage de la luminosité, le contrôle de la vitesse du moteur et toute application nécessitant des valeurs de contrôle analogiques.

Exemple Arduino WebSlider – Tutoriel sur l’interface de contrôle à double curseur

Fonctionnalités

  • Deux curseurs indépendants: Contrôles de curseur indépendants (plage 0-255 chacun)
  • Valeurs en temps réel: Mises à jour instantanées des valeurs via une communication WebSocket
  • Compatible PWM: Valeurs sur 8 bits (0-255), parfaites pour les fonctions analogWrite()
  • Rétroaction visuelle: Affichage en temps réel de la valeur pour chaque curseur
  • Boutons de préréglage: Valeurs préconfigurées rapides pour des configurations courantes
  • Support tactile et souris: Fonctionne sur ordinateur de bureau, tablette et appareils mobiles
  • Conception réactive: S'adapte à différentes tailles d'écran
  • Persistance des valeurs: Les curseurs retiennent la dernière position lors du rechargement de la page

Préparation du matériel

1×Module de développement ESP32 ESP-WROOM-32
1×Câble USB Type-A vers Type-C (pour PC USB-A)
1×Câble USB Type-C vers Type-C (pour PC USB-C)
1×Recommandé: Carte d'extension à bornier à vis pour ESP32
1×Recommandé: Breakout Expansion Board for ESP32
1×Recommandé: Répartiteur d'alimentation pour ESP32

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 la première fois que vous utilisez 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.
Bibliothèque ESP32 WebApps de DIYables
  • On vous demandera 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.
Dépendance des WebApps ESP32 de DIYables
  • Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebSlider exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE Arduino
/* * DIYables WebApp Library - Web Slider Example * * This example demonstrates the Web Slider feature: * - Two independent sliders (0-255) * - Real-time value monitoring * - Template for hardware control * * 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]/webslider */ #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 ESP32ServerFactory serverFactory; DIYablesWebAppServer webAppsServer(serverFactory, 80, 81); DIYablesHomePage homePage; DIYablesWebSliderPage webSliderPage; // Current slider values int slider1Value = 64; // Default 25% int slider2Value = 128; // Default 50% void setup() { Serial.begin(9600); delay(1000); // TODO: Initialize your hardware pins here Serial.println("DIYables ESP32 WebApp - Web Slider Example"); // Add home and web slider pages webAppsServer.addApp(&homePage); webAppsServer.addApp(&webSliderPage); // Optional: Add 404 page for better user experience webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); // Start the WebApp server if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) { while (1) { Serial.println("Failed to start WebApp server!"); delay(1000); } } // Set up slider callback for value changes webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { // Store the received values slider1Value = slider1; slider2Value = slider2; // Print slider values (0-255) Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2)); // TODO: Add your control logic here based on slider values // Examples: // - Control PWM: analogWrite(LED_PIN, slider1); // - Control servos: servo.write(map(slider1, 0, 255, 0, 180)); // - Control motor speed: analogWrite(MOTOR_PIN, slider2); // - Control brightness: strip.setBrightness(slider1); // - Send values via Serial, I2C, SPI, etc. }); // Set up callback for config requests (when client requests current values) webSliderPage.onSliderValueToWeb([]() { webSliderPage.sendToWebSlider(slider1Value, slider2Value); Serial.println("Web client requested values - Sent: Slider1=" + String(slider1Value) + ", Slider2=" + String(slider2Value)); }); } void loop() { // Handle WebApp server communications webAppsServer.loop(); // TODO: Add your main application code here delay(10); }
  • Configurez les identifiants WiFi 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 Téléverser dans l'IDE Arduino pour téléverser le code sur l'ESP32
  • Ouvrez le Moniteur Série
  • Consultez le résultat dans le Moniteur Série. Cela ressemble à ce qui suit.
COM6
Send
DIYables WebApp - Web Slider Example INFO: Added app / INFO: Added app /web-slider 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/ 🎚️ Web Slider: http://192.168.0.2/web-slider ==========================================
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • Si vous ne voyez rien, redémarrez la carte ESP32.
  • Notez l'adresse IP affichée et saisissez 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 :
Page d'accueil de l'application Web ESP32 DIYables avec l'application Web Slider
  • Cliquez sur le lien Web Slider, vous verrez l'interface utilisateur de l'application Web Slider comme ci-dessous:
ESP32 DIYables WebApp Web Slider application
  • Vous pouvez également accéder directement à la page par l'adresse IP suivie de /web-slider. Par exemple : http://192.168.0.2/web-slider
  • Essayez de déplacer les deux curseurs pour contrôler les valeurs analogiques (0-255) et observez le retour en temps réel dans le Moniteur série.

Personnalisation créative - Adaptez le code à votre projet

Définir les valeurs par défaut du curseur

Configurer les positions initiales des curseurs:

// Current slider values (0-255) int slider1Value = 64; // Default 25% (64/255) int slider2Value = 128; // Default 50% (128/255)

Comment utiliser les curseurs

Contrôles de l'interface Web

L'interface du curseur fournit :

  • Curseur 1: Premier curseur de contrôle avec affichage de la valeur (0-255)
  • Curseur 2: Deuxième curseur de contrôle avec affichage de la valeur (0-255)
  • Affichage de la valeur: Valeurs numériques en temps réel pour les deux curseurs
  • Boutons prédéfinis: Accès rapide à des valeurs courantes (0 %, 25 %, 50 %, 75 %, 100 %)

Utilisation des curseurs

Bureau (contrôle de la souris)

  1. Cliquer et faire glisser : Cliquez sur la poignée du curseur et faites-la glisser pour ajuster la valeur
  2. Position du clic : Cliquez n'importe où sur la piste du curseur pour atteindre cette valeur
  3. Réglage fin : Utilisez de petits mouvements de la souris pour un ajustement précis

Mobile/Tablette (Contrôle tactile)

  1. Touchez et faites glisser: Touchez la poignée du curseur et faites-la glisser jusqu'à la nouvelle position
  2. Position par tap: Touchez la piste du curseur pour régler la valeur
  3. Contrôle fluide: Le glissement du doigt permet des changements de valeur fluides

Plages de valeurs

Chaque curseur fournit :

  • Valeur minimale: 0 (0% - complètement éteint)
  • Valeur maximale: 255 (100% - intensité maximale)
  • Résolution: 256 pas discrets (8 bits de précision)
  • Compatibilité PWM: Utilisation directe de la fonction analogWrite()

Exemples de programmation

Gestionnaire de curseur basique

void setup() { // Set up slider callback for value changes webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { // Store the received values slider1Value = slider1; slider2Value = slider2; // Print slider values (0-255) Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2)); // Add your control logic here }); }

Contrôle de la luminosité des LED

// Pin definitions for PWM LEDs const int LED1_PIN = 9; // PWM pin for first LED const int LED2_PIN = 10; // PWM pin for second LED void setup() { // Configure LED pins as outputs pinMode(LED1_PIN, OUTPUT); pinMode(LED2_PIN, OUTPUT); // Set initial brightness analogWrite(LED1_PIN, slider1Value); analogWrite(LED2_PIN, slider2Value); webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { // Store values slider1Value = slider1; slider2Value = slider2; // Control LED brightness directly (0-255 PWM) analogWrite(LED1_PIN, slider1); analogWrite(LED2_PIN, slider2); Serial.println("LED1 Brightness: " + String(slider1) + ", LED2 Brightness: " + String(slider2)); }); }

Contrôle de la position du servomoteur

#include <Servo.h> Servo servo1, servo2; void setup() { // Attach servos to PWM pins servo1.attach(9); servo2.attach(10); // Set initial positions servo1.write(map(slider1Value, 0, 255, 0, 180)); servo2.write(map(slider2Value, 0, 255, 0, 180)); webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { slider1Value = slider1; slider2Value = slider2; // Map slider values (0-255) to servo angles (0-180°) int angle1 = map(slider1, 0, 255, 0, 180); int angle2 = map(slider2, 0, 255, 0, 180); // Move servos to calculated positions servo1.write(angle1); servo2.write(angle2); Serial.println("Servo1: " + String(angle1) + "°, Servo2: " + String(angle2) + "°"); }); }

Contrôle de la vitesse du moteur

// Motor driver pins const int MOTOR1_PWM = 9; // Motor 1 speed control const int MOTOR1_DIR1 = 2; // Motor 1 direction pin 1 const int MOTOR1_DIR2 = 3; // Motor 1 direction pin 2 const int MOTOR2_PWM = 10; // Motor 2 speed control const int MOTOR2_DIR1 = 4; // Motor 2 direction pin 1 const int MOTOR2_DIR2 = 5; // Motor 2 direction pin 2 void setup() { // Configure motor pins pinMode(MOTOR1_PWM, OUTPUT); pinMode(MOTOR1_DIR1, OUTPUT); pinMode(MOTOR1_DIR2, OUTPUT); pinMode(MOTOR2_PWM, OUTPUT); pinMode(MOTOR2_DIR1, OUTPUT); pinMode(MOTOR2_DIR2, OUTPUT); // Set initial motor directions (forward) digitalWrite(MOTOR1_DIR1, HIGH); digitalWrite(MOTOR1_DIR2, LOW); digitalWrite(MOTOR2_DIR1, HIGH); digitalWrite(MOTOR2_DIR2, LOW); webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { slider1Value = slider1; slider2Value = slider2; // Control motor speeds directly analogWrite(MOTOR1_PWM, slider1); analogWrite(MOTOR2_PWM, slider2); // Calculate percentage for display int speed1Percent = map(slider1, 0, 255, 0, 100); int speed2Percent = map(slider2, 0, 255, 0, 100); Serial.println("Motor1: " + String(speed1Percent) + "%, " + "Motor2: " + String(speed2Percent) + "%"); }); }

Contrôle de la couleur de la LED RVB

// RGB LED pins const int RED_PIN = 9; const int GREEN_PIN = 10; const int BLUE_PIN = 11; void setup() { pinMode(RED_PIN, OUTPUT); pinMode(GREEN_PIN, OUTPUT); pinMode(BLUE_PIN, OUTPUT); webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { slider1Value = slider1; slider2Value = slider2; // Use sliders to control RGB components // Slider 1 controls red intensity // Slider 2 controls blue intensity // Green is calculated based on both sliders int redValue = slider1; int blueValue = slider2; int greenValue = (slider1 + slider2) / 2; // Average of both sliders analogWrite(RED_PIN, redValue); analogWrite(GREEN_PIN, greenValue); analogWrite(BLUE_PIN, blueValue); Serial.println("RGB - R:" + String(redValue) + " G:" + String(greenValue) + " B:" + String(blueValue)); }); }

Techniques avancées de programmation

Lissage des valeurs

class SliderSmoother { private: int currentValue = 0; int targetValue = 0; unsigned long lastUpdate = 0; const int SMOOTH_RATE = 5; // Change per update cycle public: void setTarget(int target) { targetValue = target; } int getCurrentValue() { return currentValue; } bool update() { if (millis() - lastUpdate > 10) { // Update every 10ms bool changed = false; if (currentValue < targetValue) { currentValue = min(currentValue + SMOOTH_RATE, targetValue); changed = true; } else if (currentValue > targetValue) { currentValue = max(currentValue - SMOOTH_RATE, targetValue); changed = true; } lastUpdate = millis(); return changed; } return false; } }; SliderSmoother smoother1, smoother2; void setup() { webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { // Set target values for smooth transition smoother1.setTarget(slider1); smoother2.setTarget(slider2); }); } void loop() { server.loop(); // Update smoothed values bool changed1 = smoother1.update(); bool changed2 = smoother2.update(); if (changed1 || changed2) { // Apply smoothed values to hardware analogWrite(9, smoother1.getCurrentValue()); analogWrite(10, smoother2.getCurrentValue()); } }

Contrôle basé sur des seuils

void setupThresholdControl() { webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { slider1Value = slider1; slider2Value = slider2; // Threshold-based control for discrete outputs const int LOW_THRESHOLD = 85; // 33% const int MEDIUM_THRESHOLD = 170; // 66% // Control digital outputs based on slider 1 thresholds if (slider1 < LOW_THRESHOLD) { // Low level: Turn off all outputs digitalWrite(2, LOW); digitalWrite(3, LOW); digitalWrite(4, LOW); } else if (slider1 < MEDIUM_THRESHOLD) { // Medium level: Turn on first output digitalWrite(2, HIGH); digitalWrite(3, LOW); digitalWrite(4, LOW); } else { // High level: Turn on all outputs digitalWrite(2, HIGH); digitalWrite(3, HIGH); digitalWrite(4, HIGH); } // Use slider 2 for analog PWM control analogWrite(9, slider2); }); }

Système de valeurs prédéfinies

// Predefined preset values const int PRESETS[][2] = { {0, 0}, // Preset 0: Both off {64, 128}, // Preset 1: Low/Medium {128, 128}, // Preset 2: Both medium {255, 128}, // Preset 3: High/Medium {255, 255} // Preset 4: Both maximum }; void applyPreset(int presetNumber) { if (presetNumber >= 0 && presetNumber < 5) { slider1Value = PRESETS[presetNumber][0]; slider2Value = PRESETS[presetNumber][1]; // Update hardware analogWrite(9, slider1Value); analogWrite(10, slider2Value); // Send updated values to web interface webSliderPage.sendToWebSlider(slider1Value, slider2Value); Serial.println("Applied preset " + String(presetNumber) + ": " + String(slider1Value) + ", " + String(slider2Value)); } } void setupPresetSystem() { // You could trigger presets based on other inputs // For example, reading digital pins for preset buttons webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { slider1Value = slider1; slider2Value = slider2; // Your normal slider handling analogWrite(9, slider1); analogWrite(10, slider2); }); } void loop() { server.loop(); // Check for preset trigger conditions // Example: Read buttons connected to digital pins static bool lastButton = false; bool currentButton = digitalRead(7); // Preset button on pin 7 if (currentButton && !lastButton) { // Button pressed static int currentPreset = 0; applyPreset(currentPreset); currentPreset = (currentPreset + 1) % 5; // Cycle through presets } lastButton = currentButton; }

Exemples d'intégration matérielle

Contrôle du ruban LED

// For WS2812B or similar addressable LED strips // (requires additional libraries like FastLED or Adafruit NeoPixel) const int LED_STRIP_PIN = 6; const int NUM_LEDS = 30; void setupLEDStrip() { // Initialize LED strip (depends on library used) webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { slider1Value = slider1; slider2Value = slider2; // Slider 1 controls brightness (0-255) // Slider 2 controls color temperature or hue uint8_t brightness = slider1; uint8_t hue = slider2; // Update LED strip (example with conceptual functions) // strip.setBrightness(brightness); // strip.fill(CHSV(hue, 255, 255)); // strip.show(); Serial.println("LED Strip - Brightness: " + String(brightness) + ", Hue: " + String(hue)); }); }

Contrôle de la vitesse du ventilateur

const int FAN1_PIN = 9; const int FAN2_PIN = 10; void setupFanControl() { pinMode(FAN1_PIN, OUTPUT); pinMode(FAN2_PIN, OUTPUT); webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { slider1Value = slider1; slider2Value = slider2; // Control fan speeds with minimum threshold for startup int fan1Speed = (slider1 > 50) ? map(slider1, 50, 255, 100, 255) : 0; int fan2Speed = (slider2 > 50) ? map(slider2, 50, 255, 100, 255) : 0; analogWrite(FAN1_PIN, fan1Speed); analogWrite(FAN2_PIN, fan2Speed); Serial.println("Fan1: " + String(map(fan1Speed, 0, 255, 0, 100)) + "%, " + "Fan2: " + String(map(fan2Speed, 0, 255, 0, 100)) + "%"); }); }

Contrôle du volume audio

// For controlling audio amplifier or volume IC const int VOLUME1_PIN = 9; // PWM output to volume control const int VOLUME2_PIN = 10; // Second channel or tone control void setupAudioControl() { pinMode(VOLUME1_PIN, OUTPUT); pinMode(VOLUME2_PIN, OUTPUT); webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { slider1Value = slider1; slider2Value = slider2; // Use logarithmic scaling for better audio perception float volume1 = pow(slider1 / 255.0, 2) * 255; // Square law float volume2 = pow(slider2 / 255.0, 2) * 255; analogWrite(VOLUME1_PIN, (int)volume1); analogWrite(VOLUME2_PIN, (int)volume2); Serial.println("Volume1: " + String((int)volume1) + ", Volume2: " + String((int)volume2)); }); }

Dépannage

Problèmes courants

1. Les curseurs ne répondent pas

  • Vérifier la connexion WebSocket dans la console du navigateur
  • Vérifier la connectivité réseau entre l'appareil et l'Arduino
  • Actualiser la page du navigateur pour réinitialiser la connexion
  • Vérifier le moniteur série pour les erreurs de connexion

2. Des valeurs qui n'atteignent pas l'étendue complète

  • Vérifier les paramètres de plage du curseur dans l'interface Web
  • Vérifier les problèmes de mappage des valeurs dans la fonction de rappel
  • Tester avec différents navigateurs ou appareils

3. Contrôle saccadé ou incohérent

  • Implémenter le lissage des valeurs pour des changements progressifs
  • Vérifier les problèmes de latence du réseau
  • Ajouter un mécanisme d'anti-rebond pour des changements rapides de valeur

4. La sortie PWM ne fonctionne pas

  • Vérifiez que les broches prennent en charge le PWM (consultez le brochage ESP32)
  • Assurez-vous que analogWrite() est appelé avec les bons numéros de broche
  • Vérifiez les connexions matérielles et les exigences de charge

Conseils de débogage

Ajouter un débogage exhaustif :

void debugSliderValues(int slider1, int slider2) { Serial.println("=== Slider Debug ==="); Serial.println("Slider 1: " + String(slider1) + " (" + String(map(slider1, 0, 255, 0, 100)) + "%)"); Serial.println("Slider 2: " + String(slider2) + " (" + String(map(slider2, 0, 255, 0, 100)) + "%)"); Serial.println("PWM Pin 9: " + String(slider1)); Serial.println("PWM Pin 10: " + String(slider2)); Serial.println("==================="); }

Idées de projets

Projets de contrôle de l'éclairage

  • Réglage de la luminosité de l'éclairage de la pièce
  • Interface de mélange des couleurs RVB
  • Réglage de la vitesse d'animation du ruban LED
  • Réglage de l'intensité de l'éclairage de scène

Projets de contrôle des moteurs

  • Contrôle de la vitesse du robot
  • Régulation de la vitesse du ventilateur
  • Contrôle du débit de la pompe
  • Vitesse de la bande transporteuse

Projets audio

  • Interface de contrôle du volume
  • Contrôle de tonalité et égaliseur
  • Intensité des effets sonores
  • Contrôle de la visualisation musicale

Domotique

  • Contrôle du climat (intensité du chauffage et du refroidissement)
  • Contrôle de la position des stores
  • Contrôle du débit du système d'irrigation
  • Luminosité et volume des appareils intelligents

Intégration avec d'autres exemples

Combiner avec WebJoystick

Utilisez des curseurs pour les limites de vitesse et un joystick pour la direction :

// Global speed limit from sliders int maxSpeed = 255; // In WebSlider callback webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { maxSpeed = slider1; // Use slider 1 as global speed limit }); // In WebJoystick callback webJoystickPage.onJoystickValueFromWeb([](int x, int y) { // Scale joystick values by slider-controlled speed limit int scaledX = map(x, -100, 100, -maxSpeed, maxSpeed); int scaledY = map(y, -100, 100, -maxSpeed, maxSpeed); controlRobot(scaledX, scaledY); });

Associer avec WebDigitalPins

Utilisez des curseurs pour contrôler le PWM et les broches numériques pour allumer et éteindre:

webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { // Only apply PWM if corresponding digital pins are ON if (webDigitalPinsPage.getPinState(2)) { analogWrite(9, slider1); } else { analogWrite(9, 0); } if (webDigitalPinsPage.getPinState(3)) { analogWrite(10, slider2); } else { analogWrite(10, 0); } });

Prochaines étapes

Après avoir maîtrisé l'exemple WebSlider, essayez :

  1. WebJoystick - Pour le contrôle directionnel en 2D
  2. WebDigitalPins - Pour le contrôle discret marche/arrêt
  3. WebMonitor - Pour le débogage des valeurs des curseurs
  4. MultipleWebApps - En combinant des curseurs avec d'autres contrôles

Assistance

Pour obtenir une aide supplémentaire :

  • Consultez la documentation de référence de l’API
  • Consultez les tutoriels DIYables : https://esp32io.com/tutorials/diyables-esp32-webapps
  • Forums communautaires de l’ESP32

※ NOS MESSAGES

  • N'hésitez pas à partager le lien de ce tutoriel. Cependant, veuillez ne pas utiliser notre contenu sur d'autres sites web. Nous avons investi beaucoup d'efforts et de temps pour créer ce contenu, veuillez respecter notre travail !