Arduino Nano ESP32 Web Slider avec la Bibliothèque DIYables ESP32 WebApps
Aperçu
Ce tutoriel couvre la classe DIYablesWebSliderPage de la bibliothèque DIYables ESP32 WebApps. La page présente deux curseurs indépendants dans le navigateur, chacun avec une plage de 0 à 255. L'Arduino Nano ESP32 reçoit les valeurs des curseurs via WebSocket à travers un callback. Les valeurs sont directement utilisables avec analogWrite() pour le contrôle PWM des LEDs, moteurs ou toute sortie 8 bits.
Ce que ce Tutoriel Couvre
- Recevoir les valeurs des curseurs dans un callback du sketch
- Appliquer les valeurs du curseur 1 et du curseur 2 aux sorties analogWrite()
- Fournir les positions actuelles des curseurs aux navigateurs nouvellement connectés
- Définir les positions initiales par défaut des curseurs
Matériel Requis
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 avec un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte appropriée (ex. Arduino Nano ESP32) et le port COM.
- Naviguez vers l'icône Bibliothèques dans la barre gauche de l'IDE Arduino.
- Cherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps de 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() {
- On vous demandera d'installer d'autres dépendances de bibliothèques
- Cliquez sur le bouton Installer tout pour installer toutes les dépendances de bibliothèques.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebSlider, 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);
}
- 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 l'IDE Arduino pour téléverser le code sur l'Arduino Nano ESP32
- Ouvrez le Moniteur Série
- La sortie du Moniteur Série devrait ressembler à ceci :
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Slider Example
INFO: Added app /
INFO: Added app /web-slider
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/
Web Slider: http://192.168.0.2/web-slider
==========================================
- 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 curseur :
- Sélectionnez la carte Web Slider pour ouvrir la page de contrôle par curseur :
- La page est également directement accessible à http://192.168.0.2/web-slider.
- Déplacez les curseurs et observez les valeurs affichées dans le Moniteur Série.
Valeurs par Défaut des Curseurs
Suivez les positions actuelles des curseurs dans des variables d'état et définissez les valeurs par défaut avant d'enregistrer les callbacks :
int slider1Value = 64; // 25% initial position
int slider2Value = 128; // 50% initial position
Callbacks
Réception des Changements de Curseur
Appelé chaque fois que l'utilisateur déplace l'un ou l'autre curseur :
webSliderPage.onSliderValueFromWeb([](int s1, int s2) {
slider1Value = s1;
slider2Value = s2;
Serial.println("Slider1: " + String(s1) + " Slider2: " + String(s2));
analogWrite(PWM_PIN_1, s1);
analogWrite(PWM_PIN_2, s2);
});
Fourniture des Valeurs au Navigateur
Appelé quand un navigateur se connecte et demande les positions actuelles :
webSliderPage.onSliderValueToWeb([]() {
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
});
Cas d'Utilisation Typiques
Luminosité LED : Connectez le curseur 1 à une broche compatible PWM avec une LED. La plage 0–255 correspond directement à 0–100% de luminosité via analogWrite().
Vitesse moteur : Envoyez les valeurs des curseurs à l'entrée de contrôle de vitesse d'un pilote de moteur. Mettez à l'échelle à la plage requise à l'intérieur du callback.
Contrôle double canal : Le curseur 1 et le curseur 2 sont entièrement indépendants. Utilisez l'un pour la vitesse et l'autre pour la direction, ou un par moteur dans un système à double entraînement.
Dépannage
Valeurs du curseur non reçues
- Confirmez que onSliderValueFromWeb est enregistré avant webAppsServer.begin()
- Vérifiez les valeurs entrantes dans le Moniteur Série
- Vérifiez que le navigateur indique la connexion WebSocket comme active
Les curseurs du navigateur se réinitialisent à la reconnexion
- Implémentez onSliderValueToWeb et appelez sendToWebSlider() à l'intérieur pour que le navigateur restaure les dernières positions à la connexion
Pas de sortie PWM
- Confirmez que la broche supporte analogWrite() sur l'Arduino Nano ESP32
- Vérifiez que pinMode(pin, OUTPUT) est défini avant analogWrite()