Arduino WebJoystick-Beispiel – Tutorial zur virtuellen Joystick-Steuerung
Überblick
Das WebJoystick-Beispiel erstellt eine virtuelle Joystick-Oberfläche, die von jedem Webbrowser aus zugänglich ist. Entworfen für die Arduino Uno R4 WiFi- und DIYables STEM V4 IoT-Bildungsplattform mit erweiterten Robotik-Fähigkeiten, integrierten Motorsteuerungsfunktionen und nahtloser Integration mit Robotik-Lernmodulen. Perfekt zum Steuern von Robotern, Fahrzeugen oder jedem System, das eine 2D-Positionseingabe erfordert.
Funktionen
- Virtueller Joystick: Interaktive Joystick-Steuerung über die Weboberfläche
- Koordinaten in Echtzeit: X-/Y-Werte von -100 bis +100 für präzise Steuerung
- Touch- und Mausunterstützung: Funktioniert auf Desktop-, Tablet- und Mobilgeräten
- Konfigurierbare Auto-Rückkehr-Funktion: Option, dass der Joystick nach dem Loslassen in die Mitte zurückkehrt
- Empfindlichkeitsregelung: Einstellbare Empfindlichkeit, um übermäßige Aktualisierungen zu verhindern
- Visuelles Feedback: Echtzeit-Positionsanzeige und Koordinatenwerte
- WebSocket-Kommunikation: Sofortige Reaktion ohne Seitenaktualisierung
- Mittelposition: Deutlicher Indikator der Mittelposition für eine neutrale Steuerung
- Plattform-Erweiterbarkeit: Derzeit für Arduino Uno R4 WiFi implementiert, kann jedoch 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.
Installationsanweisungen
Schnelle Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn dies das erste Mal ist, dass Sie das Arduino Uno R4 WiFi/DIYables STEM V4 IoT verwenden, lesen Sie das Tutorial zum Einrichten 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.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das geeignete Arduino Uno R4-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port aus.
- Navigieren Sie zum Libraries-Symbol in der linken Seitenleiste der Arduino IDE.
- Suchen Sie "DIYables WebApps", und finden Sie dann die DIYables WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Schaltfläche Install, 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.
- Im Arduino IDE gehen Sie zu Datei Beispiele DIYables WebApps WebJoystick Beispiel, oder kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Arduino IDE ein
/*
* DIYables WebApp Library - Web Joystick Example
*
* This example demonstrates the Web Joystick feature:
* - Interactive joystick control via web interface
* - Real-time X/Y coordinate values (-100 to +100)
* - Control pins based on joystick position
*
* 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]/webjoystick
*/
#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
// MEMORY SAFETY FIX: Use static factory to avoid stack object lifetime issues
static UnoR4ServerFactory serverFactory; // Static ensures lifetime matches program
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
// Configure joystick with autoReturn=false and sensitivity=5 (minimum 5% change to trigger updates)
DIYablesWebJoystickPage webJoystickPage(false, 5);
// Variables to store current joystick values
int currentJoystickX = 0;
int currentJoystickY = 0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: initialize your hardware pins here
Serial.println("DIYables WebApp - Web Joystick Example");
// Add home and web joystick pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webJoystickPage);
// 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 joystick callback for position changes
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Store the received values
currentJoystickX = x;
currentJoystickY = y;
// Print joystick position values (-100 to +100)
Serial.println("Joystick - X: " + String(x) + ", Y: " + String(y));
// TODO: Add your control logic here based on joystick position
// Examples:
// - Control motors: if (x > 50) { /* move right */ }
// - Control servos: servo.write(map(y, -100, 100, 0, 180));
// - Control LEDs: analogWrite(LED_PIN, map(abs(x), 0, 100, 0, 255));
// - Send commands to other devices via Serial, I2C, SPI, etc.
});
// Optional: Handle requests for current joystick values (when web page loads)
webJoystickPage.onJoystickValueToWeb([]() {
// Send the stored joystick values back to the web client
webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY);
Serial.println("Web client requested values - Sent to Web: X=" + String(currentJoystickX) + ", Y=" + String(currentJoystickY));
});
// You can change configuration at runtime:
// webJoystickPage.setAutoReturn(false); // Disable auto-return
// webJoystickPage.setSensitivity(10.0); // Only send updates when joystick moves >10% (less sensitive)
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// TODO: Add your main application code here
delay(10);
}
- Konfigurieren Sie die WLAN-Zugangsdaten 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 Upload, um Code auf den Arduino UNO R4/DIYables STEM V4 IoT hochzuladen.
- Öffnen Sie den Serial Monitor.
- Schauen Sie sich das Ergebnis im Serial Monitor an. Es sieht so aus, wie unten dargestellt.
COM6
DIYables WebApp - Web Joystick Example
INFO: Added app /
INFO: Added app /web-joystick
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 Joystick: http://192.168.0.2/web-joystick
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Wenn Sie nichts sehen, starten Sie das Arduino-Board neu.
- Notieren Sie sich 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 untenstehenden Bild:
- Klicken Sie auf den Web-Joystick-Link, dann sehen Sie die Benutzeroberfläche der Web-Joystick-App wie unten:
- Oder du kannst die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /web-joystick. Zum Beispiel: http://192.168.0.2/web-joystick
- Versuche, den virtuellen Joystick zu steuern, indem du im Joystick-Bereich klickst und ziehst, und beobachte die X/Y-Koordinatenwerte (-100 bis +100) im Serial Monitor.
Kreative Anpassung – Passen Sie den Code an Ihr Projekt an
2. Joystick-Einstellungen konfigurieren
Der Joystick kann mit verschiedenen Parametern konfiguriert werden:
Grundkonfiguration
// Create joystick with default settings (autoReturn=true, sensitivity=1)
DIYablesWebJoystickPage webJoystickPage;
Erweiterte Konfiguration
// Create joystick with custom settings
// autoReturn=false: Joystick stays at last position when released
// sensitivity=5: Only send updates when movement > 5%
DIYablesWebJoystickPage webJoystickPage(false, 5);
So verwenden Sie den Joystick
Weboberflächensteuerungen
Die Joystick-Schnittstelle bietet:
- Joystick-Pad: Kreisförmiger Bedienbereich für Touch-/Maus-Eingaben
- Positionsanzeige: Zeigt die aktuelle Joystick-Position an
- Koordinatenanzeige: Echtzeit-X/Y-Werte (-100 bis +100)
- Zentrumspunkt: Visuelle Referenz für die neutrale Position
Bedienung des Joysticks
Desktop (Maussteuerung)
- Klicken und Ziehen: Klicken Sie auf den Joystick und ziehen Sie ihn, um ihn zu bewegen
- Loslassen: Der Joystick kehrt zur Mitte zurück (falls autoReturn=true)
- Klickposition: Direkter Klick, um die Joystick-Position festzulegen
Mobil/Tablet (Touch-Steuerung)
- Berühren und Ziehen: Berühre den Joystick und ziehe den Finger, um dich zu bewegen
- Multi-Touch: Ein Finger für präzise Steuerung
- Loslassen: Automatische Rückkehr zur Mitte (falls aktiviert)
Koordinatensystem
Der Joystick liefert Koordinaten in einem standardkartesischen Koordinatensystem:
- X-Achse: -100 (ganz links) bis +100 (ganz rechts)
- Y-Achse: -100 (ganz unten) bis +100 (ganz oben)
- Zentrum: X=0, Y=0 (neutrale Position)
- Ecken: Diagonale Positionen liefern kombinierte X- und Y-Werte
Programmierbeispiele
Einfacher Joystick-Handler
void setup() {
// Set up joystick callback for position changes
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Store the received values
currentJoystickX = x;
currentJoystickY = y;
// Print joystick position values
Serial.println("Joystick - X: " + String(x) + ", Y: " + String(y));
// Add your control logic here
});
}
Beispiel für die Motorsteuerung
// Pin definitions for motor driver
const int MOTOR_LEFT_PIN1 = 2;
const int MOTOR_LEFT_PIN2 = 3;
const int MOTOR_RIGHT_PIN1 = 4;
const int MOTOR_RIGHT_PIN2 = 5;
const int MOTOR_LEFT_PWM = 9;
const int MOTOR_RIGHT_PWM = 10;
void setup() {
// Configure motor pins
pinMode(MOTOR_LEFT_PIN1, OUTPUT);
pinMode(MOTOR_LEFT_PIN2, OUTPUT);
pinMode(MOTOR_RIGHT_PIN1, OUTPUT);
pinMode(MOTOR_RIGHT_PIN2, OUTPUT);
pinMode(MOTOR_LEFT_PWM, OUTPUT);
pinMode(MOTOR_RIGHT_PWM, OUTPUT);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
controlRobot(x, y);
});
}
void controlRobot(int x, int y) {
// Convert joystick coordinates to motor speeds
int leftSpeed = y + x; // Forward/backward + turn left/right
int rightSpeed = y - x; // Forward/backward - turn left/right
// Constrain speeds to valid range
leftSpeed = constrain(leftSpeed, -100, 100);
rightSpeed = constrain(rightSpeed, -100, 100);
// Control left motor
if (leftSpeed > 0) {
digitalWrite(MOTOR_LEFT_PIN1, HIGH);
digitalWrite(MOTOR_LEFT_PIN2, LOW);
analogWrite(MOTOR_LEFT_PWM, map(leftSpeed, 0, 100, 0, 255));
} else if (leftSpeed < 0) {
digitalWrite(MOTOR_LEFT_PIN1, LOW);
digitalWrite(MOTOR_LEFT_PIN2, HIGH);
analogWrite(MOTOR_LEFT_PWM, map(-leftSpeed, 0, 100, 0, 255));
} else {
digitalWrite(MOTOR_LEFT_PIN1, LOW);
digitalWrite(MOTOR_LEFT_PIN2, LOW);
analogWrite(MOTOR_LEFT_PWM, 0);
}
// Control right motor
if (rightSpeed > 0) {
digitalWrite(MOTOR_RIGHT_PIN1, HIGH);
digitalWrite(MOTOR_RIGHT_PIN2, LOW);
analogWrite(MOTOR_RIGHT_PWM, map(rightSpeed, 0, 100, 0, 255));
} else if (rightSpeed < 0) {
digitalWrite(MOTOR_RIGHT_PIN1, LOW);
digitalWrite(MOTOR_RIGHT_PIN2, HIGH);
analogWrite(MOTOR_RIGHT_PWM, map(-rightSpeed, 0, 100, 0, 255));
} else {
digitalWrite(MOTOR_RIGHT_PIN1, LOW);
digitalWrite(MOTOR_RIGHT_PIN2, LOW);
analogWrite(MOTOR_RIGHT_PWM, 0);
}
}
Servosteuerungsbeispiel
#include <Servo.h>
Servo panServo; // X-axis control (left/right)
Servo tiltServo; // Y-axis control (up/down)
void setup() {
// Attach servos to pins
panServo.attach(9);
tiltServo.attach(10);
// Center servos initially
panServo.write(90);
tiltServo.write(90);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
controlServos(x, y);
});
}
void controlServos(int x, int y) {
// Map joystick coordinates to servo angles
int panAngle = map(x, -100, 100, 0, 180); // X controls pan (0-180°)
int tiltAngle = map(y, -100, 100, 180, 0); // Y controls tilt (inverted)
// Move servos to calculated positions
panServo.write(panAngle);
tiltServo.write(tiltAngle);
Serial.println("Pan: " + String(panAngle) + "°, Tilt: " + String(tiltAngle) + "°");
}
LED-Positionsanzeige
// LED pins for position indication
const int LED_UP = 2;
const int LED_DOWN = 3;
const int LED_LEFT = 4;
const int LED_RIGHT = 5;
const int LED_CENTER = 13;
void setup() {
// Configure LED pins
pinMode(LED_UP, OUTPUT);
pinMode(LED_DOWN, OUTPUT);
pinMode(LED_LEFT, OUTPUT);
pinMode(LED_RIGHT, OUTPUT);
pinMode(LED_CENTER, OUTPUT);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
updateLEDIndicators(x, y);
});
}
void updateLEDIndicators(int x, int y) {
// Turn off all LEDs first
digitalWrite(LED_UP, LOW);
digitalWrite(LED_DOWN, LOW);
digitalWrite(LED_LEFT, LOW);
digitalWrite(LED_RIGHT, LOW);
digitalWrite(LED_CENTER, LOW);
// Check if joystick is near center
if (abs(x) < 10 && abs(y) < 10) {
digitalWrite(LED_CENTER, HIGH);
return;
}
// Activate LEDs based on direction
if (y > 20) digitalWrite(LED_UP, HIGH);
if (y < -20) digitalWrite(LED_DOWN, HIGH);
if (x > 20) digitalWrite(LED_RIGHT, HIGH);
if (x < -20) digitalWrite(LED_LEFT, HIGH);
}
Erweiterte Konfiguration
Laufzeitkonfigurationsänderungen
void setup() {
// Initial setup with default values
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
handleJoystickInput(x, y);
});
// Change settings at runtime
webJoystickPage.setAutoReturn(false); // Disable auto-return
webJoystickPage.setSensitivity(10.0); // Reduce sensitivity
}
void handleJoystickInput(int x, int y) {
// Handle different modes based on current settings
static bool precisionMode = false;
// Toggle precision mode with extreme positions
if (abs(x) > 95 && abs(y) > 95) {
precisionMode = !precisionMode;
if (precisionMode) {
webJoystickPage.setSensitivity(1.0); // High sensitivity
Serial.println("Precision mode ON");
} else {
webJoystickPage.setSensitivity(10.0); // Low sensitivity
Serial.println("Precision mode OFF");
}
}
}
Implementierung der Totzone
void processJoystickWithDeadZone(int x, int y) {
const int DEAD_ZONE = 15; // 15% dead zone around center
// Apply dead zone filtering
int filteredX = (abs(x) < DEAD_ZONE) ? 0 : x;
int filteredY = (abs(y) < DEAD_ZONE) ? 0 : y;
// Scale values outside dead zone
if (filteredX != 0) {
filteredX = map(abs(filteredX), DEAD_ZONE, 100, 0, 100);
filteredX = (x < 0) ? -filteredX : filteredX;
}
if (filteredY != 0) {
filteredY = map(abs(filteredY), DEAD_ZONE, 100, 0, 100);
filteredY = (y < 0) ? -filteredY : filteredY;
}
// Use filtered values for control
controlDevice(filteredX, filteredY);
}
Geschwindigkeitsrampe
class SpeedController {
private:
int targetX = 0, targetY = 0;
int currentX = 0, currentY = 0;
unsigned long lastUpdate = 0;
const int RAMP_RATE = 5; // Change per update cycle
public:
void setTarget(int x, int y) {
targetX = x;
targetY = y;
}
void update() {
if (millis() - lastUpdate > 20) { // Update every 20ms
// Ramp X value
if (currentX < targetX) {
currentX = min(currentX + RAMP_RATE, targetX);
} else if (currentX > targetX) {
currentX = max(currentX - RAMP_RATE, targetX);
}
// Ramp Y value
if (currentY < targetY) {
currentY = min(currentY + RAMP_RATE, targetY);
} else if (currentY > targetY) {
currentY = max(currentY - RAMP_RATE, targetY);
}
// Apply ramped values
applyControlValues(currentX, currentY);
lastUpdate = millis();
}
}
void applyControlValues(int x, int y) {
// Your control logic here with smooth ramped values
Serial.println("Ramped - X: " + String(x) + ", Y: " + String(y));
}
};
SpeedController speedController;
void setup() {
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
speedController.setTarget(x, y);
});
}
void loop() {
server.loop();
speedController.update(); // Apply speed ramping
}
Beispiele zur Hardwareintegration
Roboter-Auto-Steuerung
void setupRobotCar() {
// Motor driver pins
pinMode(2, OUTPUT); // Left motor direction 1
pinMode(3, OUTPUT); // Left motor direction 2
pinMode(4, OUTPUT); // Right motor direction 1
pinMode(5, OUTPUT); // Right motor direction 2
pinMode(9, OUTPUT); // Left motor PWM
pinMode(10, OUTPUT); // Right motor PWM
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Tank drive calculation
int leftMotor = y + (x / 2); // Forward/back + steering
int rightMotor = y - (x / 2); // Forward/back - steering
// Constrain to valid range
leftMotor = constrain(leftMotor, -100, 100);
rightMotor = constrain(rightMotor, -100, 100);
// Control motors
setMotorSpeed(9, 2, 3, leftMotor); // Left motor
setMotorSpeed(10, 4, 5, rightMotor); // Right motor
});
}
void setMotorSpeed(int pwmPin, int dir1Pin, int dir2Pin, int speed) {
if (speed > 0) {
digitalWrite(dir1Pin, HIGH);
digitalWrite(dir2Pin, LOW);
analogWrite(pwmPin, map(speed, 0, 100, 0, 255));
} else if (speed < 0) {
digitalWrite(dir1Pin, LOW);
digitalWrite(dir2Pin, HIGH);
analogWrite(pwmPin, map(-speed, 0, 100, 0, 255));
} else {
digitalWrite(dir1Pin, LOW);
digitalWrite(dir2Pin, LOW);
analogWrite(pwmPin, 0);
}
}
Kamera-Gimbal-Steuerung
#include <Servo.h>
Servo panServo, tiltServo;
int panOffset = 90, tiltOffset = 90; // Center positions
void setupCameraGimbal() {
panServo.attach(9);
tiltServo.attach(10);
// Set initial center positions
panServo.write(panOffset);
tiltServo.write(tiltOffset);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Calculate servo positions with offset
int panPos = panOffset + map(x, -100, 100, -45, 45); // ±45° range
int tiltPos = tiltOffset + map(y, -100, 100, -30, 30); // ±30° range
// Constrain to servo limits
panPos = constrain(panPos, 0, 180);
tiltPos = constrain(tiltPos, 0, 180);
// Move servos smoothly
panServo.write(panPos);
tiltServo.write(tiltPos);
});
}
RGB-LED-Farbsteuerung
const int RED_PIN = 9;
const int GREEN_PIN = 10;
const int BLUE_PIN = 11;
void setupRGBControl() {
pinMode(RED_PIN, OUTPUT);
pinMode(GREEN_PIN, OUTPUT);
pinMode(BLUE_PIN, OUTPUT);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Convert joystick position to RGB values
int red = map(abs(x), 0, 100, 0, 255);
int green = map(abs(y), 0, 100, 0, 255);
int blue = map(abs(x + y), 0, 141, 0, 255); // Diagonal distance
// Apply quadrant-specific color mixing
if (x > 0 && y > 0) {
// Upper right: Red + Green = Yellow
blue = 0;
} else if (x < 0 && y > 0) {
// Upper left: Green + Blue = Cyan
red = 0;
} else if (x < 0 && y < 0) {
// Lower left: Blue + Red = Magenta
green = 0;
} else if (x > 0 && y < 0) {
// Lower right: Red only
green = blue = 0;
}
// Set RGB values
analogWrite(RED_PIN, red);
analogWrite(GREEN_PIN, green);
analogWrite(BLUE_PIN, blue);
});
}
Fehlerbehebung
Häufige Probleme
1. Joystick reagiert nicht
- Überprüfen Sie den WebSocket-Verbindungsstatus in der Browser-Konsole
- Überprüfen Sie die Netzwerkverbindung
- Laden Sie die Browser-Seite neu
- Überprüfen Sie den seriellen Monitor auf Fehler
2. Ruckartige oder unregelmäßige Bewegungen
- Den Empfindlichkeitswert erhöhen, um die Aktualisierungsfrequenz zu verringern
- Totzone-Filterung implementieren
- Eine Geschwindigkeitsrampe für sanfte Übergänge hinzufügen
- Auf Netzwerk-Latenzprobleme prüfen
3. Automatische Rückkehr funktioniert nicht
- AutoReturn-Einstellung prüfen: webJoystickPage.setAutoReturn(true)
- Browser-Kompatibilität prüfen (bei einigen Touch-Geräten gibt es Unterschiede)
- Mit unterschiedlichen Eingabemethoden testen (Maus vs. Touch)
4. Werte erreichen nicht den vollen Bereich
- Überprüfen Sie die Kalibrierung des Joysticks in der Weboberfläche
- Überprüfen Sie die Berechnungen der Koordinaten im Callback
- Testen Sie verschiedene Browser- und Geräte-Kombinationen
Tipps zum Debuggen
Umfassendes Debugging hinzufügen:
void debugJoystickState(int x, int y) {
Serial.println("=== Joystick Debug ===");
Serial.println("X: " + String(x) + " (" + String(map(x, -100, 100, 0, 100)) + "%)");
Serial.println("Y: " + String(y) + " (" + String(map(y, -100, 100, 0, 100)) + "%)");
Serial.println("Distance from center: " + String(sqrt(x*x + y*y)));
Serial.println("Angle: " + String(atan2(y, x) * 180 / PI) + "°");
Serial.println("=====================");
}
Projektideen
Robotik-Projekte
- Ferngesteuertes Roboterauto
- Roboterarmsteuerung
- Drohnenflugsteuerung (Grundbewegungen)
- Navigation von Haustierrobotern
Heimautomatisierung
- Intelligente Vorhangsteuerung (Öffnen/Schließen/Position)
- Kamera-Schwenk- und Neige-Steuerung
- Lichthelligkeit und Farbsteuerung
- Ventilator-Drehzahl- und Richtungssteuerung
Bildungsprojekte
- Lehrwerkzeug für das Koordinatensystem
- Demonstrationen der Motorsteuerung
- Servo-Positionierungsversuche
- Gaming-Controller-Schnittstellen
Kunst und kreative Projekte
- LED-Matrix-Mustersteuerung
- Steuerung der Musikvisualisierung
- Zeichnungsrobotersteuerung
- Interaktive Kunstinstallationen
Integration mit anderen Beispielen
Kombinieren Sie mit WebSlider
Verwenden Sie den Joystick zur Richtungsbestimmung und die Schieberegler für Geschwindigkeit/Intensität:
// Use joystick for direction, sliders for speed limits
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
int maxSpeed = getSliderValue(); // From WebSlider
int scaledX = map(x, -100, 100, -maxSpeed, maxSpeed);
int scaledY = map(y, -100, 100, -maxSpeed, maxSpeed);
controlRobot(scaledX, scaledY);
});
Mit WebDigitalPins kombinieren
Verwenden Sie Joystick-Positionen, um die Zustände digitaler Pins auszulösen:
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Activate pins based on joystick quadrants
webDigitalPinsPage.setPinState(2, x > 50); // Right quadrant
webDigitalPinsPage.setPinState(3, x < -50); // Left quadrant
webDigitalPinsPage.setPinState(4, y > 50); // Upper quadrant
webDigitalPinsPage.setPinState(5, y < -50); // Lower quadrant
});
Nächste Schritte
Nachdem Sie das WebJoystick-Beispiel beherrscht haben, probieren Sie:
- WebSlider - Zur zusätzlichen analogen Steuerung
- WebDigitalPins - Zur diskreten Ein-/Aus-Steuerung
- WebMonitor - Zum Debuggen der Joystick-Werte
- MultipleWebApps - Joystick mit anderen Steuerelementen kombinieren
Unterstützung
Für weitere Hilfe:
- Überprüfen Sie die API-Referenzdokumentation
- Besuchen Sie DIYables-Tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Arduino-Community-Foren