prescientmoon/keyswirl
prescientmoon/keyswirl
1
Fork 0
Code Activity

Fix text positioning on wide keys

Browse source
This commit is contained in:
prescientmoon 2024-02-28 10:11:01 +01:00
commit 67919277ad
Signed by: prescientmoon
SSH key fingerprint: SHA256:UUF9JT2s8Xfyv76b8ZuVL7XrmimH4o49p4b+iexbVH4
5 changed files with 1563 additions and 782 deletions
keyboards
kanata/laptop
lens.jsonlens.svg
qmk/ferris-sweep
config.lenslens.svg
layout-lens/src
render.ts

14
keyboards/kanata/laptop/lens.json
View file

@ -7,7 +7,7 @@
"keyStrokeWidth": 1.5 "keyStrokeWidth": 1.5
}, },
"keys": [ "keys": [
["Q", "!", "1", "f1"], ["Q", "+", "1", "f1"],
["A", "<", "6", "f6"], ["A", "<", "6", "f6"],
["X", ">", "", "f11"], ["X", ">", "", "f11"],
["W", "@", "2", "f2"], ["W", "@", "2", "f2"],
@ -21,22 +21,22 @@
["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", "&", "⏬", "copy"], ["L", "&", "⏬", "copy"],
["N", "_", "▼", "📋"], ["N", "^", "▼", "📋"],
["H", "|", "", "✂️"], ["H", "|", "", "✂️"],
["U", "*", "⏫", "⏩"], ["U", "*", "⏫", "⏩"],
["E", "/", "▲", "⏯️"], ["E", "/", "▲", "⏯️"],
[",", "\\", "", "⏪"], [",", "", "", "⏪"],
["Y", "~", "end", "🔊"], ["Y", "~", "end", "🔊"],
["I", "=", "►", "🔉"], ["I", "=", "►", "🔉"],
[".", "+", "", "🔇"], [".", "", "", "🔇"],
[":", "`", "🗑️", "🔆"], [":", "`", "🗑️", "🔆"],
["O", ";", "", "🔅"], ["O", ";", "", "🔅"],
["'", "\"", ""] ["'", "\"", ""]

1129
keyboards/kanata/laptop/lens.svg
View file

File diff suppressed because it is too large Load diff
Side by side Swipe

Before

(image error) Size: 71 KiB

After

(image error) Size: 72 KiB

Before After
Before After

6
keyboards/qmk/ferris-sweep/config.lens
View file

@ -38,7 +38,7 @@ section
end end
layer red topright #0b00d9 layer red topright #0b00d9
1 2 3 4 ⚔️ ⏪ ⏬ ⏫ ⏩ 🗑️ 1 2 3 4 ⚔️ 🏠 ⏬ ⏫ 🔚 🗑️
5 6 7 8 ⚔️ ◄ ▼ ▲ ► ⚔️ 5 6 7 8 ⚔️ ◄ ▼ ▲ ► ⚔️
9 0 ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ 9 0 ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️
⚔️ ⚔️ ⚔️ 🟪 ⚔️ ⚔️ ⚔️ 🟪
@ -46,8 +46,8 @@ section
layer blue topleft #b80034 layer blue topleft #b80034
! @ [ ( % ^ & * ~ ` ! @ [ ( % ^ & * ~ `
< { ] ) ? - _ / = ; < { ] ) ? | - / = ;
> } $ ? ⚔️ — | \ + " > } $ ? ⚔️ — _ \ + "
🟪 ⚔️ ⚔️ ⚔️ 🟪 ⚔️ ⚔️ ⚔️
end end

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

File diff suppressed because it is too large Load diff
Side by side Swipe

Before

(image error) Size: 74 KiB

After

(image error) Size: 76 KiB

Before After
Before After

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

@ -65,6 +65,7 @@ function renderKey(
) { ) {
const withPadding = applyKeyPadding(visual, measurements); const withPadding = applyKeyPadding(visual, measurements);
const center = keyCenter(visual); const center = keyCenter(visual);
const keySize = measurements.keySize - 2 * measurements.keyPadding;
const textOverlays = flags.text const textOverlays = flags.text
? [ ? [
@ -82,8 +83,8 @@ function renderKey(
tag( tag(
"text", "text",
{ {
x: withPadding.position[0] + withPadding.size[0] / 6, x: withPadding.position[0] + keySize / 10,
y: withPadding.position[1] + withPadding.size[1] / 6, y: withPadding.position[1] + keySize / 6,
fill: textColor(colorscheme, key.tlLayer, colorscheme.tlLayerColor), fill: textColor(colorscheme, key.tlLayer, colorscheme.tlLayerColor),
"font-size": "66%", "font-size": "66%",
...textAttribs, ...textAttribs,
@ -94,8 +95,8 @@ function renderKey(
tag( tag(
"text", "text",
{ {
x: withPadding.position[0] + (9 * withPadding.size[0]) / 10, x: withPadding.position[0] + (9 * keySize) / 10,
y: withPadding.position[1] + withPadding.size[1] / 6, y: withPadding.position[1] + keySize / 6,
fill: textColor(colorscheme, key.trLayer, colorscheme.trLayerColor), fill: textColor(colorscheme, key.trLayer, colorscheme.trLayerColor),
"font-size": "66%", "font-size": "66%",
...textAttribs, ...textAttribs,
@ -106,8 +107,8 @@ function renderKey(
tag( tag(
"text", "text",
{ {
x: withPadding.position[0] + withPadding.size[0] / 10, x: withPadding.position[0] + keySize / 10,
y: withPadding.position[1] + (5 * withPadding.size[1]) / 6, y: withPadding.position[1] + (5 * keySize) / 6,
fill: textColor(colorscheme, key.blLayer, colorscheme.blLayerColor), fill: textColor(colorscheme, key.blLayer, colorscheme.blLayerColor),
"font-size": "66%", "font-size": "66%",
...textAttribs, ...textAttribs,