Arduino Máy chủ web
Trong hướng dẫn này, chúng ta sẽ học cách biến Arduino Uno R4 WiFi thành một máy chủ web. Bằng cách truy cập các trang web được lưu trữ trên Arduino Web Server thông qua trình duyệt trên máy tính để bàn hoặc điện thoại thông minh của bạn, bạn sẽ có thể đọc các giá trị từ Arduino và thậm chí điều khiển nó. Dưới đây là bản tóm tắt những gì chúng ta sẽ học để lập trình Arduino Uno WiFi nhằm đạt được:
- Máy chủ Web Arduino - Trang đơn: Điều này cho phép chúng ta giám sát các giá trị cảm biến từ Arduino thông qua giao diện web.
- Máy chủ Web Arduino - Trang đơn: Chúng ta sẽ kích hoạt khả năng điều khiển Arduino thông qua trình duyệt web.
- Máy chủ Web Arduino - Trang đơn: Chúng ta sẽ học cách tách nội dung HTML (HTML, CSS và JavaScript) thành một tệp khác trong Arduino IDE.
- Máy chủ Web Arduino - Nhiều trang: Ở bước này, chúng ta sẽ tạo nhiều trang như index.html, temperature.html, led.html, error_404.html, và error_405.html..., và nhiều trang khác.
Phần cứng cần chuẩn bị
| 1 | × | Arduino UNO R4 WiFi | ||
| 1 | × | Alternatively, DIYables STEM V4 IoT | ||
| 1 | × | (Tùy chọn) DIYables STEM V4 IoT | ||
| 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 | × | (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) |
Đọc giá trị cảm biến từ Arduino thông qua Web
Điều này khá đơn giản. Mã Arduino thực hiện các tác vụ sau:
- Tạo một máy chủ web lắng nghe các yêu cầu HTTP từ trình duyệt web.
- Khi nhận được một yêu cầu từ trình duyệt web, Arduino sẽ trả lời với các thông tin sau:
- Tiêu đề HTTP
- Nội dung thân HTTP: Bao gồm nội dung HTML và giá trị đọc được từ cảm biến.
- Nếu đây là lần đầu tiên bạn sử dụng Arduino Uno R4, hãy xem Cách bắt đầu với Arduino UNO R4.
- Mở Quản lý Thư viện bằng cách nhấp vào biểu tượng ở 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 ra.
- Nhấp vào nút Cài đặt để thêm thư viện Web Server.
- Sao chép đoạn mã ở trên và mở bằng Arduino IDE
- Thay đổi thông tin wifi (SSID và mật khẩu) trong mã cho đúng với wifi của bạn
- Nhấp vào nút Tải lên trên Arduino IDE để tải mã lên cho Arduino
- Mở Serial Monitor
- Xem kết quả trên Serial Monitor.
- Ghi chú đị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 trên điện thoại thông minh hoặc PC của bạn.
- Kết quả là bạn sẽ thấy đầu ra như sau trên Serial Monitor.
- Khi bạn truy cập trình duyệt web bằng địa chỉ IP, bạn sẽ được hiển thị một trang web rất cơ bản chứa thông tin về bảng Arduino. Trang sẽ trông như sau:
Dưới đây là mã Arduino thực hiện các nhiệm vụ ở trên:
/*
* Mã Arduino này được phát triển bởi newbiely.vn
* Mã Arduino 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/arduino-web-server
*/
#include <UnoR4WiFi_WebServer.h>
const char HTML_CONTENT[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="data:,">
</head>
<p>
Temperature: <span style="color: red;">%TEMP_PLACE_HOLDER% °C</span>
</p>
</html>
)rawliteral";
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
// Create web server instance
UnoR4WiFi_WebServer server;
float getTemperature() {
return 26.9456;
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = getTemperature();
String response = HTML_CONTENT;
response.replace("%TEMP_PLACE_HOLDER%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("Arduino Uno R4 WiFi - Web Server");
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleHome);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
Hướng dẫn từng bước
COM6
Arduino Uno R4 WiFi - Web Server
Connecting to YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
Autoscroll
Clear output
9600 baud
Newline
COM6
Arduino Uno R4 WiFi - Web Server
Connecting to YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
Method: GET
Requested path: /
Client disconnected
Autoscroll
Clear output
9600 baud
Newline
Để trang web trông tuyệt vời với một giao diện người dùng đồ họa (GUI), hãy xem phần cuối của bài hướng dẫn này.
Điều khiển Arduino qua Web
Việc điều khiển một thiết bị được nối với Arduino khó khăn hơn một chút so với chỉ đọc một giá trị. Đó là bởi vì Arduino phải hiểu yêu cầu nhận được từ trình duyệt web để biết nên thực hiện hành động nào. Dưới đây là những gì mã Arduino làm trong trường hợp này:
- Tạo một máy chủ web lắng nghe các yêu cầu HTTP từ trình duyệt web.
- Xử lý yêu cầu nhận được từ trình duyệt web bằng cách thực hiện các bước sau:
- Đọc header của yêu cầu HTTP.
- Phân tích header của yêu cầu HTTP để xác định lệnh điều khiển cụ thể cần thiết.
- Điều khiển thiết bị được kết nối với Arduino dựa trên lệnh điều khiển nhận được.
- Gửi lại một phản hồi HTTP.
- Ngoài ra, nó có thể gửi phần thân của phản hồi HTTP chứa nội dung HTML để hiển thị thông tin về trạng thái điều khiển (nếu cần).
Để có một ví dụ toàn diện và chi tiết hơn, tôi khuyến nghị xem các bài hướng dẫn được liệt kê dưới đây:
Phân tách nội dung HTML vào một tập tin khác trong Arduino IDE
Nếu bạn muốn tạo một trang web đơn giản với nội dung tối thiểu, bạn có thể nhúng HTML trực tiếp vào mã Arduino, như đã giải thích ở trên.
Tuy nhiên, nếu bạn muốn tạo một trang web phức tạp và ấn tượng hơn với nội dung lớn hơn, việc nhúng toàn bộ HTML, CSS và JavaScript trực tiếp vào mã Arduino trở nên bất tiện. Trong trường hợp này, bạn có thể sử dụng một phương pháp khác để quản lý mã nguồn:
- Mã Arduino sẽ được đặt vào một tệp .ino, giống như trước đây.
- Mã HTML (HTML, CSS, JavaScript) sẽ được đặt vào một tệp .h riêng biệt. Điều này cho phép bạn giữ nội dung trang web riêng biệt với mã Arduino, giúp việc quản lý và chỉnh sửa dễ dàng hơn.
Để làm điều đó, chúng ta cần thực hiện hai bước chính:
- Chuẩn bị nội dung HTML
- Lập trình Arduino
Chuẩn bị nội dung HTML
- Tạo một tệp HTML trên máy tính cá nhân của bạn chứa nội dung HTML (HTML, CSS và JavaScript) cho thiết kế giao diện người dùng của bạn.
- Trong tệp HTML, ở nơi dữ liệu từ Arduino được hiển thị, hãy sử dụng một giá trị tùy ý.
- Kiểm tra và chỉnh sửa cho đến khi bạn hài lòng.
- Trong tệp HTML, ở nơi dữ liệu từ Arduino được hiển thị, hãy thay thế giá trị tùy ý bằng một tên đặc biệt, ví dụ, TEMPERATURE_MARKER. Sau này, trong mã Arduino, chúng ta sẽ sử dụng hàm String.replace("TEMPERATURE_MARKER", real_value); để cập nhật giá trị do Arduino cung cấp.
- Chúng ta sẽ đưa nội dung HTML vào tệp .h trên Arduino IDE. Xem bước tiếp theo.
Lập trình Arduino
- Mở Arduino IDE và tạo một sketch mới. Đặt tên cho nó, ví dụ, ArduinoGetStarted.com.ino.
- Sao chép mã được cung cấp bên dưới và dán vào tệp đã tạo.
/*
* Mã Arduino này được phát triển bởi newbiely.vn
* Mã Arduino 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/arduino-web-server
*/
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
UnoR4WiFi_WebServer server;
float getTemperature() {
return 26.9456;
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = getTemperature();
String response = HTML_CONTENT;
response.replace("TEMPERATURE_MARKER", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("Arduino Uno R4 WiFi - Web Server");
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleHome);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
- Thay đổi thông tin WiFi (SSID và mật khẩu) trong mã nguồn của bạn
- Tạo tập tin index.h trên Arduino IDE bằng cách:
- Nhấp chuột vào nút ngay bên dưới biểu tượng Serial Monitor và chọn New Tab, hoặc sử dụng các phím Ctrl+Shift+N.
- Đặt tên cho tệp index.h và nhấn nút OK
- Sao chép mã dưới đây và dán vào index.h.
/*
* Mã Arduino này được phát triển bởi newbiely.vn
* Mã Arduino 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/arduino-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- Thay dòng REPLACE_YOUR_HTML_CONTENT_HERE bằng nội dung HTML bạn đã chuẩn bị trước. Không có vấn đề gì với ký tự xuống dòng. Dưới đây là một ví dụ về tập tin index.h:
/*
* Mã Arduino này được phát triển bởi newbiely.vn
* Mã Arduino 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/arduino-web-server
*/
const char *HTML_CONTENT = R""""(
<!DOCTYPE html>
<html>
<head>
<title>Arduino - Web Temperature</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body { font-family: "Georgia"; text-align: center; font-size: width/2pt;}
h1 { font-weight: bold; font-size: width/2pt;}
h2 { font-weight: bold; font-size: width/2pt;}
button { font-weight: bold; font-size: width/2pt;}
</style>
<script>
var cvs_width = 200, cvs_height = 450;
function init() {
var canvas = document.getElementById("cvs");
canvas.width = cvs_width;
canvas.height = cvs_height + 50;
var ctx = canvas.getContext("2d");
ctx.translate(cvs_width/2, cvs_height - 80);
update_view(TEMPERATURE_MARKER);
}
function update_view(temp) {
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var radius = 70;
var offset = 5;
var width = 45;
var height = 330;
ctx.clearRect(-cvs_width/2, -350, cvs_width, cvs_height);
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
//5-step Degree
var x = -width/2;
ctx.lineWidth=2;
for (var i = 0; i <= 100; i+=5) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 20, y);
ctx.stroke();
}
//20-step Degree
ctx.lineWidth=5;
for (var i = 0; i <= 100; i+=20) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 25, y);
ctx.stroke();
ctx.font="20px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="right";
ctx.fillText(i.toString(), x - 35, y);
}
// shape
ctx.lineWidth=16;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#e6e6ff";
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.fill();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle="#ff1a1a";
ctx.beginPath();
ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
ctx.fill();
temp = Math.round(temp * 100) / 100;
var y = (height - radius)*temp/100.0 + radius + 5;
ctx.beginPath();
ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
ctx.fill();
ctx.fillStyle="red";
ctx.font="bold 34px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText(temp.toString() + "°C", 0, 100);
}
window.onload = init;
</script>
</head>
<body>
<h1>Arduino - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)"""";
- Bây giờ bạn có mã nguồn trong hai tệp: ArduinoGetStarted.com.ino và index.h
- Nhấn nút Tải lên trên Arduino IDE để nạp mã lên Arduino
- Truy cập trang web của bảng Arduino bằng trình duyệt như trước. Bạn sẽ thấy nó như sau:
Để có một minh họa toàn diện và chi tiết hơn, vui lòng tham khảo bài hướng dẫn Arduino - Nhiệt độ qua Web.
※ Lưu ý:
- Nếu bạn thực hiện thay đổi nội dung HTML bên trong tệp index.h nhưng không sửa đổi bất kỳ thứ gì trong tệp ArduinoGetStarted.com.ino, IDE Arduino sẽ không làm mới hoặc cập nhật nội dung HTML khi bạn biên dịch và tải mã lên ESP32.
- Để buộc IDE Arduino cập nhật nội dung HTML trong trường hợp này, bạn cần thực hiện một thay đổi trong tệp ArduinoGetStarted.com.ino. Ví dụ, bạn có thể thêm một dòng trống hoặc chèn một nhận xét. Hành động này kích hoạt IDE nhận ra rằng đã có sự thay đổi trong dự án, đảm bảo nội dung HTML được cập nhật của bạn được đưa vào quá trình tải lên.
Máy chủ Web Arduino - Nhiều trang web
Xem qua hướng dẫn này Arduino - Máy chủ Web Đa trang.