Arduino WebJoystick Voorbeeld - Virtuele Joystick Besturing Tutorial
Overzicht
Het WebJoystick voorbeeld creëert een virtuele joystick interface die toegankelijk is vanuit elke webbrowser. Ontworpen voor Arduino Uno R4 WiFi en DIYables STEM V4 IoT educatief platform met verbeterde robotica mogelijkheden, ingebouwde motor besturing functies, en naadloze integratie met robotica educatieve modules. Perfect voor het besturen van robots, voertuigen, of elk systeem dat 2D positie invoer vereist.
Functies
- Virtuele Joystick: Interactieve joystick besturing via webinterface
- Real-time Coördinaten: X/Y waarden van -100 tot +100 voor precieze besturing
- Touch & Muis Ondersteuning: Werkt op desktop, tablet, en mobiele apparaten
- Configureerbare Auto-Return: Optie voor joystick om terug te keren naar het midden wanneer losgelaten
- Gevoeligheidscontrole: Instelbare gevoeligheid om overmatige updates te voorkomen
- Visuele Feedback: Real-time positie weergave en coördinaat waarden
- WebSocket Communicatie: Onmiddellijke respons zonder pagina verversing
- Middenpositie: Duidelijke middenpositie indicator voor neutrale besturing
- Platform Uitbreidbaar: Momenteel geïmplementeerd voor Arduino Uno R4 WiFi, maar kan worden uitgebreid voor andere hardware platforms. Zie DIYables_WebApps_ESP32
Hardware Benodigd
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 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
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 de omgeving instellen 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 (bijv., Arduino Uno R4 WiFi) en COM poort.
- Navigeer naar het Libraries icoon in de linker balk van de Arduino IDE.
- Zoek "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 bibliotheek afhankelijkheden te installeren
- Klik op de Install All knop om alle bibliotheek afhankelijkheden te installeren.
- In Arduino IDE, ga naar File Examples DIYables WebApps WebJoystick voorbeeld, of kopieer de bovenstaande code en plak het in de editor van Arduino IDE
/*
* 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);
}
- Configureer WiFi gegevens in de code door deze regels bij te werken:
const char WIFI_SSID[] = "UW_WIFI_NETWERK";
const char WIFI_PASSWORD[] = "UW_WIFI_WACHTWOORD";
- 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 Serial Monitor. Het ziet er uit zoals hieronder
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
- Als u niets ziet, herstart het Arduino board.
- Noteer het weergegeven IP-adres, en voer dit adres in in de adresbalk van een webbrowser op uw smartphone of PC.
- Voorbeeld: http://192.168.0.2
- U zult de startpagina zien zoals onderstaande afbeelding:
- Klik op de Web Joystick link, u zult de Web Joystick app's UI zien zoals hieronder:
- Of u kunt ook direct naar de pagina gaan via het IP-adres gevolgd door /web-joystick. Bijvoorbeeld: http://192.168.0.2/web-joystick
- Probeer de virtuele joystick te besturen door te klikken en slepen in het joystick gebied en observeer de X/Y coördinaat waarden (-100 tot +100) in de Serial Monitor.
Creatieve Aanpassing - Pas de Code aan voor Uw Project
2. Configureer Joystick Instellingen
De joystick kan worden geconfigureerd met verschillende parameters:
Basis Configuratie
// Creëer joystick met standaard instellingen (autoReturn=true, sensitivity=1)
DIYablesWebJoystickPage webJoystickPage;
Geavanceerde Configuratie
// Creëer joystick met aangepaste instellingen
// autoReturn=false: Joystick blijft op laatste positie wanneer losgelaten
// sensitivity=5: Stuur alleen updates wanneer beweging > 5%
DIYablesWebJoystickPage webJoystickPage(false, 5);
Hoe de Joystick te Gebruiken
Web Interface Besturing
De joystick interface biedt:
- Joystick Pad: Cirkelvormig besturingsgebied voor touch/muis invoer
- Positie Indicator: Toont huidige joystick positie
- Coördinaten Weergave: Real-time X/Y waarden (-100 tot +100)
- Middenpunt: Visuele referentie voor neutrale positie
De Joystick Bedienen
Desktop (Muis Besturing)
- Klik en Sleep: Klik op joystick en sleep om te bewegen
- Loslaten: Joystick keert terug naar midden (als autoReturn=true)
- Klik Positie: Direct klikken om joystick positie in te stellen
Mobiel/Tablet (Touch Besturing)
- Touch en Sleep: Raak joystick aan en sleep vinger om te bewegen
- Multi-touch: Enkele vinger voor precieze besturing
- Loslaten: Automatische terugkeer naar midden (indien ingeschakeld)
Coördinaten Systeem
De joystick biedt coördinaten in een standaard Cartesiaans 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 bieden gecombineerde X/Y waarden
Programmeer Voorbeelden
Basis Joystick Handler
void setup() {
// Stel joystick callback in voor positie veranderingen
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Bewaar de ontvangen waarden
currentJoystickX = x;
currentJoystickY = y;
// Print joystick positie waarden
Serial.println("Joystick - X: " + String(x) + ", Y: " + String(y));
// Voeg uw besturingslogica hier toe
});
}
Motor Besturing 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() {
// Configureer 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) {
// Converteer joystick coördinaten naar motor snelheden
int leftSpeed = y + x; // Vooruit/achteruit + draai links/rechts
int rightSpeed = y - x; // Vooruit/achteruit - draai links/rechts
// Beperk snelheden tot geldige bereik
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() {
// Koppel servos aan pins
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) {
// Map 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)
// Beweeg servos naar berekende posities
panServo.write(panAngle);
tiltServo.write(tiltAngle);
Serial.println("Pan: " + String(panAngle) + "°, Tilt: " + String(tiltAngle) + "°");
}
LED Positie Indicator
// LED pins 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() {
// Configureer 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) {
// Schakel eerst alle LEDs uit
digitalWrite(LED_UP, LOW);
digitalWrite(LED_DOWN, LOW);
digitalWrite(LED_LEFT, LOW);
digitalWrite(LED_RIGHT, LOW);
digitalWrite(LED_CENTER, LOW);
// Controleer of joystick bij het midden is
if (abs(x) < 10 && abs(y) < 10) {
digitalWrite(LED_CENTER, HIGH);
return;
}
// Activeer LEDs gebaseerd op 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
Runtime Configuratie Wijzigingen
void setup() {
// Initiële setup met standaard waarden
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
handleJoystickInput(x, y);
});
// Wijzig instellingen tijdens runtime
webJoystickPage.setAutoReturn(false); // Schakel auto-return uit
webJoystickPage.setSensitivity(10.0); // Verminder gevoeligheid
}
void handleJoystickInput(int x, int y) {
// Behandel verschillende modi gebaseerd op huidige instellingen
static bool precisionMode = false;
// Schakel precisie modus met extreme posities
if (abs(x) > 95 && abs(y) > 95) {
precisionMode = !precisionMode;
if (precisionMode) {
webJoystickPage.setSensitivity(1.0); // Hoge gevoeligheid
Serial.println("Precisie modus AAN");
} else {
webJoystickPage.setSensitivity(10.0); // Lage gevoeligheid
Serial.println("Precisie modus UIT");
}
}
}
Dead Zone Implementatie
void processJoystickWithDeadZone(int x, int y) {
const int DEAD_ZONE = 15; // 15% dode zone rond het midden
// Pas dode zone filtering toe
int filteredX = (abs(x) < DEAD_ZONE) ? 0 : x;
int filteredY = (abs(y) < DEAD_ZONE) ? 0 : y;
// Schaal waarden buiten dode 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 waarden voor besturing
controlDevice(filteredX, filteredY);
}
Snelheid 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
// Ramp X waarde
if (currentX < targetX) {
currentX = min(currentX + RAMP_RATE, targetX);
} else if (currentX > targetX) {
currentX = max(currentX - RAMP_RATE, targetX);
}
// Ramp Y waarde
if (currentY < targetY) {
currentY = min(currentY + RAMP_RATE, targetY);
} else if (currentY > targetY) {
currentY = max(currentY - RAMP_RATE, targetY);
}
// Pas gerampe waarden toe
applyControlValues(currentX, currentY);
lastUpdate = millis();
}
}
void applyControlValues(int x, int y) {
// Uw besturingslogica hier met vloeiende gerampe waarden
Serial.println("Gerampt - 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 snelheid ramping toe
}
Hardware Integratie Voorbeelden
Robot Auto Besturing
void setupRobotCar() {
// Motor driver pins
pinMode(2, OUTPUT); // Linker motor richting 1
pinMode(3, OUTPUT); // Linker motor richting 2
pinMode(4, OUTPUT); // Rechter motor richting 1
pinMode(5, OUTPUT); // Rechter motor richting 2
pinMode(9, OUTPUT); // Linker motor PWM
pinMode(10, OUTPUT); // Rechter motor PWM
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Tank drive berekening
int leftMotor = y + (x / 2); // Vooruit/achteruit + sturen
int rightMotor = y - (x / 2); // Vooruit/achteruit - sturen
// Beperk tot geldig bereik
leftMotor = constrain(leftMotor, -100, 100);
rightMotor = constrain(rightMotor, -100, 100);
// Bestuur motoren
setMotorSpeed(9, 2, 3, leftMotor); // Linker motor
setMotorSpeed(10, 4, 5, rightMotor); // Rechter 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);
}
}
Camera Gimbal Besturing
#include <Servo.h>
Servo panServo, tiltServo;
int panOffset = 90, tiltOffset = 90; // Midden posities
void setupCameraGimbal() {
panServo.attach(9);
tiltServo.attach(10);
// Stel initiële midden posities in
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 Kleur Besturing
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) {
// Converteer joystick positie naar RGB waarden
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 kwadrant-specifieke kleur menging toe
if (x > 0 && y > 0) {
// Rechts boven: Rood + Groen = Geel
blue = 0;
} else if (x < 0 && y > 0) {
// Links boven: Groen + Blauw = Cyaan
red = 0;
} else if (x < 0 && y < 0) {
// Links onder: Blauw + Rood = Magenta
green = 0;
} else if (x > 0 && y < 0) {
// Rechts onder: Alleen rood
green = blue = 0;
}
// Stel RGB waarden in
analogWrite(RED_PIN, red);
analogWrite(GREEN_PIN, green);
analogWrite(BLUE_PIN, blue);
});
}
Probleemoplossing
Veelvoorkomende Problemen
1. Joystick reageert niet
- Controleer WebSocket verbindingsstatus in browser console
- Verifieer netwerkverbinding
- Ververs browser pagina
- Controleer Serial Monitor voor fouten
2. Schokkerige of inconsistente beweging
- Verhoog gevoeligheidswaarde om update frequentie te verminderen
- Implementeer dode zone filtering
- Voeg snelheid ramping toe voor vloeiende overgangen
- Controleer voor netwerklatentie problemen
3. Auto-return werkt niet
- Verifieer autoReturn instelling: webJoystickPage.setAutoReturn(true)
- Controleer browser compatibiliteit (sommige touch apparaten variëren)
- Test met verschillende invoermethoden (muis vs touch)
4. Waarden bereiken geen volledig bereik
- Controleer joystick kalibratie in web interface
- Verifieer coördinaat berekeningen in callback
- Test met verschillende browser/apparaat combinaties
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("Afstand van midden: " + String(sqrt(x*x + y*y)));
Serial.println("Hoek: " + String(atan2(y, x) * 180 / PI) + "°");
Serial.println("=====================");
}
Project Ideeën
Robotica Projecten
- Op afstand bestuurbare robot auto
- Robotarm besturing
- Drone vlucht besturing (basis bewegingen)
- Huisdier robot navigatie
Domotica
- Slimme gordijn besturing (open/dicht/positie)
- Camera pan/tilt besturing
- Licht helderheid en kleur besturing
- Ventilator snelheid en richting besturing
Educatieve Projecten
- Coördinaten systeem onderwijstool
- Motor besturing demonstraties
- Servo positionering experimenten
- Gaming controller interfaces
Kunst en Creatieve Projecten
- LED matrix patroon besturing
- Muziek visualisatie besturing
- Teken robot besturing
- Interactieve kunst installaties
Integratie met Andere Voorbeelden
Combineer 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);
});
Combineer met WebDigitalPins
Gebruik joystick posities om digitale pin toestanden te activeren:
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Activeer pins gebaseerd op joystick kwadranten
webDigitalPinsPage.setPinState(2, x > 50); // Rechter kwadrant
webDigitalPinsPage.setPinState(3, x < -50); // Linker kwadrant
webDigitalPinsPage.setPinState(4, y > 50); // Bovenste kwadrant
webDigitalPinsPage.setPinState(5, y < -50); // Onderste kwadrant
});
Volgende Stappen
Na het beheersen van het WebJoystick voorbeeld, probeer:
- WebSlider - Voor extra analoge besturing
- WebDigitalPins - Voor discrete aan/uit besturing
- WebMonitor - Voor debugging joystick waarden
- MultipleWebApps - Joystick combineren met andere besturingen
Ondersteuning
Voor extra hulp:
- Controleer de API Referentie documentatie
- Bezoek DIYables tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Arduino gemeenschap forums