Arduino WebSlider-Beispiel – Tutorial zur Steueroberfläche mit zwei Schiebereglern
Überblick
Das WebSlider-Beispiel bietet zwei unabhängige Schieberegler, die über einen Webbrowser zugänglich sind. Für die Arduino Uno R4 WiFi- und DIYables STEM V4 IoT-Bildungsplattform entwickelt mit erweiterten analogen Fähigkeiten, Präzisionssteuerungsfunktionen und integrierten Lernmodulen zum Erlernen von PWM und analoger Elektronik. Jeder Schieberegler bietet Werte von 0–255, was sie perfekt macht für PWM-Steuerung, Helligkeitsregelung, Motorsteuerung und jede Anwendung, die analoge Kontrollwerte erfordert.
Funktionen
- Duale Schieberegler: Zwei unabhängige Schieberegler (jeweils im Bereich 0-255)
- Werte in Echtzeit: Sofortige Werteaktualisierungen über WebSocket-Kommunikation
- PWM-kompatibel: 8-Bit-Werte (0-255) perfekt für analogWrite()-Funktionen
- Visuelles Feedback: Echtzeit-Wertanzeige für jeden Regler
- Voreinstellungs-Buttons: Schnelle Voreinstellungswerte 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 Regler merken sich die letzte Position, wenn die Seite neu geladen wird
- Plattform-Erweiterbarkeit: Derzeit implementiert für Arduino Uno R4 WiFi, kann aber auf andere Hardware-Plattformen erweitert werden. Siehe DIYables_WebApps_ESP32
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino 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.
Installationsanleitung
Schnelle Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn dies das erste Mal ist, dass Sie den Arduino Uno R4 WiFi/DIYables STEM V4 IoT verwenden, lesen Sie das Tutorial zur Einrichtung der Umgebung für Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE.
- Schließen Sie das Arduino Uno R4/DIYables STEM V4 IoT-Board über ein USB-Kabel an Ihren Computer an.
- Öffnen Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende Arduino Uno R4-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port aus.
- Navigieren Sie zum Libraries-Symbol in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables WebApps", und finden Sie anschließend die DIYables WebApps-Bibliothek von DIYables.
- Klicken Sie auf Install, um die Bibliothek zu installieren.
- Sie werden dazu aufgefordert, einige weitere Bibliotheksabhängigkeiten zu installieren.
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- Im Arduino IDE gehen Sie zu Datei Beispiele DIYables 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: 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);
}
- 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 Hochladen-Schaltfläche, um Code auf den Arduino UNO R4/DIYables STEM V4 IoT 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: 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
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Wenn Sie nichts sehen, starten Sie das Arduino-Board neu.
- Notieren Sie die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Beispiel: http://192.168.0.2
- Sie sehen die Startseite wie im unten gezeigten Bild:
- Klicken Sie auf den Web Slider-Link; dann sehen Sie die Benutzeroberfläche der Web Slider-App wie unten dargestellt:
- Alternativ können Sie 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 das Feedback in Echtzeit im seriellen Monitor.
Kreative Anpassung – Den Code an Ihr Projekt anpassen
Standardwerte der Schieberegler festlegen
Anfangspositionen der Schieberegler konfigurieren:
// Current slider values (0-255)
int slider1Value = 64; // Default 25% (64/255)
int slider2Value = 128; // Default 50% (128/255)
Wie man Schieberegler verwendet
Steuerelemente der Weboberfläche
Die Schieberegler-Schnittstelle bietet:
- Schieberegler 1: Erster Schieberegler mit Wertanzeige (0–255)
- Schieberegler 2: Zweiter Schieberegler mit Wertanzeige (0–255)
- Wertanzeige: Echtzeitwerte für beide Schieberegler
- 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 Griff des Schiebereglers und ziehen Sie ihn, um den Wert anzupassen
- Klickposition: Klicken Sie irgendwo auf dem Sliderpfad, um zu diesem Wert zu springen
- Feinsteuerung: Verwenden Sie kleine Mausbewegungen für eine präzise Justierung
Mobil/Tablet (Touch-Steuerung)
- Berühren und Ziehen: Den Schieberegler-Griff berühren und zu einer neuen Position ziehen
- Position tippen: Tippen Sie auf die Schieberegler-Spur, um den Wert festzulegen
- Sanfte Steuerung: Fingerziehen sorgt für sanfte Wertänderungen
Wertebereiche
Jeder Schieberegler bietet:
- Minimalwert: 0 (0% - vollständig ausgeschaltet)
- Maximalwert: 255 (100% - maximale Intensität)
- Auflösung: 256 diskrete Stufen (8-Bit-Genauigkeit)
- 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));
});
}
#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 Techniken der Programmierung
Wertglä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 zur Hardware-Integration
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)) + "%");
});
}
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
1. Schieberegler reagieren nicht
- WebSocket-Verbindung in der Browser-Konsole überprüfen
- Netzwerkverbindung zwischen dem Gerät und dem Arduino überprüfen
- Browser-Seite aktualisieren, um die Verbindung zurückzusetzen
- Serial Monitor auf Verbindungsfehler überprüfen
- Werte erreichen nicht den vollen Wertebereich
- Überprüfen Sie die Bereichseinstellungen des Schiebereglers in der Weboberfläche
- Prüfen Sie auf 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 Veränderungen implementieren
- Netzwerk-Latenzprobleme prüfen
- Entprellung für schnelle Wertänderungen hinzufügen
4. PWM-Ausgang funktioniert nicht
- Überprüfen Sie, ob die Pins PWM unterstützen (prüfen Sie den Arduino-Pinout)
- Stellen Sie sicher, dass analogWrite() mit den richtigen Pin-Nummern aufgerufen wird
- Überprüfen Sie die Hardwareverbindungen und die Lastenanforderungen
Debug-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
- Geschwindigkeitssteuerung der LED-Streifenanimation
- Intensitätssteuerung der Bühnenbeleuchtung
Projekte zur Motorsteuerung
- Roboter-Geschwindigkeitsregelung
- Lüfter-Geschwindigkeitsregelung
- Pumpendurchflussregelung
- Förderband-Geschwindigkeitsregelung
Audio-Projekte
- Bedienoberfläche zur Lautstärkesteuerung
- Ton-/Equalizer-Steuerung
- Soundeffektintensität
- Steuerung der Musikvisualisierung
Heimautomatisierung
- Klimasteuerung (Heizungs-/Kühlungsintensität)
- Jalousie-Positionssteuerung
- Durchflusssteuerung des Bewässerungssystems
- Helligkeit/Lautstärke von Smart-Geräten
Integration mit anderen Beispielen
Kombinieren mit WebJoystick
Verwenden Sie Schieberegler für Geschwindigkeitsbegrenzungen und einen 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 (Pulsweitenmodulation) zu steuern, und digitale Pins zum Ein- und 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-Direktionssteuerung
- WebDigitalPins - Für die diskrete Ein/Aus-Steuerung
- WebMonitor - Zum Debuggen von Slider-Werten
- MultipleWebApps - Das Kombinieren von Schiebereglern mit anderen Steuerelementen
Unterstützung
Für weitere Hilfe:
- Überprüfen Sie die API-Referenzdokumentation
- Besuchen Sie die DIYables-Tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Foren der Arduino-Community