Arduino筆記(94)：一個產生8x8 LED 矩陣程式碼的網站

先前在準備製作 APS9960 手勢感測器當作方向燈控制時，發現一個可以編輯 8x8 LED 畫面自動產生程式碼的網站，利用實作的過程介紹給大家。這個網站提供一個 8x8 的 LED 編輯工具，編輯的結果可以產生 Arduino 16 進位或 2 進位的動畫程式碼，讓每次要算哪個點明或暗的複雜工作變的簡單許多。

網站網址：https://xantorohara.github.io/led-matrix-editor

畫面左上方有三組預設圖案可供選擇，包括不同字型的數字、文字或符號等，右方是編輯畫面後自動產生的 Arduino/C 程式碼，可以選擇 16 進位或 2 進位，直接將這段程式碼複製至程式中使用。

如果要繪製屬於自己的圖案，也可以在畫面中央的矩陣圖點選 LED，如果要連續圖案，也可以按下方的「Insert」繼續編輯第 2、3...張圖。我用這個編輯網站繪製往右的箭頭方向燈，編輯完成後，可以按下往右箭頭的播放按鈕，以 500 ms的速度播放，這個速度是可以修改的。

編輯完成後，右方窗格出現以下這段程式可複製使用：

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;

這個網站還可將編輯的結果儲存起來，用的方法也很特別，就是將這個網址新增/儲存到「書籤」或「我的最愛」中，或是直接按下 CTRL + D 儲存目前的網址。儲存的網址會變成以下這樣：

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

如果按下上方的 Code Samples 或網頁往下拉，可以看到範例程式，這個範例程式可以將您編輯的幾張圖，變成連續的動畫。要注意的是模組與 Arduino 的接腳是否跟程式一致。

[接線圖]

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

[程式]

#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[] = {   //往右箭頭
  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);    // 清除螢幕
  display.shutdown(0, false);  // 關閉省電模式
  display.setIntensity(0, 10); // 設定亮度為 8 (介於0~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); 
}

[結果]

[參考資料]

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