Arduino(13): A website for generating 8x8 LED matrix code

When I was preparing to make an APS9960 gesture sensor as a direction light control, I found a website that can edit the 8x8 LED screen to automatically generate code, and introduce it to you through the process of implementation. This website provides an 8x8 LED editing tool. The result of editing can generate Arduino hexadecimal or binary animation code, which makes the complicated task of calculating which point is bright or dark each time much easier.

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

On the upper left of the screen, there are three sets of preset patterns to choose from, including numbers, texts or symbols in different fonts. On the right is the Arduino/C code automatically generated after editing the screen. You can choose hexadecimal or binary to directly change this Copy the program code to the program for use.

If you want to draw your own pattern, you can also click the LED in the matrix diagram in the center of the screen. If you want a continuous pattern, you can also press the "Insert" button below to continue editing the second, third... pictures. I use this editing website to draw the right arrow direction light. After editing, you can press the right arrow play button to play at a speed of 500 ms. This speed can be modified.

After editing, the following program appears in the right pane, which can be copied and used:

const uint64_t IMAGES[] = {
  0x0000000100000000,
  0x0000010301000000,
  0x0001030703010000,
  0x0103070f07030100,
  0x02060f1f0f060200,
  0x040c1f3f1f0c0400,
  0x08183f7f3f180800,
  0x08183f7f3f180800,
  0x10307fff7f301000,
  0x2060fefefe602000,
  0x40c0fcfcfcc04000,
  0x8080f8f8f8808000,
  0x0000f0f0f0000000,
  0x0000e0e0e0000000,
  0x0000c0c0c0000000,
  0x0000808080000000,
  0x0000000000000000
};
const int IMAGES_LEN = sizeof(IMAGES)/8;

This website can also save the editing results, and the method used is also very special, that is, add/save this URL to "Bookmarks" or "Favorites", or directly press CTRL + D to save the current URL . The saved URL will become as follows:

https://xantorohara.github.io/led-matrix-editor/#0000000100000000|0000010301000000|0001030703010000|0103070f07030100|02060f1f0f060200|040c1f3f1f0c0400|08183f7f3f180800|08183f7f3f180800|10307fff7f301000|2060fefefe602000|40c0fcfcfcc04000|8080f8f8f8808000|0000f0f0f0000000|0000e0e0e0000000|0000c0c0c0000000|0000808080000000|0000000000000000 

If you click the Code Samples at the top or pull down on the webpage, you can see a sample program. This sample program can turn the pictures you edited into a continuous animation. It should be noted that the pins of the module and Arduino are consistent with the program.

[Wiring diagram]

Arduino Uno	MAX7219 8x8 Led模組
+5V	VCC
GND	GND
D10	CS
D11	CLK
D12	Data

[Code]

#include <LedControl.h>
// Pin 12:Data in, Pin 11: Clock,  Pin 10: CS(Load)
LedControl display = LedControl(12,11,10,1);
 
const uint64_t R_IMAGES[] = {   //right arrow      
  0x0000000100000000,
  0x0000010301000000,
  0x0001030703010000,
  0x0103070f07030100,
  0x02060f1f0f060200,
  0x040c1f3f1f0c0400,
  0x08183f7f3f180800,
  0x08183f7f3f180800,
  0x10307fff7f301000,
  0x2060fefefe602000,
  0x40c0fcfcfcc04000,
  0x8080f8f8f8808000,
  0x0000f0f0f0000000,
  0x0000e0e0e0000000,
  0x0000c0c0c0000000,
  0x0000808080000000,
  0x0000000000000000
};
const int R_IMAGES_LEN = sizeof(R_IMAGES)/8;

void setup()
{
  display.clearDisplay(0);    // clear screen
  display.shutdown(0, false);  // Turn off power saving mode
  display.setIntensity(0, 10); // Set the brightness to 8 (between 0 and 15)

}
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(R_IMAGES[i]);
  if (++i >= R_IMAGES_LEN ) {
    i = 0;
  }
  delay(100); 
}

[Result]

[Reference]

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