fix(illustrations): use svg images from keyboard-drawer

This commit is contained in:
2025-07-26 22:39:53 +02:00
parent 9fb627b94e
commit 305978c893
7 changed files with 868 additions and 5 deletions

View File

@@ -45,7 +45,7 @@ base with GASC homerow mods.
The base layer looks like this: The base layer looks like this:
![Base Layer](./img/Layer-0.png) ![Base Layer](./img/Layer-0.svg)
`PERMISSIVE_HOLD` is disabled on home row keys to avoid false positive on rolls, `PERMISSIVE_HOLD` is disabled on home row keys to avoid false positive on rolls,
and enabled for thumb keys as there are few false positives in this case. and enabled for thumb keys as there are few false positives in this case.
@@ -53,18 +53,24 @@ and enabled for thumb keys as there are few false positives in this case.
The internal thumb keys move to the nav/numpad layer on hold or space/tap on The internal thumb keys move to the nav/numpad layer on hold or space/tap on
tap. This layer is the following: tap. This layer is the following:
![Num-Nav Layer](./img/Layer-1.png) ![Num-Nav Layer](./img/Layer-1.svg)
Finally, pressing both internal thumb keys (or left external one) leads to the Finally, holding both internal thumb keys (or holding left external one) leads to the
function/mouse nav layer: function/mouse nav layer:
![Num-Nav Layer](./img/Layer-2.png) ![Fun-Mouse Layer](./img/Layer-2.svg)
This layer also allows accessing custom layers, such as here layer 3 that is the This layer also allows accessing custom layers, such as here layer 3 that is the
`qwerty-ergol` compatibility layer or the layer 4 which is a gaming layer (not `qwerty-ergol` compatibility layer or the layer 4 which is a gaming layer (not
described here). described here).
When Im using multiple xkeyboard layouts, my shortcut to switch between them is
double shifts, thats why there is also a binding for that (and why its the
only one that is symmetrically correct in the homerow mods in the base layer).
The illustrations were made using
[keymap-drawer](https://github.com/caksoylar/keymap-drawer/tree/main).
## Left to do ## Left to do
- [ ] Replace `png` images with `svg`
- [ ] Automatize the firmware generations - [ ] Automatize the firmware generations

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

298
img/Layer-0.svg Normal file
View File

@@ -0,0 +1,298 @@
<svg width="732" height="455" viewBox="0 0 732 455" 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 non-tap label text */
text.combo, text.hold, text.shifted, text.left, text.right {
font-size: 11px;
}
text.hold {
text-anchor: middle;
dominant-baseline: auto;
}
text.shifted {
text-anchor: middle;
dominant-baseline: hanging;
}
text.left {
text-anchor: start;
}
text.right {
text-anchor: end;
}
text.layer-activator {
text-decoration: underline;
}
/* styling for hold/shifted label text in combo box */
text.combo.hold, text.combo.shifted, text.combo.left, text.combo.right {
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 */
</style>
<g transform="translate(30, 0)" class="layer-Base">
<text x="0" y="28" class="label" id="Base">Base:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 81)" 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, 46)" 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">E</text>
</g>
<g transform="translate(196, 44)" 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">R</text>
</g>
<g transform="translate(252, 52)" 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">T</text>
</g>
<g transform="translate(420, 52)" 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">Y</text>
</g>
<g transform="translate(476, 44)" 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">U</text>
</g>
<g transform="translate(532, 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">I</text>
</g>
<g transform="translate(588, 46)" 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">O</text>
</g>
<g transform="translate(644, 81)" 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">P</text>
</g>
<g transform="translate(28, 137)" 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>
<text x="0" y="24" class="key hold">LGUI</text>
</g>
<g transform="translate(84, 102)" 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">S</text>
<text x="0" y="24" class="key hold">LALT</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">D</text>
<text x="0" y="24" class="key hold">LSFT</text>
</g>
<g transform="translate(196, 100)" 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">F</text>
<text x="0" y="24" class="key hold">LCTL</text>
</g>
<g transform="translate(252, 108)" 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(420, 108)" 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">H</text>
</g>
<g transform="translate(476, 100)" 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">J</text>
<text x="0" y="24" class="key hold">LCTL</text>
</g>
<g transform="translate(532, 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">K</text>
<text x="0" y="24" class="key hold">RSFT</text>
</g>
<g transform="translate(588, 102)" 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">L</text>
<text x="0" y="24" class="key hold">LALT</text>
</g>
<g transform="translate(644, 137)" 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>
<text x="0" y="24" class="key hold">LGUI</text>
</g>
<g transform="translate(28, 193)" 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">Z</text>
</g>
<g transform="translate(84, 158)" 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, 156)" 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">V</text>
</g>
<g transform="translate(252, 164)" 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">B</text>
</g>
<g transform="translate(420, 164)" 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">N</text>
</g>
<g transform="translate(476, 156)" 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">M</text>
</g>
<g transform="translate(532, 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(588, 158)" 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(644, 193)" 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(221, 221) rotate(15.0)" 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">SPC</text>
<text x="0" y="24" class="key hold">NavNum</text>
</g>
<g transform="translate(279, 245) rotate(30.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">ENT</text>
<text x="0" y="24" class="key hold"><tspan style="font-size: 88%">FunMouse</tspan></text>
</g>
<g transform="translate(393, 245) rotate(-30.0)" class="key keypos-32">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">ESC</text>
<text x="0" y="24" class="key hold">RALT</text>
</g>
<g transform="translate(451, 221) rotate(-15.0)" class="key keypos-33">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">TAB</text>
<text x="0" y="24" class="key hold">NavNum</text>
</g>
<g class="combo combopos-0">
<path d="M336,197 h-109 a6.0,6.0 0 0 0 -6.0,6.0 v-1" class="combo"/>
<path d="M336,197 h109 a6.0,6.0 0 0 1 6.0,6.0 v-1" class="combo"/>
<rect rx="6" ry="6" x="311" y="184" width="50" height="26" class="combo"/>
<text x="336" y="197" class="combo tap"><tspan style="font-size: 88%">FunMouse</tspan></text>
</g>
<g class="combo combopos-1">
<path d="M365,330 h-80 a6.0,6.0 0 0 1 -6.0,-6.0 v-60" class="combo"/>
<path d="M365,330 h80 a6.0,6.0 0 0 0 6.0,-6.0 v-84" class="combo"/>
<rect rx="6" ry="6" x="340" y="317" width="50" height="26" class="combo"/>
<text x="365" y="330" class="combo tap">Compose</text>
</g>
<g class="combo combopos-2">
<path d="M307,302 h-80 a6.0,6.0 0 0 1 -6.0,-6.0 v-56" class="combo"/>
<path d="M307,302 h80 a6.0,6.0 0 0 0 6.0,-6.0 v-32" class="combo"/>
<rect rx="6" ry="6" x="282" y="289" width="50" height="26" class="combo"/>
<text x="307" y="302" class="combo tap">Compose</text>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

