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

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"> <svg viewBox="-20 -20 760 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="0" y="50" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="2" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 Q
</text> </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>
<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 1
</text> </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 f1
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="0" y="100" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="2" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 A
</text> </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; &lt;
</text> </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 6
</text> </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 f6
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="0" y="150" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="2" y="182" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 X
</text> </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; &gt;
</text> </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>
<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 f11
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="50" y="25" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="62" y="32" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 W
</text> </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>
<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 2
</text> </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 f2
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="50" y="75" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="62" y="92" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 R
</text> </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>
<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 7
</text> </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 f7
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="50" y="125" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="62" y="152" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 C
</text> </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>
<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>
<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 f12
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="100" y="0" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="122" y="2" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 F
</text> </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>
<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 3
</text> </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 f3
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="100" y="50" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="122" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 S
</text> </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>
<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 8
</text> </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 f8
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="100" y="100" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="122" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 D
</text> </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>
<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>
<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> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="150" y="25" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="182" y="32" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 P
</text> </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>
<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 4
</text> </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 f4
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="150" y="75" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="182" y="92" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 T
</text> </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>
<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 9
</text> </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 f9
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="150" y="125" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="182" y="152" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 V
</text> </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>
<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>
<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> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="200" y="50" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="242" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 B
</text> </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>
<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 5
</text> </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 f5
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="200" y="100" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="242" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 G
</text> </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>
<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 0
</text> </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 f10
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="200" y="150" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="242" y="182" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 Z
</text> </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>
<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>
<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> </text>
</g> </g>
<g transform="rotate(15, 200, 250)"> <g transform="rotate(15, 240, 300)">
<rect width="50px" height="50px" x="175" y="225" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="212" y="272" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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>
<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>
<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>
<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> </text>
</g> </g>
<g transform="rotate(15, 248.2962913144534, 262.94095225512604)"> <g transform="rotate(15, 297.95554957734413, 315.5291427061512)">
<rect width="50px" height="50px" x="223.2962913144534" y="237.94095225512604" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="269.95554957734413" y="287.5291427061512" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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>
<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>
<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>
<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> </text>
</g> </g>
<g transform="rotate(-15, 351.7037086855466, 262.94095225512604)"> <g transform="rotate(-15, 422.04445042265587, 315.5291427061512)">
<rect width="50px" height="50px" x="326.7037086855466" y="237.94095225512604" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="394.04445042265587" y="287.5291427061512" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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>
<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>
<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>
<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> </text>
</g> </g>
<g transform="rotate(-15, 400, 250)"> <g transform="rotate(-15, 480, 300)">
<rect width="50px" height="50px" x="375" y="225" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="452" y="272" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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>
<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>
<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>
<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> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="350" y="50" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="422" y="62" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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 J
</text> </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>
<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>
<text x="355" y="91.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="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> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="350" y="150" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="422" y="122" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </rect>
<text x="375" y="175" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica"> <text x="450" y="150" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
K M
</text> </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>
<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>
<text x="355" y="191.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="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> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="500" y="25" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="422" y="182" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </rect>
<text x="525" y="50" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica"> <text x="450" y="210" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
Y K
</text> </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>
<text x="545" y="33.333333333333336" fill="red" font-size="66%" text-anchor="end" dominant-baseline="middle" font-family="Helvetica"> <text x="472.4" y="191.33333333333334" fill="red" font-size="66%" text-anchor="end" dominant-baseline="central" font-family="Helvetica">
end
</text> </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> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="500" y="75" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="482" y="32" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </rect>
<text x="525" y="100" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica"> <text x="510" y="60" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
I L
</text> </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>
<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>
<text x="505" y="116.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">
⏯️
</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">
copy copy
</text> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="550" y="100" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="482" y="92" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </rect>
<text x="575" y="125" textLength="25px" fill="black" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica"> <text x="510" y="120" textLength="28px" fill="black" text-anchor="middle" dominant-baseline="central" font-family="Helvetica">
O N
</text> </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>
<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>
<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> </text>
</g> </g>
<g transform="undefined"> <g transform="">
<rect width="50px" height="50px" x="550" y="150" fill="#ffffff" stroke="#000000" stroke-width="2px"> <rect width="56px" height="56px" x="482" y="152" rx="5" fill="#ffffff" stroke="#000000" stroke-width="1.5px">
</rect> </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>
<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>
<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>
<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> </text>
</g> </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> </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, PredefinedLayout,
PredefinedLayoutName, PredefinedLayoutName,
SpecialSymbols, SpecialSymbols,
LayoutMeasurements,
LayoutColorscheme,
} from "./types"; } from "./types";
import split_3x5_2 from "./layouts/split_3x5_2"; 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 { export function parseConfig(input: string): Config {
const parsed = JSON.parse(input); const parsed = JSON.parse(input);
@ -30,9 +50,8 @@ export function parseConfig(input: string): Config {
return special as SpecialSymbols; return special as SpecialSymbols;
}), }),
), ),
colorscheme: parsed.colorscheme, colorscheme: { ...defaultColorscheme, ...parsed.colorscheme },
imagePadding: parsed.imagePadding, measurements: { ...defaultMeasurements, ...parsed.measurements },
keySize: parsed.keySize,
layout, layout,
}; };
} }
@ -48,15 +67,16 @@ function key(
const layouts: Record<PredefinedLayoutName, PredefinedLayout> = { const layouts: Record<PredefinedLayoutName, PredefinedLayout> = {
[PredefinedLayoutName.split_3x5_2]: split_3x5_2, [PredefinedLayoutName.split_3x5_2]: split_3x5_2,
[PredefinedLayoutName.alpha_staggered_double_switch]:
alpha_staggered_double_switch,
}; };
export function makeLayout(config: Config): Layout { export function makeLayout(config: Config): Layout {
const predefined = layouts[config.layout](config.keySize); const predefined = layouts[config.layout];
return { return {
keys: config.keys.map((k) => key(...(k as Arguments<typeof key>))), keys: config.keys.map((k) => key(...(k as Arguments<typeof key>))),
colorscheme: config.colorscheme, colorscheme: config.colorscheme,
imagePadding: config.imagePadding, measurements: config.measurements,
keySize: config.keySize,
visual: predefined.visual, visual: predefined.visual,
size: predefined.size, size: predefined.size,
}; };

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

@ -1,15 +1,27 @@
import { VisualKey, VisualLayout } from "./types"; import { VisualKey, VisualLayout } from "./types";
import * as V from "./vec2"; import * as V from "./vec2";
function visualKey(at: V.Vec2, keySize: number, angle: number = 0): VisualKey { export function visualKey(
return { position: at, size: [keySize, keySize], angle }; 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 [ return [
visualKey(at, keySize), visualKey(at),
visualKey(V.add(at, [0, keySize]), keySize), visualKey(V.add(at, [0, 1])),
visualKey(V.add(at, [0, 2 * keySize]), keySize), visualKey(V.add(at, [0, 2])),
]; ];
} }
@ -20,22 +32,18 @@ function radians(deg: number): number {
export function thumbs( export function thumbs(
at: V.Vec2, at: V.Vec2,
reverse: boolean, reverse: boolean,
keySize: number,
thumbRotation = reverse ? -15 : 15, thumbRotation = reverse ? -15 : 15,
): VisualLayout { ): VisualLayout {
// Distance between thumb key centers
const factor = keySize;
const offset: V.Vec2 = [ const offset: V.Vec2 = [
Math.cos(radians(thumbRotation)) * factor, Math.cos(radians(thumbRotation)),
Math.sin(radians(thumbRotation)) * factor, Math.sin(radians(thumbRotation)),
]; ];
const result = [ const result = [
visualKey(at, keySize, thumbRotation), visualKey(at, undefined, thumbRotation),
visualKey( visualKey(
V.add(at, reverse ? V.neg(offset) : offset), V.add(at, reverse ? V.neg(offset) : offset),
keySize, undefined,
thumbRotation, thumbRotation,
), ),
]; ];
@ -48,9 +56,17 @@ export function thumbs(
export function cols( export function cols(
at: V.Vec2, at: V.Vec2,
cols: V.Vec2[], cols: V.Vec2[],
keySize: number, offsets: V.Vec2[] = [],
): VisualLayout { ): VisualLayout {
return cols.flatMap((self, index) => 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 { PredefinedLayout } from "../types";
import type { Vec2 } from "../vec2"; import type { Vec2 } from "../vec2";
const layout: PredefinedLayout = (keySize) => { // 3x5 block
// 3x5 block const block: Vec2[] = [
const block: Vec2[] = [ [0, 1],
[0, keySize], [0, 0.5],
[0, keySize / 2], [0, 0],
[0, 0], [0, 0.5],
[0, keySize / 2], [0, 1],
[0, keySize], ];
];
return { const layout: PredefinedLayout = {
visual: [ visual: [
L.cols([0, 0], block, keySize), L.cols([0, 0], block),
L.thumbs([keySize * 3.5, keySize * 4.5], false, keySize), L.thumbs([3.5, 4.5], false),
L.thumbs([keySize * 7.5, keySize * 4.5], true, keySize), L.thumbs([7.5, 4.5], true),
L.cols([7 * keySize, 0], block, keySize), L.cols([7, 0], block),
].flat(), ].flat(),
size: [keySize * 12, keySize * 6], size: [12, 6],
};
}; };
export default layout; export default layout;

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

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

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

@ -38,28 +38,33 @@ export interface LayoutColorscheme {
blLayerColor: string; blLayerColor: string;
} }
export interface Layout {
visual: VisualLayout;
keys: KeyboardKey[];
colorscheme: LayoutColorscheme;
imagePadding: number;
size: Vec2;
keySize: number;
}
export enum PredefinedLayoutName { export enum PredefinedLayoutName {
split_3x5_2, split_3x5_2,
alpha_staggered_double_switch,
}
export interface LayoutMeasurements {
imagePadding: number;
keySize: number;
keyPadding: number;
keyCornerRadius: number;
keyStrokeWidth: number;
} }
export interface Config { export interface Config {
keys: KeySymbol[][]; keys: KeySymbol[][];
colorscheme: LayoutColorscheme;
imagePadding: number;
keySize: number;
layout: PredefinedLayoutName; layout: PredefinedLayoutName;
colorscheme: LayoutColorscheme;
measurements: LayoutMeasurements;
} }
export type PredefinedLayout = (keySize: number) => { export type PredefinedLayout = {
visual: VisualLayout; visual: VisualLayout;
size: Vec2; 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 type Vec2 = [number, number];
export function add(x: Vec2, y: Vec2): Vec2 { export function add(x: Vec2, y: number | Vec2): Vec2 {
return [x[0] + y[0], x[1] + y[1]]; const z = typeof y === "number" ? [y, y] : y;
return [x[0] + z[0], x[1] + z[1]];
} }
export function neg(v: Vec2): Vec2 { export function neg(v: Vec2): Vec2 {
return [-v[0], -v[1]]; return [-v[0], -v[1]];
} }
export function scale(v: Vec2, amount: number): Vec2 {
return [v[0] * amount, v[1] * amount];
}