Arduino Ma trận LED thông qua Web
Trong hướng dẫn này, chúng ta sẽ học cách điều khiển một ma trận 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 cách nó 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 một yêu cầu tới Arduino, và Arduino phản hồi bằng một trang web chứa hộp tin nhắn.
- Bạn gõ một tin nhắn vào hộp tin nhắn và nhấn nút gửi. Tin nhắn được gửi tới Arduino.
- Arduino hiển thị tin nhắn trên ma trận LED.
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 | × | FC-16 LED Matrix 32x8 | ||
| 1 | × | breadboard | ||
| 1 | × | dây jumper | ||
| 1 | × | (Tùy chọn) DC Power Jack | ||
| 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ề ma trận LED và Arduino Uno R4
Nếu bạn không biết về ma trận LED và Arduino Uno R4 (bố trí chân, cách 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 đây:
Sơ đồ đấu dây
This image is created using Fritzing. Click to enlarge image
Mã Arduino
Hướng dẫn từng bước
- Nếu đây là lần đầu bạn sử dụng Arduino Uno R4, hãy xem Cách bắt đầu với Arduino UNO R4.
- Mở Arduino IDE.
- 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 Web Server do DIYables tạo ra.
- Nhấp vào nút Cài đặt để thêm thư viện Web Server.
- Tìm kiếm “MD_Parola”, sau đó tìm thư viện MD_Parola
- Nhấn nút Cài đặt.
- Bạn sẽ được yêu cầu cài đặt thư viện MD_MAX72XX làm phụ thuộc. Nhấp vào nút Cài đặt Tất cả.
- Tạo một sketch mới. Đặt cho nó một cái tên, ví dụ, ArduinoGetStarted.com.ino.
- Sao chép mã được cung cấp ở phía 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-led-matrix-via-web
*/
#include <UnoR4WiFi_WebServer.h>
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include "index.h"
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4 // 4 blocks
#define CS_PIN 3
// create an instance of the MD_Parola class
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
// 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;
// Handler for LED matrix control
void handleMatrix(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Check for message parameter in query string
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "message") {
String message = params.params[i].value;
Serial.print("message: ");
Serial.println(message);
ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll(message.c_str(), PA_CENTER, PA_SCROLL_LEFT, 100);
break;
}
}
String html = String(HTML_CONTENT);
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
// Initialize LED matrix
ledMatrix.begin(); // initialize the object
ledMatrix.setIntensity(15); // set the brightness of the LED matrix display (from 0 to 15)
ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll("Hello, DIYables", PA_CENTER, PA_SCROLL_LEFT, 100);
Serial.println("Arduino Uno R4 WiFi - LED Matrix Web Control");
// 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("/", handleMatrix);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
if (ledMatrix.displayAnimate()) {
ledMatrix.displayReset();
}
}
- Thay đổi thông tin WiFi (SSID và mật khẩu) trong mã thành của bạn
- Tạo tập tin index.h trên Arduino IDE bằng:
- Nhấp vào nút ngay bên dưới biểu tượng monitor nối tiếp và chọn Tab Mới, hoặc dùng các phím Ctrl+Shift+N.
- Đặt tên cho tệp index.h và nhấp nút OK.
- Sao chép mã dưới đây và dán 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-led-matrix-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino LED Matrix Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body {
font-size: 16px;
}
.user-input {
margin-bottom: 20px;
}
.user-input input {
flex: 1;
border: 1px solid #444;
padding: 5px;
}
.user-input input[type="submit"] {
margin-left: 5px;
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Arduino - LED Matrix via Web</h2>
<form class="user-input" action="" method="GET">
<input type="text" id="message" name="message" placeholder="Message to LED Matrix...">
<input type="submit" value="Send">
</form>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</body>
</html>
)=====";
- Bây giờ bạn có mã ở hai tệp: ArduinoGetStarted.com.ino và index.h
- Nhấn nút Upload trên Arduino IDE để tải mã lên Arduino
- Xem kết quả trên Serial Monitor.
COM6
Arduino Uno R4 WiFi - LED Matrix Web Control
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
- Bạn sẽ thấy một địa chỉ IP, ví dụ: 192.168.0.254. Đây là địa chỉ IP của Máy chủ Web Arduino
- Mở trình duyệt web và nhập một trong các địa chỉ IP vào thanh địa chỉ.
- Hãy 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
COM6
Arduino Uno R4 WiFi - LED Matrix Web Control
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: /
Query param: message=Hello
message: Hello
Client disconnected
Autoscroll
Clear output
9600 baud
Newline
- Bạn sẽ thấy trang web của bo mạch Arduino trên trình duyệt web như dưới đây
- Gõ một tin nhắn và nhấp nút gửi để gửi tin nhắn đến Arduino.
- Xem màn hình ma trận LED.
※ Lưu ý:
- Nếu có sự chỉnh sửa nội dung HTML trong tệp index.h mà không có bất kỳ sửa đổi nào đối với tệp ArduinoGetStarted.com.ino, IDE Arduino sẽ không tự động làm mới hoặc cập nhật nội dung HTML trong quá trình 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 như vậy, cần thực hiện một sự chỉnh sửa 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 chú thích. Hành động này sẽ thúc đẩy IDE nhận diện các thay đổi trong dự án, đảm bảo nội dung HTML đã chỉnh sửa được đưa vào quá trình tải lên.