LED Matrix online editor

Using Arduino LEDs and Multiplexing
1

Hi,

I would like to introduce my new mini-project LED Matrix Editor created for the Arduino community.

This is online tool for editing and creating animations for LED dot matrices.

1366×768 73.4 KB

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

I hope you will be fun and happy using it.

2

And the sample how to use generated code:

#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);
}
3

While it is much more tedious to scroll through, I prefer to define fonts as binary declarations, so you can actually view the characters - and modify them - as needed.

4

Paul__B, thanks for your review.

Are you about this form?

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
}

I think that is true, if you are working with small amount of images. And if you have a good sight.
I'm not sure that I see character "1" in the code above...

But I definitely see it here:

In my code I keep this image as a 64-bit integer;

uint64_t image = 0x3810101010101810;

If I'm correct, it takes 8 times less memory, than the array of bytes ...

Then imagine you are going to make an animation with quite large amount of frames.

Shifting, reordering, removing, copying - all of this is much easier and clearly using the tool.

5

I think what Paul__B meant is that this would be readable and take up the same space as your hex codes:

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

PaulRB

6

Nice project.

If I'm correct, it takes 8 times less memory, than the array of bytes ...

Takes the same space. You are using 1 uint64_t x 64 bits, which is 8 uint8_t x 8 bits, same number of bits and probably stored in the same way as array of bytes.

7

marco_c:
Takes the same space.

No, Xantorohara's suggestion in post #3 would indeed take 64 bytes, 8 times more. But Paul_B's/my suggestion would take 64 bits, the same size as the less readable hex format in post #1.

8

I just added option to save matrices as arrays of bytes (as it was mentioned by PaulRB and Paul__B)

888×420 40.6 KB

So, now it is possible to choose preferred type.

And here is a code sample

9

Good show!

10

Thanks for the app! I used on my PIC uC project, it works fine! The result:

11

Mind you, the "foot" on that numeral 1 is a bit excessive. One pixel either side is adequate.

12

Will do Paul! This was just to check if the program was working on the PIC, obviously it was :D.

13