Arduino Máy chủ Web Đa trang

Phần cứng cần chuẩn bị

Or you can buy the following kits:

Về Arduino Uno R4 và máy chủ web

Nếu bạn chưa quen với Arduino Uno R4 và Web Server (bao gồm sơ đồ chân, cách nó hoạt động và lập trình), bạn có thể tìm hiểu về chúng thông qua các bài hướng dẫn sau:

• Cách bắt đầu với Arduino UNO R4
• Arduino - Máy chủ web

Cách một máy chủ web trên Arduino hoạt động

Khi trình duyệt web gửi một yêu cầu HTTP tới bo mạch Arduino, Arduino cần được lập trình để thực hiện các tác vụ sau:

• Tạo một máy chủ web có thể lắng nghe các yêu cầu HTTP từ trình duyệt web.
• Đọc dòng đầu tiên của tiêu đề HTTP khi nó nhận được một yêu cầu HTTP.
• Định tuyến các yêu cầu dựa trên dòng đầu tiên của yêu cầu HTTP để xác định những trang web mà Arduino nên trả về.
• (Tùy chọn) Phân tích tiêu đề HTTP của yêu cầu để nhận diện các lệnh điều khiển do người dùng gửi.
• (Tùy chọn) Điều khiển các thiết bị được kết nối với Arduino dựa trên các lệnh điều khiển đã nhận.
• Gửi một phản hồi HTTP trở lại trình duyệt web, trong đó có:
• Một tiêu đề phản hồi HTTP.
• Nội dung thân phản hồi HTTP, chứa nội dung HTML và (nếu có) dữ liệu cảm biến hoặc trạng thái thiết bị.

Thông qua việc thực hiện những nhiệm vụ này, Arduino có thể xử lý hiệu quả các yêu cầu HTTP và cung cấp các phản hồi phù hợp cho trình duyệt web, cho phép điều khiển và tương tác dựa trên web với các thiết bị được kết nối với Arduino.

Chức năng định tuyến là nhiệm vụ quan trọng nhất, và nó sẽ được giải thích chi tiết. Các phần khác được đề cập trong hướng dẫn Arduino - Máy chủ web. Khi bạn đã hiểu thuật toán định tuyến, chúng ta sẽ tiến hành xem toàn bộ mã nguồn cho một máy chủ web có nhiều trang.

Máy chủ Web Arduino - Thuật toán định tuyến

Trước khi viết mã cho hàm định tuyến, bạn nên tạo một danh sách các trang web và các phương thức HTTP tương ứng sẽ có sẵn trên Arduino. Trong hướng dẫn này, chúng ta sẽ chỉ hỗ trợ phương thức GET. Tuy nhiên, bạn có thể dễ dàng mở rộng nó để bao gồm các phương thức HTTP khác nếu cần. Dưới đây là một danh sách ví dụ:

• Lấy trang chủ
• Lấy trang nhiệt độ
• Lấy trang cửa
• Lấy trang đèn LED

Sau đó, bạn cần tạo một danh sách các trường tiêu đề của yêu cầu HTTP ở dòng đầu tiên tương ứng với danh sách trang:

• GET trang chủ:
• GET /
• GET /index.html
• GET trang nhiệt độ:
• GET /temperature.html
• GET trang cửa:
• GET /door
• GET trang đèn LED:
• GET /led.html

Tóm lại, chúng ta có danh sách sau:

GET / GET /index.html GET /temperature.html GET /door.html GET /led.html

Mã Arduino - Máy chủ web đa trang

Dưới đây là mã Arduino đầy đủ tạo ra một máy chủ web có nhiều trang. Để đơn giản hóa, nội dung HTML cho từng trang rất đơn giản và được nhúng trực tiếp vào mã Arduino. Ở phần tiếp theo, chúng ta sẽ học cách tách nội dung HTML cho từng trang thành các tệp riêng biệt, làm cho mã nguồn trở nên gọn gàng và dễ quản lý hơn.

Hướng dẫn từng bước

• 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ở Trình 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 Máy chủ Web cho Arduino Uno R4 WiFi và xác định thư viện Máy chủ Web do DIYables tạo ra.
• Nhấp vào nút Cài đặt để thêm thư viện Máy chủ Web.

• Sao chép mã ở trên và mở bằng Arduino IDE
• Thay đổi thông tin wifi (SSID và mật khẩu) trong mã cho phù hợp với bạn
• Nhấn nút Tải lên trên Arduino IDE để tải mã lên cho Arduino
• Mở Serial Monitor
• Kiểm tra kết quả trên Serial Monitor

• Bạn sẽ thấy một địa chỉ IP trên Màn hình Serial, ví dụ: 192.168.0.2
• Gõ lần lượt danh sách sau 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.

