prescientmoon/keyswirl
1
Fork 0
Code Activity

Add support for paddings and rounded corners

Browse source
This commit is contained in:
prescientmoon 2024-02-21 05:01:46 +01:00
parent 09388994c1
commit 9b089af081
Signed by: prescientmoon
SSH key fingerprint: SHA256:UUF9JT2s8Xfyv76b8ZuVL7XrmimH4o49p4b+iexbVH4
11 changed files with 1043 additions and 417 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
keyboards/kanata/laptop/lens.json Normal file
View file

@ -0,0 +1,38 @@
{
"layout": "alpha_staggered_double_switch",
"keys": [
["Q", "!", "1", "f1"],
["A", "<", "6", "f6"],
["X", ">", "", "f11"],
["W", "@", "2", "f2"],
["R", "{", "7", "f7"],
["C", "}", "", "f12"],
["F", "#", "3", "f3"],
["S", "[", "8", "f8"],
["D", "]"],
["P", "$", "4", "f4"],
["T", "(", "9", "f9"],
["V", ")"],
["B", "%", "5", "f5"],
["G", "?", "0", "f10"],
["Z", ""],
["TR", "", ""],
["␣", "", ""],
["TL", "", ""],
["J", "^", "🏠", "😱"],
["M", "-", "◄", "↩️"],
["K", "—", "", "🎮"],
["L", "&", "⏬", "copy"],
["N", "_", "▼", "📋"],
["H", "|", "", "✂️"],
["U", "*", "⏫", "⏩"],
["E", "/", "▲", "⏯️"],
[",", "\\", "", "⏪"],
["Y", "~", "end", "🔊"],
["I", "=", "►", "🔉"],
[".", "+", "", "🔇"],
[":", "`", "🗑️", "🔆"],
["O", ";", "", "🔅"],
["'", "\"", ""]
]
}

505
keyboards/kanata/laptop/lens.svg Normal file
View file

