大きめ液晶付きカラフルキーボード作った

どんな内容か？

コンパクトでカラフルなショートカットキーボードを作成しました。最大24個の物理ショートカットキーを搭載することが可能です。液晶に説明を表示できるので、キーに慣れるまで重宝します。キーの真下に搭載されたフルカラーLEDで自由にキーの色を変更できるので画面との対応も分かりやすいです。

↓Youtubeの動画です。

Zoomのショートカットキーを割り当てていますが、キー割り当てと画像を差し替えればオリジナルを作ることができます。Githubにファイルを公開していますので同じものを作ることができます。
下記は、Fusion360用のショートカットキーボード

本キーボードのポイント

• WioTerminalの大きめの液晶（320x240pix）にアイコンを表示することでキーの意味が分かりやすい。
• さらにキーとのマッピングを色で表現することができる。
• ボタンによる複数レイヤーの切り替えが可能。
• ジョイステック（青いポッチ）でLEDの明るさが変更できる。
• キーのLEDはかなり明るく光る。
• キーのカスタムもソフト変更で可能

作り方

完成イメージ

頭脳と液晶は、WioTerminalをそのまま利用しますので、土台となるキーボードステーションを作成します。WioTerminalとステーションは、背面から20x2のコネクタで接続します。

スイッチのフレームと、WioTerminalを固定するための土台は、3Dプリンタで作成しています。写真は12キータイプ。

基板を入手する。

Maker Faire Tokyo 2020にて少量頒布予定です。(2020/9/24)
ガーバーファイルから製造することも可能です。

基板をカットする。

作るタイプが24キーの場合はそのままで利用できます。
12キーで作る場合は、カットする必要があります。写真の位置でカットし、カット面を軽くやすりがけしてください。

※Vカットは入っていませんので、軽くカッター等で傷をつけてから折り込むことをおすすめします。

また、12Keyタイプの場合は、こちらのようにP1をはんだでショート（はんだジャンパ）してください。

3Dプリントのフレームを入手する。