• Lưu ý rằng bạn cần thay đổi 192.168.0.2 thành địa chỉ IP bạn nhận được trên Serial Monitor.
• Bạn sẽ thấy các trang sau: trang chủ, trang đèn LED, trang cửa, trang nhiệt độ và trang Không tìm thấy.
• Bạn cũng có thể kiểm tra đầu ra trên Serial Monitor.

Đoạn mã trước có nội dung HTML rất đơn giản cho mỗi trang. Tuy nhiên, nếu muốn tạo giao diện bắt mắt với nhiều mã HTML, mã có thể trở nên lớn và rối. Để đơn giản hóa, chúng ta sẽ học cách tách HTML khỏi mã Arduino. Điều này cho phép chúng ta lưu trữ HTML trong các tệp riêng biệt, giúp quản lý và làm việc với nó dễ dàng hơn.

Mã Arduino - Máy chủ web đa trang hoàn chỉnh

• Mở Arduino IDE.
• Tạo một sketch mới và đặt cho nó một tên, ví dụ, ArduinoWebServer.ino.
• Sao chép mã được cung cấp và dán vào tệp đó.

• Thay đổi thông tin WiFi (SSID và mật khẩu) trong mã sang của bạn
• Tạo tệp index.h trên Arduino IDE bằng cách:
• Hoặc nhấp vào nút ngay bên dưới biểu tượng Serial Monitor và chọn Tab Mới, hoặc dùng phím Ctrl+Shift+N

• Nhập tên tệp tin index.h và nhấn nút OK

• Sao chép đoạn mã dưới đây và dán vào tệp 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-multiple-pages */ const char *HTML_CONTENT_HOME = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>Home Page</title> </head> <body> <h1>Welcome to the Home Page</h1> <ul> <li><a href="/led">LED Page</a></li> <li><a href="/temperature">Temperature Page</a></li> <li><a href="/door">Door Page</a></li> </ul> </body> </html> )"""";
• Tương tự, tạo tệp temperature.h trên Arduino IDE với nội dung sau.

/* * 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-multiple-pages */ const char *HTML_CONTENT_TEMPERATURE = 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> )"""";
• Tương tự, hãy tạo tệp door.h trên Arduino IDE với nội dung sau.

/* * 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-multiple-pages */ const char *HTML_CONTENT_DOOR = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>Door Page</title> </head> <body> <h1>Door Page</h1> <p>Door State: <span style="color: red;">DOOR_STATE_MARKER</span></p> </body> </html> )"""";
• Tương tự, hãy tạo tệp led.h trong Arduino IDE với nội dung sau.

/* * 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-multiple-pages */ const char *HTML_CONTENT_LED = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>LED Page</title> </head> <body> <h1>LED Page</h1> <p>LED State: <span style="color: red;">LED_STATE_MARKER</span></p> </body> </html> )"""";
• Tương tự, tạo tệp error_404.h trên Arduino IDE với nội dung sau.

/* * 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-multiple-pages */ const char *HTML_CONTENT_404 = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>404 - Page Not Found</title> <style> h1 {color: #ff4040;} </style> </head> <body> <h1>404</h1> <p>Oops! The page you are looking for could not be found on Arduino Web Server.</p> <p>Please check the URL or go back to the <a href="/">homepage</a>.</p> <p>Or check <a href="https://arduinogetstarted.com/tutorials/arduino-web-server-multiple-pages"> Arduino Web Server</a> tutorial.</p> </body> </html> )"""";
• Bây giờ bạn có nhiều tệp tin trên Arduino IDE như dưới đây:

• Nhấn nút Tải lên trên Arduino IDE để tải mã lên Arduino
• Truy cập lần lượt các trang web của bảng mạch Arduino bằng trình duyệt web như trước. Bạn sẽ thấy tất cả các trang web như dưới đây:


※ Lưu ý:

• Nếu bạn thực hiện các thay đổi đối với nội dung HTML bên trong tệp index.h nhưng không sửa đổi bất kỳ điều gì trong tệp ArduinoWebServer.ino, Arduino IDE 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.
• Để bắt buộc Arduino IDE 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 sửa đổi trong tệp ArduinoWebServer.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 tải lên.

Bài hướng dẫn liên quan

• Arduino - Máy chủ web
• Arduino - Mật khẩu máy chủ web
• Arduino - WebSocket
• Arduino - Trình vẽ đồ thị trên web
• Arduino - Điều khiển động cơ servo thông qua web
• Arduino - điều khiển ô tô qua web
• Arduino - Ma trận LED thông qua Web
• Arduino - Nhiệt độ qua Web
• Arduino - Điều khiển khóa cửa qua Web
• Arduino UNO R4 WiFi điều khiển LED thông qua Web
• Arduino UNO R4 WiFi điều khiển rơ-le qua web