@ -0,0 +1,505 @@
<svg viewBox="-20 -20 688 280" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="">
<rect width="56px" height="56px" x="2" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="30" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
Q
</text>
<text x="11.333333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
!
</text>
<text x="52.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
1
</text>
<text x="7.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f1
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="17" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="45" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
A
</text>
<text x="26.333333333333336" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
&lt;
</text>
<text x="67.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
6
</text>
<text x="22.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f6
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="47" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="75" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
X
</text>
<text x="56.333333333333336" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
&gt;
</text>
<text x="97.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="52.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f11
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="62" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="90" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
W
</text>
<text x="71.33333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
@
</text>
<text x="112.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
2
</text>
<text x="67.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f2
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="77" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="105" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
R
</text>
<text x="86.33333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
{
</text>
<text x="127.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
7
</text>
<text x="82.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f7
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="107" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="135" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
C
</text>
<text x="116.33333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
}
</text>
<text x="157.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="112.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f12
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="122" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="150" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
F
</text>
<text x="131.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
#
</text>
<text x="172.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
3
</text>
<text x="127.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f3
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="137" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="165" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
S
</text>
<text x="146.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
[
</text>
<text x="187.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
8
</text>
<text x="142.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f8
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="167" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="195" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
D
</text>
<text x="176.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
]
</text>
<text x="217.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="172.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="182" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="210" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
P
</text>
<text x="191.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
$
</text>
<text x="232.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
4
</text>
<text x="187.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f4
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="197" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="225" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
T
</text>
<text x="206.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
(
</text>
<text x="247.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
9
</text>
<text x="202.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f9
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="227" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="255" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
V
</text>
<text x="236.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
)
</text>
<text x="277.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="232.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="242" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="270" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
B
</text>
<text x="251.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
%
</text>
<text x="292.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
5
</text>
<text x="247.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f5
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="257" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="285" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
G
</text>
<text x="266.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
?
</text>
<text x="307.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
0
</text>
<text x="262.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f10
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="287" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="315" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
Z
</text>
<text x="296.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="337.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="292.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="107" y="197" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="135" y="225" textLength="28px" fill="red" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
■
</text>
<text x="116.33333333333333" y="206.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="157.4" y="206.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="112.6" y="243.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="">
<rect width="296px" height="56px" x="167" y="197" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="315" y="225" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
␣
</text>
<text x="216.33333333333334" y="206.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="433.4" y="206.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="196.6" y="243.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="467" y="197" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="495" y="225" textLength="28px" fill="blue" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
■
</text>
<text x="476.3333333333333" y="206.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="517.4" y="206.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="472.6" y="243.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="302" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="330" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
J
</text>
<text x="311.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
^
</text>
<text x="352.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
🏠
</text>
<text x="307.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
😱
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="317" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="345" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
M
</text>
<text x="326.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-
</text>
<text x="367.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
◄
</text>
<text x="322.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
↩️
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="347" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="375" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
K
</text>
<text x="356.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
—
</text>
<text x="397.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="352.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🎮
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="362" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="390" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
L
</text>
<text x="371.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
&amp;
</text>
<text x="412.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
⏬
</text>
<text x="367.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
copy
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="377" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="405" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
N
</text>
<text x="386.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
_
</text>
<text x="427.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
▼
</text>
<text x="382.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
📋
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="407" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="435" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
H
</text>
<text x="416.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
|
</text>
<text x="457.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="412.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
✂️
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="422" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="450" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
U
</text>
<text x="431.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
*
</text>
<text x="472.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
⏫
</text>
<text x="427.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
⏩
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="437" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="465" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
E
</text>
<text x="446.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
/
</text>
<text x="487.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
▲
</text>
<text x="442.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
⏯️
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="467" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="495" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
,
</text>
<text x="476.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
\
</text>
<text x="517.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="472.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
⏪
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="482" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="510" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
Y
</text>
<text x="491.3333333333333" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
~
</text>
<text x="532.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
end
</text>
<text x="487.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🔊
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="497" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="525" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
I
</text>
<text x="506.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
=
</text>
<text x="547.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
►
</text>
<text x="502.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🔉
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="527" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="555" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
.
</text>
<text x="536.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+
</text>
<text x="577.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="532.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🔇
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="542" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="570" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
:
</text>
<text x="551.3333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
`
</text>
<text x="592.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
🗑️
</text>
<text x="547.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🔆
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="557" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="585" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
O
</text>
<text x="566.3333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
;
</text>
<text x="607.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="562.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🔅
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="587" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="615" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
'
</text>
<text x="596.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
"
</text>
<text x="637.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="592.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 26 KiB

56
keyboards/qmk/ferris-sweep/lens.json
View file

@ -1,49 +1,39 @@
{
"colorscheme": {
"keyFill": "#ffffff",
"keyStroke": "#000000",
"mainLayerColor": "black",
"tlLayerColor": "blue",
"trLayerColor": "red",
"blLayerColor": "purple"
},
"layout": "split_3x5_2",
"keys": [
["Q", "!", "1", "f1"],
["A", "&lt;", "6", "f6"],
["X", "&gt;", "", "f11"],
["W", "@", "2", "f2"],
["R", "(", "7", "f7"],
["C", "]", "", "f12"],
["R", "{", "7", "f7"],
["C", "}", "", "f12"],
["F", "#", "3", "f3"],
["S", "[", "8", "f8"],
["D", "]"],
["P", "$", "4", "f4"],
["T", "{", "9", "f9"],
["V", "}"],
["T", "(", "9", "f9"],
["V", ")"],
["B", "%", "5", "f5"],
["G", "-", "0", "f10"],
["Z", "—"],
["G", "?", "0", "f10"],
["Z", ""],
["TR", "", ""],
["␣", "", ""],
["⇧", "", ""],
["TL", "", ""],
["J", "^", "🏠"],
["M", "?", "◄", "😱"],
["K", "", "", "🎮"],
["L", "&amp;", "⏬", "🔊"],
["N", "_", "▼", "🔉"],
["H", "|", "", "🔇"],
["U", "*", "⏫", "🔆"],
["E", "/", "▲", "🔅"],
[",", "\\", "", "↩️"],
["Y", "~", "end", "⏪"],
["I", "=", "►", "⏯️"],
[".", "+", "", "⏩"],
[":", "`", "🗑️", "copy"],
["O", ";", "", "📋"],
["'", "\"", "", "✂️"]
],
"imagePadding": 20,
"keySize": 50,
"layout": "split_3x5_2"
["J", "^", "🏠", "😱"],
["M", "-", "◄", "↩️"],
["K", "—", "", "🎮"],
["L", "&amp;", "⏬", "copy"],
["N", "_", "▼", "📋"],
["H", "|", "", "✂️"],
["U", "*", "⏫", "⏩"],
["E", "/", "▲", "⏯️"],
[",", "\\", "", "⏪"],
["Y", "~", "end", "🔊"],
["I", "=", "►", "🔉"],
[".", "+", "", "🔇"],
[":", "`", "🗑️", "🔆"],
["O", ";", "", "🔅"],
["'", "\"", ""]
]
}

