LED Matrix Editor

16,921

84

30

Introduction: LED Matrix Editor

About: Software engineer

There are some ways how to store this kind of matrix in the Arduino code.

Like this:

byte image[] = {
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 1, 1, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0,
    0, 0, 0, 1, 1, 1, 0, 0
}

or this:

byte image[] = {
    0b00001000,
    0b00011000,
    0b00001000,
    0b00001000,
    0b00001000,
    0b00001000,
    0b00001000,
    0b00011100
}

but what if you going to make an animation from a large number of frames?

Step 1: LED Matrix Editor

LED Matrix Editor - the online tool for animating your matrix.

It looks very simple, but it has some handy features:

  • Online, free and safe. No additional software required.
  • Toggle LEDs using a mouse
  • Toggle a whole row or column by clicking the appropriate matrix's index
  • Shift the matrix Up, Down, Left or Right via the single click
  • Invert or Clear matrix
  • Collect matrices in the bottom pane and then reorder them using the Drag-and-Drop
  • Update images as well as insert new or delete existing
  • Save images as a C code for Arduino
  • Use browsing history and save images as a link or bookmark, so you never lost your creations

Step 2: LED Matrix Arduino Code

Make your animation and then put generated code into the your Arduino project:

Like here:

#include <LedControl.h>

const int DIN_PIN = 7; const int CS_PIN = 6; const int CLK_PIN = 5;

const uint64_t IMAGES[] = { 0x3e2222223e3e0808, 0x3e22223e3e2a0808, 0x3e223e3e2a2a0808, 0xbe3e3e2a2a2a0808, 0xbe223e3e2a2a0808, 0xbe22223e3e2a0808, 0xbe2222223e3e0808, 0xbe22223e3e2a0808, 0xbe223e3e2a2a0808, 0xbebe3e2a2a2a0808, 0xbea23e3e2a2a0808, 0xbea2223e3e2a0808, 0xbea222223e3e0808, 0xbea2223e3e2a0808, 0xbea23e3e2a2a0808, 0xbebebe2a2a2a0808, 0xbea2be3e2a2a0808, 0xbea2a23e3e2a0808, 0xbea2a2223e3e0808, 0xbea2a23e3e2a0808, 0xbea2be3e2a2a0808, 0xbebebeaa2a2a0808, 0xbea2bebe2a2a0808, 0xbea2a2be3e2a0808, 0xbea2a2a23e3e0808, 0xbea2a2be3e2a0808, 0xbea2bebe2a2a0808, 0xbebebeaaaa2a0808, 0xbea2bebeaa2a0808, 0xbea2a2bebe2a0808, 0xbea2a2a2be3e0808, 0xbea2a2bebe2a0808, 0xbea2bebeaa2a0808, 0xbebebeaaaaaa0808, 0xbea2bebeaaaa0808, 0xbea2a2bebeaa0808, 0xbea2a2a2bebe0808, 0xbea2a2a2a2be1c08, 0xbea2a2a2a2a21c1c, 0xbea2a2a2a222001c, 0xbea2a2a22222001c, 0xbea2a2222222001c, 0xbea222222222001c, 0xbe2222222222001c, 0x3e2222222222001c, 0x3e2222222222001c, 0x3e22222222221c1c, 0x3e222222223e1c08 }; const int IMAGES_LEN = sizeof(IMAGES) / sizeof(uint64_t);

LedControl display = LedControl(DIN_PIN, CLK_PIN, CS_PIN);

void setup() { display.clearDisplay(0); display.shutdown(0, false); display.setIntensity(0, 10); }

void displayImage(uint64_t image) { for (int i = 0; i < 8; i++) { byte row = (image >> i * 8) & 0xFF; for (int j = 0; j < 8; j++) { display.setLed(0, i, j, bitRead(row, j)); } } }

int i = 0;

void loop() { displayImage(IMAGES[i]); if (++i >= IMAGES_LEN ) { i = 0; } delay(100); }

Step 3: LED Matrix Animation

Then connect Arduino and Matrix, upload code and have fun :-)

