ESP32 - 웹을 통한 LED 매트릭스 | ESP32 - LED Matrix via Web
이 튜토리얼에서는 ESP32를 사용하여 웹 인터페이스를 통해 LED 매트릭스 사인보드를 제어하는 방법을 배우게 됩니다. 자세히 말하면, 다음과 같은 작업을 하는 웹 서버로 ESP32를 프로그래밍할 것입니다:
웹 브라우저에서 요청을 받을 때 사용자에게 웹 인터페이스를 반환합니다.
사용자가 ESP32에 메시지를 보낼 수 있는 웹 인터페이스를 제공합니다.
메시지를 받으면 해당 메시지를 LED 매트릭스에 표시합니다.
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.
웹 인터페이스에서 ESP32로 텍스트를 보내는 데 순수한 HTTP를 사용할 수 있습니다. 하지만, WebSocket을 사용하면 더 반응이 좋아 보이고 큰 어려움을 추가하지 않습니다. 그래서 이 튜토리얼에서는 WebSocket을 사용할 것입니다.
LED 매트릭스, 웹 서버 및 WebSocket의 핀아웃, 기능 및 프로그래밍을 포함하여 익숙하지 않으신가요? 아래에서 이 주제에 대한 종합적인 튜토리얼을 탐색해보세요:
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
ESP32 및 다른 구성 요소에 전원을 공급하는 방법에 대해 잘 알지 못하는 경우, 다음 튜토리얼에서 안내를 찾을 수 있습니다: ESP32 전원 공급 방법.
웹 페이지의 콘텐츠(HTML, CSS, JavaScript)는 index.h 파일에 별도로 저장됩니다. 따라서 Arduino IDE에는 두 개의 코드 파일이 있게 됩니다.
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 버튼을 클릭하세요.
Arduino IDE에서 새 스케치를 생성하고, 이름을 지정하세요. 예를 들어, newbiely.kr.ino
아래 코드를 복사하고 Arduino IDE로 열기
#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
#define CS_PIN 21
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";
AsyncWebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81);
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();
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);
ledMatrix.displayClear();
ledMatrix.displayScroll("esp32io.com", PA_CENTER, PA_SCROLL_LEFT, 100);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Wi-Fi에 연결 중...");
}
Serial.println("Wi-Fi에 연결되었습니다");
webSocket.begin();
webSocket.onEvent(webSocketEvent);
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("웹 서버: 웹 페이지 요청 받음");
String html = HTML_CONTENT;
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 파일을 생성하십시오:
파일 이름을 index.h로 지정하고 OK 버튼을 클릭하세요.
아래 코드를 복사하여 index.h에 붙여넣으세요.
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>
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;
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>');
}
}
}
function connect_onclick() {
if(ws == null) {
ws = new WebSocket("ws:
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;
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에 코드를 업로드하세요.
시리얼 모니터를 엽니다.
시리얼 모니터에서 결과를 확인하세요.
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address IP address: 192.168.0.2
※ NOTE THAT:
index.h에서 HTML 내용을 수정하고 newbiely.kr.ino 파일은 수정하지 않는 경우, 코드를 ESP32에 컴파일하고 업로드할 때 Arduino IDE는 HTML 내용을 업데이트하지 않습니다.
이 경우 Arduino IDE가 HTML 내용을 업데이트하도록 하려면, newbiely.kr.ino 파일을 수정하세요(예: 빈 줄 추가, 주석 추가 등).
위의 ESP32 코드에는 라인별 설명이 포함되어 있습니다. 코드의 주석을 읽어 주세요!