ESP32 WebSlider-Beispiel – Tutorial zur Bedienoberfläche mit zwei Schiebereglern
Überblick
Das WebSlider-Beispiel bietet zwei unabhängige Schieberegler, die über einen Webbrowser zugänglich sind. Für ESP32 entwickelt Bildungsplattform mit erweiterten analogen Fähigkeiten, Präzisionssteuerungsfunktionen und integrierten Bildungsmodulen zum Erlernen von PWM und analoger Elektronik. Jeder Schieberegler bietet Werte von 0–255, wodurch er sich ideal für PWM-Steuerung, Helligkeitsregelung, Motordrehzahlregelung und jede Anwendung eignet, die analoge Steuerwerte erfordert.
Funktionen
- Zwei unabhängige Schieberegler: Bereich pro Regler 0–255
- Werte in Echtzeit: Sofortige Werteaktualisierung über WebSocket-Kommunikation
- PWM-kompatibel: 8-Bit-Werte (0–255) perfekt für Funktionen wie analogWrite()
- Visuelles Feedback: Anzeige der Werte in Echtzeit für jeden Slider
- Voreinstellungs-Schaltflächen: Schnelle Voreinstellungen für gängige Konfigurationen
- Touch- und Mausunterstützung: Funktioniert auf Desktop-, Tablet- und Mobilgeräten
- Responsives Design: Passt sich an verschiedene Bildschirmgrößen an
- Wertpersistenz: Die Schieberegler merken sich die letzte Position beim Neuladen der Seite
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 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.
Installationsanweisungen
Schnelle Schritte
Befolgen Sie diese Anweisungen Schritt für Schritt:
- Wenn dies das erste Mal ist, dass Sie den ESP32 verwenden, lesen Sie das Tutorial zur Einrichtung der Umgebung für ESP32 in der Arduino IDE.
- Schließen Sie das ESP32-Board mit einem USB-Kabel an Ihren Computer an.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Gehen Sie zu dem Libraries-Symbol in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables ESP32 WebApps", und finden Sie dann die DIYables ESP32 WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Sie werden aufgefordert, weitere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- In der Arduino IDE, gehe zu Datei Beispiele DIYables ESP32 WebApps WebSlider Beispiel, oder kopiere den obigen Code und füge 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);
}
- Konfigurieren Sie die WLAN-Anmeldeinformationen im Code, indem Sie diese Zeilen aktualisieren:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie in der Arduino IDE auf die Schaltfläche Hochladen, um den Code auf den ESP32 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Überprüfen Sie das Ergebnis im seriellen Monitor. Es sieht wie folgt aus.
COM6
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
Clear output
9600 baud
Newline
- Wenn Sie nichts sehen, starten Sie das ESP32-Board neu.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Beispiel: http://192.168.0.2
- Sie sehen die Startseite wie im untenstehenden Bild:
- Klicken Sie auf den Link 'Web Slider', dann sehen Sie die Benutzeroberfläche der Web Slider-App wie unten:
- Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /web-slider. Zum Beispiel: http://192.168.0.2/web-slider
- Versuchen Sie, die beiden Schieberegler zu bewegen, um analoge Werte (0-255) zu steuern, und beobachten Sie die Echtzeit-Rückmeldungen im Serial Monitor.
Kreative Anpassung - Den Code an Ihr Projekt anpassen
Standardwerte des Schiebereglers festlegen
Anfangspositionen der Schieberegler festlegen:
// Current slider values (0-255)
int slider1Value = 64; // Default 25% (64/255)
int slider2Value = 128; // Default 50% (128/255)
So verwenden Sie die Regler
Weboberflächen-Steuerelemente
Die Benutzeroberfläche des Schiebereglers bietet:
- Schieberegler 1: Erster Schieberegler mit Wertanzeige (0-255)
- Schieberegler 2: Zweiter Schieberegler mit Wertanzeige (0-255)
- Wertanzeige: Numerische Werte beider Schieberegler in Echtzeit
- Voreinstellungs-Schaltflächen: Schneller Zugriff auf gängige Werte (0%, 25%, 50%, 75%, 100%)
Bedienung der Schieberegler
Desktop (Maussteuerung)
- Klicken und Ziehen: Klicken Sie auf den Schiebereglergriff und ziehen Sie ihn, um den Wert anzupassen.
- Klick-Position: Klicken Sie irgendwo auf der Schieberegler-Spur, um zu diesem Wert zu springen.
- Feineinstellung: Verwenden Sie kleine Mausbewegungen für eine präzise Einstellung.
Mobil/Tablet (Touch-Steuerung)
- Berühren und Ziehen: Tippe den Schieberegler-Griff an und ziehe ihn in eine neue Position
- Position tippen: Tippe auf den Bereich des Schiebereglers, um den Wert festzulegen
- Glatte Bedienung: Fingerziehen sorgt für gleichmäßige Wertänderungen
Wertebereiche
Jeder Schieberegler bietet:
- Mindestwert: 0 (0% - vollständig ausgeschaltet)
- Maximalwert: 255 (100% - maximale Intensität)
- Auflösung: 256 diskrete Schritte (8-Bit-Präzision)
- PWM-Kompatibilität: Direkte Verwendung mit der Funktion analogWrite()
Programmierbeispiele
Grundlegender Schieberegler-Handler
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
});
}
LED-Helligkeitssteuerung
// 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));
});
}
Servo-Positionsregelung
#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) + "°");
});
}
Motordrehzahlregelung
// 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) + "%");
});
}
RGB-LED-Farbsteuerung
// 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));
});
}
Fortgeschrittene Programmiertechniken
Werteglättung
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());
}
}
Schwellenwertbasierte Regelung
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);
});
}
Voreinstellungswertsystem
// 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;
}
Beispiele für Hardwareintegration
LED-Streifensteuerung
// 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));
});
}
Lüfterdrehzahlregelung
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)) + "%");
});
}
Audio-Lautstärkeregler
// 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));
});
}
Fehlerbehebung
Häufige Probleme
- Schieberegler reagieren nicht
- Überprüfe die WebSocket-Verbindung in der Browser-Konsole
- Überprüfe die Netzwerkverbindung zwischen dem Gerät und dem Arduino
- Lade die Browser-Seite neu, um die Verbindung zurückzusetzen
- Überprüfe den seriellen Monitor auf Verbindungsfehler
2. Werte, die den vollen Bereich nicht erreichen
- Überprüfen Sie die Einstellungen des Schiebereglers in der Weboberfläche
- Überprüfen Sie Probleme bei der Wertezuordnung in der Callback-Funktion
- Testen Sie mit verschiedenen Browsern oder Geräten
- Ruckartige oder inkonsistente Steuerung
- Wertglättung für allmähliche Änderungen implementieren
- Netzwerklatenzprobleme überprüfen
- Entprellung für schnelle Wertänderungen hinzufügen
4. PWM-Ausgang funktioniert nicht
- Prüfen Sie, ob die Pins PWM unterstützen (ESP32-Pinbelegung prüfen)
- Stellen Sie sicher, dass analogWrite() mit den richtigen Pin-Nummern aufgerufen wird
- Überprüfen Sie die Hardwareverbindungen und Lastanforderungen
Debugging-Tipps
Umfassendes Debugging hinzufügen:
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("===================");
}
Projektideen
Lichtsteuerungsprojekte
- Helligkeitssteuerung der Raumbeleuchtung
- RGB-Farbmischschnittstelle
- Geschwindigkeitsregelung der LED-Streifen-Animation
- Helligkeitsregelung der Bühnenbeleuchtung
Projekte zur Motorsteuerung
- Roboter-Geschwindigkeitsregelung
- Lüfter-Drehzahlregelung
- Pumpendurchflussregelung
- Förderband-Geschwindigkeitsregelung
Audio-Projekte
- Lautstärkeregler-Oberfläche
- Ton- und Equalizersteuerung
- Soundeffektintensität
- Musikvisualisierungssteuerung
Heimautomatisierung
- Klimaregelung (Heiz-/Kühlintensität)
- Jalousienpositionsregelung
- Durchflussregelung des Bewässerungssystems
- Helligkeit und Lautstärke von Smart-Geräten
Integration mit anderen Beispielen
Kombinieren mit WebJoystick
Verwenden Sie Schieberegler für Geschwindigkeitsbegrenzungen und den Joystick für die Richtung:
// 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);
});
Kombinieren mit WebDigitalPins
Verwenden Sie Schieberegler, um PWM zu steuern, und digitale Pins zum Ein- oder Ausschalten:
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);
}
});
Nächste Schritte
Nachdem Sie das WebSlider-Beispiel gemeistert haben, versuchen Sie Folgendes:
- WebJoystick - Für die 2D-Richtungssteuerung
- WebDigitalPins - Für eine diskrete Ein/Aus-Steuerung
- WebMonitor - Zum Debuggen von Schiebereglerwerten
- MultipleWebApps - Das Kombinieren von Schiebereglern mit anderen Steuerelementen
Unterstützung
Für weitere Hilfe:
- Die API-Referenz-Dokumentation prüfen
- DIYables-Tutorials besuchen: https://esp32io.com/tutorials/diyables-esp32-webapps
- ESP32-Community-Foren