Be the First to Share

    Recommendations

    • Make it Glow Contest

      Make it Glow Contest
    • First Time Author Contest

      First Time Author Contest
    • PCB Challenge

      PCB Challenge

    30 Discussions

    0
    xantorohara
    xantorohara

    5 years ago on Introduction

    Hi,

    I just added option to save images as arrays of bytes.

    So now the generated code should be compatible with all Arduinos.

    Best regards

    led-matrix-editor-bytes.png
    0
    TaiG
    TaiG

    Reply 4 years ago

    Any chance of adding a "play animation" option that plays all the frames in your browser so that you can check how it looks animated (i.e. your motor frames)?

    0
    xantorohara
    xantorohara

    Reply 3 years ago

    Just added animation )

    https://xantorohara.github.io/led-matrix-editor/

    0
    karlt1
    karlt1

    Reply 5 years ago on Introduction

    hello

    very nice, this appli is awesome.

    thanks a lot

    i ve tested with byte, it work very good.

    the new icon you juste added are very nice (font) too.

    But if we want to use them it will be long to delete the unnecesasry icon.

    it s not possible to mixe icon from a link to an other.

    0
    d333gs
    d333gs

    Question 2 months ago on Introduction

    This looks great!
    How can I change the format to 16 X 32? I am using 2 WS2812 16X16 panels
    Is there an example of a loadable code for Arduino from pre set up to void set up to void loop?
    Thanks

    1
    Matana21
    Matana21

    10 months ago

    Great project!
    But it gives a solution for only one matrix
    What about a cascade of 16 units?

    0
    xITguy
    xITguy

    Question 11 months ago on Step 2

    In the LED matrix Arduino Code for the 8x8 array, where does the Arduino IDE get the #include <LedControl.h> ? My version flags it as missing when I do the code verification.

    0
    xITguy
    xITguy

    Reply 11 months ago

    Thanks for the link. Too bad it wasn't included in the original article. I am using a Neopixel 8x8 array to display characters for a toy project for a friend, so this will be very helpful in generating the proper code as I create the designs to display.

    0
    xantorohara
    xantorohara

    Reply 11 months ago

    You are right. I've just added the link.
    Years ago it was a pretty popular and well-known library, even for beginners.

    0
    cowhoof
    cowhoof

    3 years ago

    Hello, thanks for sharing this editor - the pupils really like programming their leds! Keep up the good work!

    Do you also have an offline version of your editor?

    An animated view of the frames would also be really useful (like in Piskel for instance). Any chance that this will be available at some point?

    Thanks!

    0
    cowhoof
    cowhoof

    Reply 3 years ago

    Thanks my friend, your work on the animation feature is very much appreciated - it's really useful.

    Fantastic!!!

    0
    xantorohara
    xantorohara

    Reply 3 years ago

    Checkout new functionality and design of the LED Matrix editor )

    led-matrix-2.png
    0
    xantorohara
    xantorohara

    Reply 3 years ago

    I thought about the offline version as well as implementation of a "Play" button.

    If I have time, I'll do it in the near future.

    I will notify you here :-)

    0
    DavidS216
    DavidS216

    5 years ago on Introduction

    Hello,
    I saw that you had proposed a version 8 bits. Is this still planned ? This would be compatible with all versions of Arduino . It would be perfect for us.
    But I do not know if you have the opportunity to do that.
    In any case thank you to you.

    Best regards

    Thanks for all !

    0
    xantorohara
    xantorohara

    Reply 5 years ago on Introduction

    Just updated it.

    New design, predefined fonts, links to related articles...

    0
    DavidS216
    DavidS216

    Reply 5 years ago on Introduction

    Thanks for your new version of LED Matrix Editor...

    It's very fun project !

    Best regards and thanks again !

    0
    xantorohara
    xantorohara

    5 years ago on Introduction

    Hi, guys

    Thanks for your comments.

    I see that some of you are experiencing problems with uint64_t data type.

    If you want, I'll add the option to represent every image as a 8-byte array (so the both forms will be available).

    What you think?

    0
    karlt1
    karlt1

    Reply 5 years ago on Introduction

    hi,

    it s a good idea and

    it will be very nice