Joystick Web Arduino Nano ESP32 avec la bibliothèque DIYables ESP32 WebApps
Vue d'ensemble
Ce tutoriel couvre la classe DIYablesWebJoystickPage de la bibliothèque DIYables ESP32 WebApps. La page du navigateur affiche un joystick virtuel tactile et compatible souris qui envoie les coordonnées X/Y à l'Arduino Nano ESP32 via WebSocket. Le sketch enregistre un callback qui reçoit ces valeurs et peut les appliquer aux pilotes de moteur, aux contrôleurs de servo ou à tout matériel directionnel.
Ce que ce tutoriel couvre
- Instanciation de la page joystick avec les paramètres de retour automatique et de sensibilité
- Réception des valeurs de position X/Y dans un callback de sketch
- Utilisation des coordonnées pour contrôler un système moteur à entraînement différentiel
- Retour de la position actuelle du joystick au navigateur sur demande
Matériel nécessaire
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Étapes
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'Arduino Nano ESP32, consultez le tutoriel sur Installation du logiciel Arduino Nano ESP32..
- Connectez la carte Arduino Nano ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'Arduino IDE sur votre ordinateur.
- Sélectionnez la carte appropriée (par ex. Arduino Nano ESP32) et le port COM.
- Accédez à l'icône Bibliothèques dans la barre gauche de l'Arduino IDE.
- Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps par DIYables
- Cliquez sur le bouton Installer pour installer la bibliothèque.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Il vous sera demandé d'installer d'autres dépendances de bibliothèques
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.
- Dans Arduino IDE, allez dans Fichier Exemples DIYables ESP32 WebApps WebJoystick, ou copiez le code ci-dessus et collez-le dans l'éditeur 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: 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);
}
- Mettez à jour les identifiants WiFi dans le sketch :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Téléverser dans Arduino IDE pour téléverser le code sur Arduino Nano ESP32
- Ouvrez le Moniteur Série
- La sortie du Moniteur Série devrait ressembler à ce qui suit :
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
==========================================
- Si rien n'apparaît, appuyez sur le bouton de réinitialisation de la carte.
- Entrez l'adresse IP du Moniteur Série dans un navigateur sur le même réseau.
- Exemple : http://192.168.0.2
- La page d'accueil affiche une carte pour l'application joystick :
- Sélectionnez la carte Joystick web pour ouvrir la page de contrôle :
- La page est également accessible directement à http://192.168.0.2/web-joystick.
- Faites glisser le joystick et observez les valeurs X/Y affichées dans le Moniteur Série.
Configuration du joystick
Paramètres par défaut
// autoReturn par défaut à true, sensitivity par défaut à 10.0
DIYablesWebJoystickPage webJoystickPage;
Paramètres personnalisés
// autoReturn=false : le joystick maintient la position après la libération
// sensitivity=5 : mises à jour uniquement quand le déplacement dépasse 5%
DIYablesWebJoystickPage webJoystickPage(false, 5);
Système de coordonnées
- Axe X : –100 (plein gauche) à +100 (plein droit)
- Axe Y : –100 (plein bas) à +100 (plein haut)
- Centre : X = 0, Y = 0 (neutre)
Callbacks
Réception des mises à jour de position
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
currentJoystickX = x;
currentJoystickY = y;
Serial.println("X: " + String(x) + " Y: " + String(y));
// Appliquer au matériel ici
});
Fourniture de la position au navigateur
Appelé quand un navigateur se connecte et demande l'état actuel :
webJoystickPage.onJoystickValueToWeb([]() {
webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY);
});
Exemple de contrôle moteur
Mappez le X/Y du joystick à un système moteur à entraînement différentiel :
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) {
// Mélange de pilotage en char
int leftSpeed = constrain(y + (x / 2), -100, 100);
int rightSpeed = constrain(y - (x / 2), -100, 100);
// Direction avant pour le moteur gauche
digitalWrite(MOTOR_LEFT_PIN1, leftSpeed > 0 ? HIGH : LOW);
digitalWrite(MOTOR_LEFT_PIN2, leftSpeed < 0 ? HIGH : LOW);
analogWrite(MOTOR_LEFT_PIN1, abs(leftSpeed) * 255 / 100);
// Direction avant pour le moteur droit
digitalWrite(MOTOR_RIGHT_PIN1, rightSpeed > 0 ? HIGH : LOW);
digitalWrite(MOTOR_RIGHT_PIN2, rightSpeed < 0 ? HIGH : LOW);
analogWrite(MOTOR_RIGHT_PIN1, abs(rightSpeed) * 255 / 100);
});
Dépannage
Le joystick bouge dans le navigateur mais le Moniteur Série ne montre rien
- Vérifiez que onJoystickValueFromWeb est enregistré avant webAppsServer.begin()
- Confirmez que l'indicateur de statut WebSocket affiche "connecté" dans le navigateur
Le joystick ne revient pas au centre
- autoReturn doit être true dans le constructeur (il est true par défaut)
- Le navigateur gère l'animation de retour au centre ; la carte ne reçoit que les événements de position
Trop de mises à jour par seconde causant des lenteurs
- Augmentez le paramètre sensitivity (par ex., passez de 5 à 15)
- Ajoutez une vérification d'intervalle minimum dans le callback avant d'exécuter des actions matérielles
Carte non accessible
- La carte et l'appareil du navigateur doivent être sur le même réseau 2,4 GHz
- Confirmez que l'adresse IP du Moniteur Série est correcte