268
img/Layer-1.svg Normal file
View File

@@ -0,0 +1,268 @@
<svg width="732" height="395" viewBox="0 0 732 395" 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 non-tap label text */
text.combo, text.hold, text.shifted, text.left, text.right {
font-size: 11px;
}
text.hold {
text-anchor: middle;
dominant-baseline: auto;
}
text.shifted {
text-anchor: middle;
dominant-baseline: hanging;
}
text.left {
text-anchor: start;
}
text.right {
text-anchor: end;
}
text.layer-activator {
text-decoration: underline;
}
/* styling for hold/shifted label text in combo box */
text.combo.hold, text.combo.shifted, text.combo.left, text.combo.right {
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 */
</style>
<g transform="translate(30, 0)" class="layer-NavNum">
<text x="0" y="28" class="label" id="NavNum">NavNum:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 81)" 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, 46)" 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">7</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">8</text>
</g>
<g transform="translate(196, 44)" 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">9</text>
</g>
<g transform="translate(252, 52)" 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(420, 52)" 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">HOME</text>
</g>
<g transform="translate(476, 44)" 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">PGDN</text>
</g>
<g transform="translate(532, 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">PGUP</text>
</g>
<g transform="translate(588, 46)" 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(644, 81)" 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">PSCR</text>
</g>
<g transform="translate(28, 137)" 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">+</text>
</g>
<g transform="translate(84, 102)" 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">4</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">5</text>
</g>
<g transform="translate(196, 100)" 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">6</text>
</g>
<g transform="translate(252, 108)" 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">0</text>
</g>
<g transform="translate(420, 108)" 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(476, 100)" 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"></text>
</g>
<g transform="translate(532, 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"></text>
</g>
<g transform="translate(588, 102)" 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"></text>
</g>
<g transform="translate(644, 137)" 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">BSPC</text>
</g>
<g transform="translate(28, 193)" 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, 158)" 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">1</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">2</text>
</g>
<g transform="translate(196, 156)" 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">3</text>
</g>
<g transform="translate(252, 164)" 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(420, 164)" 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">PLAY</text>
</g>
<g transform="translate(476, 156)" 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">
<tspan x="0" dy="-0.6em">VOL</tspan><tspan x="0" dy="1.2em">DWN</tspan>
</text>
</g>
<g transform="translate(532, 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">
<tspan x="0" dy="-0.6em">VOL</tspan><tspan x="0" dy="1.2em">UP</tspan>
</text>
</g>
<g transform="translate(588, 158)" 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">MUTE</text>
</g>
<g transform="translate(644, 193)" 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">DEL</text>
</g>
<g transform="translate(221, 221) rotate(15.0)" class="key keypos-30">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(279, 245) rotate(30.0)" class="key keypos-31">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(393, 245) rotate(-30.0)" class="key keypos-32">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(451, 221) rotate(-15.0)" class="key keypos-33">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

