Arduino Nano ESP32 Web-Schieberegler mit DIYables ESP32 WebApps Bibliothek
Übersicht
Dieses Tutorial behandelt die DIYablesWebSliderPage-Klasse aus der DIYables ESP32 WebApps Bibliothek. Die Seite zeigt zwei unabhängige Schieberegler im Browser mit jeweils einem Bereich von 0 bis 255. Der Arduino Nano ESP32 empfängt Schiebereglerwerte über WebSocket durch einen Callback. Die Werte können direkt mit analogWrite() für PWM-basierte Steuerung von LEDs, Motoren oder beliebigen 8-Bit-Ausgängen verwendet werden.
Was dieses Tutorial abdeckt
- Empfang von Schiebereglerwerten in einem Sketch-Callback
- Anwendung von Schieberegler 1 und Schieberegler 2 Werten auf analogWrite()-Ausgänge
- Bereitstellung der aktuellen Schiebereglerposition für neu verbundene Browser
- Festlegung von Standard-Ausgangsschieberegelpositionen
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn Sie den Arduino Nano ESP32 zum ersten Mal verwenden, lesen Sie das Tutorial zum Einrichten der Arduino Nano ESP32 Entwicklungsumgebung.
- Verbinden Sie das Arduino Nano ESP32 Board mit Ihrem Computer über ein USB-Kabel.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das entsprechende Board (z. B. Arduino Nano ESP32) und den COM-Port.
- Navigieren Sie zum Symbol Bibliotheken in der linken Leiste der Arduino IDE.
- Suchen Sie nach "DIYables ESP32 WebApps", dann finden Sie die DIYables ESP32 WebApps Bibliothek von DIYables
- Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Sie werden aufgefordert, einige andere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Alles installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- In der Arduino IDE gehen Sie zu Datei Beispiele DIYables ESP32 WebApps WebSlider Beispiel, oder kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Arduino IDE ein
/*
* 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);
}
- Aktualisieren Sie die WiFi-Anmeldedaten im Sketch:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um den Code auf den Arduino Nano ESP32 hochzuladen
- Öffnen Sie den Serial Monitor
- Die Serial Monitor Ausgabe sollte wie folgt aussehen:
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
==========================================
- Wenn nichts angezeigt wird, drücken Sie die Reset-Taste auf dem Board.
- Geben Sie die IP-Adresse aus dem Serial Monitor in einen Browser im selben Netzwerk ein.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt eine Karte für die Schieberegler-Anwendung:
- Wählen Sie die Web-Schieberegler-Karte, um die Seite zur Schiebereglersteuerung zu öffnen:
- Die Seite ist auch direkt unter http://192.168.0.2/web-slider erreichbar.
- Verschieben Sie die Schieberegler und beobachten Sie die im Serial Monitor ausgegebenen Werte.
Standard-Schiebereglerposition
Verfolgen Sie die aktuellen Schieberegelpositionen in Zustandsvariablen und legen Sie Standard fest, bevor Sie Callbacks registrieren:
int slider1Value = 64; // 25% initial position
int slider2Value = 128; // 50% initial position
Callbacks
Empfangen von Schieberegleränderungen
Wird jedes Mal aufgerufen, wenn der Benutzer einen der Schieberegler bewegt:
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);
});
Bereitstellung von Werten für den Browser
Wird aufgerufen, wenn ein Browser eine Verbindung herstellt und die aktuellen Positionen anfordert:
webSliderPage.onSliderValueToWeb([]() {
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
});
Typische Anwendungsfälle
LED-Helligkeit: Verbinden Sie Schieberegler 1 mit einem PWM-fähigen Pin mit einer LED. Der Bereich 0–255 entspricht direkt 0–100% Helligkeit über analogWrite().
Motorgeschwindigkeit: Senden Sie Schiebereglerwerte an die Geschwindigkeitssteueringabe eines Motortreibers. Skalieren Sie den erforderlichen Bereich innerhalb des Callbacks.
Dual-Kanal-Steuerung: Schieberegler 1 und Schieberegler 2 sind vollständig unabhängig. Verwenden Sie einen für Geschwindigkeit und einen für Richtung oder einen pro Motor in einem Dual-Drive-System.
Fehlerbehebung
Schiebereglerwerte nicht empfangen
- Stellen Sie sicher, dass onSliderValueFromWeb vor webAppsServer.begin() registriert ist
- Überprüfen Sie den Serial Monitor auf eingehende Werte
- Überprüfen Sie, ob der Browser die WebSocket-Verbindung als aktiv anzeigt
Browser-Schieberegler setzen sich bei Wiederverbindung zurück
- Implementieren Sie onSliderValueToWeb und rufen Sie sendToWebSlider() darin auf, damit der Browser beim Verbinden die letzten Positionen wiederherstellt
Keine PWM-Ausgabe
- Bestätigen Sie, dass der Pin analogWrite() auf Arduino Nano ESP32 unterstützt
- Überprüfen Sie, dass pinMode(pin, OUTPUT) vor analogWrite() gesetzt ist