LED Matrix Designer

An interactive web-based tool for designing LED matrix patterns and generating Arduino-compatible code. Perfect for creating custom displays for LED matrix projects.

Features

• 🎨 Visual LED matrix designer with clickable pixels
• 📏 Adjustable matrix dimensions (up to 32x32)
• 🎯 Interactive drawing tools:
  • Click to toggle individual pixels
  • Click and drag to draw continuously
  • Keyboard navigation support
• 🛠️ Matrix manipulation tools:
  • Clear All
  • Fill All
  • Invert Pattern
• 🎨 Customizable active LED color
• 💻 Real-time Arduino code generation
• 📋 Copy-to-clipboard functionality
• 📝 Editable code output with live preview
• 📱 Responsive design for mobile and desktop

Usage

1. Open the LED Matrix Designer in your web browser
2. Set your desired matrix dimensions (rows and columns)
3. Click on pixels to create your design
4. Customize the variable name for the generated code
5. Copy the generated code for use in your Arduino project

Generated Code Format

The tool generates Arduino-compatible code in the following format:

byte design[8][12] = {
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0 },
  { 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1 },
  { 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1 },
  { 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }
};

Arduino UNO R4 WiFi LED Matrix Code

// Include the ArduinoGraphics library and the Arduino LED Matrix library
#include "ArduinoGraphics.h"
#include "Arduino_LED_Matrix.h"

// Create a new LED Matrix object
ArduinoLEDMatrix matrix;

// Define the LED Matrix design
byte design[8][12] = {
  { 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0 },
  { 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0 },
  { 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1 },
  { 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1 },
  { 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1 },
  { 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1 },
  { 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0 },
  { 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0 }
};

void setup() {
  // Initialize the LED Matrix
  matrix.begin();
  // Render the design on the LED Matrix
  matrix.renderBitmap(design, 8, 12);
}

void loop() {
}

Packed Code Format

The tool also generates packed code to save program space on the Arduino. This format uses the loadFrame function of the Arduino LED Matrix library.

const unsigned long design[] = {
    0x555AAA55,
    0x5AAA555A,
    0xAA555AAA
};

matrix.loadFrame(design);

Screenshots

LED Matrix Designer App	Arduino UNO R4 WiFi