아두이노 웹을 통한 LED 매트릭스
이 튜토리얼에서 우리는 PC 또는 스마트폰의 브라우저를 사용하여 웹 인터페이스를 통해 LED 매트릭스를 제어하는 방법을 배울 예정입니다. 이를 위해 Arduino Uno R4 WiFi를 사용할 것입니다. 구체적으로, Arduino Uno R4 WiFi는 웹 서버로 프로그래밍될 것입니다. Arduino Uno R4 WiFi의 IP 주소가 192.168.0.2라고 가정해 봅시다. 이것이 작동하는 방식의 세부 사항은 다음과 같습니다:
- 웹 브라우저에 192.168.0.2를 입력하면, 브라우저가 아두이노에게 요청을 보내고, 아두이노는 메시지 박스가 포함된 웹 페이지로 응답합니다.
- 메시지 박스에 메시지를 입력하고 보내기 버튼을 클릭합니다. 메시지가 아두이노로 전송됩니다.
- 아두이노가 LED 매트릭스에 메시지를 표시합니다.
준비물
| 1 | × | 아두이노 우노 R4 와이파이 | 쿠팡 | 아마존 | |
| 1 | × | (또는) DIYables STEM V4 IoT | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | FC-16 LED Matrix 32x8 | 쿠팡 | 아마존 | |
| 1 | × | 브레드보드 | 쿠팡 | 아마존 | |
| 1 | × | 점퍼케이블 | 쿠팡 | 아마존 | |
| 1 | × | (옵션) DC 커넥터 전원 연결 잭 플러그 소켓 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 스크루 터미널 블록 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) Sensors/Servo Expansion Shield for Arduino UNO R4 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 브레드보드 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 케이스 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 전원 분배기 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노용 프로토타이핑 베이스 플레이트 & 브레드보드 키트 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
LED 매트릭스와 아두이노 우노 R4에 대하여
LED 매트릭스와 아두이노 우노 R4(핀아웃, 작동 방식, 프로그래밍 방법 등)에 대해 잘 모른다면, 다음 튜토리얼에서 배워보세요:
선연결
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
아두이노 코드
사용 방법
- Arduino Uno R4를 처음 사용한다면, 아두이노 우노 R4를 시작하는 방법을 참조하세요.
- Arduino IDE를 엽니다.
- "MD_Parola"를 검색한 다음, MD_Parola 라이브러리를 찾습니다.
- Install 버튼을 클릭하세요.
의존성을 위해 MD_MAX72XX 라이브러리 설치가 요청될 것입니다. Install All 버튼을 클릭하세요.
- 새 스케치를 만듭니다. 이름을 지정하세요. 예를 들어, ArduinoGetStarted.com.ino입니다.
- 아래에 제공된 코드를 복사하여 만든 파일에 붙여넣으세요.
/*
* 이 아두이노 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino/arduino-led-matrix-via-web
*/
#include <WiFiS3.h>
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include "index.h"
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4 // 4개의 블록
#define CS_PIN 3
// MD_Parola 클래스의 인스턴스를 생성합니다.
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
const char ssid[] = "YOUR_WIFI_SSID"; // 네트워크 SSID(이름)을 변경하세요
const char pass[] = "YOUR_WIFI_PASSWORD"; // 네트워크 비밀번호를 변경하세요 (WPA용이거나 WEP용 키로 사용)
int status = WL_IDLE_STATUS;
WiFiServer server(80);
void setup() {
//시리얼을 초기화하고 포트가 열릴 때까지 기다립니다:
Serial.begin(9600);
ledMatrix.begin(); // 객체를 초기화합니다.
ledMatrix.setIntensity(0); // LED 매트릭스 디스플레이의 밝기를 설정합니다 (0에서 15까지)
ledMatrix.displayClear(); // led 매트릭스 디스플레이를 지웁니다.
ledMatrix.displayScroll("Hello", PA_CENTER, PA_SCROLL_LEFT, 100);
String fv = WiFi.firmwareVersion();
if (fv < WIFI_FIRMWARE_LATEST_VERSION) {
Serial.println("Please upgrade the firmware");
}
// WiFi 네트워크에 연결을 시도합니다:
while (status != WL_CONNECTED) {
Serial.print("Attempting to connect to SSID: ");
Serial.println(ssid);
// WPA/WPA2 네트워크에 연결합니다. open 또는 WEP 네트워크를 사용하는 경우 이 줄을 변경하세요:
status = WiFi.begin(ssid, pass);
// 연결을 위해 10초간 대기합니다:
delay(10000);
}
server.begin();
// 이제 연결되었으므로 상태를 출력합니다:
printWifiStatus();
}
void loop() {
// 들어오는 클라이언트들을 청취합니다
WiFiClient client = server.available();
if (client) {
// HTTP 요청 헤더의 첫 줄을 읽습니다
String HTTP_req = "";
while (client.connected()) {
if (client.available()) {
Serial.println("New HTTP Request");
HTTP_req = client.readStringUntil('\n'); // HTTP 요청의 첫 줄을 읽습니다
Serial.print("<< ");
Serial.println(HTTP_req); // 시리얼 모니터에 HTTP 요청을 출력합니다
break;
}
}
// HTTP 요청 헤더의 나머지 줄들을 읽습니다
while (client.connected()) {
if (client.available()) {
String HTTP_header = client.readStringUntil('\n'); // HTTP 요청의 헤더 줄을 읽습니다
if (HTTP_header.equals("\r")) // HTTP 요청의 끝
break;
Serial.print("<< ");
Serial.println(HTTP_header); // 시리얼 모니터에 HTTP 요청을 출력합니다
}
}
if (HTTP_req.indexOf("GET") == 0) { // 요청 방식이 GET인지 확인합니다
// 예상되는 헤더는 다음과 같습니다:
// - GET ?/message= "사용자 메시지"
if (HTTP_req.indexOf("message=") > -1) { // 경로를 확인합니다
int pos_1 = HTTP_req.indexOf("message=") + 8; // "message="의 길이는 8입니다
int pos_2 = HTTP_req.indexOf(" ", pos_1);
String message = HTTP_req.substring(pos_1, pos_2);
Serial.print("message: ");
Serial.println(message);
ledMatrix.displayClear(); // led 매트릭스 디스플레이를 지웁니다
ledMatrix.displayScroll(message.c_str(), PA_CENTER, PA_SCROLL_LEFT, 100);
}
}
// HTTP 응답을 전송합니다
// HTTP 응답 헤더를 전송합니다
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // 응답이 완료된 후 연결이 닫힙니다
client.println(); // HTTP 헤더와 본문 사이의 구분자
// HTTP 응답 본문을 전송합니다
String html = String(HTML_CONTENT);
client.println(html);
client.flush();
// 웹 브라우저가 데이터를 받을 시간을 줍니다
delay(10);
// 연결을 종료합니다:
client.stop();
}
if (ledMatrix.displayAnimate()) {
ledMatrix.displayReset();
}
}
void printWifiStatus() {
// 보드의 IP 주소를 출력합니다:
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// 수신된 신호 강도를 출력합니다:
Serial.print("signal strength (RSSI):");
Serial.print(WiFi.RSSI());
Serial.println(" dBm");
}
- 코드 내의 WiFi 정보(SSID 및 비밀번호)를 사용자의 것으로 변경하세요
- Arduino IDE에서 index.h 파일을 다음과 같이 생성하세요:
- 시리얼 모니터 아이콘 바로 아래 있는 버튼을 클릭하고 새 탭을 선택하거나, Ctrl+Shift+N 키를 사용하세요.
- 파일 이름으로 index.h을 입력하고 OK 버튼을 클릭하세요.
아래 코드를 복사해서 index.h에 붙여넣으세요.
/*
* 이 아두이노 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/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>
)=====";
- 이제 코드가 두 파일에 있습니다: ArduinoGetStarted.com.ino 와 index.h
- 아두이노 IDE에서 Upload 버튼을 클릭하여 아두이노에 코드를 업로드하세요
- 시리얼 모니터에서 결과를 확인하세요.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
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
- IP 주소(예: 192.168.0.2)를 볼 것입니다. 이것은 아두이노 웹 서버의 IP 주소입니다.
- 웹 브라우저를 열고 주소 창에 IP 주소 중 하나를 입력하세요.
- IP 주소가 변경될 수 있으니, 시리얼 모니터에서 현재 값을 확인하시기 바랍니다.
- 시리얼 모니터에서 아래 출력물도 볼 수 있습니다.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
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
아래와 같이 웹 브라우저에서 아두이노 보드의 웹 페이지를 볼 수 있습니다.
- 메시지를 입력하고 보내기 버튼을 클릭하여 Arduino에 메시지를 보내세요.
- LED 매트릭스 디스플레이를 확인하세요.
※ 주의:
index.h 파일 내의 HTML 콘텐츠에 변경이 이루어지더라도 ArduinoGetStarted.com.ino 파일에 아무런 수정사항이 없으면, 아두이노 IDE는 코드를 ESP32에 컴파일하고 업로드하는 동안에 자동으로 HTML 콘텐츠를 새로 고치거나 업데이트하지 않습니다.
이러한 상황에서 아두이노 IDE가 HTML 콘텐츠를 업데이트하도록 강제하려면, ArduinoGetStarted.com.ino 파일에 수정사항을 만들어야 합니다. 예를 들어, 빈 줄을 추가하거나 주석을 삽입할 수 있습니다. 이러한 조치는 IDE가 프로젝트의 변경사항을 인식하도록 유도하여, 수정된 HTML 콘텐츠가 업로드에 포함되도록 합니다.