chocofi: update README and keymap image (with Keymap-drawer)

This commit is contained in:
Frieder Schlesier 2025-03-18 20:13:41 +01:00
parent 8bb62bfcec
commit 1d424dd5e8
3 changed files with 778 additions and 7 deletions

View File

@ -17,7 +17,17 @@ is spent in VSCode. Therefore, often used combos like =Ctrl+f=, =Ctrl+h=
(find an replace) and their shifted variants (find/replace in project)
are available in the =NAV= layer with single keystrokes.
[[./qmk-config.png]]
[[./keymap.svg]]
Visualize with [[https://github.com/caksoylar/keymap-drawer][Keymap-drawer]]:
#+begin_src sh
pipx install keymap-drawer
cd ~/git/qmk_firmware
qmk c2json --no-cpp ~/git/qmk_firmware/keyboards/crkbd/rev1/keymaps/choc_colemak_36/keymap.c | keymap -c ~/git/keyboard-config/atreus/drawer-config.yaml parse -c 10 -q - >~/git/keyboard-config/chocofi/keymap.yaml
keymap -c ~/git/qmk_firmware/keyboards/keyboardio/atreus/drawer-config.yaml draw ~/git/keyboard-config/chocofi/keymap.yaml >~/git/keyboard-config/chocofi/keymap.svg
#+end_src
** Setup
@ -37,7 +47,7 @@ Most other microcontrollers want to be directly connected and flashed via USB.
qmk compile --keyboard=crkbd/rev1 --keymap=choc_colemak_36 -e CONVERT_TO=promicro_rp2040
sudo mount /dev/sdb? /mnt/
sudo cp crkbd_rev1_choc_colemak_36_promicro_rp2040.uf2 /mnt/
sudo umount /mnt
sudo umount /mnt
#+end_src
** TODO Missing stuff
@ -47,22 +57,23 @@ Most other microcontrollers want to be directly connected and flashed via USB.
- remove HomeRowMods from FUN_NAV layer
- add useful shortcuts to the new PURE_NAV layer (e.g. WM_keys)
- backtick key
- umlauts and sharp s
- euro € key
- smart shift on a thumb key, to avoid weird situations with home-row-shift
- smart num, to avoid weird taps for the num layer when typing commas and dots
https://github.com/urob/zmk-config
** Ideas for improvement
- for nav layer, maybe add combined keys for Ctrl+Shift, Ctrl+Alt and Shift+Alt
- add OLED screen to show current layer, I see this as a prerequisite to add gaming layer(s)
- this seems like a great example of composed layers and support for different environments
https://github.com/0x64746b/qmk_firmware/blob/chocofi/keyboards/chocofi/keymaps/dtk35/keymap.c
- https://github.com/qmk/qmk_firmware/blob/master/layouts/community/ergodox/german-kinergo/keymap.c#L101
- https://github.com/manna-harbour/miryoku_qmk/blob/miryoku/users/manna-harbour_miryoku/readme.org
- HomeRowMods/BottomRowMods and other ideas: https://www.reddit.com/r/ErgoMechKeyboards/comments/tiejpp/home_row_mods_what_works_for_you/
- https://precondition.github.io/home-row-mods#implementation
- split up =SYM_NUM= layer, move missing symbols (from NAV layer to SYMBOLS layer)
- hints for better symbols layers: https://getreuer.info/posts/keyboards/symbol-layer/index.html
- make =.= and =,= available in new =NUM= layer for easier number input
- build a dedicated GUI Nav layer for i3wm/sway
- build a dedicated GUI Nav layer for sway
- and probably Windows/KDE window actions
- make =select words= work (by emulating Ctrl+Shift+Left/Right)

760
chocofi/keymap.svg Normal file
View File

@ -0,0 +1,760 @@
<svg width="788" height="1379" viewBox="0 0 788 1379" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>/* inherit to force styles through use tags */
svg path {
fill: inherit;
}
/* font and background color specifications */
svg.keymap {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
font-size: 14px;
font-kerning: normal;
text-rendering: optimizeLegibility;
fill: #24292e;
}
/* default key styling */
rect.key {
fill: #f6f8fa;
}
rect.key, rect.combo {
stroke: #c9cccf;
stroke-width: 1;
}
/* default key side styling, only used is draw_key_sides is set */
rect.side {
filter: brightness(90%);
}
/* color accent for combo boxes */
rect.combo, rect.combo-separate {
fill: #cdf;
}
/* color accent for held keys */
rect.held, rect.combo.held {
fill: #fdd;
}
/* color accent for ghost (optional) keys */
rect.ghost, rect.combo.ghost {
stroke-dasharray: 4, 4;
stroke-width: 2;
}
text {
text-anchor: middle;
dominant-baseline: middle;
}
/* styling for layer labels */
text.label {
font-weight: bold;
text-anchor: start;
stroke: white;
stroke-width: 4;
paint-order: stroke;
}
/* styling for optional footer */
text.footer {
text-anchor: end;
dominant-baseline: auto;
stroke: white;
stroke-width: 4;
paint-order: stroke;
}
/* styling for combo tap, and key hold/shifted label text */
text.combo, text.hold, text.shifted {
font-size: 11px;
}
text.hold {
text-anchor: middle;
dominant-baseline: auto;
}
text.shifted {
text-anchor: middle;
dominant-baseline: hanging;
}
text.layer-activator {
text-decoration: underline;
}
/* styling for hold/shifted label text in combo box */
text.combo.hold, text.combo.shifted {
font-size: 8px;
}
/* lighter symbol for transparent keys */
text.trans {
fill: #7b7e81;
}
/* styling for combo dendrons */
path.combo {
stroke-width: 1;
stroke: gray;
fill: none;
}
/* Start Tabler Icons Cleanup */
/* cannot use height/width with glyphs */
.icon-tabler > path {
fill: inherit;
stroke: inherit;
stroke-width: 2;
}
/* hide tabler's default box */
.icon-tabler > path[stroke="none"][fill="none"] {
visibility: hidden;
}
/* End Tabler Icons Cleanup */
svg.keymap { fill: #d1d6db; }
rect.key { fill: #3f4750; }
rect.key, rect.combo { stroke: #60666c; }
rect.combo, rect.combo-separate { fill: #1f3d7a; }
rect.held, rect.combo.held { fill: #854747; }
text.label, text.footer { stroke: black; }
text.trans { fill: #7e8184; }
path.combo { stroke: #7f7f7f; }
</style>
<g transform="translate(30, 0)" class="layer-L0">
<text x="0" y="28" class="label" id="L0">L0:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 49)" class="key keypos-0">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Q</text>
</g>
<g transform="translate(84, 35)" class="key keypos-1">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">W</text>
</g>
<g transform="translate(140, 28)" class="key keypos-2">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F</text>
</g>
<g transform="translate(196, 35)" class="key keypos-3">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">P</text>
</g>
<g transform="translate(252, 42)" class="key keypos-4">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">B</text>
</g>
<g transform="translate(476, 42)" class="key keypos-5">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">J</text>
</g>
<g transform="translate(532, 35)" class="key keypos-6">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">L</text>
</g>
<g transform="translate(588, 28)" class="key keypos-7">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">U</text>
</g>
<g transform="translate(644, 35)" class="key keypos-8">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Z</text>
</g>
<g transform="translate(700, 49)" class="key keypos-9">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">BSPC</text>
</g>
<g transform="translate(28, 105)" class="key keypos-10">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">A</text>
</g>
<g transform="translate(84, 91)" class="key keypos-11">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HALT</tspan><tspan x="0" dy="1.2em">R</tspan>
</text>
</g>
<g transform="translate(140, 84)" class="key keypos-12">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HSFT</tspan><tspan x="0" dy="1.2em">S</tspan>
</text>
</g>
<g transform="translate(196, 91)" class="key keypos-13">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HCTL</tspan><tspan x="0" dy="1.2em">T</tspan>
</text>
</g>
<g transform="translate(252, 98)" class="key keypos-14">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">G</text>
</g>
<g transform="translate(476, 98)" class="key keypos-15">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HMOU</tspan><tspan x="0" dy="1.2em">M</tspan>
</text>
</g>
<g transform="translate(532, 91)" class="key keypos-16">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HCTL</tspan><tspan x="0" dy="1.2em">N</tspan>
</text>
</g>
<g transform="translate(588, 84)" class="key keypos-17">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HSFT</tspan><tspan x="0" dy="1.2em">E</tspan>
</text>
</g>
<g transform="translate(644, 91)" class="key keypos-18">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HALT</tspan><tspan x="0" dy="1.2em">I</tspan>
</text>
</g>
<g transform="translate(700, 105)" class="key keypos-19">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">O</text>
</g>
<g transform="translate(28, 161)" class="key keypos-20">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Y</text>
</g>
<g transform="translate(84, 147)" class="key keypos-21">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">X</text>
</g>
<g transform="translate(140, 140)" class="key keypos-22">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">C</text>
</g>
<g transform="translate(196, 147)" class="key keypos-23">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">D</text>
</g>
<g transform="translate(252, 154)" class="key keypos-24">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">V</text>
</g>
<g transform="translate(476, 154)" class="key keypos-25">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">K</text>
</g>
<g transform="translate(532, 147)" class="key keypos-26">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">H</text>
</g>
<g transform="translate(588, 140)" class="key keypos-27">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">,</text>
</g>
<g transform="translate(644, 147)" class="key keypos-28">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">.</text>
</g>
<g transform="translate(700, 161)" class="key keypos-29">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">/</text>
</g>
<g transform="translate(168, 205)" class="key keypos-30">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">THUMB1</text>
</g>
<g transform="translate(230, 213) rotate(15.0)" class="key keypos-31">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">THUMB2</text>
</g>
<g transform="translate(295, 224) rotate(30.0)" class="key keypos-32">
<rect rx="6" ry="6" x="-26" y="-40" width="52" height="80" class="key"/>
<text x="0" y="0" class="key tap">THUMB3</text>
</g>
<g transform="translate(433, 224) rotate(-30.0)" class="key keypos-33">
<rect rx="6" ry="6" x="-26" y="-40" width="52" height="80" class="key"/>
<text x="0" y="0" class="key tap">THUMB4</text>
</g>
<g transform="translate(498, 213) rotate(-15.0)" class="key keypos-34">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">THUMB5</text>
</g>
<g transform="translate(560, 205)" class="key keypos-35">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">THUMB6</text>
</g>
</g>
</g>
<g transform="translate(30, 331)" class="layer-L1">
<text x="0" y="28" class="label" id="L1">L1:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 49)" class="key keypos-0">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">!</text>
</g>
<g transform="translate(84, 35)" class="key keypos-1">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">&quot;</text>
</g>
<g transform="translate(140, 28)" class="key keypos-2">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">?</text>
</g>
<g transform="translate(196, 35)" class="key keypos-3">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">%</text>
</g>
<g transform="translate(252, 42)" class="key keypos-4">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">$</text>
</g>
<g transform="translate(476, 42)" class="key keypos-5">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">/</text>
</g>
<g transform="translate(532, 35)" class="key keypos-6">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">7</text>
</g>
<g transform="translate(588, 28)" class="key keypos-7">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">8</text>
</g>
<g transform="translate(644, 35)" class="key keypos-8">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">9</text>
</g>
<g transform="translate(700, 49)" class="key keypos-9">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">+</text>
</g>
<g transform="translate(28, 105)" class="key keypos-10">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">&lt;</text>
</g>
<g transform="translate(84, 91)" class="key keypos-11">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">{</text>
</g>
<g transform="translate(140, 84)" class="key keypos-12">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">(</text>
</g>
<g transform="translate(196, 91)" class="key keypos-13">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">[</text>
</g>
<g transform="translate(252, 98)" class="key keypos-14">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">&#x27;</text>
</g>
<g transform="translate(476, 98)" class="key keypos-15">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">*</text>
</g>
<g transform="translate(532, 91)" class="key keypos-16">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">4</text>
</g>
<g transform="translate(588, 84)" class="key keypos-17">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">5</text>
</g>
<g transform="translate(644, 91)" class="key keypos-18">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">6</text>
</g>
<g transform="translate(700, 105)" class="key keypos-19">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">-</text>
</g>
<g transform="translate(28, 161)" class="key keypos-20">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">&gt;</text>
</g>
<g transform="translate(84, 147)" class="key keypos-21">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">}</text>
</g>
<g transform="translate(140, 140)" class="key keypos-22">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">)</text>
</g>
<g transform="translate(196, 147)" class="key keypos-23">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">]</text>
</g>
<g transform="translate(252, 154)" class="key keypos-24">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">#</text>
</g>
<g transform="translate(476, 154)" class="key keypos-25">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">0</text>
</g>
<g transform="translate(532, 147)" class="key keypos-26">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">1</text>
</g>
<g transform="translate(588, 140)" class="key keypos-27">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">2</text>
</g>
<g transform="translate(644, 147)" class="key keypos-28">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">3</text>
</g>
<g transform="translate(700, 161)" class="key keypos-29">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">=</text>
</g>
<g transform="translate(168, 205)" class="key keypos-30">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">|</text>
</g>
<g transform="translate(230, 213) rotate(15.0)" class="key keypos-31">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">~</text>
</g>
<g transform="translate(295, 224) rotate(30.0)" class="key keypos-32">
<rect rx="6" ry="6" x="-26" y="-40" width="52" height="80" class="key"/>
<text x="0" y="0" class="key tap">&amp;</text>
</g>
<g transform="translate(433, 224) rotate(-30.0)" class="key trans keypos-33">
<rect rx="6" ry="6" x="-26" y="-40" width="52" height="80" class="key trans"/>
<text x="0" y="0" class="key trans tap"></text>
</g>
<g transform="translate(498, 213) rotate(-15.0)" class="key keypos-34">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">,</text>
</g>
<g transform="translate(560, 205)" class="key keypos-35">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">.</text>
</g>
</g>
</g>
<g transform="translate(30, 661)" class="layer-L2">
<text x="0" y="28" class="label" id="L2">L2:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 49)" class="key keypos-0">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">\</text>
</g>
<g transform="translate(84, 35)" class="key keypos-1">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F7</text>
</g>
<g transform="translate(140, 28)" class="key keypos-2">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F8</text>
</g>
<g transform="translate(196, 35)" class="key keypos-3">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F9</text>
</g>
<g transform="translate(252, 42)" class="key keypos-4">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F10</text>
</g>
<g transform="translate(476, 42)" class="key keypos-5">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">Ctl+</tspan><tspan x="0" dy="1.2em">F</tspan>
</text>
</g>
<g transform="translate(532, 35)" class="key keypos-6">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">HOME</text>
</g>
<g transform="translate(588, 28)" class="key keypos-7">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">UP</text>
</g>
<g transform="translate(644, 35)" class="key keypos-8">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">END</text>
</g>
<g transform="translate(700, 49)" class="key keypos-9">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">PGUP</text>
</g>
<g transform="translate(28, 105)" class="key keypos-10">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HGUI</tspan><tspan x="0" dy="1.2em">AT</tspan>
</text>
</g>
<g transform="translate(84, 91)" class="key keypos-11">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HALT</tspan><tspan x="0" dy="1.2em">F4</tspan>
</text>
</g>
<g transform="translate(140, 84)" class="key keypos-12">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HSFT</tspan><tspan x="0" dy="1.2em">F5</tspan>
</text>
</g>
<g transform="translate(196, 91)" class="key keypos-13">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HCTL</tspan><tspan x="0" dy="1.2em">F6</tspan>
</text>
</g>
<g transform="translate(252, 98)" class="key keypos-14">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F11</text>
</g>
<g transform="translate(476, 98)" class="key keypos-15">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">HMOU</tspan><tspan x="0" dy="1.2em">LEFT</tspan>
</text>
</g>
<g transform="translate(532, 91)" class="key keypos-16">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">DOWN</text>
</g>
<g transform="translate(588, 84)" class="key keypos-17">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">UP</text>
</g>
<g transform="translate(644, 91)" class="key keypos-18">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">RIGHT</text>
</g>
<g transform="translate(700, 105)" class="key keypos-19">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">PGDN</text>
</g>
<g transform="translate(28, 161)" class="key keypos-20">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">@</text>
</g>
<g transform="translate(84, 147)" class="key keypos-21">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F1</text>
</g>
<g transform="translate(140, 140)" class="key keypos-22">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F2</text>
</g>
<g transform="translate(196, 147)" class="key keypos-23">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F3</text>
</g>
<g transform="translate(252, 154)" class="key keypos-24">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F12</text>
</g>
<g transform="translate(476, 154)" class="key keypos-25">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">Ctl+</tspan><tspan x="0" dy="1.2em">H</tspan>
</text>
</g>
<g transform="translate(532, 147)" class="key keypos-26">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">PGDN</text>
</g>
<g transform="translate(588, 140)" class="key keypos-27">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">PGUP</text>
</g>
<g transform="translate(644, 147)" class="key keypos-28">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em" style="font-size: 88%">Ctl+Sft+</tspan><tspan x="0" dy="1.2em" style="font-size: 88%">H</tspan>
</text>
</g>
<g transform="translate(700, 161)" class="key keypos-29">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">Ctl+</tspan><tspan x="0" dy="1.2em">P</tspan>
</text>
</g>
<g transform="translate(168, 205)" class="key trans keypos-30">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key trans"/>
<text x="0" y="0" class="key trans tap"></text>
</g>
<g transform="translate(230, 213) rotate(15.0)" class="key trans keypos-31">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key trans"/>
<text x="0" y="0" class="key trans tap"></text>
</g>
<g transform="translate(295, 224) rotate(30.0)" class="key trans keypos-32">
<rect rx="6" ry="6" x="-26" y="-40" width="52" height="80" class="key trans"/>
<text x="0" y="0" class="key trans tap"></text>
</g>
<g transform="translate(433, 224) rotate(-30.0)" class="key trans keypos-33">
<rect rx="6" ry="6" x="-26" y="-40" width="52" height="80" class="key trans"/>
<text x="0" y="0" class="key trans tap"></text>
</g>
<g transform="translate(498, 213) rotate(-15.0)" class="key trans keypos-34">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key trans"/>
<text x="0" y="0" class="key trans tap"></text>
</g>
<g transform="translate(560, 205)" class="key trans keypos-35">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key trans"/>
<text x="0" y="0" class="key trans tap"></text>
</g>
</g>
</g>
<g transform="translate(30, 992)" class="layer-L3">
<text x="0" y="28" class="label" id="L3">L3:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 49)" class="key keypos-0">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(84, 35)" class="key keypos-1">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(140, 28)" class="key keypos-2">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">MS</tspan><tspan x="0" dy="1.2em">U</tspan>
</text>
</g>
<g transform="translate(196, 35)" class="key keypos-3">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(252, 42)" class="key keypos-4">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(476, 42)" class="key keypos-5">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(532, 35)" class="key keypos-6">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(588, 28)" class="key keypos-7">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">UDIA</text>
</g>
<g transform="translate(644, 35)" class="key keypos-8">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(700, 49)" class="key keypos-9">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(28, 105)" class="key keypos-10">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">ADIA</text>
</g>
<g transform="translate(84, 91)" class="key keypos-11">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">MS</tspan><tspan x="0" dy="1.2em">L</tspan>
</text>
</g>
<g transform="translate(140, 84)" class="key keypos-12">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">MS</tspan><tspan x="0" dy="1.2em">D</tspan>
</text>
</g>
<g transform="translate(196, 91)" class="key keypos-13">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">MS</tspan><tspan x="0" dy="1.2em">R</tspan>
</text>
</g>
<g transform="translate(252, 98)" class="key keypos-14">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">BTN3</text>
</g>
<g transform="translate(476, 98)" class="key trans keypos-15">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key trans"/>
<text x="0" y="0" class="key trans tap"></text>
</g>
<g transform="translate(532, 91)" class="key keypos-16">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">VOLD</text>
</g>
<g transform="translate(588, 84)" class="key keypos-17">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">MUTE</text>
</g>
<g transform="translate(644, 91)" class="key keypos-18">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">VOLU</text>
</g>
<g transform="translate(700, 105)" class="key keypos-19">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">ODIA</text>
</g>
<g transform="translate(28, 161)" class="key keypos-20">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(84, 147)" class="key keypos-21">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">WH</tspan><tspan x="0" dy="1.2em">L</tspan>
</text>
</g>
<g transform="translate(140, 140)" class="key keypos-22">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(196, 147)" class="key keypos-23">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">WH</tspan><tspan x="0" dy="1.2em">R</tspan>
</text>
</g>
<g transform="translate(252, 154)" class="key keypos-24">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(476, 154)" class="key keypos-25">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">MPRV</text>
</g>
<g transform="translate(532, 147)" class="key keypos-26">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">MSTP</text>
</g>
<g transform="translate(588, 140)" class="key keypos-27">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">MPLY</text>
</g>
<g transform="translate(644, 147)" class="key keypos-28">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">MNXT</text>
</g>
<g transform="translate(700, 161)" class="key keypos-29">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(168, 205)" class="key trans keypos-30">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key trans"/>
<text x="0" y="0" class="key trans tap"></text>
</g>
<g transform="translate(230, 213) rotate(15.0)" class="key keypos-31">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">BTN1</text>
</g>
<g transform="translate(295, 224) rotate(30.0)" class="key keypos-32">
<rect rx="6" ry="6" x="-26" y="-40" width="52" height="80" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">WH</tspan><tspan x="0" dy="1.2em">D</tspan>
</text>
</g>
<g transform="translate(433, 224) rotate(-30.0)" class="key keypos-33">
<rect rx="6" ry="6" x="-26" y="-40" width="52" height="80" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">WH</tspan><tspan x="0" dy="1.2em">U</tspan>
</text>
</g>
<g transform="translate(498, 213) rotate(-15.0)" class="key keypos-34">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">BTN2</text>
</g>
<g transform="translate(560, 205)" class="key trans keypos-35">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key trans"/>
<text x="0" y="0" class="key trans tap"></text>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB