💡 Electron Parade ☀️ 🌙

Look, we’ve all been there. You have three different browser tabs open just to check the weather, see if Bitcoin crashed again, and look at a picture of a retro space invader. It’s exhausting. And frankly, standard LCD displays are boring. If your data isn’t being blasted into your retinas by 4,096 individually addressable RGB LEDs powered by a questionable knock-off power supply, are you even a maker?

I didn’t think so.

Today, we are building the ultimate desk accessory: a Wi-Fi-connected 64x64 RGB LED Matrix display powered by the glorious ESP32. This isn’t just a clock. This is a portal to the internet that can display live data, custom animations, and retro pixel art, all controlled via a web interface. The best part? The wiring looks like a multicolored spaghetti monster, which is sure to terrify your non-technical friends.

Let’s dive in before the magic blue smoke gets bored and leaves.

The Gear You Need

• Microcontroller: ESP32 Development Board Type-C – We need the Wi-Fi capabilities and the processing power to drive this many pixels.
• The Display: 64x64 RGB LED Matrix Panel HUB75 – 4,096 LEDs of pure, blinding glory.
• Power: 5V 10A Power Supply Adapter – CRITICAL: Do NOT try to power this matrix directly from the ESP32’s 5V pin. You will fry the board instantly. These panels draw a massive amount of current when fully lit.
• Jumper Wires: Lots of them. Female-to-Female for connecting the HUB75 interface to the ESP32.

(Note: If you’re new to the ESP32, check out Lesson 153: Setting up a Local Web Server to get familiar with the web-hosting side of things!)

Step 1: The Wiring (Taming the Spaghetti)

The HUB75 interface on the back of the matrix panel has 16 pins. You need to connect 13 of these to specific GPIO pins on your ESP32.

Because we are driving the display directly, we are relying on a library to bit-bang the data incredibly fast. Use the standard wiring guide provided by the PxMatrix or ESP32-HUB75-MatrixPanel-I2S-DMA libraries (we recommend the DMA library for the ESP32 as it frees up CPU cycles and prevents flickering).

• R1, G1, B1 -> GPIO 25, 26, 27
• R2, G2, B2 -> GPIO 14, 12, 13
• A, B, C, D, E -> GPIO 23, 19, 5, 17, 18
• CLK, LAT, OE -> GPIO 16, 4, 15

Step 2: Powering the Beast

Connect the heavy-duty power cable included with your matrix to the 5V 10A power supply. Double-check your polarity. Ground to Ground, 5V to 5V.

You can also power the ESP32 from this same 5V supply by running a wire from the 5V terminal to the VIN or 5V pin on the ESP32.

Step 3: The Code (Making it Smart)

We’ll be using the ESP32-HUB75-MatrixPanel-I2S-DMA library to drive the display, and WiFi.h with HTTPClient.h to fetch data.

Here is a simplified snippet to get the matrix initialized and display some text:

#include <ESP32-HUB75-MatrixPanel-I2S-DMA.h>

MatrixPanel_I2S_DMA *dma_display = nullptr;

void setup() {
  HUB75_I2S_CFG mxconfig(
    64, // width
    64, // height
    1   // chain length
  );

  dma_display = new MatrixPanel_I2S_DMA(mxconfig);
  dma_display->begin();
  dma_display->setBrightness8(90); // 0-255
  dma_display->clearScreen();

  dma_display->setTextSize(1);
  dma_display->setTextColor(dma_display->color565(0, 255, 0)); // Green
  dma_display->setCursor(2, 2);
  dma_display->print("SYSTEM ON");
}

void loop() {
  // Add your Wi-Fi fetching and drawing logic here!
}

To take this to the next level, you can fetch JSON payloads from open APIs (like OpenWeatherMap or CoinGecko) and parse them using ArduinoJson.

Taking It Further

Once you have the basics down, you can:

1. Host a web page on the ESP32 to upload custom 64x64 .bmp files.
2. Build a custom 3D-printed enclosure to hide the rat’s nest of wiring.
3. Add an ambient light sensor to automatically dim the display at night so it doesn’t blind you.

For more inspiration on what to do with matrices, check out our Arduino 4x4x4 LED Cube project!

References and Inspiration for this build came from incredible community guides on Instructables and Hackaday.