618
keyboards/qmk/ferris-sweep/lens.svg
View file

@ -1,518 +1,518 @@
<svg viewBox="-20 -20 640 340" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="undefined">
<rect width="50px" height="50px" x="0" y="50" fill="#ffffff" stroke="#000000" stroke-width="2px">
<svg viewBox="-20 -20 760 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="">
<rect width="56px" height="56px" x="2" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="25" y="75" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="30" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
Q
</text>
<text x="8.333333333333334" y="58.333333333333336" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="11.333333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
!
</text>
<text x="45" y="58.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="52.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
1
</text>
<text x="5" y="91.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="7.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f1
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="0" y="100" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="2" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="25" y="125" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="30" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
A
</text>
<text x="8.333333333333334" y="108.33333333333333" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="11.333333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
&lt;
</text>
<text x="45" y="108.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="52.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
6
</text>
<text x="5" y="141.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="7.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f6
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="0" y="150" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="2" y="182" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="25" y="175" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="30" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
X
</text>
<text x="8.333333333333334" y="158.33333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="11.333333333333334" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
&gt;
</text>
<text x="45" y="158.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="52.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="5" y="191.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="7.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f11
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="50" y="25" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="62" y="32" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="75" y="50" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="90" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
W
</text>
<text x="58.333333333333336" y="33.333333333333336" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="71.33333333333333" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
@
</text>
<text x="95" y="33.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="112.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
2
</text>
<text x="55" y="66.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="67.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f2
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="50" y="75" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="62" y="92" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="75" y="100" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="90" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
R
</text>
<text x="58.333333333333336" y="83.33333333333333" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
(
<text x="71.33333333333333" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
{
</text>
<text x="95" y="83.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="112.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
7
</text>
<text x="55" y="116.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="67.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f7
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="50" y="125" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="62" y="152" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="75" y="150" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="90" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
C
</text>
<text x="58.333333333333336" y="133.33333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
]
<text x="71.33333333333333" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
}
</text>
<text x="95" y="133.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="112.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="55" y="166.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="67.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f12
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="100" y="0" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="122" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="125" y="25" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="150" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
F
</text>
<text x="108.33333333333333" y="8.333333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="131.33333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
#
</text>
<text x="145" y="8.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="172.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
3
</text>
<text x="105" y="41.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="127.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f3
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="100" y="50" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="122" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="125" y="75" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="150" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
S
</text>
<text x="108.33333333333333" y="58.333333333333336" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="131.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
[
</text>
<text x="145" y="58.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="172.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
8
</text>
<text x="105" y="91.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="127.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f8
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="100" y="100" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="122" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="125" y="125" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="150" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
D
</text>
<text x="108.33333333333333" y="108.33333333333333" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="131.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
]
</text>
<text x="145" y="108.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="172.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="105" y="141.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="127.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="150" y="25" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="182" y="32" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="175" y="50" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="210" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
P
</text>
<text x="158.33333333333334" y="33.333333333333336" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="191.33333333333334" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
$
</text>
<text x="195" y="33.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="232.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
4
</text>
<text x="155" y="66.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="187.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f4
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="150" y="75" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="182" y="92" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="175" y="100" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="210" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
T
</text>
<text x="158.33333333333334" y="83.33333333333333" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
{
<text x="191.33333333333334" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
(
</text>
<text x="195" y="83.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="232.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
9
</text>
<text x="155" y="116.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="187.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f9
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="150" y="125" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="182" y="152" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="175" y="150" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="210" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
V
</text>
<text x="158.33333333333334" y="133.33333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
}
<text x="191.33333333333334" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
)
</text>
<text x="195" y="133.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="232.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="155" y="166.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="187.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="200" y="50" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="242" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="225" y="75" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="270" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
B
</text>
<text x="208.33333333333334" y="58.333333333333336" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="251.33333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
%
</text>
<text x="245" y="58.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="292.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
5
</text>
<text x="205" y="91.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="247.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f5
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="200" y="100" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="242" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="225" y="125" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="270" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
G
</text>
<text x="208.33333333333334" y="108.33333333333333" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
-
<text x="251.33333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
?
</text>
<text x="245" y="108.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="292.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
0
</text>
<text x="205" y="141.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="247.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
f10
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="200" y="150" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="242" y="182" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="225" y="175" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="270" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
Z
</text>
<text x="208.33333333333334" y="158.33333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
—
<text x="251.33333333333334" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="245" y="158.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="292.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="205" y="191.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="247.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="rotate(15, 200, 250)">
<rect width="50px" height="50px" x="175" y="225" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="rotate(15, 240, 300)">
<rect width="56px" height="56px" x="212" y="272" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="200" y="250" textLength="25px" fill="red" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="240" y="300" textLength="28px" fill="red" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
■
</text>
<text x="183.33333333333334" y="233.33333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="221.33333333333334" y="281.3333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="220" y="233.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="262.4" y="281.3333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="180" y="266.6666666666667" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="217.6" y="318.6666666666667" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="rotate(15, 248.2962913144534, 262.94095225512604)">
<rect width="50px" height="50px" x="223.2962913144534" y="237.94095225512604" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="rotate(15, 297.95554957734413, 315.5291427061512)">
<rect width="56px" height="56px" x="269.95554957734413" y="287.5291427061512" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="248.2962913144534" y="262.94095225512604" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="297.95554957734413" y="315.5291427061512" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
␣
</text>
<text x="231.62962464778676" y="246.27428558845938" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="279.28888291067744" y="296.86247603948453" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="268.2962913144534" y="246.27428558845938" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="320.3555495773441" y="296.86247603948453" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="228.2962913144534" y="279.6076189217927" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="275.55554957734415" y="334.1958093728179" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="rotate(-15, 351.7037086855466, 262.94095225512604)">
<rect width="50px" height="50px" x="326.7037086855466" y="237.94095225512604" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="rotate(-15, 422.04445042265587, 315.5291427061512)">
<rect width="56px" height="56px" x="394.04445042265587" y="287.5291427061512" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="351.7037086855466" y="262.94095225512604" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="422.04445042265587" y="315.5291427061512" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
⇧
</text>
<text x="335.0370420188799" y="246.27428558845938" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="403.3777837559892" y="296.86247603948453" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="371.7037086855466" y="246.27428558845938" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="444.44445042265585" y="296.86247603948453" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="331.7037086855466" y="279.6076189217927" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="399.6444504226559" y="334.1958093728179" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="rotate(-15, 400, 250)">
<rect width="50px" height="50px" x="375" y="225" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="rotate(-15, 480, 300)">
<rect width="56px" height="56px" x="452" y="272" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="400" y="250" textLength="25px" fill="blue" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="480" y="300" textLength="28px" fill="blue" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
■
</text>
<text x="383.3333333333333" y="233.33333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="461.3333333333333" y="281.3333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="420" y="233.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="502.4" y="281.3333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="380" y="266.6666666666667" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="457.6" y="318.6666666666667" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="350" y="50" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="422" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="375" y="75" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="450" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
J
</text>
<text x="358.3333333333333" y="58.333333333333336" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="431.3333333333333" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
^
</text>
<text x="395" y="58.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="472.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
🏠
</text>
<text x="355" y="91.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="350" y="100" fill="#ffffff" stroke="#000000" stroke-width="2px">
</rect>
<text x="375" y="125" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
M
</text>
<text x="358.3333333333333" y="108.33333333333333" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
?
</text>
<text x="395" y="108.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
◄
</text>
<text x="355" y="141.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="427.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
😱
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="350" y="150" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="422" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="375" y="175" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
K
<text x="450" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
M
</text>
<text x="358.3333333333333" y="158.33333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
<text x="431.3333333333333" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
-
</text>
<text x="395" y="158.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="472.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
◄
</text>
<text x="355" y="191.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
🎮
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="400" y="25" fill="#ffffff" stroke="#000000" stroke-width="2px">
</rect>
<text x="425" y="50" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
L
</text>
<text x="408.3333333333333" y="33.333333333333336" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
&amp;
</text>
<text x="445" y="33.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
⏬
</text>
<text x="405" y="66.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
🔊
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="400" y="75" fill="#ffffff" stroke="#000000" stroke-width="2px">
</rect>
<text x="425" y="100" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
N
</text>
<text x="408.3333333333333" y="83.33333333333333" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
_
</text>
<text x="445" y="83.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
▼
</text>
<text x="405" y="116.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
🔉
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="400" y="125" fill="#ffffff" stroke="#000000" stroke-width="2px">
</rect>
<text x="425" y="150" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
H
</text>
<text x="408.3333333333333" y="133.33333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
|
</text>
<text x="445" y="133.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
</text>
<text x="405" y="166.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
🔇
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="450" y="0" fill="#ffffff" stroke="#000000" stroke-width="2px">
</rect>
<text x="475" y="25" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
U
</text>
<text x="458.3333333333333" y="8.333333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
*
</text>
<text x="495" y="8.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
⏫
</text>
<text x="455" y="41.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
🔆
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="450" y="50" fill="#ffffff" stroke="#000000" stroke-width="2px">
</rect>
<text x="475" y="75" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
E
</text>
<text x="458.3333333333333" y="58.333333333333336" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
/
</text>
<text x="495" y="58.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
▲
</text>
<text x="455" y="91.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
🔅
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="450" y="100" fill="#ffffff" stroke="#000000" stroke-width="2px">
</rect>
<text x="475" y="125" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
,
</text>
<text x="458.3333333333333" y="108.33333333333333" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
\
</text>
<text x="495" y="108.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
</text>
<text x="455" y="141.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="427.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
↩️
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="500" y="25" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="422" y="182" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="525" y="50" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
Y
<text x="450" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
K
</text>
<text x="508.3333333333333" y="33.333333333333336" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
~
<text x="431.3333333333333" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
—
</text>
<text x="545" y="33.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
end
<text x="472.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="505" y="66.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
⏪
<text x="427.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🎮
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="500" y="75" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="482" y="32" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="525" y="100" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
I
<text x="510" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
L
</text>
<text x="508.3333333333333" y="83.33333333333333" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
=
<text x="491.3333333333333" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
&amp;
</text>
<text x="545" y="83.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
►
<text x="532.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
⏬
</text>
<text x="505" y="116.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
⏯️
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="500" y="125" fill="#ffffff" stroke="#000000" stroke-width="2px">
</rect>
<text x="525" y="150" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
.
</text>
<text x="508.3333333333333" y="133.33333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
+
</text>
<text x="545" y="133.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
</text>
<text x="505" y="166.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
⏩
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="550" y="50" fill="#ffffff" stroke="#000000" stroke-width="2px">
</rect>
<text x="575" y="75" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
:
</text>
<text x="558.3333333333334" y="58.333333333333336" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
`
</text>
<text x="595" y="58.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
🗑️
</text>
<text x="555" y="91.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="487.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
copy
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="550" y="100" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="482" y="92" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="575" y="125" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
O
<text x="510" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
N
</text>
<text x="558.3333333333334" y="108.33333333333333" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
;
<text x="491.3333333333333" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
_
</text>
<text x="595" y="108.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="532.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
▼
</text>
<text x="555" y="141.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="487.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
📋
</text>
</g>
<g transform="undefined">
<rect width="50px" height="50px" x="550" y="150" fill="#ffffff" stroke="#000000" stroke-width="2px">
<g transform="">
<rect width="56px" height="56px" x="482" y="152" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="575" y="175" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
'
<text x="510" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
H
</text>
<text x="558.3333333333334" y="158.33333333333334" fill="blue" font-size="66%" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica">
"
<text x="491.3333333333333" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
|
</text>
<text x="595" y="158.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica">
<text x="532.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="555" y="191.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="middle" font-family="Helvetica">
<text x="487.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
✂️
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="542" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="570" y="30" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
U
</text>
<text x="551.3333333333334" y="11.333333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
*
</text>
<text x="592.4" y="11.333333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
⏫
</text>
<text x="547.6" y="48.666666666666664" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
⏩
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="542" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="570" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
E
</text>
<text x="551.3333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
/
</text>
<text x="592.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
▲
</text>
<text x="547.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
⏯️
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="542" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="570" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
,
</text>
<text x="551.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
\
</text>
<text x="592.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="547.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
⏪
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="602" y="32" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="630" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
Y
</text>
<text x="611.3333333333334" y="41.333333333333336" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
~
</text>
<text x="652.4" y="41.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
end
</text>
<text x="607.6" y="78.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🔊
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="602" y="92" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="630" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
I
</text>
<text x="611.3333333333334" y="101.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
=
</text>
<text x="652.4" y="101.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
►
</text>
<text x="607.6" y="138.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🔉
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="602" y="152" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="630" y="180" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
.
</text>
<text x="611.3333333333334" y="161.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
+
</text>
<text x="652.4" y="161.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="607.6" y="198.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🔇
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="662" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="690" y="90" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
:
</text>
<text x="671.3333333333334" y="71.33333333333333" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
`
</text>
<text x="712.4" y="71.33333333333333" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
🗑️
</text>
<text x="667.6" y="108.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🔆
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="662" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="690" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
O
</text>
<text x="671.3333333333334" y="131.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
;
</text>
<text x="712.4" y="131.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="667.6" y="168.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
🔅
</text>
</g>
<g transform="">
<rect width="56px" height="56px" x="662" y="182" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect>
<text x="690" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
'
</text>
<text x="671.3333333333334" y="191.33333333333334" fill="blue" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
"
</text>
<text x="712.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
</text>
<text x="667.6" y="228.66666666666666" fill="purple" font-size="66%" text-anchor="start" dominant-baseline="central" font-family="Helvetica">
</text>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

