ESP32 WebJoystick Voorbeeld - Virtuele Joystick Bediening Tutorial
Overzicht
Het WebJoystick voorbeeld maakt een virtuele joystick-interface die toegankelijk is via elke webbrowser. Ontwikkeld voor het ESP32 educatieve platform met verbeterde robotica mogelijkheden, ingebouwde motorbesturing en naadloze integratie met robotica educatiemodules. Perfect voor het aansturen van robots, voertuigen of elk systeem dat 2D-positie-invoer nodig heeft.
Kenmerken
- Virtuele Joystick: Interactieve joystick bediening via webinterface
- Realtime Coördinaten: X/Y waardes van -100 tot +100 voor nauwkeurige controle
- Touch & Muis Ondersteuning: Werkt op desktop, tablet en mobiele apparaten
- Configureerbare Auto-Terugkeer: Optie om joystick automatisch naar het midden te laten gaan bij loslaten
- Gevoeligheidsregeling: Instelbare gevoeligheid om overbodige updates te voorkomen
- Visuele Feedback: Weergave van realtime positie en coördinaatwaarden
- WebSocket Communicatie: Directe respons zonder pagina verversen
- Centrumpositie: Duidelijke aanduiding van de neutrale startpositie
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 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
Snelstart
Volg deze stappen nauwkeurig:
- Indien u voor het eerst met de ESP32 werkt, raadpleeg dan de tutorial over het opzetten van de ESP32-omgeving in de Arduino IDE.
- Verbind de ESP32 met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste ESP32 board (bijvoorbeeld 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 vind de DIYables ESP32 WebApps Library van DIYables.
- Klik op de Install knop om de library te installeren.
- Er wordt gevraagd om aanvullende library-afhankelijkheden te installeren.
- Klik op de Install All knop om alle afhankelijkheden te installeren.
- In de Arduino IDE, ga naar File Examples DIYables ESP32 WebApps WebJoystick voorbeeld, of kopieer de code bovenaan en plak deze in de Arduino IDE editor.
/*
* 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);
}
- Stel in de code uw WiFi-gegevens in door deze regels te bewerken:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik in Arduino IDE op de Upload knop om de code naar de ESP32 te uploaden.
- Open de Seriële Monitor.
- Bekijk het resultaat op de Seriële Monitor. Het ziet er ongeveer zo uit:
COM6
DIYables WebApp - Web Joystick Example
INFO: Added app /
INFO: Added app /web-joystick
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 Joystick: http://192.168.0.2/web-joystick
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Als u niets ziet, herstart dan de ESP32.
- Noteer het IP-adres dat verschijnt en typ dit adres in de adresbalk van een webbrowser op uw smartphone of computer.
- Bijvoorbeeld: http://192.168.0.2
- U ziet de startpagina zoals hieronder:
- Klik op de Web Joystick-link, u ziet dan de UI van de Web Joystick applicatie zoals hieronder:
- U kunt ook direct de pagina openen door het IP-adres te gebruiken gevolgd door /web-joystick. Bijvoorbeeld: http://192.168.0.2/web-joystick
- Probeer de virtuele joystick te bedienen door te klikken en te slepen binnen het joystickgebied en observeer de X/Y coördinaten (-100 tot +100) in de Seriële Monitor.
Creatieve Aanpassingen - Pas de Code aan voor Uw Project
2. Joystick Instellingen Configureren
De joystick kan met verschillende parameters worden ingesteld:
Basisconfiguratie
// Maak joystick aan met standaardinstellingen (autoReturn=true, sensitivity=1)
DIYablesWebJoystickPage webJoystickPage;
Geavanceerde Configuratie
// Maak joystick aan met aangepaste instellingen
// autoReturn=false: Joystick blijft op laatste positie bij loslaten
// sensitivity=5: Alleen updates versturen bij beweging > 5%
DIYablesWebJoystickPage webJoystickPage(false, 5);
Hoe de Joystick te Gebruiken
Webinterface bediening
De joystick-interface biedt:
- Joystick Pad: Cirkelvormig bedieningsvlak voor touch/muis invoer
- Positie-indicator: Toont de huidige joystickpositie
- Coördinatenweergave: Realtime X/Y waardes (-100 tot +100)
- Middelpunt: Visuele referentie voor neutrale positie
Joystick bedienen
Desktop (muissturing)
- Klik en sleep: Klik op de joystick en sleep om te bewegen
- Loslaten: Joystick keert terug naar het midden (als autoReturn=true)
- Klikpositie: Direct klikken om joystickpositie in te stellen
Mobiel/Tablet (touchbediening)
- Aanraken en slepen: Raak joystick aan en sleep met vinger om te bewegen
- Multitouch: Gebruik een vinger voor nauwkeurige besturing
- Loslaten: Automatisch terug naar midden (indien ingeschakeld)
Coördinatensysteem
De joystick geeft coördinaten in een standaard Cartesian systeem:
- X-as: -100 (volledig links) tot +100 (volledig rechts)
- Y-as: -100 (volledig omlaag) tot +100 (volledig omhoog)
- Midden: X=0, Y=0 (neutrale positie)
- Hoeken: Diagonale posities combineren X/Y waardes
Programmeer Voorbeelden
Basis Joystick Handler
void setup() {
// Stel joystick callback in voor positieveranderingen
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Sla ontvangen waardes op
currentJoystickX = x;
currentJoystickY = y;
// Print joystick positie waardes
Serial.println("Joystick - X: " + String(x) + ", Y: " + String(y));
// Plaats hier uw besturingslogica
});
}
Motorbesturing Voorbeeld
// Pin-definities voor 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() {
// Stel motor pins in
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) {
// Zet joystick coördinaten om in motorsnelheden
int leftSpeed = y + x; // Vooruit/achteruit + bocht links/rechts
int rightSpeed = y - x; // Vooruit/achteruit - bocht links/rechts
// Beperk snelheden tot geldige range
leftSpeed = constrain(leftSpeed, -100, 100);
rightSpeed = constrain(rightSpeed, -100, 100);
// Bestuur linker 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);
}
// Bestuur rechter 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);
}
}
Servo Besturing Voorbeeld
#include <Servo.h>
Servo panServo; // X-as besturing (links/rechts)
Servo tiltServo; // Y-as besturing (omhoog/omlaag)
void setup() {
// Verbind servomotoren met pinnen
panServo.attach(9);
tiltServo.attach(10);
// Centreer servos initieel
panServo.write(90);
tiltServo.write(90);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
controlServos(x, y);
});
}
void controlServos(int x, int y) {
// Vertaal joystick coördinaten naar servo hoeken
int panAngle = map(x, -100, 100, 0, 180); // X bestuurt pan (0-180°)
int tiltAngle = map(y, -100, 100, 180, 0); // Y bestuurt tilt (omgekeerd)
// Verplaats servos naar berekende posities
panServo.write(panAngle);
tiltServo.write(tiltAngle);
Serial.println("Pan: " + String(panAngle) + "°, Tilt: " + String(tiltAngle) + "°");
}
LED Positie-indicator
// LED pinnen voor positie-indicatie
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() {
// Stel LED pinnen in
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) {
// Zet alle LED’s uit
digitalWrite(LED_UP, LOW);
digitalWrite(LED_DOWN, LOW);
digitalWrite(LED_LEFT, LOW);
digitalWrite(LED_RIGHT, LOW);
digitalWrite(LED_CENTER, LOW);
// Controleer of joystick dicht bij midden is
if (abs(x) < 10 && abs(y) < 10) {
digitalWrite(LED_CENTER, HIGH);
return;
}
// Activeer LED’s op basis van richting
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);
}
Geavanceerde Configuratie
Wijzigingen tijdens runtime
void setup() {
// Initiele setup met standaardwaardes
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
handleJoystickInput(x, y);
});
// Wijzig instellingen tijdens runtime
webJoystickPage.setAutoReturn(false); // Auto terugkeer uitschakelen
webJoystickPage.setSensitivity(10.0); // Gevoeligheid verlagen
}
void handleJoystickInput(int x, int y) {
// Verwerk verschillende modi op basis van huidige instellingen
static bool precisionMode = false;
// Schakel precisie modus bij extreme posities
if (abs(x) > 95 && abs(y) > 95) {
precisionMode = !precisionMode;
if (precisionMode) {
webJoystickPage.setSensitivity(1.0); // Hoge gevoeligheid
Serial.println("Precision mode ON");
} else {
webJoystickPage.setSensitivity(10.0); // Lage gevoeligheid
Serial.println("Precision mode OFF");
}
}
}
Dead Zone Implementatie
void processJoystickWithDeadZone(int x, int y) {
const int DEAD_ZONE = 15; // 15% dead zone rond het midden
// Pas dead zone filtering toe
int filteredX = (abs(x) < DEAD_ZONE) ? 0 : x;
int filteredY = (abs(y) < DEAD_ZONE) ? 0 : y;
// Schaal waardes buiten 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;
}
// Gebruik gefilterde waardes voor besturing
controlDevice(filteredX, filteredY);
}
Snelheidsopbouw (Speed Ramping)
class SpeedController {
private:
int targetX = 0, targetY = 0;
int currentX = 0, currentY = 0;
unsigned long lastUpdate = 0;
const int RAMP_RATE = 5; // Verandering per update cyclus
public:
void setTarget(int x, int y) {
targetX = x;
targetY = y;
}
void update() {
if (millis() - lastUpdate > 20) { // Update elke 20ms
// Ramping X waarde
if (currentX < targetX) {
currentX = min(currentX + RAMP_RATE, targetX);
} else if (currentX > targetX) {
currentX = max(currentX - RAMP_RATE, targetX);
}
// Ramping Y waarde
if (currentY < targetY) {
currentY = min(currentY + RAMP_RATE, targetY);
} else if (currentY > targetY) {
currentY = max(currentY - RAMP_RATE, targetY);
}
// Pas gerampte waardes toe
applyControlValues(currentX, currentY);
lastUpdate = millis();
}
}
void applyControlValues(int x, int y) {
// Uw besturingslogica hier met vloeiende ramping
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(); // Pas snelheidsopbouw toe
}
Voorbeelden Integratie Hardware
Robotauto Besturing
void setupRobotCar() {
// Motor driver pinnen
pinMode(2, OUTPUT); // Linkermotor richting 1
pinMode(3, OUTPUT); // Linkermotor richting 2
pinMode(4, OUTPUT); // Rechtermotor richting 1
pinMode(5, OUTPUT); // Rechtermotor richting 2
pinMode(9, OUTPUT); // Linkermotor PWM
pinMode(10, OUTPUT); // Rechtermotor PWM
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Tank besturing berekening
int leftMotor = y + (x / 2); // Vooruit/achteruit + sturen
int rightMotor = y - (x / 2); // Vooruit/achteruit - sturen
// Beperk tot geldige range
leftMotor = constrain(leftMotor, -100, 100);
rightMotor = constrain(rightMotor, -100, 100);
// Bestuur motoren
setMotorSpeed(9, 2, 3, leftMotor); // Linkermotor
setMotorSpeed(10, 4, 5, rightMotor); // Rechtermotor
});
}
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);
}
}
Camera Gimbal Besturing
#include <Servo.h>
Servo panServo, tiltServo;
int panOffset = 90, tiltOffset = 90; // Middenposities
void setupCameraGimbal() {
panServo.attach(9);
tiltServo.attach(10);
// Initieer middenposities
panServo.write(panOffset);
tiltServo.write(tiltOffset);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Bereken servo posities met offset
int panPos = panOffset + map(x, -100, 100, -45, 45); // ±45° bereik
int tiltPos = tiltOffset + map(y, -100, 100, -30, 30); // ±30° bereik
// Beperk tot servo limieten
panPos = constrain(panPos, 0, 180);
tiltPos = constrain(tiltPos, 0, 180);
// Beweeg servos vloeiend
panServo.write(panPos);
tiltServo.write(tiltPos);
});
}
RGB LED Kleurbesturing
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) {
// Zet joystick positie om naar RGB waardes
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); // Diagonale afstand
// Pas kleurmengsel per kwadrant toe
if (x > 0 && y > 0) {
// Rechtsboven: Rood + Groen = Geel
blue = 0;
} else if (x < 0 && y > 0) {
// Linksboven: Groen + Blauw = Cyan
red = 0;
} else if (x < 0 && y < 0) {
// Linksonder: Blauw + Rood = Magenta
green = 0;
} else if (x > 0 && y < 0) {
// Rechtsonder: Alleen rood
green = blue = 0;
}
// Stel RGB waardes in
analogWrite(RED_PIN, red);
analogWrite(GREEN_PIN, green);
analogWrite(BLUE_PIN, blue);
});
}
Probleemoplossing
Veelvoorkomende Problemen
1. Joystick reageert niet
- Controleer de WebSocket verbinding in de browser console
- Controleer netwerkconnectiviteit
- Vernieuw de browsertab
- Controleer de Seriële Monitor op foutmeldingen
2. Schokkerige of inconsistente beweging
- Verhoog de gevoeligheid om minder frequente updates te ontvangen
- Implementeer dead zone filtering
- Voeg snelheidsopbouw toe voor vloeiende overgangen
- Controleer mogelijke netwerkvertraging
3. Auto-terugkeer werkt niet
- Controleer instelling: webJoystickPage.setAutoReturn(true)
- Controleer browsercompatibiliteit (sommige touch apparaten verschillen)
- Test met verschillende invoermethoden (muis vs touch)
4. Waardes bereiken niet het volledige bereik
- Controleer joystick calibratie in de webinterface
- Controleer coördinatenberekening in callback
- Test met verschillende browsers en apparaten
Debug Tips
Voeg uitgebreide debugging toe:
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("=====================");
}
Projectideeën
Robotica Projecten
- Op afstand bestuurbare robotauto
- Besturing van een robotarm
- Basis dronevluchtbesturing
- Navigatie voor huisdierrobot
Domotica
- Slimme gordijnbediening (openen/sluiten/positie)
- Camera pan/tilt besturing
- Verlichtingshelderheid en kleurregeling
- Ventilator snelheid en richting besturing
Educatieve Projecten
- Leermiddel voor coördinatensysteem
- Demonstraties motorbesturing
- Experimenten met servo-positionering
- Interface voor gamecontrollers
Kunst en Creatieve Projecten
- LED-matrix patroonbesturing
- Muziek visualisatie besturing
- Besturing van een tekenrobot
- Interactieve kunstinstallaties
Integratie met Andere Voorbeelden
Combineren met WebSlider
Gebruik joystick voor richting en sliders voor snelheid/intensiteit:
// Gebruik joystick voor richting, sliders voor snelheidslimieten
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
int maxSpeed = getSliderValue(); // Van WebSlider
int scaledX = map(x, -100, 100, -maxSpeed, maxSpeed);
int scaledY = map(y, -100, 100, -maxSpeed, maxSpeed);
controlRobot(scaledX, scaledY);
});
Combineren met WebDigitalPins
Gebruik joystickposities om digitale pinstatussen te triggeren:
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Activeer pinnen op basis van joystick kwadranten
webDigitalPinsPage.setPinState(2, x > 50); // Rechts kwadrant
webDigitalPinsPage.setPinState(3, x < -50); // Links kwadrant
webDigitalPinsPage.setPinState(4, y > 50); // Boven kwadrant
webDigitalPinsPage.setPinState(5, y < -50); // Onder kwadrant
});
Volgende stappen
Na het beheersen van het WebJoystick voorbeeld kunt u proberen:
- WebSlider - Voor extra analoge bediening
- WebDigitalPins - Voor discrete aan/uit besturing
- WebMonitor - Voor debugging van joystickwaardes
- MultipleWebApps - Combineren van joystick met andere bedieningselementen
Ondersteuning
Voor extra hulp:
- Raadpleeg de API Referentie documentatie
- Bezoek DIYables tutorials: https://esp32io.com/tutorials/diyables-esp32-webapps
- ESP32 community forums