Arduino Nano ESP32 Web-Joystick mit DIYables ESP32 WebApps-Bibliothek
Übersicht
Dieses Tutorial behandelt die Klasse DIYablesWebJoystickPage aus der DIYables ESP32 WebApps-Bibliothek. Die Browser-Seite rendert einen berührungsempfindlichen und mausfähigen virtuellen Joystick, der X/Y-Koordinaten an den Arduino Nano ESP32 über WebSocket sendet. Die Skizze registriert einen Callback, der diese Werte empfängt und sie auf Motor-Treiber, Servo-Steuerungen oder jede Richtungshardware anwenden kann.
Was dieses Tutorial abdeckt
- Instanziierung der Joystick-Seite mit Auto-Return- und Empfindlichkeitseinstellungen
- Empfangen von X/Y-Positionswerten in einem Sketch-Callback
- Verwendung von Koordinaten zur Steuerung eines differentiellen Antriebsmotorsystems
- Zurückgeben der aktuellen Joystick-Position an den Browser auf Anfrage
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 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.
Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn Sie den Arduino Nano ESP32 zum ersten Mal verwenden, lesen Sie das Tutorial zum Einrichten der Arduino Nano ESP32-Entwicklungsumgebung.
- Verbinden Sie die Arduino Nano ESP32-Platine mit Ihrem Computer über ein USB-Kabel.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie die entsprechende Platine (z. B. Arduino Nano ESP32) und den COM-Port aus.
- Navigieren Sie zum Symbol Bibliotheken in der linken Leiste der Arduino IDE.
- Suchen Sie nach "DIYables ESP32 WebApps", dann finden Sie die DIYables ESP32 WebApps-Bibliothek von DIYables
- Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Sie werden aufgefordert, einige andere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- In der Arduino IDE gehen Sie zu Datei Beispiele DIYables ESP32 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: 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]/webjoystick
*/
#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
// MEMORY SAFETY FIX: Use static factory to avoid stack object lifetime issues
static ESP32ServerFactory 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 ESP32 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);
}
- Aktualisieren Sie die WiFi-Anmeldedaten in der Skizze:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um Code zum Arduino Nano ESP32 hochzuladen
- Öffnen Sie den seriellen Monitor
- Die Ausgabe des seriellen Monitors sollte wie folgt aussehen:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Joystick Example
INFO: Added app /
INFO: Added app /web-joystick
DIYables WebApp Library
Platform: Arduino Nano 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 Joystick: http://192.168.0.2/web-joystick
==========================================
- Wenn nichts angezeigt wird, drücken Sie die Reset-Taste auf der Platine.
- Geben Sie die IP-Adresse aus dem seriellen Monitor in einen Browser im selben Netzwerk ein.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt eine Karte für die Joystick-Anwendung:
- Wählen Sie die Web-Joystick-Karte, um die Steuerungsseite zu öffnen:
- Die Seite ist auch direkt unter http://192.168.0.2/web-joystick erreichbar.
- Ziehen Sie den Joystick und beobachten Sie die X/Y-Werte, die im seriellen Monitor gedruckt werden.
Joystick-Konfiguration
Standardeinstellungen
// autoReturn defaults to true, sensitivity defaults to 10.0
DIYablesWebJoystickPage webJoystickPage;
Benutzerdefinierte Einstellungen
// autoReturn=false: joystick holds position after release
// sensitivity=5: updates only when displacement exceeds 5%
DIYablesWebJoystickPage webJoystickPage(false, 5);
Koordinatensystem
- X-Achse: –100 (ganz links) bis +100 (ganz rechts)
- Y-Achse: –100 (ganz unten) bis +100 (ganz oben)
- Mitte: X = 0, Y = 0 (neutral)
Callbacks
Position-Updates empfangen
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
currentJoystickX = x;
currentJoystickY = y;
Serial.println("X: " + String(x) + " Y: " + String(y));
// Apply to hardware here
});
Position an den Browser liefern
Wird aufgerufen, wenn sich ein Browser verbindet und den aktuellen Status anfordert:
webJoystickPage.onJoystickValueToWeb([]() {
webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY);
});
Motor-Steuerungsbeispiel
Joystick X/Y zu einem differentiellen Antriebsmotorsystem zuordnen:
const int MOTOR_LEFT_PIN1 = 2;
const int MOTOR_LEFT_PIN2 = 3;
const int MOTOR_RIGHT_PIN1 = 4;
const int MOTOR_RIGHT_PIN2 = 5;
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Tank drive mixing
int leftSpeed = constrain(y + (x / 2), -100, 100);
int rightSpeed = constrain(y - (x / 2), -100, 100);
// Forward direction for left motor
digitalWrite(MOTOR_LEFT_PIN1, leftSpeed > 0 ? HIGH : LOW);
digitalWrite(MOTOR_LEFT_PIN2, leftSpeed < 0 ? HIGH : LOW);
analogWrite(MOTOR_LEFT_PIN1, abs(leftSpeed) * 255 / 100);
// Forward direction for right motor
digitalWrite(MOTOR_RIGHT_PIN1, rightSpeed > 0 ? HIGH : LOW);
digitalWrite(MOTOR_RIGHT_PIN2, rightSpeed < 0 ? HIGH : LOW);
analogWrite(MOTOR_RIGHT_PIN1, abs(rightSpeed) * 255 / 100);
});
Problembehandlung
Joystick bewegt sich im Browser, aber der serielle Monitor zeigt nichts an
- Überprüfen Sie, dass onJoystickValueFromWeb vor webAppsServer.begin() registriert ist
- Bestätigen Sie, dass die WebSocket-Statusanzeige „verbunden" im Browser anzeigt
Joystick springt nicht in die Mitte zurück
- autoReturn muss true im Konstruktor sein (standardmäßig ist es true)
- Der Browser handhabt die Snap-Back-Animation; die Platine empfängt nur Positionsereignisse
Zu viele Updates pro Sekunde verursachen Lag
- Erhöhen Sie den Parameter sensitivity (z. B. von 5 auf 15 ändern)
- Fügen Sie eine Prüfung mit minimalem Intervall im Callback vor der Ausführung von Hardware-Aktionen hinzu
Platine nicht erreichbar
- Sowohl die Platine als auch das Browser-Gerät müssen sich im selben 2,4-GHz-Netzwerk befinden
- Bestätigen Sie, dass die IP-Adresse aus dem seriellen Monitor korrekt ist