ESP32 Điều Khiển Servo Motor qua Web
Hướng dẫn này sẽ chỉ bạn cách sử dụng ESP32 để điều khiển servo motor qua web từ trình duyệt trên smartphone hoặc PC của bạn. Chúng ta sẽ sử dụng WebSocket để điều khiển servo motor một cách mượt mà và động thông qua giao diện web đồ họa.
Video dưới đây là một minh họa:
Vậy tại sao lại sử dụng WebSocket? Ý tưởng là như thế này:
- Không có WebSocket, mỗi lần bạn muốn thay đổi góc của servo, bạn phải reload trang. Không tốt lắm!
- Nhưng với WebSocket, chúng ta thiết lập một kết nối đặc biệt giữa trang web và ESP32. Điều này có nghĩa là chúng ta có thể gửi giá trị góc đến ESP32 ở background, mà không cần reload trang. Điều đó làm cho servo chuyển động mượt mà và theo thời gian thực. Khá tuyệt phải không?
Bắt đầu thôi!
Phần Cứng Cần Thiết
| 1 | × | mô-đun phát triển ESP-WROOM-32 | ||
| 1 | × | Alternatively, ESP32 Uno-form board | ||
| 1 | × | Alternatively, ESP32 S3 Uno-form board | ||
| 1 | × | Cáp USB Type-C | ||
| 1 | × | động cơ servo | ||
| 1 | × | breadboard (Bo mạch thí nghiệm) | ||
| 1 | × | Dây Jumper | ||
| 1 | × | (Tùy chọn) DC Power Jack | ||
| 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) |
Về Servo Motor và WebSocket
Chúng tôi có các tutorial chuyên biệt về servo motor và WebSocket. Mỗi tutorial chứa thông tin chi tiết và hướng dẫn từng bước về pinout phần cứng, nguyên lý hoạt động, kết nối dây với ESP32, code ESP32... Tìm hiểu thêm tại các liên kết sau:
- Tutorial ESP32 - Servo Motor
- Tutorial ESP32 - WebSocket
Cách Thức Hoạt Động
Code ESP32 tạo ra cả web server và WebSocket Server. Đây là cách nó hoạt động:
- Khi bạn nhập địa chỉ IP của ESP32 vào trình duyệt web, nó yêu cầu trang web (User Interface) từ ESP32.
- Web server của ESP32 phản hồi bằng cách gửi nội dung trang web (HTML, CSS, JavaScript).
- Trình duyệt web của bạn sau đó hiển thị trang web.
- Code JavaScript trong trang web thiết lập kết nối WebSocket đến WebSocket server trên ESP32.
- Một khi kết nối WebSocket này được thiết lập, nếu bạn xoay handle trên trang web, code JavaScript sẽ gửi giá trị góc đến ESP32 thông qua kết nối WebSocket này ở background.
- WebSocket server trên ESP32, khi nhận được giá trị góc, sẽ điều khiển servo motor tương ứng.
Tóm lại, kết nối WebSocket cho phép điều khiển góc servo motor mượt mà và theo thời gian thực.
Sơ Đồ Kết Nối giữa Servo Motor và ESP32
This image is created using Fritzing. Click to enlarge image
Nếu bạn chưa rõ cách cấp nguồn cho ESP32 và các linh kiện khác, xem: Cách Cung Cấp Nguồn Điện Cho ESP32.
Để đơn giản, sơ đồ kết nối trên được sử dụng cho mục đích thử nghiệm hoặc học tập, và cho servo motor có mô-men xoắn nhỏ. Trong thực tế, chúng tôi khuyên bạn nên sử dụng nguồn điện bên ngoài cho servo motor. Sơ đồ kết nối dưới đây cho thấy cách kết nối servo motor với nguồn điện bên ngoài.
This image is created using Fritzing. Click to enlarge image
Dưới đây là kết nối thực tế giữa servo motor và ESP32.
Code ESP32
Nội dung trang web (HTML, CSS, JavaScript) được lưu trữ riêng biệt trong file index.h. Vì vậy, chúng ta sẽ có hai file code trong Arduino IDE:
- File .ino chứa code ESP32, tạo web server và WebSocket Server, và điều khiển servo motor
- File .h chứa nội dung trang web.
Các Bước Nhanh
- Nếu đây là lần đầu bạn sử dụng ESP32, hãy xem ESP32 - Cài Đặt Phần Mềm.
- Thực hiện kết nối dây như hình trên.
- Kết nối board ESP32 với PC của bạn qua cáp micro USB
- Mở Arduino IDE trên PC của bạn.
- Chọn đúng board ESP32 (ví dụ: ESP32 Dev Module) và cổng COM.
- Mở Library Manager bằng cách click vào icon Library Manager trên thanh điều hướng bên trái của Arduino IDE.
- Tìm kiếm "DIYables ESP32 WebServer", sau đó tìm thư viện Web Server được tạo bởi DIYables.
- Click nút Install để cài đặt thư viện Web Server.
- Gõ ESP32Servo vào ô tìm kiếm, sau đó tìm thư viện servo của Kevin Harrington, John K. Bennett.
- Click nút Install để cài đặt thư viện servo motor cho ESP32.
- Trên Arduino IDE, tạo sketch mới, Đặt tên cho nó, ví dụ: newbiely.com.ino
- Copy code dưới đây và mở với Arduino IDE
/*
* Mã ESP32 này được phát triển bởi newbiely.vn
* Mã ESP32 này được cung cấp để sử dụng công khai, không có ràng buộc.
* Để xem hướng dẫn chi tiết và sơ đồ kết nối, vui lòng truy cập:
* https://newbiely.vn/tutorials/esp32/esp32-controls-servo-motor-via-web
*/
#include <ESP32Servo.h>
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
#define SERVO_PIN 26 // ESP32 pin GPIO26 connected to servo motor
Servo servo;
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
DIYables_ESP32_WebSocket* webSocket;
// Web Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// HTML_CONTENT from the index.h file
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
// Send welcome message
const char welcome[] = "Connected to ESP32 WebSocket Server!";
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
String angle = String(message);
int angle_value = angle.toInt();
Serial.println(angle_value);
servo.write(angle_value);
}
void onWebSocketClose(net::WebSocket& ws, const net::WebSocket::CloseCode code, const char* reason, uint16_t length) {
Serial.println("WebSocket client disconnected");
}
void setup() {
Serial.begin(9600);
delay(1000);
servo.attach(SERVO_PIN); // attaches the servo on ESP32 pin
Serial.println("ESP32 Web Server and WebSocket Server");
// Configure web server routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Enable WebSocket functionality
webSocket = server.enableWebSocket(81);
if (webSocket != nullptr) {
// Set up WebSocket event handlers
webSocket->onOpen(onWebSocketOpen);
webSocket->onMessage(onWebSocketMessage);
webSocket->onClose(onWebSocketClose);
} else {
Serial.println("Failed to start WebSocket server");
}
}
void loop() {
// Then handle HTTP requests
server.handleClient();
// Handle WebSocket
server.handleWebSocket();
}
- Sửa thông tin WiFi (SSID và password) trong code để phù hợp với thông tin mạng của bạn.
- Tạo file index.h trên Arduino IDE bằng cách:
- Click vào nút ngay dưới icon serial monitor và chọn New Tab, hoặc sử dụng phím Ctrl+Shift+N.
- Đặt tên file là index.h và click nút OK
- Copy code dưới đây và dán vào index.h.
- Bây giờ bạn có code trong hai file: newbiely.com.ino và index.h
- Click nút Upload trên Arduino IDE để upload code lên ESP32
- Mở Serial Monitor
- Kiểm tra kết quả trên Serial Monitor.
- 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 smartphone hoặc PC của bạn.
- Bạn sẽ thấy trang web như dưới đây:
- Code JavaScript của trang web tự động tạo kết nối WebSocket đến ESP32.
- Bây giờ bạn có thể điều khiển góc servo motor qua giao diện web.
- Nếu bạn chỉnh sửa nội dung HTML trong file index.h và không thay đổi gì trong file newbiely.com.ino, khi bạn compile và upload code lên ESP32, Arduino IDE sẽ không cập nhật nội dung HTML.
- Để làm cho Arduino IDE cập nhật nội dung HTML trong trường hợp này, hãy thực hiện thay đổi trong file newbiely.com.ino (ví dụ: thêm dòng trống, thêm comment....)
/*
* Mã ESP32 này được phát triển bởi newbiely.vn
* Mã ESP32 này được cung cấp để sử dụng công khai, không có ràng buộc.
* Để xem hướng dẫn chi tiết và sơ đồ kết nối, vui lòng truy cập:
* https://newbiely.vn/tutorials/esp32/esp32-controls-servo-motor-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controls Servo Motor via Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style>
body { text-align: center; }
canvas { background-color: #ffffff; }
</style>
<script>
var canvas_width = 401, canvas_height = 466;
var pivot_x = 200, pivot_y = 200;
var bracket_radius = 160, bracket_angle = 0;
var bracket_img = new Image();
var click_state = 0;
var last_angle = 0;
var mouse_xyra = {x:0, y:0, r:0.0, a:0.0};
var ws;
bracket_img.src = "https://esp32io.com/images/tutorial/servo-bracket.png";
function init()
{
var servo = document.getElementById("servo");
servo.width = canvas_width;
servo.height = canvas_height;
servo.style.backgroundImage = "url('https://esp32io.com/images/tutorial/servo-body.png')";
servo.style.backgroundPosition = "center";
servo.style.backgroundSize = "contain";
servo.addEventListener("touchstart", mouse_down);
servo.addEventListener("touchend", mouse_up);
servo.addEventListener("touchmove", mouse_move);
servo.addEventListener("mousedown", mouse_down);
servo.addEventListener("mouseup", mouse_up);
servo.addEventListener("mousemove", mouse_move);
var ctx = servo.getContext("2d");
ctx.translate(pivot_x, pivot_y);
rotate_bracket(0);
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = function(){ document.getElementById("ws_state").innerHTML = "CONNECTED" };
ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "CLOSED"};
ws.onerror = function(){ alert("websocket error " + this.url) };
ws.onmessage = ws_onmessage;
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
alert("msg : " + e_msg.data);
}
function rotate_bracket(angle)
{
var servo = document.getElementById("servo");
var ctx = servo.getContext("2d");
ctx.clearRect(-pivot_x, -pivot_y, canvas_width, canvas_height);
ctx.rotate(angle / 180 * Math.PI);
ctx.drawImage(bracket_img, -pivot_x, -pivot_y);
ctx.rotate(-angle / 180 * Math.PI);
}
function check_range_xyra(event, mouse_xyra)
{
var x, y, r, a, rc_x, rc_y, radian;
var min_r, max_r, width;
if(event.touches)
{
var touches = event.touches;
x = (touches[0].pageX - touches[0].target.offsetLeft) - pivot_x;
y = pivot_y - (touches[0].pageY - touches[0].target.offsetTop);
min_r = 60;
max_r = pivot_x;
width = 40;
}
else
{
x = event.offsetX - pivot_x;
y = pivot_y - event.offsetY;
min_r = 60;
max_r = bracket_radius;
width = 20;
}
/* cartesian to polar coordinate conversion */
r = Math.sqrt(x * x + y * y);
a = Math.atan2(y, x);
mouse_xyra.x = x;
mouse_xyra.y = y;
mouse_xyra.r = r;
mouse_xyra.a = a;
radian = bracket_angle / 180 * Math.PI;
/* rotate coordinate */
rc_x = x * Math.cos(radian) - y * Math.sin(radian);
rc_y = x * Math.sin(radian) + y * Math.cos(radian);
if((r < min_r) || (r > max_r))
return false;
if((rc_y < -width) || (rc_y > width))
return false;
return true;
}
function mouse_down()
{
if(event.touches && (event.touches.length > 1))
click_state = event.touches.length;
if(click_state > 1)
return;
if(check_range_xyra(event, mouse_xyra))
{
click_state = 1;
last_angle = mouse_xyra.a / Math.PI * 180.0;
}
}
function mouse_up()
{
click_state = 0;
}
function mouse_move()
{
var angle;
if(event.touches && (event.touches.length > 1))
click_state = event.touches.length;
if(click_state > 1)
return;
if(!click_state)
return;
if(!check_range_xyra(event, mouse_xyra))
{
click_state = 0;
return;
}
angle = mouse_xyra.a / Math.PI * 180.0;
if((Math.abs(angle) > 90) && (angle * last_angle < 0))
{
if(last_angle > 0)
last_angle = -180;
else
last_angle = 180;
}
bracket_angle += (last_angle - angle);
last_angle = angle;
if(bracket_angle > 90)
bracket_angle = 90;
if(bracket_angle < -90)
bracket_angle = -90;
rotate_bracket(bracket_angle);
if(ws.readyState == 1)
ws.send(Math.floor(90 - bracket_angle) + "\r\n");
debug = document.getElementById("debug");
debug.innerHTML = Math.floor(90 - bracket_angle);
event.preventDefault();
}
window.onload = init;
</script>
</head>
<body>
<h2>
ESP32 - Servo Motor via Web<br>
<canvas id="servo"></canvas>
<p>
WebSocket : <span id="ws_state" style="color:blue">null</span><br>
Angle : <span id="debug" style="color:blue">90</span>
</p>
</h2>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</body>
</html>
)=====";
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
Để tiết kiệm bộ nhớ của ESP32, các hình ảnh của servo motor KHÔNG được lưu trữ trên ESP32. Thay vào đó, chúng được lưu trữ trên internet, vì vậy, điện thoại hoặc PC của bạn cần có kết nối internet để tải hình ảnh cho trang điều khiển web.
※ Lưu ý:
Giải Thích Code Từng Dòng
Code ESP32 ở trên có giải thích từng dòng. Hãy đọc các comment trong code!