Arduino UNO R4 WiFi điều khiển LED thông qua Web

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

Khi bạn nhập địa chỉ 192.168.0.2 vào trình duyệt web, trình duyệt gửi yêu cầu tới Arduino, và Arduino trả về một trang web chứa nút bật/tắt để điều khiển LED.
Tương tự, khi bạn nhấp nút "LED ON" trên trang web hoặc gõ 192.168.0.2/led1/on vào trình duyệt, Arduino bật LED và trả về trang web điều khiển.
Tương tự, khi bạn nhấp nút "LED OFF" trên trang web hoặc gõ 192.168.0.2/led1/off vào trình duyệt, Arduino tắt LED và trả về trang web điều khiển.

Hướng dẫn cung cấp những nền tảng 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 LED thông qua web
Thiết kế lại giao diện người dùng trên web (UI)

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	×	LED Kit
1	×	LED (red)
1	×	LED Module
1	×	220Ω Resistor
1	×	breadboard
1	×	dây jumper
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)

Về LED và Arduino Uno R4

Nếu bạn chưa biết về LED và Arduino Uno R4 (bố trí chân, cách chúng hoạt động, cách lập trình ...), hãy tìm hiểu về chúng trong các bài hướng dẫn sau:

Sơ đồ đấu dây

sơ đồ nối dây LED cho Arduino UNO R4 WiFi

This image is created using Fritzing. Click to enlarge image

Mã nguồn Arduino

/* * 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-uno-r4-wifi-controls-led-via-web */ #include <UnoR4WiFi_WebServer.h> // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // LED configuration #define LED_PIN 9 int ledState = LOW; // Track LED state const char* HTML_CONTENT = "<!DOCTYPE HTML>\n" "<html>\n" "<head>\n" "<link rel=\"icon\" href=\"data:,\">\n" "</head>\n" "<body>\n" "<a href=\"/led1/on\">LED ON</a>\n" "<br><br>\n" "<a href=\"/led1/off\">LED OFF</a>\n" "</body>\n" "</html>\n"; // Create web server instance UnoR4WiFi_WebServer server; // Page handlers void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { server.sendResponse(client, HTML_CONTENT); } void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { ledState = HIGH; digitalWrite(LED_PIN, ledState); server.sendResponse(client, HTML_CONTENT); } void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { ledState = LOW; digitalWrite(LED_PIN, ledState); server.sendResponse(client, HTML_CONTENT); } void setup() { Serial.begin(9600); delay(1000); // Initialize LED pin pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, ledState); // 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); server.addRoute("/led1/on", handleLedOn); server.addRoute("/led1/off", handleLedOff); // 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

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 ở phía bên trái của Arduino IDE.
Tìm kiếm Web Server for Arduino Uno R4 WiFi và xác định thư viện Web Server được DIYables tạo.
Nhấp vào nút Cài đặt để thêm thư viện Web Server.

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ã của bạn
Nhấp vào nút Tải lên trên Arduino IDE để tải mã lên Arduino
Mở trình theo dõi nối tiếp
Xem kết quả trên trình theo dõi nối tiếp

COM6

Send

Attempting to connect to SSID: YOUR_WIFI IP Address: 192.168.0.2 signal strength (RSSI):-39 dBm

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 máy chủ web Arduino.
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/led1/on

192.168.0.2/led1/off

Xin lưu ý rằng địa chỉ IP có thể thay đổi. Vui lòng xác nhận 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.