Introduction: LED Matrix Editor

Picture of 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

Picture of 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

Picture of LED Matrix Animation

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

Comments

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

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

xantorohara (author)TaiG2017-09-09

Just added animation )

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

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.

cowhoof (author)2017-08-29

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!

xantorohara (author)cowhoof2017-09-09

Hi, this weekend's I had a bit of time and I've added ability to animate matrices, and added colors selector.

Previous version is available as well: https://xantorohara.github.io/led-matrix-editor/v...

cowhoof (author)xantorohara2017-09-09

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

Fantastic!!!

xantorohara (author)xantorohara2017-09-09

Checkout new functionality and design of the LED Matrix editor )

xantorohara (author)cowhoof2017-08-29

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

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 !

xantorohara (author)DavidS2162015-09-27

Just updated it.

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

DavidS216 (author)xantorohara2015-09-28

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

It's very fun project !

Best regards and thanks again !

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?

karlt1 (author)xantorohara2015-09-16

hi,

it s a good idea and

it will be very nice

karlt1 (author)xantorohara2015-09-19

really nice

thanks for the job.

i will try this soon.

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

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.

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 !

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.

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?

paulindallas (author)2015-09-14

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

karlt1 (author)2015-09-13

really nice

i like this project.

thank you

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

Nice design.

About This Instructable

7,466views

76favorites

License:

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