ESP32 - 웹을 통한 LED 매트릭스 | ESP32 - LED Matrix via Web

이 튜토리얼에서는 ESP32를 사용하여 웹 인터페이스를 통해 LED 매트릭스 사인보드를 제어하는 방법을 배우게 됩니다. 자세히 말하면, 다음과 같은 작업을 하는 웹 서버로 ESP32를 프로그래밍할 것입니다:

ESP32 controls LED matrix signboard via web

준비물

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) Screw Terminal Expansion Board for ESP32 쿠팡 | Amazon
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.

LED 매트릭스 및 웹 서버에 대하여

웹 인터페이스에서 ESP32로 텍스트를 보내는 데 순수한 HTTP를 사용할 수 있습니다. 하지만, WebSocket을 사용하면 더 반응이 좋아 보이고 큰 어려움을 추가하지 않습니다. 그래서 이 튜토리얼에서는 WebSocket을 사용할 것입니다.

LED 매트릭스, 웹 서버 및 WebSocket의 핀아웃, 기능 및 프로그래밍을 포함하여 익숙하지 않으신가요? 아래에서 이 주제에 대한 종합적인 튜토리얼을 탐색해보세요:

선연결

ESP32 LED matrix display wiring diagram

이 이미지는 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 라이브러리를 설치하세요.
ESP32 ESPAsyncWebServer library

당신은 의존성을 설치하라는 요청을 받게 될 것입니다. Install All 버튼을 클릭하세요.

ESP32 ESPAsyncWebServer dependencies library
  • “WebSockets”을 검색한 다음, Markus Sattler이 만든 WebSockets를 찾으세요.
  • WebSockets 라이브러리를 설치하려면 Install 버튼을 클릭하세요.
ESP32 WebSockets library
  • “MD_Parola”를 검색한 다음, MD_Parola 라이브러리를 찾으세요
  • Install 버튼을 클릭하세요.
ESP32 MD_Parola library
  • "MD_MAX72XX" 라이브러리를 설치하라는 요청을 받게 될 것입니다.
  • 의존성을 설치하려면 Install All 버튼을 클릭하세요.
ESP32 MD_MAX72XX library
  • 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 키를 사용하세요.
    Arduino IDE 2 adds file

    파일 이름을 index.h로 지정하고 OK 버튼을 클릭하세요.

    Arduino IDE 2 adds file index.h

    아래 코드를 복사하여 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.inoindex.h

    Arduino IDE에서 Upload 버튼을 클릭하여 ESP32에 코드를 업로드하세요.

    시리얼 모니터를 엽니다.

    시리얼 모니터에서 결과를 확인하세요.

    COM6
    Send
    Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address IP address: 192.168.0.2
    Autoscroll Show timestamp
    Clear output
    9600 baud  
    Newline  
    • 표시된 IP 주소를 기록하고, 스마트폰이나 PC의 웹 브라우저 주소 창에 이 주소를 입력하세요.
    • 아래와 같은 웹페이지를 볼 수 있습니다:
    ESP32 websocket web browser
    • WebSocket을 통해 웹페이지를 ESP32에 연결하려면 CONNECT 버튼을 클릭하세요.
    • 몇 가지 단어를 입력하고 그것들을 ESP32로 보내세요.
    • ESP32로부터의 응답을 보게 될 것입니다.
    ESP32 websocket chat server

    ※ NOTE THAT:

    • index.h에서 HTML 내용을 수정하고 newbiely.kr.ino 파일은 수정하지 않는 경우, 코드를 ESP32에 컴파일하고 업로드할 때 Arduino IDE는 HTML 내용을 업데이트하지 않습니다.
    • 이 경우 Arduino IDE가 HTML 내용을 업데이트하도록 하려면, newbiely.kr.ino 파일을 수정하세요(예: 빈 줄 추가, 주석 추가 등).

    코드 줄별 설명

    위의 ESP32 코드에는 라인별 설명이 포함되어 있습니다. 코드의 주석을 읽어 주세요!

관련 튜토리얼

※ OUR MESSAGES

  • Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!