Ví dụ ESP32 WebJoystick Hướng dẫn điều khiển joystick ảo
Tổng quan
Ví dụ WebJoystick tạo giao diện joystick ảo có thể truy cập từ bất kỳ trình duyệt web nào. Được thiết kế cho ESP32 nền tảng giáo dục với khả năng robotics được nâng cao, tính năng điều khiển động cơ tích hợp và tích hợp liền mạch với các mô-đun giáo dục robot. Hoàn hảo để điều khiển robot, phương tiện hoặc bất kỳ hệ thống nào yêu cầu đầu vào vị trí hai chiều.
Tính năng
- Joystick ảo: Điều khiển joystick tương tác qua giao diện web
- Tọa độ thời gian thực: Giá trị X/Y từ -100 đến +100 cho điều khiển chính xác
- Hỗ trợ cảm ứng và chuột: Hoạt động trên máy tính để bàn, máy tính bảng và thiết bị di động
- Chế độ trả về tự động có thể cấu hình: Tùy chọn cho joystick trả về vị trí giữa khi được thả
- Điều khiển độ nhạy: Độ nhạy có thể điều chỉnh để ngăn chặn cập nhật quá mức
- Phản hồi trực quan: Hiển thị vị trí thời gian thực và các giá trị tọa độ
- Giao tiếp WebSocket: Phản hồi tức thì mà không làm mới trang
- Vị trí trung tâm: Chỉ báo vị trí trung tâm rõ ràng cho điều khiển ở trạng thái trung lập
Phần cứng cần chuẩn bị
| 1 | × | 38-pin ESP32 ESP-WROOM-32 Dev Module - Narrow | Amazon | |
| 1 | × | Alternatively, 38-pin ESP32 ESP-WROOM-32 Dev Module - Wide | Amazon | |
| 1 | × | Alternatively, 30-pin ESP32 ESP-WROOM-32 Dev Module - Wide | Amazon | |
| 1 | × | Alternatively, ESP32 Uno-form board | Amazon | |
| 1 | × | Alternatively, ESP32 S3 Uno-form board | Amazon | |
| 1 | × | USB Cable Type-A to Type-C (for USB-A PC) | Amazon | |
| 1 | × | USB Cable Type-C to Type-C (for USB-C PC) | Amazon | |
| 1 | × | (Khuyến nghị) Screw Terminal Expansion Board for ESP32 | Amazon | |
| 1 | × | (Khuyến nghị) Breakout Expansion Board for ESP32 | Amazon | |
| 1 | × | (Khuyến nghị) Power Splitter for ESP32 | Amazon |
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | Amazon | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) | Amazon |
Tiết lộ: Một số liên kết trong bài viết này là liên kết tiếp thị Amazon và có thể nhận hoa hồng theo chính sách của chương trình.
Hướng dẫn thiết lập
Các bước nhanh
Hãy làm theo các hướng dẫn này từng bước:
- Nếu đây là lần đầu tiên bạn sử dụng ESP32, hãy tham khảo hướng dẫn về ESP32 - Cài Đặt Phần Mềm.
- Kết nối bo mạch ESP32 với máy tính của bạn bằng cáp USB.
- Mở Arduino IDE trên máy tính của bạn.
- Chọn bo mạch ESP32 phù hợp (ví dụ ESP32 Dev Module) và cổng COM.
- Đi tới biểu tượng Libraries ở thanh bên trái của Arduino IDE.
- Tìm kiếm "DIYables ESP32 WebApps", sau đó tìm thư viện DIYables ESP32 WebApps do DIYables cung cấp.
- Nhấp nút Install để cài đặt thư viện.
- Bạn sẽ được yêu cầu cài đặt một số phụ thuộc thư viện khác.
- Nhấp vào nút Cài đặt Tất cả để cài đặt tất cả các phụ thuộc thư viện.
- Trên Arduino IDE, hãy vào File Examples DIYables ESP32 WebApps WebJoystick ví dụ, hoặc sao chép mã ở trên và dán nó vào trình soạn thảo của 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);
}
- Cấu hình thông tin xác thực WiFi trong mã nguồn bằng cách cập nhật các dòng này:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Nhấn nút Tải lên trên Arduino IDE để tải mã lên ESP32
- Mở Serial Monitor
- Kiểm tra kết quả trên Serial Monitor. Nó trông như dưới đây
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
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
==========================================
- Nếu bạn không thấy gì, hãy khởi động lại bo mạch ESP32.
- Ghi nhớ địa chỉ IP được hiển thị, và nhập địa chỉ này vào thanh địa chỉ của trình duyệt web trên điện thoại thông minh hoặc PC của bạn.
- Ví dụ: http://192.168.0.2
- Bạn sẽ thấy trang chủ như hình dưới đây:
- Nhấp vào liên kết Web Joystick, bạn sẽ thấy giao diện người dùng của ứng dụng Web Joystick như dưới đây:
- Hoặc bạn cũng có thể truy cập trang trực tiếp bằng địa chỉ IP kèm theo /web-joystick. Ví dụ: http://192.168.0.2/web-joystick
- Hãy thử điều khiển joystick ảo bằng cách nhấp và kéo trên vùng joystick và quan sát các giá trị tọa độ X/Y (-100 đến +100) trong Serial Monitor.
Tùy chỉnh sáng tạo - Điều chỉnh mã cho dự án của bạn
2. Cấu hình cài đặt Joystick
Joystick có thể được cấu hình với các tham số khác nhau:
Cấu hình cơ bản
// Create joystick with default settings (autoReturn=true, sensitivity=1)
DIYablesWebJoystickPage webJoystickPage;
Cấu hình nâng cao
// Create joystick with custom settings
// autoReturn=false: Joystick stays at last position when released
// sensitivity=5: Only send updates when movement > 5%
DIYablesWebJoystickPage webJoystickPage(false, 5);
Cách sử dụng Joystick
Các điều khiển giao diện web
Giao diện joystick cung cấp:
- Bảng điều khiển joystick: Khu vực điều khiển hình tròn cho đầu vào cảm ứng/chuột
- Chỉ báo vị trí: Hiển thị vị trí joystick hiện tại
- Hiển thị tọa độ: Giá trị X/Y theo thời gian thực (-100 đến +100)
- Điểm giữa: Tham chiếu trực quan cho vị trí trung lập
Vận hành Joystick
Máy tính để bàn (Điều khiển chuột)
- Nhấp và kéo: Nhấp vào joystick và kéo để di chuyển
- Buông: Joystick trả về vị trí trung tâm (nếu autoReturn=true)
- Vị trí nhấp chuột: Nhấp trực tiếp để đặt vị trí của joystick
Điện thoại di động/Máy tính bảng (Điều khiển cảm ứng)
- Chạm và kéo: Chạm vào joystick và kéo ngón tay để di chuyển
- Đa chạm: Một ngón tay để điều khiển chính xác
- Thả: Tự động trả về vị trí trung tâm (nếu được bật)
Hệ tọa độ
Joystick cung cấp các tọa độ trong một hệ tọa độ Cartesian chuẩn:
- Trục X: -100 (ở bên trái hoàn toàn) đến +100 (ở bên phải hoàn toàn)
- Trục Y: -100 (ở dưới hoàn toàn) đến +100 (ở trên hoàn toàn)
- Trung tâm: X=0, Y=0 (vị trí trung tính)
- Các góc: Các vị trí chéo cung cấp giá trị X/Y kết hợp
Ví dụ Lập trình
Trình xử lý Joystick cơ bản
void setup() {
// 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
Serial.println("Joystick - X: " + String(x) + ", Y: " + String(y));
// Add your control logic here
});
}
Ví dụ điều khiển động cơ
// Pin definitions for 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() {
// Configure 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) {
// Convert joystick coordinates to motor speeds
int leftSpeed = y + x; // Forward/backward + turn left/right
int rightSpeed = y - x; // Forward/backward - turn left/right
// Constrain speeds to valid range
leftSpeed = constrain(leftSpeed, -100, 100);
rightSpeed = constrain(rightSpeed, -100, 100);
// Control left 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);
}
// Control right 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);
}
}
Ví dụ Điều khiển Servo
#include <Servo.h>
Servo panServo; // X-axis control (left/right)
Servo tiltServo; // Y-axis control (up/down)
void setup() {
// Attach servos to pins
panServo.attach(9);
tiltServo.attach(10);
// Center servos initially
panServo.write(90);
tiltServo.write(90);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
controlServos(x, y);
});
}
void controlServos(int x, int y) {
// Map joystick coordinates to servo angles
int panAngle = map(x, -100, 100, 0, 180); // X controls pan (0-180°)
int tiltAngle = map(y, -100, 100, 180, 0); // Y controls tilt (inverted)
// Move servos to calculated positions
panServo.write(panAngle);
tiltServo.write(tiltAngle);
Serial.println("Pan: " + String(panAngle) + "°, Tilt: " + String(tiltAngle) + "°");
}
Chỉ báo vị trí đèn LED
// LED pins for position indication
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() {
// Configure 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) {
// Turn off all LEDs first
digitalWrite(LED_UP, LOW);
digitalWrite(LED_DOWN, LOW);
digitalWrite(LED_LEFT, LOW);
digitalWrite(LED_RIGHT, LOW);
digitalWrite(LED_CENTER, LOW);
// Check if joystick is near center
if (abs(x) < 10 && abs(y) < 10) {
digitalWrite(LED_CENTER, HIGH);
return;
}
// Activate LEDs based on direction
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);
}
Cấu hình nâng cao
Thay đổi cấu hình thời gian chạy
void setup() {
// Initial setup with default values
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
handleJoystickInput(x, y);
});
// Change settings at runtime
webJoystickPage.setAutoReturn(false); // Disable auto-return
webJoystickPage.setSensitivity(10.0); // Reduce sensitivity
}
void handleJoystickInput(int x, int y) {
// Handle different modes based on current settings
static bool precisionMode = false;
// Toggle precision mode with extreme positions
if (abs(x) > 95 && abs(y) > 95) {
precisionMode = !precisionMode;
if (precisionMode) {
webJoystickPage.setSensitivity(1.0); // High sensitivity
Serial.println("Precision mode ON");
} else {
webJoystickPage.setSensitivity(10.0); // Low sensitivity
Serial.println("Precision mode OFF");
}
}
}
Triển khai vùng chết
void processJoystickWithDeadZone(int x, int y) {
const int DEAD_ZONE = 15; // 15% dead zone around center
// Apply dead zone filtering
int filteredX = (abs(x) < DEAD_ZONE) ? 0 : x;
int filteredY = (abs(y) < DEAD_ZONE) ? 0 : y;
// Scale values outside 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;
}
// Use filtered values for control
controlDevice(filteredX, filteredY);
}
Tăng tốc theo thời gian
class SpeedController {
private:
int targetX = 0, targetY = 0;
int currentX = 0, currentY = 0;
unsigned long lastUpdate = 0;
const int RAMP_RATE = 5; // Change per update cycle
public:
void setTarget(int x, int y) {
targetX = x;
targetY = y;
}
void update() {
if (millis() - lastUpdate > 20) { // Update every 20ms
// Ramp X value
if (currentX < targetX) {
currentX = min(currentX + RAMP_RATE, targetX);
} else if (currentX > targetX) {
currentX = max(currentX - RAMP_RATE, targetX);
}
// Ramp Y value
if (currentY < targetY) {
currentY = min(currentY + RAMP_RATE, targetY);
} else if (currentY > targetY) {
currentY = max(currentY - RAMP_RATE, targetY);
}
// Apply ramped values
applyControlValues(currentX, currentY);
lastUpdate = millis();
}
}
void applyControlValues(int x, int y) {
// Your control logic here with smooth ramped values
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(); // Apply speed ramping
}
Ví dụ về tích hợp phần cứng
Điều khiển xe robot
void setupRobotCar() {
// Motor driver pins
pinMode(2, OUTPUT); // Left motor direction 1
pinMode(3, OUTPUT); // Left motor direction 2
pinMode(4, OUTPUT); // Right motor direction 1
pinMode(5, OUTPUT); // Right motor direction 2
pinMode(9, OUTPUT); // Left motor PWM
pinMode(10, OUTPUT); // Right motor PWM
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Tank drive calculation
int leftMotor = y + (x / 2); // Forward/back + steering
int rightMotor = y - (x / 2); // Forward/back - steering
// Constrain to valid range
leftMotor = constrain(leftMotor, -100, 100);
rightMotor = constrain(rightMotor, -100, 100);
// Control motors
setMotorSpeed(9, 2, 3, leftMotor); // Left motor
setMotorSpeed(10, 4, 5, rightMotor); // Right 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);
}
}
Điều khiển gimbal máy ảnh
#include <Servo.h>
Servo panServo, tiltServo;
int panOffset = 90, tiltOffset = 90; // Center positions
void setupCameraGimbal() {
panServo.attach(9);
tiltServo.attach(10);
// Set initial center positions
panServo.write(panOffset);
tiltServo.write(tiltOffset);
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Calculate servo positions with offset
int panPos = panOffset + map(x, -100, 100, -45, 45); // ±45° range
int tiltPos = tiltOffset + map(y, -100, 100, -30, 30); // ±30° range
// Constrain to servo limits
panPos = constrain(panPos, 0, 180);
tiltPos = constrain(tiltPos, 0, 180);
// Move servos smoothly
panServo.write(panPos);
tiltServo.write(tiltPos);
});
}
Điều khiển màu LED RGB
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) {
// Convert joystick position to RGB values
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); // Diagonal distance
// Apply quadrant-specific color mixing
if (x > 0 && y > 0) {
// Upper right: Red + Green = Yellow
blue = 0;
} else if (x < 0 && y > 0) {
// Upper left: Green + Blue = Cyan
red = 0;
} else if (x < 0 && y < 0) {
// Lower left: Blue + Red = Magenta
green = 0;
} else if (x > 0 && y < 0) {
// Lower right: Red only
green = blue = 0;
}
// Set RGB values
analogWrite(RED_PIN, red);
analogWrite(GREEN_PIN, green);
analogWrite(BLUE_PIN, blue);
});
}
Khắc phục sự cố
Các sự cố phổ biến
- Joystick không phản hồi
- Kiểm tra trạng thái kết nối WebSocket trong console của trình duyệt
- Kiểm tra kết nối mạng
- Làm mới trang trình duyệt
- Kiểm tra Serial Monitor để xem lỗi
2. Chuyển động giật cục hoặc không đồng đều
- Tăng giá trị độ nhạy để giảm tần suất cập nhật
- Triển khai lọc vùng chết
- Thêm dải tăng tốc để các chuyển động diễn ra mượt mà
- Kiểm tra vấn đề độ trễ mạng
3. Tự động trả lại không hoạt động
- Xác nhận thiết lập autoReturn: webJoystickPage.setAutoReturn(true)
- Kiểm tra khả năng tương thích trình duyệt (một số thiết bị cảm ứng khác nhau)
- Thử nghiệm với các phương thức nhập khác nhau (chuột và cảm ứng)
4. Giá trị không đạt được phạm vi đầy đủ
- Kiểm tra hiệu chuẩn của joystick trong giao diện web
- Xác nhận các phép tính tọa độ trong hàm gọi lại
- Kiểm tra với các kết hợp trình duyệt/thiết bị khác nhau
Mẹo gỡ lỗi
Thêm gỡ lỗi toàn diện:
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("=====================");
}
Ý tưởng dự án
Các dự án robot
- Điều khiển xe ô tô robot từ xa
- Điều khiển cánh tay robot
- Điều khiển bay drone (các động tác cơ bản)
- Điều hướng cho robot thú cưng
Tự động hóa nhà
- Điều khiển rèm thông minh (mở/đóng/vị trí)
- Điều khiển quay và ngả của camera
- Điều khiển độ sáng và màu sắc của đèn
- Điều khiển tốc độ và hướng quạt
Các dự án giáo dục
- Công cụ giảng dạy hệ tọa độ
- Các minh họa điều khiển động cơ
- Các thí nghiệm định vị servo
- Giao diện điều khiển trò chơi
Nghệ thuật và các dự án sáng tạo
- Điều khiển mẫu ma trận LED
- Điều khiển trực quan hóa âm nhạc
- Điều khiển robot vẽ
- Các cài đặt nghệ thuật tương tác
Tích hợp với các ví dụ khác
Kết hợp với WebSlider
Sử dụng joystick để điều hướng và các thanh trượt để điều chỉnh tốc độ và cường độ.
// Use joystick for direction, sliders for speed limits
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
int maxSpeed = getSliderValue(); // From WebSlider
int scaledX = map(x, -100, 100, -maxSpeed, maxSpeed);
int scaledY = map(y, -100, 100, -maxSpeed, maxSpeed);
controlRobot(scaledX, scaledY);
});
Kết hợp với WebDigitalPins
Sử dụng các vị trí của joystick để kích hoạt trạng thái của các chân số:
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Activate pins based on joystick quadrants
webDigitalPinsPage.setPinState(2, x > 50); // Right quadrant
webDigitalPinsPage.setPinState(3, x < -50); // Left quadrant
webDigitalPinsPage.setPinState(4, y > 50); // Upper quadrant
webDigitalPinsPage.setPinState(5, y < -50); // Lower quadrant
});
Các bước tiếp theo
Sau khi nắm vững ví dụ WebJoystick, hãy thử:
- WebSlider - Để điều khiển analog bổ sung
- WebDigitalPins - Để điều khiển bật/tắt rời rạc
- WebMonitor - Để gỡ lỗi các giá trị của joystick
- MultipleWebApps - Kết hợp joystick với các điều khiển khác
Hỗ trợ
Để được hỗ trợ thêm:
- Kiểm tra tài liệu tham khảo API
- Truy cập các bài hướng dẫn DIYables: https://esp32io.com/tutorials/diyables-esp32-webapps
- Các diễn đàn cộng đồng ESP32
Bài hướng dẫn liên quan
📱 Ứng dụng đề xuất
English for KidsHọc tiếng Anh vui nhộn cho trẻ nhỏ.Tải về trênGoogle PlayTải về trênApp Store
Bubble NoteGhi chú tự xóa — viết như nhắn tin.Tải về trênGoogle PlayTải về trênApp Store
Tôi Không MuaĐánh bại mua sắm bốc đồng, tiết kiệm hơn.Tải về trênGoogle PlayTải về trênApp Store
Con Đường Tri ThứcBài thi thử để học mọi thứ.Tải về trênGoogle PlayTải về trênApp Store