Arduino WebSlider Voorbeeld - Dual Slider Bedieningsinterface Tutorial
Overzicht
Het WebSlider voorbeeld biedt twee onafhankelijke slider bedieningspanelen die toegankelijk zijn via een webbrowser. Ontworpen voor Arduino Uno R4 WiFi en DIYables STEM V4 IoT educatief platform met verbeterde analoge mogelijkheden, precisiebesturingsfuncties, en ingebouwde educatieve modules voor het leren van PWM en analoge elektronica. Elke slider biedt waarden van 0-255, waardoor ze perfect zijn voor PWM-besturing, helderheidsaanpassing, motorsnelheidsbesturing, en elke toepassing die analoog-achtige besturingswaarden vereist.
Functies
- Dual Sliders: Twee onafhankelijke slider bedieningspanelen (0-255 bereik elk)
- Realtime Waarden: Directe waarde-updates via WebSocket communicatie
- PWM Compatibel: 8-bit waarden (0-255) perfect voor analogWrite() functies
- Visuele Feedback: Realtime waarde-weergave voor elke slider
- Vooraf Ingestelde Knoppen: Snelle toegang tot veelgebruikte waarden
- Touch & Muis Ondersteuning: Werkt op desktop, tablet, en mobiele apparaten
- Responsief Ontwerp: Past zich aan aan verschillende schermformaten
- Waarde Persistentie: Sliders onthouden laatste positie bij pagina herlaadbeurt
- Platform Uitbreidbaar: Momenteel geïmplementeerd voor Arduino Uno R4 WiFi, maar kan worden uitgebreid voor andere hardware platforms. Zie DIYables_WebApps_ESP32
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 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.
Setup Instructies
Snelle Stappen
Volg deze instructies stap voor stap:
- Als dit uw eerste keer is met de Arduino Uno R4 WiFi/DIYables STEM V4 IoT, raadpleeg de tutorial over het instellen van de omgeving voor Arduino Uno R4 WiFi/DIYables STEM V4 IoT in de Arduino IDE.
- Verbind het Arduino Uno R4/DIYables STEM V4 IoT board met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste Arduino Uno R4 board (bijvoorbeeld Arduino Uno R4 WiFi) en COM-poort.
- Navigeer naar het Libraries icoon in de linker balk van de Arduino IDE.
- Zoek naar "DIYables WebApps", vind vervolgens de DIYables WebApps bibliotheek door DIYables
- Klik op de Install knop om de bibliotheek te installeren.
- U wordt gevraagd om enkele andere bibliotheekafhankelijkheden te installeren
- Klik op de Install All knop om alle bibliotheekafhankelijkheden te installeren.
- In Arduino IDE, ga naar File Examples DIYables WebApps WebSlider voorbeeld, of kopieer de bovenstaande code en plak deze in de editor van 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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 <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
UnoR4ServerFactory 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 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);
}
- Configureer WiFi-inloggegevens in de code door deze regels bij te werken:
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 te uploaden naar Arduino UNO R4/DIYables STEM V4 IoT
- Open de Serial Monitor
- Bekijk het resultaat in de Serial Monitor. Het ziet eruit zoals hieronder
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Slider Example
INFO: Added app /
INFO: Added app /web-slider
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
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, herstart het Arduino board.
- Noteer het weergegeven IP-adres en voer dit adres in de adresbalk van een webbrowser op uw smartphone of PC in.
- Voorbeeld: http://192.168.0.2
- U ziet de homepage zoals in onderstaande afbeelding:
- Klik op de Web Slider link, u ziet de Web Slider app's UI zoals hieronder:
- Of u kunt ook direct toegang krijgen tot de pagina 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 besturen en bekijk de realtime feedback in de Serial Monitor.
Creatieve Aanpassing - Pas de Code aan uw Project aan
Standaard Slider Waarden Instellen
Configureer initiële slider posities:
// Huidige slider waarden (0-255)
int slider1Value = 64; // Standaard 25% (64/255)
int slider2Value = 128; // Standaard 50% (128/255)
Hoe de Sliders te Gebruiken
Web Interface Bedieningspanelen
De slider interface biedt:
- Slider 1: Eerste bedieningsslider met waarde-weergave (0-255)
- Slider 2: Tweede bedieningsslider met waarde-weergave (0-255)
- Waarde Weergave: Realtime numerieke waarden voor beide sliders
- Voorinstelling Knoppen: Snelle toegang tot veelgebruikte waarden (0%, 25%, 50%, 75%, 100%)
Bedienen van de Sliders
Desktop (Muisbediening)
- Klik en Sleep: Klik op slider handgreep en sleep om waarde aan te passen
- Klik Positie: Klik ergens op slider baan om naar die waarde te springen
- Fijne Besturing: Gebruik kleine muisbewegingen voor precieze aanpassing
Mobiel/Tablet (Touch Bediening)
- Aanraken en Slepen: Raak slider handgreep aan en sleep naar nieuwe positie
- Tik Positie: Tik op slider baan om waarde in te stellen
- Soepele Besturing: Vinger slepen zorgt voor soepele waardeveranderingen
Waardebereiken
Elke slider biedt:
- Minimum Waarde: 0 (0% - volledig uit)
- Maximum Waarde: 255 (100% - maximale intensiteit)
- Resolutie: 256 discrete stappen (8-bit precisie)
- PWM Compatibiliteit: Direct gebruik met analogWrite() functie
Programmeervoorbeelden
Basis Slider Handler
void setup() {
// Stel slider callback in voor waardeveranderingen
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Bewaar de ontvangen waarden
slider1Value = slider1;
slider2Value = slider2;
// Print slider waarden (0-255)
Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2));
// Voeg hier uw besturingslogica toe
});
}
LED Helderheidsbesturing
// 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() {
// Configureer LED pins als uitgangen
pinMode(LED1_PIN, OUTPUT);
pinMode(LED2_PIN, OUTPUT);
// Stel initiële helderheid in
analogWrite(LED1_PIN, slider1Value);
analogWrite(LED2_PIN, slider2Value);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Bewaar waarden
slider1Value = slider1;
slider2Value = slider2;
// Bestuur LED helderheid direct (0-255 PWM)
analogWrite(LED1_PIN, slider1);
analogWrite(LED2_PIN, slider2);
Serial.println("LED1 Helderheid: " + String(slider1) +
", LED2 Helderheid: " + String(slider2));
});
}
Servo Positiebesturing
#include <Servo.h>
Servo servo1, servo2;
void setup() {
// Bevestig servo's aan PWM pins
servo1.attach(9);
servo2.attach(10);
// Stel initiële posities in
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 waarden (0-255) naar servo hoeken (0-180°)
int angle1 = map(slider1, 0, 255, 0, 180);
int angle2 = map(slider2, 0, 255, 0, 180);
// Beweeg servo's naar berekende posities
servo1.write(angle1);
servo2.write(angle2);
Serial.println("Servo1: " + String(angle1) + "°, Servo2: " + String(angle2) + "°");
});
}
Motorsnelheidsbesturing
// Motor driver pins
const int MOTOR1_PWM = 9; // Motor 1 snelheidsbesturing
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; // Motor 2 snelheidsbesturing
const int MOTOR2_DIR1 = 4; // Motor 2 richting pin 1
const int MOTOR2_DIR2 = 5; // Motor 2 richting pin 2
void setup() {
// Configureer 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);
// Stel initiële motor richtingen in (voorwaarts)
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;
// Bestuur motorsnelheden direct
analogWrite(MOTOR1_PWM, slider1);
analogWrite(MOTOR2_PWM, slider2);
// Bereken percentage voor weergave
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 Kleurbesturing
// 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;
// Gebruik sliders om RGB componenten te besturen
// Slider 1 bestuurt rood intensiteit
// Slider 2 bestuurt blauw intensiteit
// Groen wordt berekend op basis 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) {
// Stel doelwaarden in voor soepele overgang
smoother1.setTarget(slider1);
smoother2.setTarget(slider2);
});
}
void loop() {
server.loop();
// Update afgevlakte waarden
bool changed1 = smoother1.update();
bool changed2 = smoother2.update();
if (changed1 || changed2) {
// Pas afgevlakte waarden toe op hardware
analogWrite(9, smoother1.getCurrentValue());
analogWrite(10, smoother2.getCurrentValue());
}
}
Drempelwaarde-gebaseerde Besturing
void setupThresholdControl() {
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Drempelwaarde-gebaseerde besturing voor discrete uitgangen
const int LOW_THRESHOLD = 85; // 33%
const int MEDIUM_THRESHOLD = 170; // 66%
// Bestuur digitale uitgangen op basis van slider 1 drempelwaarden
if (slider1 < LOW_THRESHOLD) {
// Laag niveau: Schakel alle uitgangen uit
digitalWrite(2, LOW);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
} else if (slider1 < MEDIUM_THRESHOLD) {
// Medium niveau: Schakel eerste uitgang in
digitalWrite(2, HIGH);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
} else {
// Hoog niveau: Schakel alle uitgangen in
digitalWrite(2, HIGH);
digitalWrite(3, HIGH);
digitalWrite(4, HIGH);
}
// Gebruik slider 2 voor analoge PWM besturing
analogWrite(9, slider2);
});
}
Voorinstelling Waardensysteem
// Vooraf gedefinieerde voorinstelling waarden
const int PRESETS[][2] = {
{0, 0}, // Voorinstelling 0: Beide uit
{64, 128}, // Voorinstelling 1: Laag/Medium
{128, 128}, // Voorinstelling 2: Beide medium
{255, 128}, // Voorinstelling 3: Hoog/Medium
{255, 255} // Voorinstelling 4: Beide 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);
// Verstuur bijgewerkte waarden naar web interface
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
Serial.println("Voorinstelling toegepast " + String(presetNumber) +
": " + String(slider1Value) + ", " + String(slider2Value));
}
}
void setupPresetSystem() {
// U kunt voorinstellingen activeren op basis van andere inputs
// Bijvoorbeeld, digitale pins lezen voor voorinstelling knoppen
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Uw normale slider behandeling
analogWrite(9, slider1);
analogWrite(10, slider2);
});
}
void loop() {
server.loop();
// Controleer op voorinstelling trigger condities
// Voorbeeld: Lees knoppen verbonden aan digitale pins
static bool lastButton = false;
bool currentButton = digitalRead(7); // Voorinstelling knop op pin 7
if (currentButton && !lastButton) { // Knop ingedrukt
static int currentPreset = 0;
applyPreset(currentPreset);
currentPreset = (currentPreset + 1) % 5; // Doorloop voorinstellingen
}
lastButton = currentButton;
}
Hardware Integratie Voorbeelden
LED Strip Besturing
// Voor WS2812B of vergelijkbare adresseerbare LED strips
// (vereist aanvullende bibliotheken zoals FastLED of Adafruit NeoPixel)
const int LED_STRIP_PIN = 6;
const int NUM_LEDS = 30;
void setupLEDStrip() {
// Initialiseer LED strip (afhankelijk van gebruikte bibliotheek)
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Slider 1 bestuurt helderheid (0-255)
// Slider 2 bestuurt kleurtemperatuur of tint
uint8_t brightness = slider1;
uint8_t hue = slider2;
// Update LED strip (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));
});
}
Ventilatorsnelheidsbesturing
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;
// Bestuur ventilatorsnelheden met minimum drempelwaarde voor opstart
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("Ventilator1: " + String(map(fan1Speed, 0, 255, 0, 100)) + "%, " +
"Ventilator2: " + String(map(fan2Speed, 0, 255, 0, 100)) + "%");
});
}
Audio Volume Besturing
// Voor het besturen van audio versterker of volume IC
const int VOLUME1_PIN = 9; // PWM uitgang naar volume besturing
const int VOLUME2_PIN = 10; // Tweede kanaal of toon besturing
void setupAudioControl() {
pinMode(VOLUME1_PIN, OUTPUT);
pinMode(VOLUME2_PIN, OUTPUT);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Gebruik logaritmische schaling voor betere audio perceptie
float volume1 = pow(slider1 / 255.0, 2) * 255; // Kwadraat 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));
});
}
Probleemoplossing
Veelvoorkomende Problemen
1. Sliders reageren niet
- Controleer WebSocket verbinding in browser console
- Verifieer netwerkverbinding tussen apparaat en Arduino
- Ververs browserpagina om verbinding te resetten
- Controleer Serial Monitor voor verbindingsfouten
2. Waarden bereiken niet volledige bereik
- Verifieer slider bereik instellingen in web interface
- Controleer voor waarde mapping problemen in callback functie
- Test met verschillende browsers of apparaten
3. Schokkerige of inconsistente besturing
- Implementeer waarde afvlakking voor geleidelijke veranderingen
- Controleer voor netwerk latentie problemen
- Voeg debouncing toe voor snelle waardeveranderingen
4. PWM uitgang werkt niet
- Verifieer dat pins PWM ondersteunen (controleer Arduino pinout)
- Zorg ervoor dat analogWrite() wordt aangeroepen met juiste pin nummers
- Controleer hardware verbindingen en belasting vereisten
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
Verlichtingsbesturing Projecten
- Kamerverlichting helderheidsbesturing
- RGB kleurmenginterface
- LED strip animatiesnelheidsbesturing
- Podiumverlichting intensiteitsbesturing
Motorbesturing Projecten
- Robot snelheidsbesturing
- Ventilatorsnelheid regulatie
- Pomp stroombesturing
- Transportband snelheid
Audio Projecten
- Volume besturingsinterface
- Toon/equalizer besturing
- Geluidseffect intensiteit
- Muziek visualisatie besturing
Domotica
- Klimaatbesturing (verwarming/koeling intensiteit)
- Raamjaloezie positiebesturing
- Irrigatiesysteem stroombesturing
- 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; // Gebruik slider 1 als globale snelheidslimiet
});
// In WebJoystick callback
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Schaal joystick waarden door slider-gecontroleerde 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 om PWM te besturen en digitale pins voor aan/uit:
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Pas alleen PWM toe als corresponderende digitale pins 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, probeer:
- WebJoystick - Voor 2D directionele besturing
- WebDigitalPins - Voor discrete aan/uit besturing
- WebMonitor - Voor debugging slider waarden
- MultipleWebApps - Combineren van sliders met andere besturingspanelen
Ondersteuning
Voor aanvullende hulp:
- Controleer de API Reference documentatie
- Bezoek DIYables tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Arduino 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