SENSORS/ACTUATORS

INTERNET OF THING (IoT)

ESP32 - Ethernet

ESP32 - GPIO Interrupt

ESP32 Điều Khiển Relay qua Web

Trong hướng dẫn này, chúng ta sẽ học cách điều khiển relay thông qua giao diện web bằng trình duyệt trên PC hoặc smartphone, sử dụng ESP32. Cụ thể, ESP32 sẽ được lập trình để hoạt động như một web server. Giả sử địa chỉ IP của ESP32 là 192.168.0.2. Dưới đây là chi tiết cách hoạt động:

Khi bạn nhập 192.168.0.2 vào trình duyệt web, trình duyệt gửi yêu cầu đến ESP32, và ESP32 phản hồi với một trang web chứa nút bật/tắt để điều khiển relay.
Tương tự, khi bạn nhấp vào nút "Bật" trên trang web hoặc gõ 192.168.0.2/relay1/on vào trình duyệt web, ESP32 sẽ bật relay và phản hồi với trang web điều khiển.
Tương tự, khi bạn nhấp vào nút "Tắt" trên trang web hoặc gõ 192.168.0.2/relay1/off vào trình duyệt web, ESP32 sẽ tắt relay và phản hồi với trang web điều khiển.

Chúng ta sẽ học qua hai mã ví dụ:

Nội dung HTML được nhúng vào code ESP32
Nội dung HTML được tách riêng khỏi code ESP32 và đặt trong file .h

Hướng dẫn này cung cấp kiến thức cơ bản mà bạn có thể dễ dàng và sáng tạo tùy chỉnh để đạt được những điều sau:

Điều khiển nhiều relay qua web
Thiết kế lại giao diện người dùng web (UI)

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	×	Relay
1	×	Dây Jumper
1	×	breadboard
1	×	(Tùy chọn) Khóa Solenoid
1	×	(Tùy chọn) Adapter 12V
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ề relay và ESP32

Nếu bạn chưa biết về relay và ESP32 (pinout, cách hoạt động, cách lập trình...), hãy học về chúng trong các hướng dẫn sau:

Sơ Đồ Đấu Nối

Cách kết nối ESP32 và relay sử dụng breadboard (cấp nguồn qua cáp USB)

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.

Cách kết nối ESP32 và relay sử dụng breadboard (cấp nguồn qua chân Vin)

This image is created using Fritzing. Click to enlarge image

Cách kết nối ESP32 và relay sử dụng screw terminal block breakout board (cấp nguồn qua cáp USB)

Cách kết nối ESP32 và relay sử dụng screw terminal block breakout board (cấp nguồn qua chân Vin)

Code ESP32 - Nội dung HTML được nhúng vào code ESP32

/* * 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-relay-via-web */ #include <DIYables_ESP32_WebServer.h> #define RELAY_PIN 16 // ESP32 pin GPIO16 connected to Relay int relay_state = LOW; // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; String getHTML() { String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel='icon' href='data:,'>"; html += "</head>"; html += "Relay state: "; if (relay_state == LOW) html += "OFF"; else html += "ON"; html += ""; html += "<a href='/relay1/on'>Turn ON</a>"; html += " "; html += "<a href='/relay1/off'>Turn OFF</a>"; html += "</html>"; return html; } // home page void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); server.sendResponse(client, getHTML().c_str()); } // Route to control the Relay void handleRelayOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = HIGH; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void handleRelayOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = LOW; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/relay1/on", handleRelayOn); server.addRoute("/relay1/off", handleRelayOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); }

Các Bước Thực Hiện

Nếu đây là lần đầu tiên bạn sử dụng ESP32, hãy xem ESP32 - Cài Đặt Phần Mềm.
Thực hiện đấu nối như hình ả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.
Chọn đúng board ESP32 (ví dụ: ESP32 Dev Module) và cổng COM.
Mở Library Manager bằng cách nhấp vào biểu tượng 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.
Nhấp vào nút Install để cài đặt thư viện Web Server.

Sao chép code trên và mở bằng Arduino IDE
Thay đổi thông tin wifi (SSID và password) trong code thành của bạn
Nhấp vào nút Upload trên Arduino IDE để tải code lên ESP32
Mở Serial Monitor
Xem kết quả trên Serial Monitor.

COM6

Send

Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address: 192.168.0.2