291
img/Layer-2.svg Normal file
View File

@@ -0,0 +1,291 @@
<svg width="732" height="395" viewBox="0 0 732 395" 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 non-tap label text */
text.combo, text.hold, text.shifted, text.left, text.right {
font-size: 11px;
}
text.hold {
text-anchor: middle;
dominant-baseline: auto;
}
text.shifted {
text-anchor: middle;
dominant-baseline: hanging;
}
text.left {
text-anchor: start;
}
text.right {
text-anchor: end;
}
text.layer-activator {
text-decoration: underline;
}
/* styling for hold/shifted label text in combo box */
text.combo.hold, text.combo.shifted, text.combo.left, text.combo.right {
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 */
</style>
<g transform="translate(30, 0)" class="layer-FunMouse">
<text x="0" y="28" class="label" id="FunMouse">FunMouse:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 81)" 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">F5</text>
</g>
<g transform="translate(84, 46)" 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">F6</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">F7</text>
</g>
<g transform="translate(196, 44)" 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">F8</text>
</g>
<g transform="translate(252, 52)" 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">
<tspan x="0" dy="-1.2em">LSFT</tspan><tspan x="0" dy="1.2em">+</tspan><tspan x="0" dy="1.2em">RSFT</tspan>
</text>
</g>
<g transform="translate(420, 52)" 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">PWR</text>
</g>
<g transform="translate(476, 44)" 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">SLEP</text>
</g>
<g transform="translate(532, 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">WAKE</text>
</g>
<g transform="translate(588, 46)" 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">Base</text>
<text x="0" y="24" class="key hold">toggle</text>
</g>
<g transform="translate(644, 81)" 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">
<tspan x="0" dy="-0.6em">MS</tspan><tspan x="0" dy="1.2em">WHLU</tspan>
</text>
</g>
<g transform="translate(28, 137)" 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">F1</text>
</g>
<g transform="translate(84, 102)" 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">F2</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">F3</text>
</g>
<g transform="translate(196, 100)" 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">F4</text>
</g>
<g transform="translate(252, 108)" 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">Compat</text>
<text x="0" y="24" class="key hold">toggle</text>
</g>
<g transform="translate(420, 108)" 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">MS</tspan><tspan x="0" dy="1.2em">LEFT</tspan>
</text>
</g>
<g transform="translate(476, 100)" 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">MS</tspan><tspan x="0" dy="1.2em">DOWN</tspan>
</text>
</g>
<g transform="translate(532, 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">MS</tspan><tspan x="0" dy="1.2em">UP</tspan>
</text>
</g>
<g transform="translate(588, 102)" 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">MS</tspan><tspan x="0" dy="1.2em">RGHT</tspan>
</text>
</g>
<g transform="translate(644, 137)" 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">
<tspan x="0" dy="-0.6em">MS</tspan><tspan x="0" dy="1.2em">WHLD</tspan>
</text>
</g>
<g transform="translate(28, 193)" 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">F9</text>
</g>
<g transform="translate(84, 158)" 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">F10</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">F11</text>
</g>
<g transform="translate(196, 156)" 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">F12</text>
</g>
<g transform="translate(252, 164)" 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">Gaming</text>
<text x="0" y="24" class="key hold">toggle</text>
</g>
<g transform="translate(420, 164)" 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">MS</tspan><tspan x="0" dy="1.2em">BTN4</tspan>
</text>
</g>
<g transform="translate(476, 156)" 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">
<tspan x="0" dy="-0.6em">MS</tspan><tspan x="0" dy="1.2em">BTN1</tspan>
</text>
</g>
<g transform="translate(532, 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">
<tspan x="0" dy="-0.6em">MS</tspan><tspan x="0" dy="1.2em">BTN3</tspan>
</text>
</g>
<g transform="translate(588, 158)" 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">MS</tspan><tspan x="0" dy="1.2em">BTN2</tspan>
</text>
</g>
<g transform="translate(644, 193)" 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">MS</tspan><tspan x="0" dy="1.2em">BTN5</tspan>
</text>
</g>
<g transform="translate(221, 221) rotate(15.0)" class="key keypos-30">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(279, 245) rotate(30.0)" class="key keypos-31">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(393, 245) rotate(-30.0)" class="key keypos-32">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(451, 221) rotate(-15.0)" class="key keypos-33">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.4 KiB