Zenn
⌨️

Keyboard-Layout-Editorでロータリーエンコーダーを丸く表現する

2022/07/24に公開
自作キーボード
tech

はじめに

普段くしまさん(@kushima8)のロータリーエンコーダー付き分割キーボードRe42を使っていて、キーの配置をわかりやすくする伝えるために Keyboard-Layout-Editor を利用しています
普通は四角いキーしか配置できないのですが、ロータリーエンコーダーのために無理矢理スタイルを丸く変えることができたのでメモっておきます

ロータリーエンコーダーにあたるキーを丸く表示する方法

細かい話は置いておいて、早速やり方です

  1. Keyboard-Layout-Editorのページ下の方にあるCustom Stylesタブを開いて以下を設定します
.keyborder[style*="bbbbbb"],.keyborder[style*="bbbbbb"]+.keytop {
    border-radius: 50% !important;
}
  1. Propertiesタブに戻って、丸くしたいキーのKey Colorを#bbbbbbにすればできあがり！(冒頭の画像)
    Decalも一度チェックを外して色を指定してから、再度Decalに戻せば丸くできます

仕組み

Propertiesで設定したキーの背景色Key Colorは、キー外枠をあらわす.keyborderクラスのstyle属性に直接設定されます
Custom Stylesのセレクターで上記設定を拾ってあげればある程度自由にスタイルを指定できます

その他メモ

キーPropertiesのProfile / RawあたりにRortary-Encoderと設定して判断したいところでしたが残念ながらできませんでした

Custom Stylesに設定したcssは自動でセレクタの先頭に#keyboard .keycapが付与されます
つまり上記CSSは、実際には以下の通り適用されます

#keyboard .keycap .keyborder[style*="bbbbbb"],.keyborder[style*="bbbbbb"]+.keytop {
    border-radius: 50% !important;
}

一方、キーのDOM構成は

<div class="key Profile名"> <!-- Profile名はここに付与される) -->
  <div class="keycap"> <!-- cssで指定できるのはここから下だけ) -->
    <div class="keyborder"/> <!-- 外枠 -->
    <div class="keytop"/> <!-- 内枠 -->
    <div class="keylabels"/>
  </div>
</div>

となっており、これでは変更したいkeyクラスをセレクタで指定できません
無念
なので、keyborderのstyle属性に設定されるKeyColorを強引に拾う形にしました

変な設定ですが背景色とスタイルシートだけなので影響は少ないんじゃないでしょうか…たぶん…

GitHubで編集を提案

Discussion