ESP32 - LED Matrix Via Web

by DIYables in Circuits > Microcontrollers

88 Views, 0 Favorites, 0 Comments

ESP32 - LED Matrix Via Web

This is a compact build guide. The full tutorial, with the wiring diagram and a line-by-line walkthrough of the code, is here: https://esp32io.com/tutorials/esp32-led-matrix-via-web

This build turns an ESP32 into a web server that drives an FC-16 LED matrix signboard. You open a web page, type text, and the ESP32 pushes it over WebSocket to the matrix, which scrolls it across the display. It is a compact way to send messages to an LED sign from any browser on the same network.

Supplies

Everything below is what the build uses. The links go to the parts we make and test.

  1. 38-pin ESP32 ESP-WROOM-32 Dev Module - Narrow
  2. 38-pin ESP32 ESP-WROOM-32 Dev Module - Wide
  3. 30-pin ESP32 ESP-WROOM-32 Dev Module - Wide
  4. ESP32 Uno-form board
  5. ESP32 S3 Uno-form board
  6. USB Cable Type-A to Type-C (for USB-A PC)
  7. USB Cable Type-C to Type-C (for USB-C PC)
  8. FC-16 LED Matrix 32x8
  9. Breadboard
  10. Jumper Wires
  11. DC Power Jack
  12. Screw Terminal Expansion Board for ESP32
  13. Breakout Expansion Board for ESP32
  14. Power Splitter for ESP32
  15. DIYables ESP32 Starter Kit (ESP32 included)
  16. DIYables ESP32 S3 Starter Kit (ESP32 S3 included)
  17. DIYables Sensor Kit (18 sensors/displays)

Wiring

Connect the FC-16 LED Matrix 32x8 to the ESP32 with the CS pin going to ESP32 GPIO21. The sketch is set up for 4 cascaded matrix blocks (MAX_DEVICES = 4) using the FC16 hardware type. Power the ESP32 and the matrix appropriately; if you are not sure how to power the ESP32 and a display together, check a dedicated power guide before wiring everything on the breadboard.

How It Works

The ESP32 runs both a web server and a WebSocket server. Loading the page in a browser serves HTML/CSS/JavaScript stored on the ESP32. When you type text and send it, the WebSocket message handler receives it, clears the LED matrix, and scrolls the text across it centered, moving left, using MD_Parola. The ESP32 then broadcasts a confirmation message back to connected clients showing what was displayed.

Code

The project uses two files: the .ino sketch, which sets up the web server, the WebSocket server, and the MD_Parola LED matrix object, and index.h, which holds the webpage content served to browsers. You need the DIYables ESP32 WebServer library and the MD_Parola library installed via the Arduino IDE Library Manager. Set your WiFi SSID and password in the sketch before uploading. The code is commented line by line, so read through it for details on each part.

esp32-led-matrix-via-web.ino - the sketch from the tutorial, unchanged.

/*
* This ESP32 code is created by esp32io.com
*
* This ESP32 code is released in the public domain
*
* For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-led-matrix-via-web
*/

#include <DIYables_ESP32_WebServer.h>
#include "index.h"

#include <MD_Parola.h>
#include <MD_MAX72xx.h>

#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4 // 4 blocks
#define CS_PIN 21 // ESP32 pin GPIO21

// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";

// Create web server instance
DIYables_ESP32_WebServer server;
DIYables_ESP32_WebSocket* webSocket;

// create an instance of the MD_Parola class
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);


// Web Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT);
}

// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
// Send welcome message
const char welcome[] = "Connected to ESP32 WebSocket Server!";
}

void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {

Serial.print("WebSocket Received (");
Serial.print(length);
Serial.print(" bytes): ");
Serial.println(message);

ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll(message, PA_CENTER, PA_SCROLL_LEFT, 100);

// Broadcast response to all connected clients using the library
if (webSocket != nullptr) {
String response = "Displayed: " + String(message) + "on LED Matrix";
webSocket->broadcastTXT(response);

Serial.print("WebSocket sent (");
Serial.print(response.length());
Serial.print(" bytes): ");
Serial.println(response);
}
}

void onWebSocketClose(net::WebSocket& ws, const net::WebSocket::CloseCode code, const char* reason, uint16_t length) {
Serial.println("WebSocket client disconnected");
}

void setup() {
Serial.begin(9600);
delay(1000);

Serial.println("ESP32 Web Server and WebSocket Server");

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("esp32io.com", PA_CENTER, PA_SCROLL_LEFT, 100);


// Configure web server routes
server.addRoute("/", handleHome);

// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);

// Enable WebSocket functionality
webSocket = server.enableWebSocket(81);

if (webSocket != nullptr) {
// Set up WebSocket event handlers
webSocket->onOpen(onWebSocketOpen);
webSocket->onMessage(onWebSocketMessage);
webSocket->onClose(onWebSocketClose);
} else {
Serial.println("Failed to start WebSocket server");
}
}
...

Full Tutorial

The complete tutorial, wiring diagram and code explanation: https://esp32io.com/tutorials/esp32-led-matrix-via-web