Arduino Nano 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://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-led-matrix-via-web

This build turns an Arduino Nano ESP32 into a web server with a WebSocket connection, letting you type text on a web page and have it scroll across an FC-16 LED matrix signboard. The board hosts the page, listens for messages over WebSocket, and pushes any text it receives straight to the display.

Supplies

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

Wiring

Connect the FC-16 LED matrix to the Arduino Nano ESP32, wiring its CS pin to pin D10 on the board. Power and data lines for the matrix run through the usual SPI-style connection used by the MD_MAX72xx driver. If you are using more than one 8x8 block (this project uses 4), chain them together as the matrix module expects.

How It Works

The Arduino Nano ESP32 connects to your WiFi network and runs both a web server and a WebSocket server. Loading the page in a browser serves HTML/CSS/JavaScript content stored in index.h. When you submit text on that page, it goes to the board over the WebSocket connection, triggering onWebSocketMessage, which clears the LED matrix and scrolls the new text across it using MD_Parola. The board then broadcasts a confirmation message back to connected clients.

Code

The project uses two files: the main .ino sketch, which sets up the web server and WebSocket server, and index.h, which holds the webpage content. The sketch uses the DIYables_ESP32_WebServer library for serving pages and handling WebSocket events, and MD_Parola with MD_MAX72xx to drive the LED matrix. Set your WIFI_SSID and WIFI_PASSWORD at the top before uploading. The code is commented line by line, so read through it in the Arduino IDE for the details.

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

/*

* This Arduino Nano ESP32 code was developed by newbiely.com

*

* This Arduino Nano ESP32 code is made available for public use without any restriction

*

* For comprehensive instructions and wiring diagrams, please visit:

* https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-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 D10 // The Arduino Nano ESP32 pin

// 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("Arduino Nano 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("newbiely.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(onWebSocket

...

Things That Go Wrong

If the sketch won't compile, check that you installed the DIYables ESP32 WebServer library and the MD_Parola library through the Library Manager, and that you picked the Arduino Nano ESP32 board with the correct COM port. If the matrix stays blank, double check the CS pin is wired to D10 and that MAX_DEVICES matches the number of 8x8 blocks you have connected.

Full Tutorial

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