Arduino UNO R4 điều khiển Xe qua Web
Hướng dẫn này sẽ chỉ bạn cách điều khiển xe robot RC 2WD qua web bằng Arduino Uno R4 WiFi. Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn từng bước để thiết lập và điều khiển xe robot của bạn từ xa, tận dụng khả năng mạnh mẽ của Arduino Uno R4 với WiFi tích hợp. Sau khi hoàn thành hướng dẫn này, bạn sẽ học được:
- Tại sao cần WebSocket để điều khiển xe RC
- Cách kết nối xe robot 2WD với Arduino Uno R4 WiFi.
- Cách lập trình Arduino Uno R4 WiFi để cung cấp giao diện web cho phép bạn quay xe robot sang trái/phải, tiến/lùi.
Hướng dẫn này hoàn hảo cho những người có sở thích, sinh viên và bất kỳ ai quan tâm đến robotics và hệ thống điều khiển qua web. Cho dù bạn là người mới bắt đầu hay đã có một số kinh nghiệm với Arduino, hướng dẫn từng bước của chúng tôi sẽ giúp bạn đạt được mục tiêu điều khiển xe robot RC 2WD từ xa.
Hãy bắt đầu hành trình thú vị kết hợp robotics và công nghệ web này!
Phần Cứng Cần Thiết
| 1 | × | Arduino UNO R4 WiFi | ||
| 1 | × | Alternatively, DIYables STEM V4 IoT | ||
| 1 | × | (Tùy chọn) DIYables STEM V4 IoT | ||
| 1 | × | Cáp USB Type-C | ||
| 1 | × | Xe RC 2WD | ||
| 1 | × | Module Driver Motor L298N | ||
| 1 | × | Bộ Điều Khiển Từ Xa IR | ||
| 1 | × | Pin CR2025 (cho điều khiển từ xa IR) | ||
| 1 | × | Pin AA 1.5V (cho Arduino UNO R4 và Xe) | ||
| 1 | × | Dây Nối Jumper | ||
| 1 | × | breadboard | ||
| 1 | × | (Khuyến nghị) Screw Terminal Block Shield for Arduino UNO R4 | ||
| 1 | × | (Khuyến nghị) Breadboard Shield for Arduino UNO R4 | ||
| 1 | × | (Khuyến nghị) Enclosure for Arduino UNO R4 | ||
| 1 | × | (Khuyến nghị) Power Splitter for Arduino UNO R4 | ||
| 1 | × | (Khuyến nghị) Prototyping Base Plate & Breadboard Kit for Arduino UNO |
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | ||
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | ||
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Tại sao cần WebSocket để điều khiển xe RC?
- Nếu không có WebSocket, bạn sẽ phải refresh lại trang mỗi khi muốn thay đổi hướng của xe. Phương pháp này không hiệu quả lắm.
- Với WebSocket, một kết nối chuyên dụng được tạo ra giữa trang web và Arduino UNO R4. Thiết lập này cho phép bạn gửi lệnh đến Arduino UNO R4 mà không cần refresh trang. Kết quả là xe robot phản hồi nhanh chóng và mượt mà. Thật tuyệt vời phải không?
Tóm lại, WebSocket cho phép bạn điều khiển robot một cách mượt mà và real-time.
Chúng tôi cung cấp hướng dẫn chi tiết về cách sử dụng WebSocket với Arduino UNO R4. Tìm hiểu thêm bằng cách truy cập liên kết được cung cấp: Arduino UNO R4 - WebSocket hướng dẫn
Cách Thức Hoạt Động
Code Arduino UNO R4 tạo ra một web server và một WebSocket server. Cách thức hoạt động như sau:
- Khi bạn nhập địa chỉ IP của Arduino UNO R4 vào trình duyệt web, nó yêu cầu trang web giao diện người dùng từ Arduino UNO R4. Web server trên Arduino UNO R4 phản hồi bằng cách gửi lại nội dung trang web được tạo từ HTML, CSS và JavaScript. Trình duyệt web của bạn sau đó hiển thị trang web này. Code JavaScript trên trang web bắt đầu một kết nối WebSocket với WebSocket server của Arduino UNO R4. Khi kết nối WebSocket này hoạt động, việc nhấn hoặc thả các nút trên trang web sẽ gửi lệnh đến Arduino UNO R4 thông qua kết nối này. WebSocket server trên Arduino UNO R4 nhận các lệnh này và điều khiển xe robot như được chỉ định.
Dưới đây là bảng hiển thị các lệnh được gửi từ trang web đến Arduino UNO R4, dựa trên những gì người dùng thực hiện:
| Hành Động Người Dùng | Nút | Lệnh | Hành Động Xe |
|---|---|---|---|
| NHẤN | LÊN | 1 | TIẾN |
| NHẤN | XUỐNG | 2 | LÙI |
| NHẤN | TRÁI | 4 | RẼ TRÁI |
| NHẤN | PHẢI | 8 | RẼ PHẢI |
| NHẤN | DỪNG | 0 | DỪNG |
| THẢ | LÊN | 0 | DỪNG |
| THẢ | XUỐNG | 0 | DỪNG |
| THẢ | TRÁI | 0 | DỪNG |
| THẢ | PHẢI | 0 | DỪNG |
| THẢ | DỪNG | 0 | DỪNG |
Sơ Đồ Đấu Nối giữa Xe RC 2WD và Arduino UNO R4
This image is created using Fritzing. Click to enlarge image
Thông thường, bạn sẽ cần hai nguồn điện khác nhau:
- Một cho động cơ.
- Một khác cho bo mạch Arduino UNO R4 và module L298N, được sử dụng làm driver động cơ.
Bạn có thể đơn giản hóa thiết lập này bằng cách sử dụng một nguồn điện - bốn pin 1.5V để tạo tổng cộng 6V. Cách thực hiện như sau:
- Gắn pin vào module L298N như được hướng dẫn.
- Tháo hai jumper khỏi chân ENA và ENB
- Gắn jumper có ghi 5VEN (hiển thị bằng vòng tròn màu vàng trong sơ đồ).
- Kết nối chân 12V của module L298N với chân Vin trên Arduino UNO R4. Điều này sẽ cấp nguồn cho Arduino UNO R4 bằng pin.
Xe RC 2WD có một công tắc on/off. Điều này cho phép bạn kết nối hoặc ngắt kết nối pin bằng công tắc, bật hoặc tắt nguồn xe khi cần thiết. Nếu bạn muốn đơn giản hơn, bạn có thể bỏ qua việc sử dụng công tắc.
Code Arduino UNO R4
Nội dung trang web (HTML, CSS, JavaScript) được lưu trong file riêng biệt có tên index.h. Do đó, chúng ta sẽ sử dụng hai file code trong Arduino IDE.
- File .ino là code Arduino UNO R4 tạo web server và WebSocket Server để điều khiển xe.
- File .h lưu trữ nội dung của trang web.
Các Bước Nhanh
Thực hiện theo hướng dẫn từng bước sau:
- Nếu đây là lần đầu tiên bạn sử dụng Arduino Uno R4 WiFi/Minima, hãy tham khảo hướng dẫn về Arduino UNO R4 - Cài Đặt Phần Mềm.
- Kết nối bo mạch Arduino Uno R4 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 Arduino Uno R4 thích hợp (ví dụ: Arduino Uno R4 WiFi) và cổng COM.
- Mở Library Manager bằng cách nhấp vào biểu tượng Library Manager ở phía bên trái của Arduino IDE.
- Tìm kiếm Web Server for Arduino Uno R4 WiFi và tìm thư viện Web Server do DIYables tạo.
- Nhấp nút Install để cài đặt thư viện Web Server.
- Trong Arduino IDE, bắt đầu sketch mới và đặt tên, ví dụ: newbiely.com.ino
- Sao chép code sau và mở bằng Arduino IDE
/*
* Mã Arduino UNO R4 này được phát triển bởi newbiely.vn
* Mã Arduino UNO R4 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/arduino-uno-r4/arduino-uno-r4-controls-car-via-web
*/
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
#define CMD_STOP 0
#define CMD_FORWARD 1
#define CMD_BACKWARD 2
#define CMD_LEFT 4
#define CMD_RIGHT 8
#define ENA_PIN 7 // The Arduino pin connected to the ENA pin L298N
#define IN1_PIN 6 // The Arduino pin connected to the IN1 pin L298N
#define IN2_PIN 5 // The Arduino pin connected to the IN2 pin L298N
#define IN3_PIN 4 // The Arduino pin connected to the IN3 pin L298N
#define IN4_PIN 3 // The Arduino pin connected to the IN4 pin L298N
#define ENB_PIN 2 // The Arduino pin connected to the ENB pin L298N
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
UnoR4WiFi_WebServer server(80);
UnoR4WiFi_WebSocket *webSocket;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
String cmd_str = String((char*)message);
int command = cmd_str.toInt();
Serial.print("command: ");
Serial.println(command);
switch (command) {
case CMD_STOP:
Serial.println("Stop");
CAR_stop();
break;
case CMD_FORWARD:
Serial.println("Move Forward");
CAR_moveForward();
break;
case CMD_BACKWARD:
Serial.println("Move Backward");
CAR_moveBackward();
break;
case CMD_LEFT:
Serial.println("Turn Left");
CAR_turnLeft();
break;
case CMD_RIGHT:
Serial.println("Turn Right");
CAR_turnRight();
break;
default:
Serial.println("Unknown command");
}
}
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);
pinMode(ENA_PIN, OUTPUT);
pinMode(IN1_PIN, OUTPUT);
pinMode(IN2_PIN, OUTPUT);
pinMode(IN3_PIN, OUTPUT);
pinMode(IN4_PIN, OUTPUT);
pinMode(ENB_PIN, OUTPUT);
digitalWrite(ENA_PIN, HIGH); // set full speed
digitalWrite(ENB_PIN, HIGH); // set full speed
Serial.println("Arduino Uno R4 WiFi - 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() {
// Handle HTTP requests and WebSocket connections using the library
server.handleClient();
server.handleWebSocket();
delay(10);
}
void CAR_moveForward() {
digitalWrite(IN1_PIN, HIGH);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, HIGH);
digitalWrite(IN4_PIN, LOW);
}
void CAR_moveBackward() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, HIGH);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, HIGH);
}
void CAR_turnLeft() {
digitalWrite(IN1_PIN, HIGH);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, LOW);
}
void CAR_turnRight() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, HIGH);
digitalWrite(IN4_PIN, LOW);
}
void CAR_stop() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, LOW);
}
- Thay đổi thông tin WiFi (SSID và password) trong chương trình để sử dụng thông tin mạng của bạn.
- Tạo file có tên index.h trong Arduino IDE bằng cách thực hiện một trong các cách sau:
- Nhấp nút nằm bên dưới biểu tượng serial monitor và chọn New Tab, hoặc nhấn Ctrl+Shift+N trên bàn phím.
- Đặt tên file là index.h và nhấn nút OK.
- Sao chép code sau và dán vào file index.h.
- Bây giờ bạn có code trong hai file có tên newbiely.com.ino và index.h.
- Nhấp nút Upload trong Arduino IDE để tải code lên Arduino UNO R4.
- Mở Serial Monitor.
- Quan sát kết quả hiển thị trên Serial Monitor.
- Ghi lại địa chỉ IP hiển thị và nhập nó vào thanh địa chỉ trong trình duyệt web trên điện thoại thông minh hoặc máy tính của bạn.
- Trang web sẽ xuất hiện như sau:
- Nhấn nút CONNECT để liên kết trang web với Arduino UNO R4 thông qua WebSocket.
- Bây giờ bạn có thể chỉ định xe quay trái hoặc phải, và tiến hoặc lùi bằng giao diện web.
/*
* Mã Arduino UNO R4 này được phát triển bởi newbiely.vn
* Mã Arduino UNO R4 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/arduino-uno-r4/arduino-uno-r4-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Uno R4 Control Car via Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1, user-scalable=no">
<style type="text/css">
body { text-align: center; font-size: 24px;}
button { text-align: center; font-size: 24px;}
#container {
margin-right: auto;
margin-left: auto;
width: 400px;
height: 400px;
position: relative;
margin-bottom: 10px;
}
div[class^='button'] { position: absolute; }
.button_up, .button_down { width:214px; height:104px;}
.button_left, .button_right { width:104px; height:214px;}
.button_stop { width:178px; height:178px;}
.button_up {
background: url('https://esp32io.com/images/tutorial/up_inactive.png') no-repeat;
background-size: contain;
left: 200px;
top: 0px;
transform: translateX(-50%);
}
.button_down {
background: url('https://esp32io.com/images/tutorial/down_inactive.png') no-repeat;
background-size: contain;
left:200px;
bottom: 0px;
transform: translateX(-50%);
}
.button_right {
background: url('https://esp32io.com/images/tutorial/right_inactive.png') no-repeat;
background-size: contain;
right: 0px;
top: 200px;
transform: translateY(-50%);
}
.button_left {
background: url('https://esp32io.com/images/tutorial/left_inactive.png') no-repeat;
background-size: contain;
left:0px;
top: 200px;
transform: translateY(-50%);
}
.button_stop {
background: url('https://esp32io.com/images/tutorial/stop_inactive.png') no-repeat;
background-size: contain;
left:200px;
top: 200px;
transform: translate(-50%, -50%);
}
</style>
<script>
var CMD_STOP = 0;
var CMD_FORWARD = 1;
var CMD_BACKWARD = 2;
var CMD_LEFT = 4;
var CMD_RIGHT = 8;
var img_name_lookup = {
[CMD_STOP]: "stop",
[CMD_FORWARD]: "up",
[CMD_BACKWARD]: "down",
[CMD_LEFT]: "left",
[CMD_RIGHT]: "right"
}
var ws = null;
function init()
{
var container = document.querySelector("#container");
container.addEventListener("touchstart", mouse_down);
container.addEventListener("touchend", mouse_up);
container.addEventListener("touchcancel", mouse_up);
container.addEventListener("mousedown", mouse_down);
container.addEventListener("mouseup", mouse_up);
container.addEventListener("mouseout", mouse_up);
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
//alert("msg : " + e_msg.data);
}
function ws_onopen()
{
document.getElementById("ws_state").innerHTML = "OPEN";
document.getElementById("wc_conn").innerHTML = "Disconnect";
}
function ws_onclose()
{
document.getElementById("ws_state").innerHTML = "CLOSED";
document.getElementById("wc_conn").innerHTML = "Connect";
console.log("socket was closed");
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
}
function wc_onclick()
{
if(ws == null)
{
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
}
else
ws.close();
}
function mouse_down(event)
{
if (event.target !== event.currentTarget)
{
var id = event.target.id;
send_command(id);
event.target.style.backgroundImage = "url('https://esp32io.com/images/tutorial/" + img_name_lookup[id] + "_active.png')";
}
event.stopPropagation();
event.preventDefault();
}
function mouse_up(event)
{
if (event.target !== event.currentTarget)
{
var id = event.target.id;
send_command(CMD_STOP);
event.target.style.backgroundImage = "url('https://esp32io.com/images/tutorial/" + img_name_lookup[id] + "_inactive.png')";
}
event.stopPropagation();
event.preventDefault();
}
function send_command(cmd)
{
if(ws != null)
if(ws.readyState == 1)
ws.send(cmd + "\r\n");
}
window.onload = init;
</script>
</head>
<body>
<h2>Arduino Uno R4 - RC Car via Web</h2>
<div id="container">
<div id="0" class="button_stop"></div>
<div id="1" class="button_up"></div>
<div id="2" class="button_down"></div>
<div id="8" class="button_right"></div>
<div id="4" class="button_left"></div>
</div>
<p>
WebSocket : <span id="ws_state" style="color:blue">closed</span><br>
</p>
<button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
<br>
<br>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</body>
</html>
)=====";
COM6
Arduino Uno R4 WiFi - WebSocket Server
Connected! IP Address: 192.168.0.254
SSID: YOUR_WIFI_SSID
IP Address: 192.168.0.254
Signal strength (RSSI): -44 dBm
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.254:81
WebSocket server enabled successfully
Autoscroll
Clear output
9600 baud
Newline
Hình ảnh nút điều khiển không được lưu trên Arduino UNO R4 để tiết kiệm bộ nhớ. Thay vào đó, chúng được lưu trữ trực tuyến. Do đó, điện thoại hoặc máy tính của bạn phải kết nối internet để tải các hình ảnh này trên trang điều khiển web.
※ Lưu ý:
Nếu bạn thay đổi HTML trong file có tên index.h nhưng không thay đổi gì trong file có tên newbiely.com.ino, thì khi bạn biên dịch và upload code lên Arduino UNO R4, Arduino IDE sẽ không cập nhật nội dung HTML. Để Arduino IDE cập nhật nội dung HTML, bạn phải thực hiện một thay đổi nhỏ trong file newbiely.com.ino, như thêm một dòng trống hoặc comment.
Giải Thích Code Từng Dòng
Code Arduino UNO R4 được cung cấp bao gồm giải thích cho từng dòng. Hãy chắc chắn đọc các comment trong code!
Khắc Phục Sự Cố Cho Arduino Uno R4
Nếu code trên không hoạt động, vui lòng cập nhật phiên bản mới nhất cho module WiFi của Arduino UNO R4
- Kết nối Arduino Uno R4 WiFi của bạn với PC
- Mở Arduino IDE 2
- Đi đến Tools Firmware Updater
- Chọn bo mạch và cổng Arduino Uno R4 WiFi
- Nhấp nút CHECK UPDATES
- Danh sách các phiên bản firmware có sẵn sẽ xuất hiện
- Chọn phiên bản firmware mới nhất
- Nhấp nút INSTALL
- Đợi cho đến khi hoàn tất
- Khởi động lại Arduino Uno R4 WiFi của bạn
- Biên dịch lại và upload code lên Arduino Uno R4 WiFi
- Kiểm tra kết quả