Autoscroll Show timestamp

Clear output

9600 baud

Newline

Bạn sẽ thấy một địa chỉ IP, ví dụ: 192.168.0.2. Đây là địa chỉ IP của ESP32 Web Server
Mở trình duyệt web và nhập một trong ba định dạng dưới đây vào thanh địa chỉ:

192.168.0.2

192.168.0.2/relay1/on

192.168.0.2/relay1/off

Xin lưu ý rằng địa chỉ IP có thể thay đổi. Vui lòng kiểm tra giá trị hiện tại trên Serial Monitor.
Bạn cũng sẽ thấy đầu ra dưới đây trên Serial Monitor

COM6

Send

Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address: 192.168.0.2 ESP32 Web Server: New request recieved: GET / ESP32 Web Server: New request recieved: GET /relay1/on ESP32 Web Server: New request recieved: GET /relay1/off

Autoscroll Show timestamp

Clear output

9600 baud

Newline

Kiểm tra trạng thái relay
Bạn sẽ thấy trang web của board ESP32 trên trình duyệt web như dưới đây

Giờ bạn có thể điều khiển relay bật/tắt qua giao diện web

Code ESP32 - Nội dung HTML được tách riêng khỏi code ESP32

Vì một trang web đồ họa chứa một lượng lớn nội dung HTML, việc nhúng nó vào code ESP32 như trước trở nên bất tiện. Để giải quyết điều này, chúng ta cần tách code ESP32 và code HTML vào các file khác nhau:

Code ESP32 sẽ được đặt trong file .ino.
Code HTML (bao gồm HTML, CSS và Javascript) sẽ được đặt trong file .h.

Các Bước Thực Hiện

Mở Arduino IDE và tạo sketch mới, đặt tên, ví dụ: newbiely.com.ino
Sao chép code dưới đây và mở bằng 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-relay-via-web */ #include <DIYables_ESP32_WebServer.h> #include "index.h" // Include the index.h file #define RELAY_PIN 16 // ESP32 pin GPIO16 connected to Relay int relay_state = LOW; // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; String getHTML() { String html = webpage; // Use the HTML content from the index.h file html.replace("%RELAY_STATE%", relay_state ? "ON" : "OFF"); // update the relay state return html; } // home page void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); server.sendResponse(client, getHTML().c_str()); } // Route to control the Relay void handleRelayOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = HIGH; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void handleRelayOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = LOW; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/relay1/on", handleRelayOn); server.addRoute("/relay1/off", handleRelayOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); }

Thay đổi thông tin WiFi (SSID và password) trong code thành của bạn
Tạo file index.h trên Arduino IDE bằng cách:

Nhấp vào nút ngay dưới biểu tượng 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à nhấp vào nút OK

Sao chép code dưới đây và dán vào index.h.

/* * 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-relay-via-web */ #ifndef WEBPAGE_H #define WEBPAGE_H const char* webpage = R"=====( <!DOCTYPE HTML> <html> <head> <link rel='icon' href='data:,'> </head> Relay state: %RELAY_STATE% <a href='/relay1/on'>Turn ON</a> <a href='/relay1/off'>Turn OFF</a> </html> )====="; #endif

Giờ bạn có code trong hai file: newbiely.com.ino và index.h
Nhấp vào nút Upload trên Arduino IDE để tải code lên ESP32
Truy cập trang web của board ESP32 qua trình duyệt web trên PC hoặc smartphone như trước. Bạn sẽ thấy tương tự như code trước đó như dưới đây:

※ Lưu ý:

Nếu bạn chỉnh sửa nội dung HTML trong file index.h và không chạm vào 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 một thay đổi trong file newbiely.com.ino (ví dụ: thêm dòng trống, thêm comment....)

Bạn có thể dễ dàng và sáng tạo tùy chỉnh code trên để đạt được những điều sau:

Điều khiển nhiều relay qua web
Thiết kế lại giao diện người dùng web (UI)

ESP32 Điều Khiển Relay qua Web

Phần Cứng Cần Thiết

Về relay và ESP32

Sơ Đồ Đấu Nối

Code ESP32 - Nội dung HTML được nhúng vào code ESP32

Các Bước Thực Hiện

Code ESP32 - Nội dung HTML được tách riêng khỏi code ESP32

Các Bước Thực Hiện

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