ESP32 - 웹을 통한 LED 매트릭스 | ESP32 - LED Matrix via Web
이 튜토리얼에서는 ESP32를 사용하여 웹 인터페이스를 통해 LED 매트릭스 사인보드를 제어하는 방법을 배우게 됩니다. 자세히 말하면, 다음과 같은 작업을 하는 웹 서버로 ESP32를 프로그래밍할 것입니다:
- 웹 브라우저에서 요청을 받을 때 사용자에게 웹 인터페이스를 반환합니다.
- 사용자가 ESP32에 메시지를 보낼 수 있는 웹 인터페이스를 제공합니다.
- 메시지를 받으면 해당 메시지를 LED 매트릭스에 표시합니다.
준비물
| 1 | × | ESP-WROOM-32 Dev Module | 쿠팡 | Amazon | |
| 1 | × | USB Cable Type-C | 쿠팡 | Amazon | |
| 1 | × | FC-16 LED Matrix 32x8 | Amazon | |
| 1 | × | Breadboard | 쿠팡 | Amazon | |
| 1 | × | Jumper Wires | Amazon | |
| 1 | × | (Optional) DC Power Jack | 쿠팡 | Amazon | |
| 1 | × | (Recommended) ESP32 Screw Terminal Adapter | 쿠팡 | Amazon |
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.
LED 매트릭스 및 웹 서버에 대하여
웹 인터페이스에서 ESP32로 텍스트를 보내는 데 순수한 HTTP를 사용할 수 있습니다. 하지만, WebSocket을 사용하면 더 반응이 좋아 보이고 큰 어려움을 추가하지 않습니다. 그래서 이 튜토리얼에서는 WebSocket을 사용할 것입니다.
LED 매트릭스, 웹 서버 및 WebSocket의 핀아웃, 기능 및 프로그래밍을 포함하여 익숙하지 않으신가요? 아래에서 이 주제에 대한 종합적인 튜토리얼을 탐색해보세요:
- ESP32 - LED Matrix tutorial
- ESP32 - Web Server tutorial
- ESP32 - WebSocket tutorial
선연결
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
ESP32 및 다른 구성 요소에 전원을 공급하는 방법에 대해 잘 알지 못하는 경우, 다음 튜토리얼에서 안내를 찾을 수 있습니다: ESP32 전원 공급 방법.
ESP32 코드
웹 페이지의 콘텐츠(HTML, CSS, JavaScript)는 index.h 파일에 별도로 저장됩니다. 따라서 Arduino IDE에는 두 개의 코드 파일이 있게 됩니다.
- ESP32 코드인 .ino 파일로, 웹 서버와 WebSocket 서버를 만듭니다.
- 웹페이지의 내용이 포함된 .h 파일입니다.
사용 방법
- ESP32를 처음 사용하는 경우, Arduino IDE에서 ESP32 환경 설정하는 방법을 참고하세요.
- ESP32 보드를 PC에 마이크로 USB를 통해 연결하세요.
- PC에서 Arduino IDE를 엽니다.
- 올바른 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택하세요.
- Arduino IDE의 왼쪽 내비게이션 바에 있는 Library Manager 아이콘을 클릭하여 라이브러리 관리자를 엽니다.
- “ESPAsyncWebServer”을 검색한 후, lacamera가 만든 ESPAsyncWebServer를 찾으세요.
- Install 버튼을 클릭하여 ESPAsyncWebServer 라이브러리를 설치하세요.
당신은 의존성을 설치하라는 요청을 받게 될 것입니다. Install All 버튼을 클릭하세요.
- “WebSockets”을 검색한 다음, Markus Sattler이 만든 WebSockets를 찾으세요.
- WebSockets 라이브러리를 설치하려면 Install 버튼을 클릭하세요.
- “MD_Parola”를 검색한 다음, MD_Parola 라이브러리를 찾으세요
- Install 버튼을 클릭하세요.
- "MD_MAX72XX" 라이브러리를 설치하라는 요청을 받게 될 것입니다.
- 의존성을 설치하려면 Install All 버튼을 클릭하세요.
- Arduino IDE에서 새 스케치를 생성하고, 이름을 지정하세요. 예를 들어, newbiely.kr.ino
- 아래 코드를 복사하고 Arduino IDE로 열기
/*
* 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp32/esp32-led-matrix-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4 // 블록 4개
#define CS_PIN 21 // ESP32 핀 GPIO21
const char* ssid = "YOUR_WIFI_SSID"; // 변경하세요
const char* password = "YOUR_WIFI_PASSWORD"; // 변경하세요
AsyncWebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81); // 포트 81에서 WebSocket 서버
// MD_Parola 클래스의 인스턴스 생성
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
switch (type) {
case WStype_DISCONNECTED:
Serial.printf("[%u] 연결 끊김!\n", num);
break;
case WStype_CONNECTED:
{
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] 에서 연결됨 %d.%d.%d.%d\n", num, ip[0], ip[1], ip[2], ip[3]);
}
break;
case WStype_TEXT:
String text = String((char*)payload);
Serial.println("수신: " + text);
ledMatrix.displayClear(); // LED 매트릭스 디스플레이 지움
ledMatrix.displayScroll(text.c_str(), PA_CENTER, PA_SCROLL_LEFT, 100);
webSocket.sendTXT(num, "LED 매트릭스에 표시됨: " + String((char*)payload) + "on LED Matrix");
break;
}
}
void setup() {
Serial.begin(9600);
ledMatrix.begin(); // 객체 초기화
ledMatrix.setIntensity(0); // LED 매트릭스 디스플레이의 밝기 설정(0에서 15까지)
ledMatrix.displayClear(); // LED 매트릭스 디스플레이 지움
ledMatrix.displayScroll("esp32io.com", PA_CENTER, PA_SCROLL_LEFT, 100);
// Wi-Fi에 연결
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Wi-Fi에 연결 중...");
}
Serial.println("Wi-Fi에 연결되었습니다");
// WebSocket 서버 초기화
webSocket.begin();
webSocket.onEvent(webSocketEvent);
// 기본 HTML 페이지 제공(WebSocket 연결 생성을 위한 JavaScript 포함)
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("웹 서버: 웹 페이지 요청 받음");
String html = HTML_CONTENT; // index.h 파일에서 HTML 내용 사용
request->send(200, "text/html", html);
});
server.begin();
Serial.print("ESP32 웹 서버의 IP 주소: ");
Serial.println(WiFi.localIP());
}
void loop() {
webSocket.loop();
if (ledMatrix.displayAnimate()) {
ledMatrix.displayReset();
}
}
- 다음을 통해 Arduino IDE에서 index.h 파일을 생성하십시오:
- 시리얼 모니터 아이콘 바로 아래에 있는 버튼을 클릭하고 새 탭을 선택하거나, Ctrl+Shift+N 키를 사용하세요.
- 표시된 IP 주소를 기록하고, 스마트폰이나 PC의 웹 브라우저 주소 창에 이 주소를 입력하세요.
- 아래와 같은 웹페이지를 볼 수 있습니다:
- WebSocket을 통해 웹페이지를 ESP32에 연결하려면 CONNECT 버튼을 클릭하세요.
- 몇 가지 단어를 입력하고 그것들을 ESP32로 보내세요.
- ESP32로부터의 응답을 보게 될 것입니다.
- index.h에서 HTML 내용을 수정하고 newbiely.kr.ino 파일은 수정하지 않는 경우, 코드를 ESP32에 컴파일하고 업로드할 때 Arduino IDE는 HTML 내용을 업데이트하지 않습니다.
- 이 경우 Arduino IDE가 HTML 내용을 업데이트하도록 하려면, newbiely.kr.ino 파일을 수정하세요(예: 빈 줄 추가, 주석 추가 등).
파일 이름을 index.h로 지정하고 OK 버튼을 클릭하세요.
아래 코드를 복사하여 index.h에 붙여넣으세요.
/*
* 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp32/esp32-led-matrix-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<!-- saved from url=(0019)http://192.168.0.2/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>ESP32 WebSocket</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
/* Add some basic styling for the chat window */
body {
font-size: 16px;
}
.chat-container {
width: 400px;
margin: 0 auto;
padding: 10px;
}
.chat-messages {
height: 250px;
overflow-y: auto;
border: 1px solid #444;
padding: 5px;
margin-bottom: 5px;
}
.user-input {
display: flex;
margin-bottom: 20px;
}
.user-input input {
flex: 1;
border: 1px solid #444;
padding: 5px;
}
.user-input button {
margin-left: 5px;
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.websocket {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.websocket button {
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.websocket .label {
margin-left: auto;
}
</style>
<script>
var ws;
var wsm_max_len = 4096; /* bigger length causes uart0 buffer overflow with low speed smart device */
function update_text(text) {
var chat_messages = document.getElementById("chat-messages");
chat_messages.innerHTML += text + '<br>';
chat_messages.scrollTop = chat_messages.scrollHeight;
}
function send_onclick() {
if(ws != null) {
var message = document.getElementById("message").value;
if (message) {
document.getElementById("message").value = "";
ws.send(message + "\n");
update_text('<span style="color:navy">' + message + '</span>');
// You can send the message to the server or process it as needed
}
}
}
function connect_onclick() {
if(ws == null) {
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
} else
ws.close();
}
function ws_onopen() {
document.getElementById("ws_state").innerHTML = "<span style='color:blue'>CONNECTED</span>";
document.getElementById("bt_connect").innerHTML = "Disconnect";
document.getElementById("chat-messages").innerHTML = "";
}
function ws_onclose() {
document.getElementById("ws_state").innerHTML = "<span style='color:gray'>CLOSED</span>";
document.getElementById("bt_connect").innerHTML = "Connect";
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
}
function ws_onmessage(e_msg) {
e_msg = e_msg || window.event; // MessageEvent
console.log(e_msg.data);
update_text('<span style="color:blue">' + e_msg.data + '</span>');
}
</script>
</head>
<body>
<div class="chat-container">
<h2>ESP32 WebSocket</h2>
<div class="websocket">
<button class="connect-button" id="bt_connect" onclick="connect_onclick()">Connect</button>
<span class="label">WebSocket: <span id="ws_state"><span style="color:blue">CLOSED</span></span></span>
</div>
<div class="chat-messages" id="chat-messages"></div>
<div class="user-input">
<input type="text" id="message" placeholder="Type your message...">
<button onclick="send_onclick()">Send</button>
</div>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</div>
</body></html>
)=====";
이제 두 파일에 코드가 있습니다: newbiely.kr.ino와 index.h
Arduino IDE에서 Upload 버튼을 클릭하여 ESP32에 코드를 업로드하세요.
시리얼 모니터를 엽니다.
시리얼 모니터에서 결과를 확인하세요.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
※ NOTE THAT:
코드 줄별 설명
위의 ESP32 코드에는 라인별 설명이 포함되어 있습니다. 코드의 주석을 읽어 주세요!