ESP32 WebSlider Voorbeeld - Dubbele Slider Bedieningsinterface Handleiding
Overzicht
Het WebSlider voorbeeld biedt twee onafhankelijke sliderbedieningen die via een webbrowser toegankelijk zijn. Ontworpen voor het ESP32 educatieplatform met verbeterde analoge mogelijkheden, nauwkeurige besturingsfuncties en ingebouwde educatieve modules voor het leren van PWM en analoge elektronica. Elke slider geeft waarden van 0-255, wat ze perfect maakt voor PWM-sturing, helderheidsaanpassing, motorsnelheidsregeling en elke toepassing die analoge-achtige waardecontroles vereist.
Kenmerken
- Dubbele Sliders: Twee onafhankelijke sliderbedieningen (bereik 0-255 elk)
- Realtime Waarden: Directe waarde-updates via WebSocket-communicatie
- PWM Compatibel: 8-bit waarden (0-255) ideaal voor analogWrite() functies
- Visuele Feedback: Realtime waardevertoning voor elke slider
- Preset Knoppen: Snelle presets voor veelvoorkomende instellingen
- Touch & Muisondersteuning: Werkt op desktop, tablet en mobiele apparaten
- Responsief Ontwerp: Past zich aan verschillende schermformaten aan
- Waarde Persistentie: Sliders onthouden laatste stand bij pagina-herlaad
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Installatie-instructies
Snel aan de slag
Volg deze stappen één voor één:
- Als dit uw eerste keer is met de ESP32, raadpleeg dan de handleiding over het instellen van de omgeving voor ESP32 in de Arduino IDE.
- Verbind de ESP32-module met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste ESP32-bord (bijv. ESP32 Dev Module) en de juiste COM-poort.
- Ga naar het Libraries-icoon in de linker balk van de Arduino IDE.
- Zoek op "DIYables ESP32 WebApps" en selecteer de DIYables ESP32 WebApps Library van DIYables.
- Klik op de Installeren-knop om de bibliotheek te installeren.
- U wordt gevraagd om eventuele bijkomende bibliotheekafhankelijkheden te installeren.
- Klik op Alles installeren om alle benodigde afhankelijkheden te installeren.
- In de Arduino IDE gaat u naar Bestand Voorbeelden DIYables ESP32 WebApps WebSlider voorbeeld, of kopieer de bovenstaande code en plak deze in de editor van de Arduino IDE
/*
* 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);
}
- Stel de WiFi-gegevens in in de code door de volgende regels aan te passen:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Upload-knop in Arduino IDE om de code naar de ESP32 te uploaden.
- Open de Seriële Monitor.
- Bekijk het resultaat in de Seriële Monitor. Dit ziet er ongeveer zo uit:
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
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
==========================================
- Als u niets ziet, start dan de ESP32-module opnieuw op.
- Noteer het weergegeven IP-adres en voer dit in de adresbalk van een webbrowser op uw smartphone of pc in.
- Bijvoorbeeld: http://192.168.0.2
- U ziet dan de homepagina zoals in onderstaande afbeelding:
- Klik op de Web Slider-link en u ziet de Web Slider gebruikersinterface zoals hieronder:
- U kunt de pagina ook direct openen via het IP-adres gevolgd door /web-slider. Bijvoorbeeld: http://192.168.0.2/web-slider
- Probeer de twee sliders te bewegen om analoge waarden (0-255) te regelen en zie de realtime terugkoppeling in de Seriële Monitor.
Creatieve Aanpassingen - Pas de Code aan voor uw Project
Stel standaard sliderwaarden in
Configureer de beginposities van de sliders:
// Huidige sliderwaarden (0-255)
int slider1Value = 64; // Standaard 25% (64/255)
int slider2Value = 128; // Standaard 50% (128/255)
Hoe de Sliders te Gebruiken
Web Interface Bediening
De sliderinterface biedt:
- Slider 1: Eerste controleslider met waardevertoning (0-255)
- Slider 2: Tweede controleslider met waardevertoning (0-255)
- Waardeweergave: Realtime numerieke waarden voor beide sliders
- Preset Knoppen: Snelle toegang tot veelvoorkomende waarden (0%, 25%, 50%, 75%, 100%)
Bedieningswijze van de Sliders
Desktop (Muisbediening)
- Klik en Sleep: Klik op de sliderknop en sleep om de waarde aan te passen.
- Klikpositie: Klik ergens op de sliderlijn om direct naar die waarde te springen.
- Fijne Afstelling: Gebruik kleine muisbewegingen voor nauwkeurige aanpassingen.
Mobiel/Tablet (Touchbediening)
- Aanraken en Slepen: Raak de sliderknop aan en sleep naar een nieuwe positie.
- Tikpositie: Tik op de sliderbaan om een waarde in te stellen.
- Soepel Besturen: Vingerbewegingen zorgen voor vloeiende waardeveranderingen.
Waardebereik
Elke slider levert:
- Minimumwaarde: 0 (0% - helemaal uit)
- Maximumwaarde: 255 (100% - maximale intensiteit)
- Resolutie: 256 discrete stappen (8-bit precisie)
- PWM-compatibiliteit: Direct gebruik met de analogWrite()-functie
Programmeervoorbeelden
Basis Slider Handler
void setup() {
// Instellen callback voor sliderwaarde veranderingen
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Ontvangen waarden opslaan
slider1Value = slider1;
slider2Value = slider2;
// Sliderwaarden (0-255) afdrukken
Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2));
// Voeg hier uw stuurlogica toe
});
}
LED Helderheidsregeling
// Pin-definities voor PWM-LEDs
const int LED1_PIN = 9; // PWM-pin voor eerste LED
const int LED2_PIN = 10; // PWM-pin voor tweede LED
void setup() {
// LED-pinnen configureren als uitgang
pinMode(LED1_PIN, OUTPUT);
pinMode(LED2_PIN, OUTPUT);
// Beginhelderheid instellen
analogWrite(LED1_PIN, slider1Value);
analogWrite(LED2_PIN, slider2Value);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Waarden opslaan
slider1Value = slider1;
slider2Value = slider2;
// LED-helderheid direct regelen (0-255 PWM)
analogWrite(LED1_PIN, slider1);
analogWrite(LED2_PIN, slider2);
Serial.println("LED1 Helderheid: " + String(slider1) +
", LED2 Helderheid: " + String(slider2));
});
}
Servo Positie Controle
#include <Servo.h>
Servo servo1, servo2;
void setup() {
// Servos koppelen aan PWM-pinnen
servo1.attach(9);
servo2.attach(10);
// Beginposities instellen
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;
// Sliderwaarden (0-255) omzetten naar servo hoeken (0-180°)
int angle1 = map(slider1, 0, 255, 0, 180);
int angle2 = map(slider2, 0, 255, 0, 180);
// Servos naar berekende posities verplaatsen
servo1.write(angle1);
servo2.write(angle2);
Serial.println("Servo1: " + String(angle1) + "°, Servo2: " + String(angle2) + "°");
});
}
Motorsnelheid Besturing
// Motor driver pinnen
const int MOTOR1_PWM = 9; // Motorsnelheid 1 aansturing
const int MOTOR1_DIR1 = 2; // Motor 1 richting pin 1
const int MOTOR1_DIR2 = 3; // Motor 1 richting pin 2
const int MOTOR2_PWM = 10; // Motorsnelheid 2 aansturing
const int MOTOR2_DIR1 = 4; // Motor 2 richting pin 1
const int MOTOR2_DIR2 = 5; // Motor 2 richting pin 2
void setup() {
// Motorpinnen configureren
pinMode(MOTOR1_PWM, OUTPUT);
pinMode(MOTOR1_DIR1, OUTPUT);
pinMode(MOTOR1_DIR2, OUTPUT);
pinMode(MOTOR2_PWM, OUTPUT);
pinMode(MOTOR2_DIR1, OUTPUT);
pinMode(MOTOR2_DIR2, OUTPUT);
// Begin motorrichtingen instellen (vooruit)
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;
// Motorsnelheden direct regelen
analogWrite(MOTOR1_PWM, slider1);
analogWrite(MOTOR2_PWM, slider2);
// Percentage voor weergave berekenen
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 Kleurregeling
// RGB LED pinnen
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;
// Sliders gebruiken om RGB-onderdelen te regelen
// Slider 1 regelt rood intensiteit
// Slider 2 regelt blauw intensiteit
// Groen wordt berekend als gemiddelde van beide sliders
int redValue = slider1;
int blueValue = slider2;
int greenValue = (slider1 + slider2) / 2; // Gemiddelde van beide 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));
});
}
Geavanceerde Programmeertechnieken
Waarde Afvlakking
class SliderSmoother {
private:
int currentValue = 0;
int targetValue = 0;
unsigned long lastUpdate = 0;
const int SMOOTH_RATE = 5; // Verandering per update-cyclus
public:
void setTarget(int target) {
targetValue = target;
}
int getCurrentValue() {
return currentValue;
}
bool update() {
if (millis() - lastUpdate > 10) { // Update elke 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) {
// Target-waarden instellen voor vloeiende overgang
smoother1.setTarget(slider1);
smoother2.setTarget(slider2);
});
}
void loop() {
server.loop();
// Gevlakte waarden updaten
bool changed1 = smoother1.update();
bool changed2 = smoother2.update();
if (changed1 || changed2) {
// Gevlakte waarden toepassen op hardware
analogWrite(9, smoother1.getCurrentValue());
analogWrite(10, smoother2.getCurrentValue());
}
}
Drempelgebaseerde Sturing
void setupThresholdControl() {
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Drempelgebaseerde digitale outputs aansturen
const int LOW_THRESHOLD = 85; // 33%
const int MEDIUM_THRESHOLD = 170; // 66%
// Digitale outputs regelen op basis van slider 1 drempels
if (slider1 < LOW_THRESHOLD) {
// Laag niveau: alle outputs uit
digitalWrite(2, LOW);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
} else if (slider1 < MEDIUM_THRESHOLD) {
// Midden niveau: eerste output aan
digitalWrite(2, HIGH);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
} else {
// Hoog niveau: alle outputs aan
digitalWrite(2, HIGH);
digitalWrite(3, HIGH);
digitalWrite(4, HIGH);
}
// Slider 2 gebruiken voor analoge PWM sturing
analogWrite(9, slider2);
});
}
Preset Waardesysteem
// Vooraf gedefinieerde presets
const int PRESETS[][2] = {
{0, 0}, // Preset 0: allebei uit
{64, 128}, // Preset 1: laag/midden
{128, 128}, // Preset 2: beide midden
{255, 128}, // Preset 3: hoog/midden
{255, 255} // Preset 4: beide maximum
};
void applyPreset(int presetNumber) {
if (presetNumber >= 0 && presetNumber < 5) {
slider1Value = PRESETS[presetNumber][0];
slider2Value = PRESETS[presetNumber][1];
// Hardware bijwerken
analogWrite(9, slider1Value);
analogWrite(10, slider2Value);
// Waarden naar webinterface sturen
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
Serial.println("Preset toegepast " + String(presetNumber) +
": " + String(slider1Value) + ", " + String(slider2Value));
}
}
void setupPresetSystem() {
// U kunt presets activeren via andere inputs
// Bijvoorbeeld digitale pinnen lezen voor preset knoppen
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Normale sliderafhandeling
analogWrite(9, slider1);
analogWrite(10, slider2);
});
}
void loop() {
server.loop();
// Controleren op preset triggercondities
// Bijvoorbeeld knoppen lezen die verbonden zijn met digitale pinnen
static bool lastButton = false;
bool currentButton = digitalRead(7); // Preset knop op pin 7
if (currentButton && !lastButton) { // Knop ingedrukt
static int currentPreset = 0;
applyPreset(currentPreset);
currentPreset = (currentPreset + 1) % 5; // Doorloop presets
}
lastButton = currentButton;
}
Voorbeelden van Hardware Integratie
LED-strip Besturing
// Voor WS2812B of vergelijkbare addressable LED-strips
// (vereist extra bibliotheken zoals FastLED of Adafruit NeoPixel)
const int LED_STRIP_PIN = 6;
const int NUM_LEDS = 30;
void setupLEDStrip() {
// LED-strip initialiseren (afhankelijk van gebruikte bibliotheek)
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Slider 1 regelt helderheid (0-255)
// Slider 2 regelt kleurtint of kleurtemperatuur
uint8_t brightness = slider1;
uint8_t hue = slider2;
// LED-strip bijwerken (voorbeeld met conceptuele functies)
// strip.setBrightness(brightness);
// strip.fill(CHSV(hue, 255, 255));
// strip.show();
Serial.println("LED Strip - Helderheid: " + String(brightness) +
", Tint: " + String(hue));
});
}
Ventilator Snelheidsregeling
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;
// Ventilatorsnelheden regelen met minimumdrempel voor opstarten
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)) + "%");
});
}
Audiovolume Besturing
// Voor besturing van audioversterker of volumeregeling IC
const int VOLUME1_PIN = 9; // PWM-uitgang voor volumeregeling
const int VOLUME2_PIN = 10; // Tweede kanaal of toonregeling
void setupAudioControl() {
pinMode(VOLUME1_PIN, OUTPUT);
pinMode(VOLUME2_PIN, OUTPUT);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Logaritmische schaal gebruiken voor betere audio-perceptie
float volume1 = pow(slider1 / 255.0, 2) * 255; // Kwadratische wet
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));
});
}
Problemen Oplossen
Veelvoorkomende Problemen
1. Sliders reageren niet
- Controleer de WebSocket-verbinding in de browserconsole
- Verifieer netwerkaansluiting tussen apparaat en Arduino
- Vernieuw de browserpagina om de verbinding te resetten
- Controleer de Seriële Monitor op verbindingsfouten
2. Waarden bereiken niet het volledige bereik
- Controleer sliderbereiksinstellingen in de webinterface
- Controleer op problemen met waardemapping in callback-functie
- Test met andere browsers of apparaten
3. Stotterende of inconsistente sturing
- Implementeer waarde-afvlakking voor geleidelijke veranderingen
- Controleer netwerkvertragingen
- Voeg debounce toe voor snelle waardeveranderingen
4. PWM-uitgang werkt niet
- Controleer of de pinnen PWM ondersteunen (raadpleeg ESP32 pinout)
- Zorg dat analogWrite() met correcte pinnummers wordt aangeroepen
- Controleer hardwareverbindingen en belastingsvereisten
Debug Tips
Voeg uitgebreide debugging toe:
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("===================");
}
Projectideeën
Verlichtingsprojecten
- Helderheidsregeling van kamerlicht
- RGB kleurmenging interface
- LED-strip animatiesnelheidsregeling
- Podiumverlichting intensiteitsregeling
Motorsturing Projecten
- Robotsnelheidsregeling
- Ventilator snelheidsregeling
- Pomp debietregeling
- Transportband snelheid
Audio Projecten
- Volume regeling interface
- Toon-/equalizerregeling
- Geluidseffectintensiteit
- Muziekvisualisatie besturing
Home Automation
- Klimaatregeling (verwarmen/koelen intensiteit)
- Jaloezies uitpositie regeling
- Irrigatiesysteem debietregeling
- Slimme apparaat helderheid/volume
Integratie met Andere Voorbeelden
Combineren met WebJoystick
Gebruik sliders voor snelheidslimieten en joystick voor richting:
// Globale snelheidslimiet van sliders
int maxSpeed = 255;
// In WebSlider callback
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
maxSpeed = slider1; // Slider 1 als globale snelheidslimiet
});
// In WebJoystick callback
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Schaal joystickwaarden op basis van door slider ingestelde snelheidslimiet
int scaledX = map(x, -100, 100, -maxSpeed, maxSpeed);
int scaledY = map(y, -100, 100, -maxSpeed, maxSpeed);
controlRobot(scaledX, scaledY);
});
Combineren met WebDigitalPins
Gebruik sliders voor PWM en digitale pinnen voor aan/uit:
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// PWM alleen toepassen als corresponderende digitale pinnen AAN zijn
if (webDigitalPinsPage.getPinState(2)) {
analogWrite(9, slider1);
} else {
analogWrite(9, 0);
}
if (webDigitalPinsPage.getPinState(3)) {
analogWrite(10, slider2);
} else {
analogWrite(10, 0);
}
});
Volgende Stappen
Na het beheersen van het WebSlider voorbeeld kunt u:
- WebJoystick - Voor 2D richtingsbesturing
- WebDigitalPins - Voor discrete aan/uit sturing
- WebMonitor - Voor het debuggen van sliderwaarden
- MultipleWebApps - Combineren van sliders met andere bedieningen
Ondersteuning
Voor aanvullende hulp:
- Raadpleeg de API Reference documentatie
- Bezoek DIYables tutorials: https://esp32io.com/tutorials/diyables-esp32-webapps
- ESP32 community forums
Gerelateerde Tutorials
📱 Aanbevolen apps
English for KidsSpelenderwijs Engels leren voor jonge kinderen.Ontdek het opGoogle PlayBeschikbaar in deApp Store
Bubble NoteZelfverwijderende notities – schrijf ze als berichten.Ontdek het opGoogle PlayBeschikbaar in deApp Store
Didn't BuyVersla impulsaankopen en bespaar meer.Ontdek het opGoogle PlayBeschikbaar in deApp Store
Knowledge PathOefentoetsen om alles te leren.Ontdek het opGoogle PlayBeschikbaar in deApp Store