Arduino Nano ESP32 Web Joystick com a Biblioteca DIYables ESP32 WebApps
Visão Geral
Este tutorial aborda a classe DIYablesWebJoystickPage da Biblioteca DIYables ESP32 WebApps. A página do navegador renderiza um joystick virtual com suporte a toque e mouse, que envia coordenadas X/Y para o Arduino Nano ESP32 via WebSocket. O sketch registra um callback que recebe esses valores e pode aplicá-los a drivers de motor, controladores de servo ou qualquer hardware direcional.
O Que Este Tutorial Aborda
- Instanciar a página do joystick com as configurações de retorno automático e sensibilidade
- Receber os valores de posição X/Y em um callback do sketch
- Usar as coordenadas para controlar um sistema de motores com tração diferencial
- Devolver ao navegador a posição atual do joystick quando solicitado
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Passos
Siga estas instruções passo a passo:
- Se esta for a primeira vez que você usa o Arduino Nano ESP32, consulte o tutorial sobre como configurar o ambiente de desenvolvimento do Arduino Nano ESP32.
- Conecte a placa Arduino Nano ESP32 ao seu computador usando um cabo USB.
- Abra a Arduino IDE no seu computador.
- Selecione a placa apropriada (por exemplo, Arduino Nano ESP32) e a porta COM.
- Vá até o ícone Libraries na barra à esquerda da Arduino IDE.
- Pesquise por "DIYables ESP32 WebApps" e encontre a DIYables ESP32 WebApps Library, de DIYables
- Clique no botão Install para instalar a biblioteca.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Será solicitado que você instale algumas outras dependências da biblioteca
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- Na Arduino IDE, vá até File Examples DIYables ESP32 WebApps WebJoystick, ou copie o código acima e cole-o no editor da 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);
}
- Atualize as credenciais do WiFi no sketch:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Clique no botão Upload na Arduino IDE para fazer o upload do código para o Arduino Nano ESP32
- Abra o Serial Monitor
- A saída do Serial Monitor deve ser parecida com esta:
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
==========================================
- Se nada aparecer, pressione o botão de reset da placa.
- Digite o endereço IP do Serial Monitor em um navegador na mesma rede.
- Exemplo: http://192.168.0.2
- A página inicial exibe um card para o aplicativo de joystick:
- Selecione o card Web Joystick para abrir a página de controle:
- A página também pode ser acessada diretamente em http://192.168.0.2/web-joystick.
- Arraste o joystick e observe os valores X/Y impressos no Serial Monitor.
Configuração do Joystick
Configurações Padrão
// autoReturn defaults to true, sensitivity defaults to 10.0
DIYablesWebJoystickPage webJoystickPage;
Configurações Personalizadas
// autoReturn=false: joystick holds position after release
// sensitivity=5: updates only when displacement exceeds 5%
DIYablesWebJoystickPage webJoystickPage(false, 5);
Sistema de Coordenadas
- Eixo X: –100 (totalmente à esquerda) a +100 (totalmente à direita)
- Eixo Y: –100 (totalmente para baixo) a +100 (totalmente para cima)
- Centro: X = 0, Y = 0 (neutro)
Callbacks
Recebendo Atualizações de Posição
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
currentJoystickX = x;
currentJoystickY = y;
Serial.println("X: " + String(x) + " Y: " + String(y));
// Apply to hardware here
});
Fornecendo a Posição ao Navegador
Chamado quando um navegador se conecta e solicita o estado atual:
webJoystickPage.onJoystickValueToWeb([]() {
webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY);
});
Exemplo de Controle de Motor
Mapeie o X/Y do joystick para um sistema de motores com tração diferencial:
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);
});
Solução de Problemas
O joystick se move no navegador, mas o Serial Monitor não mostra nada
- Verifique se onJoystickValueFromWeb está registrado antes de webAppsServer.begin()
- Confirme se o indicador de status do WebSocket mostra "connected" no navegador
O joystick não volta para o centro
- autoReturn deve ser true no construtor (o padrão é true)
- O navegador cuida da animação de retorno; a placa recebe apenas os eventos de posição
Atualizações demais por segundo causando lag
- Aumente o parâmetro sensitivity (por exemplo, mude de 5 para 15)
- Adicione uma verificação de intervalo mínimo no callback antes de executar as ações de hardware
Placa inacessível
- Tanto a placa quanto o dispositivo do navegador devem estar na mesma rede de 2,4 GHz
- Confirme se o endereço IP do Serial Monitor está correto