Infinity ErgoDox の起動ロゴを QMK でカスタマイズする



QMK を書き込んだ Infinity ErgoDox の起動時に、LCD へ表示されるロゴ画像を変更できたので方法をまとめました。
Infinity ErgoDox を QMK に変更する方法は前回書いた[こちら](https://qiita.com/ma2ge/items/bbb5679f1fe91c8347e6)の記事をみてください。


## keymap.c に LCD 用の画像配列を定義する

qmk_firmware が [f113f19](https://github.com/qmk/qmk_firmware/commit/f113f1927fb6e4fd108b003863d4cce967292a9c) より新しく、以下に自分用の keymap.c がある前提で記載します。

```
keyboards/ergodox_infinity/keymaps/YOUR_OWN/keymap.c
```

keymap.c へ `resource_lcd_logo` を以下のように定義する。
配列の中身が LCD に表示される画像データです。データは横 128 ピクセル、縦 32 ピクセルの大きさを表していて、画像上の左上から右へ、1 pixel 下がってまた左から右、と最下段のピクセルまで並んでいます(直感的ですね)。 `resource_lcd_logo` がバイトの配列で 512 の大きさなので 8 x 512 = 128 x 32 となり計算も合います。LCD は白黒なので、各ビットの1が白、0が黒を意味しています。

```c
// @keyboards/ergodox_infinity/keymaps/YOUR_OWN/keymap.c
const uint8_t resource_lcd_logo[512] = { 
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xfd, 0x2f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xd2, 0xff,
    0x83, 0xff, 0xf0, 0x3f, 0xf0, 0x03, 0xff, 0xff, 0xff, 0xdf, 0xff, 0xfe, 0xff, 0xff, 0x00, 0x3f,
    0x83, 0xff, 0xf0, 0x3f, 0xc0, 0x00, 0xff, 0xff, 0xfe, 0x01, 0xff, 0xf0, 0x0f, 0xfc, 0x00, 0x0f,
    0x81, 0xff, 0xf0, 0x3f, 0x81, 0xc0, 0x7f, 0xff, 0xfc, 0x00, 0xff, 0xc0, 0x07, 0xf8, 0x1c, 0x07,
    0x01, 0xff, 0xe0, 0x7f, 0x87, 0xf8, 0x3f, 0xff, 0xf8, 0x20, 0x7f, 0x81, 0x03, 0xf8, 0x7f, 0x83,
    0x81, 0xff, 0xe0, 0x3f, 0x0f, 0xfe, 0x3f, 0xff, 0xf0, 0xfc, 0x3f, 0x87, 0xe1, 0xf0, 0xff, 0xe3,
    0x80, 0xff, 0xe2, 0x3f, 0x1f, 0xfe, 0x1f, 0xff, 0xf0, 0xfe, 0x3f, 0x0f, 0xe1, 0xf1, 0xff, 0xe1,
    0x88, 0xff, 0xc4, 0x3f, 0x1f, 0xfe, 0x3f, 0xff, 0xe1, 0xfe, 0x1f, 0x1f, 0xf1, 0xf1, 0xff, 0xe3,
    0x88, 0xff, 0xc4, 0x7f, 0x1f, 0xff, 0x5f, 0xff, 0xe3, 0xfe, 0x1e, 0x1f, 0xff, 0xe1, 0xff, 0xf5,
    0x0c, 0x7f, 0xc6, 0x3f, 0x0f, 0xff, 0xff, 0xff, 0xe3, 0xff, 0x1e, 0x3f, 0xff, 0xf0, 0xff, 0xff,
    0x8c, 0x7f, 0x8c, 0x3f, 0x07, 0xff, 0xff, 0xff, 0xc3, 0xff, 0x0e, 0x3f, 0xff, 0xf0, 0x7f, 0xff,
    0x8c, 0x7f, 0x8c, 0x7f, 0x01, 0xff, 0xff, 0xff, 0xc3, 0xff, 0x1e, 0x30, 0x1f, 0xf8, 0x1f, 0xff,
    0x8c, 0x3f, 0x8c, 0x3f, 0xc0, 0x0f, 0xff, 0xff, 0xc3, 0xff, 0x0c, 0x20, 0x07, 0xf8, 0x00, 0xff,
    0x8e, 0x3f, 0x1e, 0x3f, 0xe0, 0x00, 0xff, 0xff, 0xc7, 0xff, 0x1e, 0x01, 0x03, 0xfe, 0x00, 0x0f,
    0x0e, 0x3f, 0x1c, 0x3f, 0xfc, 0x00, 0x7f, 0xff, 0xc3, 0xff, 0x0c, 0x0f, 0xc1, 0xff, 0xc0, 0x07,
    0x8f, 0x1f, 0x1c, 0x7f, 0xff, 0x80, 0x3c, 0x01, 0xc7, 0xff, 0x1c, 0x1f, 0xe1, 0xff, 0xf8, 0x03,
    0x8f, 0x1e, 0x1c, 0x3f, 0xff, 0xf8, 0x1e, 0x01, 0xc3, 0xff, 0x0e, 0x1f, 0xf0, 0xff, 0xff, 0x81,
    0x8f, 0x0e, 0x3e, 0x3f, 0xff, 0xfe, 0x1c, 0x00, 0xe3, 0xff, 0x1c, 0x3f, 0xf1, 0xff, 0xff, 0xe1,
    0x8f, 0x0e, 0x3c, 0x7f, 0x7f, 0xff, 0x1f, 0x6d, 0xc3, 0xff, 0x1e, 0x3f, 0xf8, 0xeb, 0xff, 0xf1,
    0x0f, 0x8c, 0x7c, 0x3e, 0x3f, 0xff, 0x0f, 0xff, 0xe3, 0xff, 0x1c, 0x3f, 0xf0, 0xe3, 0xff, 0xf0,
    0x8f, 0x8c, 0x7e, 0x3e, 0x1f, 0xff, 0x1f, 0xff, 0xe3, 0xfe, 0x1e, 0x3f, 0xf1, 0xe3, 0xff, 0xf1,
    0x8f, 0xc4, 0x7c, 0x7e, 0x1f, 0xff, 0x1f, 0xff, 0xe1, 0xfe, 0x3e, 0x1f, 0xf1, 0xe1, 0xff, 0xf1,
    0x8f, 0xc0, 0xfc, 0x3f, 0x1f, 0xfe, 0x1f, 0xff, 0xf1, 0xfe, 0x3f, 0x1f, 0xe1, 0xf0, 0xff, 0xe1,
    0x8f, 0xc0, 0xfe, 0x3f, 0x07, 0xfc, 0x1f, 0xff, 0xf0, 0xfc, 0x3f, 0x0f, 0xe3, 0xf0, 0x7f, 0xc1,
    0x0f, 0xe0, 0xfc, 0x3f, 0x80, 0xd0, 0x3f, 0xff, 0xf0, 0x60, 0x7f, 0x03, 0x03, 0xf8, 0x15, 0x03,
    0x8f, 0xe1, 0xfc, 0x7f, 0xc0, 0x00, 0x7f, 0xff, 0xfc, 0x00, 0xff, 0xc0, 0x07, 0xfc, 0x00, 0x07,
    0x8f, 0xe1, 0xfc, 0x3f, 0xe0, 0x01, 0xff, 0xff, 0xfc, 0x01, 0xff, 0xe0, 0x1f, 0xff, 0x00, 0x1f,
    0xff, 0xff, 0xff, 0xff, 0xfe, 0x2f, 0xff, 0xff, 0xff, 0x97, 0xff, 0xfd, 0x7f, 0xff, 0xe5, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff
};
```

ちなみに上記データを書き込むと以下のようになります。

![カスタマイズした画像を LCD に表示](https://qiita-image-store.s3.amazonaws.com/0/17636/e3041452-8ac2-0e82-4036-d88d59a73de6.jpeg "カスタマイズした画像を LCD に表示")

まるでシャアザクのコックピットにいるかのような雰囲気を味わえて最高です。


## 画像データを用意する方法

画像を C のソースコード配列に変更するのは手間なので [LCD Image Converter](http://www.riuson.com/lcd-image-converter/) を使いました。これは[ソースコード中に書いてあった](https://github.com/qmk/qmk_firmware/blob/aee67854769feee7e94edd90686178d89946a7ee/quantum/visualizer/resources/lcd_logo.c#L22)ので知りました。

Web ページを見ると一見 Linux でしか動かないのかと思いましたが、以下の方法で動いたので共有します。

### LCD Image Converter のビルド

```
$ git clone https://github.com/riuson/lcd-image-converter.git
$ cd lcd-image-converter
$ qmake # <= こけたのでやらなくて良さそう
$ make
```

以下にアプリが作られていた。

```
release/linux/output/lcd-image-converter.app
```

### 画像の C ソースコードでの出力方法

ビルドしたアプリを起動し、試しに [qmk_firmware の 128x32 の bitmap 画像](https://github.com/qmk/qmk_firmware/blob/aee67854769feee7e94edd90686178d89946a7ee/quantum/visualizer/resources/lcd_logo.png)を開く。

![qmk_firmware のデフォルトロゴ画像を LCD Image Converter で開いた様子](https://qiita-image-store.s3.amazonaws.com/0/17636/009e643f-ec21-bb6b-229e-7a9f4328ac56.png "qmk_firmware のデフォルトロゴ画像を LCD Image Converter で開いた様子")


メニューの Options -> Conversion... を選択し、開いたダイアログの Preset で Monochrome を選択して OK を押す。

![LCD Image Converter Conversion で Monochrome を選択](https://qiita-image-store.s3.amazonaws.com/0/17636/6499c56f-bdbf-58bb-e39b-b4e3f6a39b81.png "LCD Image Converter Conversion で Monochrome を選択")


メニューの File -> Convert... から C source を選択して出力。
出力された c コードの配列データ部分を `resource_lcd_logo` の中身に書き込めば OK。


## まとめ

ロゴ画像のカスタムだけなので意外と簡単にできましたが、LCD に自分の気に入ったものが表示できるとテンション上がるのでオススメです。ただ起動時だけの表示なのでそれ以外でもっと凝ったことをしようとすると [visualizer.c](https://github.com/qmk/qmk_firmware/blob/aee67854769feee7e94edd90686178d89946a7ee/keyboards/ergodox_infinity/visualizer.c) とかを頑張って上書きする必要がありそうです。

※ Kiibohd でのやり方とは異なった方法となります。Kiibohd でやりたい方は[こちら](http://asciipr0n.net/ergodox-infinity-logo/)が参考になりそうです。

## Resources

- LCD Image Converter | riuson.com http://www.riuson.com/lcd-image-converter/
- デフォルトロゴ画像の定義場所
 https://github.com/qmk/qmk_firmware/blob/aee67854769feee7e94edd90686178d89946a7ee/quantum/visualizer/resources/lcd_logo.c
- make it easy to customize logo image by ma2gedev · Pull Request #1973 · qmk/qmk_firmware https://github.com/qmk/qmk_firmware/pull/1973