Ví dụ ESP32 WebRotator Hướng dẫn điều khiển quay tương tác
Tổng quan
Ví dụ WebRotator tạo ra một giao diện điều khiển đĩa quay tương tác có thể truy cập từ bất kỳ trình duyệt web nào. Dành cho nền tảng giáo dục ESP32 với khả năng điều khiển động cơ được tăng cường, các tính năng điều khiển servo và động cơ bước tích hợp sẵn, và tích hợp liền mạch với các mô-đun giáo dục về robot. Hoàn hảo để điều khiển động cơ servo, động cơ bước, cánh tay robot, anten, hoặc bất kỳ hệ thống nào yêu cầu điều khiển quay chính xác.
Các tính năng
- Đĩa quay tương tác: Giao diện đĩa được điều khiển bằng cảm ứng và chuột
- Hai chế độ vận hành: Liên tục (0-360°) và phạm vi góc giới hạn
- Phản hồi góc thời gian thực: Hiển thị và điều khiển góc chính xác
- Chỉ báo vị trí trực quan: Dấu vị trí đĩa rõ ràng với thiết kế gradient
- 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
- Xử lý cấu hình tự động: Thiết lập chế độ và phạm vi một lần trong hàm khởi tạo
- Giao tiếp WebSocket: Phản hồi tức thì mà không làm mới trang
- Giao diện chuyên nghiệp: Thiết kế gradient nón với quay mượt mà
Phần cứng cần chuẩn bị
| 1 | × | mô-đun phát triển ESP-WROOM-32 | ||
| 1 | × | Alternatively, ESP32 Uno-form board | ||
| 1 | × | Alternatively, ESP32 S3 Uno-form board | ||
| 1 | × | USB Cable Type-A to Type-C (for USB-A PC) | ||
| 1 | × | USB Cable Type-C to Type-C (for USB-C PC) | ||
| 1 | × | động cơ servo (optional for testing) | ||
| 1 | × | breadboard | ||
| 1 | × | dây jumper | ||
| 1 | × | (Khuyến nghị) Screw Terminal Expansion Board for ESP32 | ||
| 1 | × | (Khuyến nghị) Breakout Expansion Board for ESP32 | ||
| 1 | × | (Khuyến nghị) Power Splitter for ESP32 |
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | ||
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | ||
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Hướng dẫn thiết lập
Các bước nhanh chóng
Làm theo các hướng dẫn này từng bước một:
- 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.
- Khởi động 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 của DIYables.
- Nhấn 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 nút Cài đặt Tất cả để cài đặt tất cả các phụ thuộc thư viện.
- Trong Arduino IDE, hãy vào File Examples DIYables ESP32 WebApps WebRotator ví dụ, hoặc sao chép mã ở trên và dán nó vào trình chỉnh sửa của Arduino IDE
/*
* DIYables WebApp Library - Web Rotator Example
*
* This example demonstrates the Web Rotator application:
* - Interactive rotatable disc control
* - Two modes: Continuous rotation and Limited angle range
* - Real-time angle feedback with WebSocket communication
* - Touch and mouse support for desktop and mobile
*
* Features:
* - Configurable rotation modes (continuous or limited)
* - Beautiful conic gradient disc with visual indicator
* - Real-time angle display and feedback
* - WebSocket communication for live updates
* - Professional responsive UI design
*
* 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://[esp32-ip]/web-rotator in your web browser
*/
#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
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
// Rotator configuration constants
const int ROTATOR_MODE = ROTATOR_MODE_CONTINUOUS; // Change to ROTATOR_MODE_LIMITED for limited rotation
const float MIN_ANGLE = 0.0; // Minimum angle for limited mode
const float MAX_ANGLE = 180.0; // Maximum angle for limited mode
// Create WebRotator page with configuration
//DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, MIN_ANGLE, MAX_ANGLE);
// Variables for angle tracking
float currentAngle = 0.0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
Serial.println("DIYables ESP32 WebApp - Web Rotator Example");
// Add pages to server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRotatorPage);
// Set 404 Not Found page (optional - for better user experience)
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Set callback functions for WebRotator
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
// Start server
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
if (ROTATOR_MODE == ROTATOR_MODE_LIMITED) {
Serial.println("\nRotator Mode: Limited");
Serial.print("Angle Range: ");
Serial.print(MIN_ANGLE);
Serial.print("° to ");
Serial.print(MAX_ANGLE);
Serial.println("°");
} else {
Serial.println("\nRotator Mode: Continuous Rotation");
}
Serial.println("\nTurn the disc in your web browser to control the rotator!");
}
void loop() {
// Handle web server and WebSocket connections
webAppsServer.loop();
// Simulate rotator movement or control actual hardware here
// For demonstration, we'll just echo back the received angle
delay(10);
}
/**
* Callback function called when angle is received from web interface
* This is where you would control your actual rotator hardware
*/
void onRotatorAngleReceived(float angle) {
currentAngle = angle;
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// TODO: Add your rotator control code here
// Examples:
// - Control servo motor: servo.write(map(angle, 0, 360, 0, 180));
// - Control stepper motor: stepper.moveTo(angle * stepsPerDegree);
// - Control DC motor with encoder feedback
// - Send commands to external rotator controller
// Note: No echo back to avoid interfering with smooth web interface rotation
}
/**
* Example function to change rotator mode at runtime
* Call this function to switch between continuous and limited modes
*/
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator mode changed to: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Limited (");
Serial.print(minAng);
Serial.print("° to ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continuous");
}
}
/**
* Example function to send angle updates to web interface
* Call this function when your rotator position changes
*/
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
- 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
COM6
DIYables WebApp - Web Rotator Example
INFO: Added app /
INFO: Added app /web-rotator
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 Rotator: http://192.168.0.2/web-rotator
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Nếu bạn không nhìn thấy gì, hãy khởi động lại bo mạch ESP32.
- Mở trình duyệt web trên máy tính để bàn hoặc điện thoại di động của bạn.
- Nhập địa chỉ IP được hiển thị trong Serial Monitor vào trình duyệt web.
- Ví dụ: http://192.168.1.100
- Bạn sẽ thấy trang chủ như hình dưới đây:
- Nhấp vào liên kết Web Rotator, bạn sẽ thấy giao diện người dùng của ứng dụng Web Rotator như dưới đây:
- Hoặc bạn cũng có thể truy cập trang này trực tiếp bằng địa chỉ IP kèm theo /web-rotator. Ví dụ: http://192.168.1.100/web-rotator
- Bạn sẽ thấy một đĩa quay tương tác mà bạn có thể kéo để điều khiển việc quay
Các tính năng của Giao diện Web
Điều khiển đĩa quay
- Đĩa tương tác: Nhấp và kéo để quay đĩa.
- Phản hồi trực quan: Hiển thị góc theo thời gian thực và chỉ báo vị trí.
- Hoạt hình mượt mà: Quay mượt với thiết kế gradient chuyên nghiệp.
- Hiển thị góc: Hiển thị góc hiện tại ở đơn vị độ.
- Chỉ báo chế độ: Hiển thị chế độ quay hiện tại và giới hạn.
Hỗ trợ cảm ứng và chuột
- Điều khiển trên máy tính để bàn: Nhấp chuột và kéo
- Điều khiển trên thiết bị di động: Chạm và vuốt
- Thiết kế đáp ứng: Tối ưu cho mọi kích thước màn hình
- Dấu hiệu trực quan: Các chỉ dẫn rõ ràng cho khu vực tương tác
Cấu hình mã nguồn
Cài đặt Rotator
// Continuous rotation mode (full 0-360 degrees)
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
// Limited rotation mode with custom range
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
// Set up angle callback
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
Nhận các lệnh góc
void onRotatorAngleReceived(float angle) {
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// Control your hardware here
}
Chế độ hoạt động
Chế độ liên tục
- Quay trọn vòng: từ 0° đến 360° và vượt xa hơn, không có giới hạn trên
- Không quay vòng: Các giá trị góc có thể tăng vượt quá 360° và không được đặt lại về 0°
- Trường hợp sử dụng: Các servo quay liên tục, ăng-ten, bàn xoay
- Cấu hình: ROTATOR_MODE_CONTINUOUS
Chế độ giới hạn
- Phạm vi tùy chỉnh: Định nghĩa góc tối thiểu và tối đa
- Giới hạn biên: Ngăn quay vượt quá giới hạn đã thiết lập
- Ứng dụng: Các servo tiêu chuẩn, cánh tay robot, hệ thống lái
- Cấu hình: ROTATOR_MODE_LIMITED, minAngle, maxAngle
Tích hợp phần cứng
Điều khiển động cơ servo
Lưu ý: Đoạn mã dưới đây chỉ là một phần của ví dụ và phải được tích hợp vào bản phác thảo ESP32 chính của bạn để hoạt động đúng.
#include <Servo.h>
Servo myServo;
// Set rotator to limited mode: 0 to 180 degrees
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
void setup() {
myServo.attach(9); // Servo on pin 9
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
}
void onRotatorAngleReceived(float angle) {
// Directly write angle (0-180) to servo
myServo.write((int)angle);
}
Điều khiển động cơ bước
#include <Stepper.h>
const int stepsPerRevolution = 200;
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);
void onRotatorAngleReceived(float angle) {
// Calculate steps for desired angle
int steps = (angle / 360.0) * stepsPerRevolution;
myStepper.step(steps);
}
Các tùy chọn tuỳ chỉnh
Phạm vi góc
- Góc quay tối thiểu: Đặt góc quay tối thiểu được cho phép
- Góc quay tối đa: Đặt góc quay tối đa được cho phép
- Góc mặc định: Góc bắt đầu khi hệ thống khởi động
- Độ phân giải: Điều khiển độ chính xác của các lần cập nhật góc
Ngoại hình trực quan
Giao diện web tự động thích nghi với cấu hình của bạn:
- Hiển thị giới hạn góc: Hiển thị các giới hạn góc đã được cấu hình
- Chỉ báo chế độ: Hiển thị chế độ hoạt động hiện tại
- Dấu đánh dấu vị trí: Dấu hiệu trực quan cho góc hiện tại
- Thiết kế gradient: Vẻ ngoài chuyên nghiệp với màu sắc mượt mà
Các trường hợp sử dụng phổ biến
Các dự án giáo dục
- Học điều khiển Servo: Hiểu về PWM và hoạt động của servo
- Giáo dục Robot: Định vị cánh tay, điều khiển các khớp
- Định vị ăng-ten: Điều khiển ăng-ten định hướng
- Camera Quay/Nghiêng: Định vị camera từ xa
Ứng dụng thực tế
- Tự động hóa gia đình: Rèm tự động, lỗ thông gió, cửa tự động
- Công nghệ rô-bốt: Các khớp của cánh tay rô-bốt, điều khiển rô-bốt di động
- Các dự án IoT: Hệ thống định vị từ xa
- Công nghiệp: Định vị tự động, điều khiển van
Xử lý sự cố
Xoay không hoạt động
- Kiểm tra kết nối WiFi và trạng thái WebSocket
- Xác nhận rằng hàm callback được thiết lập đúng
- Đảm bảo servo hoặc động cơ được kết nối đúng
- Kiểm tra nguồn cấp điện cho động cơ
Các giá trị góc không hợp lệ
- Kiểm tra ánh xạ góc cho phần cứng cụ thể của bạn
- Kiểm tra thư viện servo và cấu hình chân
- Đảm bảo tỷ lệ đúng trong hàm gọi lại
- Kiểm tra với đầu ra Serial Monitor
Các sự cố kết nối
- Kiểm tra địa chỉ IP trên trình duyệt
- Kiểm tra cài đặt tường lửa
- Đảm bảo mạng WiFi 2.4GHz (5GHz không được hỗ trợ)
- Thử làm mới trang trình duyệt
Các tính năng nâng cao
Thay đổi chế độ thời gian chạy
Bạn có thể thay đổi chế độ quay trong quá trình vận hành:
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator mode changed to: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Limited (");
Serial.print(minAng);
Serial.print("° to ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continuous");
}
}
Phản hồi vị trí
Gửi vị trí hiện tại trở về giao diện web:
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
Ghi chú: Gửi phản hồi góc thường xuyên đến giao diện web có thể làm cho chuyển động không được mượt mà. Chỉ sử dụng tính năng này khi cần cập nhật vị trí theo thời gian thực.
Điều khiển đa trục
Kết hợp nhiều bộ quay để định vị phức tạp:
DIYablesWebRotatorPage panRotator(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage tiltRotator(ROTATOR_MODE_LIMITED, -90.0, 90.0);
server.addApp(&panRotator);
server.addApp(&tiltRotator);
Tích hợp giáo dục
Mục tiêu học tập STEM
- Điều khiển động cơ: Hiểu cách hoạt động của servo và động cơ bước
- Hệ tọa độ: Đo góc và định vị
- Công nghệ Web: Giao diện điều khiển thời gian thực
- Lập trình: Các hàm gọi lại, điều khiển phần cứng
Các hoạt động trong lớp
- Hiệu chuẩn servo: Học cách vận hành servo và tín hiệu PWM
- Điều khiển vị trí: Thực hành các tác vụ định vị chính xác
- Tích hợp hệ thống: Kết hợp cảm biến với điều khiển động cơ
- Giải quyết vấn đề: Gỡ lỗi phần cứng và phần mềm
Ví dụ này cung cấp nền tảng toàn diện cho hệ thống điều khiển quay, lý tưởng cho cả các ứng dụng robot phục vụ giáo dục và thực hành.