32
layout-lens/src/config.ts
View file

@ -7,8 +7,28 @@ import {
PredefinedLayout,
PredefinedLayoutName,
SpecialSymbols,
LayoutMeasurements,
LayoutColorscheme,
} from "./types";
import split_3x5_2 from "./layouts/split_3x5_2";
import alpha_staggered_double_switch from "./layouts/alpha_staggered_double_switch";
const defaultMeasurements: LayoutMeasurements = {
imagePadding: 20,
keySize: 60,
keyPadding: 2,
keyCornerRadius: 5,
keyStrokeWidth: 1.5,
};
const defaultColorscheme: LayoutColorscheme = {
keyFill: "#ffffff",
keyStroke: "#000000",
mainLayerColor: "black",
tlLayerColor: "blue",
trLayerColor: "red",
blLayerColor: "purple",
};
export function parseConfig(input: string): Config {
const parsed = JSON.parse(input);
@ -30,9 +50,8 @@ export function parseConfig(input: string): Config {
return special as SpecialSymbols;
}),
),
colorscheme: parsed.colorscheme,
imagePadding: parsed.imagePadding,
keySize: parsed.keySize,
colorscheme: { ...defaultColorscheme, ...parsed.colorscheme },
measurements: { ...defaultMeasurements, ...parsed.measurements },
layout,
};
}
@ -48,15 +67,16 @@ function key(
const layouts: Record<PredefinedLayoutName, PredefinedLayout> = {
[PredefinedLayoutName.split_3x5_2]: split_3x5_2,
[PredefinedLayoutName.alpha_staggered_double_switch]:
alpha_staggered_double_switch,
};
export function makeLayout(config: Config): Layout {
const predefined = layouts[config.layout](config.keySize);
const predefined = layouts[config.layout];
return {
keys: config.keys.map((k) => key(...(k as Arguments<typeof key>))),
colorscheme: config.colorscheme,
imagePadding: config.imagePadding,
keySize: config.keySize,
measurements: config.measurements,
visual: predefined.visual,
size: predefined.size,
};

48
layout-lens/src/layout.ts
View file

@ -1,15 +1,27 @@
import { VisualKey, VisualLayout } from "./types";
import * as V from "./vec2";
function visualKey(at: V.Vec2, keySize: number, angle: number = 0): VisualKey {
return { position: at, size: [keySize, keySize], angle };
export function visualKey(
position: V.Vec2,
size: V.Vec2 = [1, 1],
angle: number = 0,
): VisualKey {
return { position, size, angle };
}
function col(at: V.Vec2, keySize: number): VisualLayout {
function offsetMany(keys: VisualLayout, offsets: V.Vec2[]): VisualLayout {
return keys.map((key, index) => {
const offset = offsets[index] || [0, 0];
key.position = V.add(key.position, offset);
return key;
});
}
function col(at: V.Vec2): VisualLayout {
return [
visualKey(at, keySize),
visualKey(V.add(at, [0, keySize]), keySize),
visualKey(V.add(at, [0, 2 * keySize]), keySize),
visualKey(at),
visualKey(V.add(at, [0, 1])),
visualKey(V.add(at, [0, 2])),
];
}
@ -20,22 +32,18 @@ function radians(deg: number): number {
export function thumbs(
at: V.Vec2,
reverse: boolean,
keySize: number,
thumbRotation = reverse ? -15 : 15,
): VisualLayout {
// Distance between thumb key centers
const factor = keySize;
const offset: V.Vec2 = [
Math.cos(radians(thumbRotation)) * factor,
Math.sin(radians(thumbRotation)) * factor,
Math.cos(radians(thumbRotation)),
Math.sin(radians(thumbRotation)),
];
const result = [
visualKey(at, keySize, thumbRotation),
visualKey(at, undefined, thumbRotation),
visualKey(
V.add(at, reverse ? V.neg(offset) : offset),
keySize,
undefined,
thumbRotation,
),
];
@ -48,9 +56,17 @@ export function thumbs(
export function cols(
at: V.Vec2,
cols: V.Vec2[],
keySize: number,
offsets: V.Vec2[] = [],
): VisualLayout {
return cols.flatMap((self, index) =>
col(V.add(at, V.add(self, [index * keySize, 0])), keySize),
offsetMany(col(V.add(at, V.add(self, [index, 0]))), offsets),
);
}
export function scaleVisual(visual: VisualKey, amount: number): VisualKey {
return {
angle: visual.angle,
position: V.scale(visual.position, amount),
size: V.scale(visual.size, amount),
};
}

32
layout-lens/src/layouts/alpha_staggered_double_switch.ts Normal file
View file

@ -0,0 +1,32 @@
import * as L from "../layout";
import type { PredefinedLayout } from "../types";
import type { Vec2 } from "../vec2";
// 3x5 block
const block: Vec2[] = [
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0],
];
// per-column offsets
const offsets: Vec2[] = [
[0, 0],
[0.25, 0],
[0.75, 0],
];
const layout: PredefinedLayout = {
visual: [
L.cols([0, 0], block, offsets),
L.visualKey([1.75, 3.25]),
L.visualKey([2.75, 3.25], [5, 1]),
L.visualKey([7.75, 3.25]),
L.cols([5, 0], block, offsets),
].flat(),
size: [10.8, 4],
};
export default layout;

34
layout-lens/src/layouts/split_3x5_2.ts
View file

@ -2,25 +2,23 @@ import * as L from "../layout";
import type { PredefinedLayout } from "../types";
import type { Vec2 } from "../vec2";
const layout: PredefinedLayout = (keySize) => {
// 3x5 block
const block: Vec2[] = [
[0, keySize],
[0, keySize / 2],
[0, 0],
[0, keySize / 2],
[0, keySize],
];
// 3x5 block
const block: Vec2[] = [
[0, 1],
[0, 0.5],
[0, 0],
[0, 0.5],
[0, 1],
];
return {
visual: [
L.cols([0, 0], block, keySize),
L.thumbs([keySize * 3.5, keySize * 4.5], false, keySize),
L.thumbs([keySize * 7.5, keySize * 4.5], true, keySize),
L.cols([7 * keySize, 0], block, keySize),
].flat(),
size: [keySize * 12, keySize * 6],
};
const layout: PredefinedLayout = {
visual: [
L.cols([0, 0], block),
L.thumbs([3.5, 4.5], false),
L.thumbs([7.5, 4.5], true),
L.cols([7, 0], block),
].flat(),
size: [12, 6],
};
export default layout;

57
layout-lens/src/render.ts
View file

@ -1,9 +1,12 @@
import { tag, px } from "./svg";
import * as L from "./layout";
import * as V from "./vec2";
import {
KeyboardKey,
KeySymbol,
Layout,
LayoutColorscheme,
LayoutMeasurements,
SpecialSymbols,
VisualKey,
} from "./types";
@ -18,13 +21,18 @@ function renderKey(
visual: VisualKey,
key: KeyboardKey,
colorscheme: LayoutColorscheme,
keySize: number,
measurements: LayoutMeasurements,
) {
const withPadding = {
position: V.add(visual.position, measurements.keyPadding),
size: V.add(visual.size, -2 * measurements.keyPadding),
};
const centerX = visual.position[0] + visual.size[0] / 2;
const centerY = visual.position[1] + visual.size[1] / 2;
const textAttribs = {
"text-anchor": "middle",
"dominant-baseline": "middle",
"dominant-baseline": "central",
"font-family": "Helvetica",
};
@ -40,24 +48,25 @@ function renderKey(
transform:
visual.angle && visual.angle !== 0
? `rotate(${visual.angle}, ${centerX}, ${centerY})`
: undefined,
: "",
},
[
tag("rect", {
width: px(visual.size[0]),
height: px(visual.size[1]),
x: visual.position[0],
y: visual.position[1],
width: px(withPadding.size[0]),
height: px(withPadding.size[1]),
x: withPadding.position[0],
y: withPadding.position[1],
rx: measurements.keyCornerRadius,
fill: colorscheme.keyFill,
stroke: colorscheme.keyStroke,
"stroke-width": px(2),
"stroke-width": px(measurements.keyStrokeWidth),
}),
tag(
"text",
{
x: centerX,
y: centerY,
textLength: px(keySize / 2),
textLength: px(withPadding.size[1] / 2),
fill: textColor(key.main, colorscheme.mainLayerColor),
...textAttribs,
},
@ -66,19 +75,20 @@ function renderKey(
tag(
"text",
{
x: visual.position[0] + visual.size[0] / 6,
y: visual.position[1] + visual.size[1] / 6,
x: withPadding.position[0] + withPadding.size[0] / 6,
y: withPadding.position[1] + withPadding.size[1] / 6,
fill: textColor(key.tlLayer, colorscheme.tlLayerColor),
"font-size": "66%",
...textAttribs,
"text-anchor": "start",
},
textContents(key.tlLayer),
),
tag(
"text",
{
x: visual.position[0] + (9 * visual.size[0]) / 10,
y: visual.position[1] + visual.size[1] / 6,
x: withPadding.position[0] + (9 * withPadding.size[0]) / 10,
y: withPadding.position[1] + withPadding.size[1] / 6,
fill: textColor(key.trLayer, colorscheme.trLayerColor),
"font-size": "66%",
...textAttribs,
@ -89,8 +99,8 @@ function renderKey(
tag(
"text",
{
x: visual.position[0] + visual.size[0] / 10,
y: visual.position[1] + (5 * visual.size[1]) / 6,
x: withPadding.position[0] + withPadding.size[0] / 10,
y: withPadding.position[1] + (5 * withPadding.size[1]) / 6,
fill: textColor(key.blLayer, colorscheme.blLayerColor),
"font-size": "66%",
...textAttribs,
@ -107,17 +117,24 @@ export function renderLayout(layout: Layout) {
"svg",
{
viewBox: [
-layout.imagePadding,
-layout.imagePadding,
2 * layout.imagePadding + layout.size[0],
2 * layout.imagePadding + layout.size[1],
-layout.measurements.imagePadding,
-layout.measurements.imagePadding,
2 * layout.measurements.imagePadding +
layout.size[0] * layout.measurements.keySize,
2 * layout.measurements.imagePadding +
layout.size[1] * layout.measurements.keySize,
].join(" "),
xmlns: "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
},
layout.visual
.map((key, index) =>
renderKey(key, layout.keys[index], layout.colorscheme, layout.keySize),
renderKey(
L.scaleVisual(key, layout.measurements.keySize),
layout.keys[index],
layout.colorscheme,
layout.measurements,
),
)
.join("\n"),
);

31
layout-lens/src/types.ts
View file

@ -38,28 +38,33 @@ export interface LayoutColorscheme {
blLayerColor: string;
}
export interface Layout {
visual: VisualLayout;
keys: KeyboardKey[];
colorscheme: LayoutColorscheme;
imagePadding: number;
size: Vec2;
keySize: number;
}
export enum PredefinedLayoutName {
split_3x5_2,
alpha_staggered_double_switch,
}
export interface LayoutMeasurements {
imagePadding: number;
keySize: number;
keyPadding: number;
keyCornerRadius: number;
keyStrokeWidth: number;
}
export interface Config {
keys: KeySymbol[][];
colorscheme: LayoutColorscheme;
imagePadding: number;
keySize: number;
layout: PredefinedLayoutName;
colorscheme: LayoutColorscheme;
measurements: LayoutMeasurements;
}
export type PredefinedLayout = (keySize: number) => {
export type PredefinedLayout = {
visual: VisualLayout;
size: Vec2;
};
export interface Layout extends PredefinedLayout {
keys: KeyboardKey[];
colorscheme: LayoutColorscheme;
measurements: LayoutMeasurements;
}

9
layout-lens/src/vec2.ts
View file

@ -1,9 +1,14 @@
export type Vec2 = [number, number];
export function add(x: Vec2, y: Vec2): Vec2 {
return [x[0] + y[0], x[1] + y[1]];
export function add(x: Vec2, y: number | Vec2): Vec2 {
const z = typeof y === "number" ? [y, y] : y;
return [x[0] + z[0], x[1] + z[1]];
}
export function neg(v: Vec2): Vec2 {
return [-v[0], -v[1]];
}
export function scale(v: Vec2, amount: number): Vec2 {
return [v[0] * amount, v[1] * amount];
}