Making LED Matrix Icons and Graphics with ESP32

by
ESP32 connected to an 8×8 LED matrix powered by a 5V source, showing a heart, illustrating proper wiring with a common ground for stable operation.
ESP32 connected to an 8×8 LED matrix powered by a 5V source, showing a heart, illustrating proper wiring with a common ground for stable operation.

Creating vibrant LED Matrix Icons has never been more accessible, thanks to the ESP32. This powerful microcontroller allows hobbyists and developers to craft dynamic visuals and animations on an LED matrix with ease. Whether you’re making simple static icons like smiley faces or experimenting with moving patterns, the possibilities are endless. Combining the versatility of MicroPython and the MAX7219 LED matrix driver, this project brings coding and creativity together for beginners and experts alike.

In this guide, we’ll explore how to get started with LED Matrix Icons on your ESP32. We’ll cover the essential components, set up the required libraries, and walk through creating stunning designs step-by-step. By the end, you’ll be equipped to display custom graphics, unlocking the full potential of your LED matrix project.

Table of Contents

Getting Started with Your LED Matrix Setup

To begin, you’ll need an ESP32 microcontroller, a MAX7219-based 8×8 LED matrix, and basic accessories like jumper wires and a breadboard. First, ensure your ESP32 is running MicroPython. If you’re unsure how to do this, check our guide on installing MicroPython on ESP32.

Next, download the MicroPython MAX7219 library by Mike Causer from GitHub. This library simplifies the control of individual LEDs and provides powerful tools for rendering graphics. Connect your LED matrix to the ESP32, ensuring proper power (3.3V or 5V) and ground (GND) connections. Miswiring can damage your components, so double-check the wiring diagram provided in the library documentation.

Creating Basic LED Matrix Icons

Once your setup is complete, it’s time to light up your first LED Matrix Icons. Start with simple designs like a smiley face or a heart. Define the pixels to be lit using Python’s list structure. For instance, you can represent each row of an 8×8 matrix with an 8-bit binary number, where ‘1’ indicates a lit LED.

Here’s a quick example of drawing a smiley face:

from max7219 import Matrix8x8
from machine import Pin, SPI

spi = SPI(1, baudrate=10000000, polarity=0, phase=0, sck=Pin(18), mosi=Pin(23))
display = Matrix8x8(spi, Pin(5), 1)

display.fill(0)  # Clear the display
display.pixel(1, 1, 1)  # Define pixels for your icon
display.pixel(6, 1, 1)
display.pixel(3, 4, 1)
display.pixel(4, 4, 1)

display.show()

For more examples, visit our project hub on custom LED graphics.

Display Pattern Function Using String Literals

Using string literals for the binary patterns directly is a valid and more intuitive approach. It would eliminate the need for conversions and make the code easier to understand because the data is already in a human-readable form (as binary strings) instead of needing bitwise manipulations.

However, there’s one important caveat: In Python, numeric values like 00011000 are interpreted as integers, not binary strings. You would need to keep the numbers in the binary format (either as strings or as 0b literals) for them to represent binary data directly.

def display_pattern(display, pattern):
   for row_index, row_value in enumerate(pattern):
        for col_index, pixel in enumerate(row_value):
            if pixel == '1':  # If the pixel is on (1)
                display.pixel(col_index, row_index, 1)  # Turn on the pixel
    display.show()  # Update the display to reflect changes


pattern = [
    "00011000",  #    **  
    "00111100",  #   **** 
    "01111110",  #  ******
    "11111111",  # ********
    "11111111",  # ********
    "01111110",  #  ******
    "00111100",  #   ****
    "00011000",  #    **
]

display_pattern(display, pattern):

Common LED Matrix Icons

Creating common icons is a great way to get familiar with LED matrix design. Here are a few examples:

heart = [
    "01100110",
    "10011001",
    "10000001",
    "10000001",
    "01000010",
    "00100100",
    "00011000",
    "00000000",
]
display_pattern(display, heart)

Feel free to experiment with different patterns and create your own unique designs. For a more comprehensive list of predefined icons, visit our icon library.

Arrow Icon

An ESP32 microcontroller driving an 8x8 LED matrix to display an animated arrow icon—perfect for learning MicroPython and matrix control!
An ESP32 microcontroller driving an 8×8 LED matrix to display an animated arrow icon—perfect for learning MicroPython and matrix control!
arrow = [
    "00011000",
    "00011000",
    "00011000",
    "11111111",
    "01111110",
    "00111100",
    "00011000",
    "00000000",
]
display_pattern(display, arrow)

Smiley Icon

smiley = [
    "00111100",
    "01000010",
    "10100101",
    "10000001",
    "10100101",
    "10011001",
    "01000010",
    "00111100",
]
display_pattern(display, smiley)

Conclusion

LED Matrix Icons bring coding to life in a visually engaging way. The ESP32 and MAX7219-based LED matrix make it easy to design static graphics, even for those new to MicroPython. From simple icons to intricate designs, the ability to display custom creations adds a personal touch to any project.

Ready to take your designs further? Explore more ESP32 guides and tips on our website, or join the community to share your creations and ideas. Let’s keep building and lighting up new possibilities together.

Leave a Comment