Keyboard Layout Editorでロータリーエンコーダーを表示(見た目だけ)

自作キーボード / 2021-05-13 / うつぼ / 0

※見た目だけの小技です
しかもかなり強引なのでオススメしづらい

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

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

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

1. Keyboard-Layout-Editorのページ下の方にあるCustom Stylesタブを開いて以下を設定します

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

2. 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を強引に拾う形にしました

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

Re42

うつぼ