Introduction: LED Matrix Editor

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 :-)

Comments

author
xantorohara (author)2015-09-19

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
author
TaiG (author)xantorohara2016-03-06

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)?

author
karlt1 (author)xantorohara2015-09-28

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.

author
DavidS216 (author)2015-09-16

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 !

author
xantorohara (author)DavidS2162015-09-27

Just updated it.

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

author
DavidS216 (author)xantorohara2015-09-28

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

It's very fun project !

Best regards and thanks again !

author
xantorohara (author)2015-09-16

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?

author
karlt1 (author)xantorohara2015-09-16

hi,

it s a good idea and

it will be very nice

author
karlt1 (author)xantorohara2015-09-19

really nice

thanks for the job.

i will try this soon.

author
DavidS216 (author)2015-09-15

Hello,
good job but i have a little problem with Arduino 1.05-r2 and this example ...
The number 0x------ is too long !
problem with uint64_t...
Best regards

author
xantorohara (author)DavidS2162015-09-15

Hi,

Could you try the current version of the Arduino IDE (Arduino 1.6.5)?
It has a lot of improvements and updated AVR-GCC compiler.

It has 64-bit integer type:
typedef unsigned long long int uint64_t;

defined in this file:
"C:\Program Files (x86)\Arduino\hardware\tools\avr\avr\include\stdint.h"


Let me know if it'll work or not for you.

author
DavidS216 (author)xantorohara2015-09-16

It's Arduino 1.05. i can't used Arduino 1.6.5 because i work with Arddublock plug'in. But i can see in the AVR-GCC.
Thanks !
Best regards !

author
karlt1 (author)2015-09-15

Hello

i've add the lib : ledcontrol

but arduino don t compile.

i have a bug on first line after : const uint64_t IMAGES[]

he said : integer constant is too large for long type.

should i add an other lib and witch one ?

it will be great if it compile.

author
xantorohara (author)karlt12015-09-15

Hi, karlt1

Which version of the Arduino IDE do you have?
I' using Arduino 1.6.5...

Maybe you have a -mint8 option enabled in your compiler?

author
paulindallas (author)2015-09-14

Nice Project! It'll save me a bunch of time. Thanks so much.

author
karlt1 (author)2015-09-13

really nice

i like this project.

thank you

author
DIY Hacks and How Tos (author)2015-09-13

Nice design.

About This Instructable

6,192views

76favorites

License:

Bio: Software engineer
More by xantorohara:LED Matrix Editor
Add instructable to: