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

QMK を書き込んだ Infinity ErgoDox の起動時に、LCD へ表示されるロゴ画像を変更できたので方法をまとめました。
Infinity ErgoDox を QMK に変更する方法は前回書いたこちらの記事をみてください。

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

qmk_firmware が f113f19 より新しく、以下に自分用の 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が黒を意味しています。

// @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
};

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

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

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

画像を C のソースコード配列に変更するのは手間なので LCD Image Converter を使いました。これはソースコード中に書いてあったので知りました。

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 画像を開く。

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

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

まとめ

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

※ Kiibohd でのやり方とは異なった方法となります。Kiibohd でやりたい方はこちらが参考になりそうです。

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