画像の左側が、[keyframe.stl](https://drive.google.com/file/d/1ku4Di3IntBmNTRXXfiUolWH4DQMpjnH8/view?usp=sharing)で、右側が[bottom.stl](https://drive.google.com/file/d/1J3PMzf64i4wyxfuiMrpJTLk_clLRoIYw/view?usp=sharing)になります。 keyframeはキーを固定する目的、bottomは、WioTerminalのガタツキを抑えるために使います。 ご家庭の3Dプリンタもしくは、プリントサービス等で印刷してご利用ください。

もし、24キーで利用する場合は、Keyframeを２つ作ることで利用が可能です。

部品を入手する。

シルク番号	部品名	個数	購入先	備考
LED1-24	PL9823-F5	24※1	秋月通商	マイコン内蔵ＲＧＢ　５ｍｍＬＥＤ
SW1-24	Kailh Sun Switch	24※1	遊舎工房	Kailh Sun スイッチ
J1	表面実装用ピンヘッダ 40P	1	秋月通商	表面実装用ピンヘッダ　４０Ｐ　（２×２０）
R1	1608 33Ω抵抗	1	秋月通商	チップ抵抗　１／１０Ｗ４７Ω※2※3
R2,3	1608 10kΩ抵抗	2	秋月通商	チップ抵抗　１／１０Ｗ１０ｋΩ※3
Q1	Nch MOSFET BSS138	1	秋月通商	Ｎｃｈ　ＭＯＳＦＥＴ　ＢＳＳ１３８
-	(半透明)キーキャップ	24※1	遊舎工房	DSA Blank KeyCaps水晶#15
※１：12キーで作る場合は12個で良い
※２：秋月通商で33Ωの取り扱いが無いので47Ωとした。入手が大変なら0Ω（ジャンパー）でも良い。
※３：リールで購入する必要はない。

もちろん、WioTerminalも必要です！

スイッチサイエンスや、秋月通商から購入することが可能です。

部品を実装する。

シルク印刷のある面に各部品を実装するので間違えることは少ないと思います。
最初に裏面チップ部品を実装し、次にピンヘッダ、とLEDを24（12）個実装します。※スイッチは、最後に実装します。

極性のある部品はLEDだけになります。向きに注意します。

※矢印のように、LEDの欠けている面をシルクのマークに合わせます。

LEDは基板に垂直に高さ0㎜ではんだ付けしてください。浮いてしまうとスイッチが上手く入りません。

コツは、４本足の１本だけ軽くはんだ付けした後、LEDの角度が垂直であるか確認して、浮いてたり曲がっている場合は、その１本に熱を加えて修正します。一度に4本付けてしまうと後からの修正が大変です。LEDがスルーホールに入り難い場合は、根本部分でカットしてからご利用ください。ピッチも狭いのでブリッジに注意してください。

テスターでチェック

5Vの電源LINEとGND間のショートが無いことを確認してください。
LEDはブリッジし易いので、必ずショートの確認は行ってください。

ピンヘッダーで確認する場合は、写真の赤丸の２ピンで確認することができます。

LEDの点灯確認

スイッチを取り付ける前に、一度LED動作確認を行ってみますが、その前に書き込むためには、Arduino IDE（開発環境）が必要です。
（環境の構築方法は、ここでは説明しませんが、検索するとみつかると思います。）
下記サイトは、英語ですが図入りで解説されているので大丈夫だと思います。
https://wiki.seeedstudio.com/Wio-Terminal-Getting-Started/#getting-started

※肝は、ArduinoIDEにWioTerminalを登録するために、ボード情報として、下記を追加する必要があることです。
https://files.seeedstudio.com/arduino/package_seeeduino_boards_index.json

LEDの点灯には、Adafruit DMA neopixel libraryを利用しています。
ライブラリマネージャで、最新版を追加してください。

公開しているファイルから、ledtest.inoを開き、WioTerminalに書き込みます。
書き込む際は、ボードがWio Terminalが選択されていることと、シリアルポートが対応するCOMが選択されていることを確認してください。

正しく動作すれば、下記のように、緑→赤→青→レインボー→緑・・・で表示されます。

正しく表示されない場合は、はんだ付けの不良や、LEDが壊れている可能性があります。上手く表示されないLEDを確認してみてください。
上手くLEDが表示されたら、次へ進みます。

フレームを付けてスイッチを取り付ける

フレームをスイッチと基板で挟み込み込みはんだ付けします。スイッチはしっかりと奥まで差し込んではんだ付けしてください。

スイッチが動作するか確認してみます。

公開しているファイルから、swtest.inoを開き、WioTerminalに書き込みます。
デフォルトでは、12Key用の動作確認プログラムとなっています。24Keyで動作確認する場合は、下記の行をコメントアウトしてください。

swtest.ino

// 24keyの場合は下記をコメントアウトする。
#define KEY_TYPE_12

swtest.ino

// 24keyの場合は下記をコメントアウトする。
//#define KEY_TYPE_12

書き込みが完了したら、スイッチを押してみてください。対応する箇所のLEDが点灯します。
全部のスイッチを押下するとレインボーに光ります。光らない箇所のスイッチがあれば、はんだ付けを確認してみてください。

仕上げる

LEDの光が透けやすい半透明のキーキャップをスイッチ数分取り付けて、基板の裏側にゴム足を取り付ければキーボードステーションの完成です。お疲れ様でした。

ショートカットプログラムを書き込む

公開しているファイルから、ファイルwiokey12.inoをArudino IDEで開き、いままでと同じように書き込みします。ただし、少しご利用の環境に合わせて修正が必要になります。

12/24の種類に応じて#defineを変える

デフォルトで、12Keyタイプでプログラミングされています。もし24Keyで作成した場合は、コメントアウトしてください。

def.h

// 12Keyの場合は下記を定義し、24keyの場合はコメントアウトする。
#define KEY_TYPE_12

画像ファイルパスを書き換える。

前に書いたこちらの記事にあるように、SDカード無で画像ファイルをROM上に配置しています。
画像のフルパス（相対パスだとエラーになる）を記述する必要があるので、ご自身の環境に合わせてパスを書き換えてください。画像ファイルは、dataフォルダに配置されています。

keymap.h

// ここは、各自の環境に合わせてフルパスを記述する必要がある。（相対パスだとファイルが見つからない）
// ご自身の環境に合わせてxxxxxxを変更してください。
// 画像は、１キー辺り80x80pixで作成しておく。
INC_BIN("C:\\xxxxxx\\wiokey12\\data\\mic.png",   png_mic);
INC_BIN("C:\\xxxxxx\\wiokey12\\data\\video.png", png_video);
INC_BIN("C:\\xxxxxx\\wiokey12\\data\\share.png", png_share);
INC_BIN("C:\\xxxxxx\\wiokey12\\data\\quit.png",  png_quit);

INC_BIN("C:\\xxxxxx\\wiokey12\\data\\win.png",   png_win);
INC_BIN("C:\\xxxxxx\\wiokey12\\data\\mac.png",   png_mac);
INC_BIN("C:\\xxxxxx\\wiokey12\\data\\zoom1.png", png_zoom1);
INC_BIN("C:\\xxxxxx\\wiokey12\\data\\zoom2.png", png_zoom2);

INC_BIN("C:\\xxxxxx\\wiokey12\\data\\meet1.png", png_meet1);
INC_BIN("C:\\xxxxxx\\wiokey12\\data\\meet2.png", png_meet2);

書き込みに成功すると、12Keyの場合にはこのような表示になるはずです。

上段は、Windows向けのZoomショットカットキー
下段は、Mac向けのZoomショットカットキーになります。
液晶下部に、３つボタンがありますが、右側のボタンを押すと、Google meet用のショートカットキーに変化します。つまり、レイヤー切り替えボタンの役割になっています。

最後に

Maker Faire Tokyo 2020で、このショットカットキーボードが作れるキットを少量ですが頒布する予定です。ご興味ある方はご来場いただければと思います。