Skip to content

Commit 14bcaa7

Browse files
petejohansonpetejohanson
authored
feat: Improved key rendering for HID usages. (#53)
* Have short/med/long override labels for HID usages, and use CSS container queries to select the right one for display based on key sizing.
1 parent 1e4e8a2 commit 14bcaa7

File tree

9 files changed

+194
-113
lines changed

9 files changed

+194
-113
lines changed

‎package-lock.json‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"build-storybook": "storybook build"
1414
},
1515
"dependencies": {
16+
"@tailwindcss/container-queries": "^0.1.1",
1617
"@tauri-apps/api": "^2.0.0",
1718
"@tauri-apps/plugin-cli": "^2.0.0",
1819
"@zmkfirmware/zmk-studio-ts-client": "^0.0.18",

‎src/hid-usage-name-overrides.json‎

Lines changed: 79 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,85 @@
11
{
22
"7": {
3-
"30": "1",
4-
"31": "2",
5-
"32": "3",
6-
"33": "4",
7-
"34": "5",
8-
"35": "6",
9-
"36": "7",
10-
"37": "8",
11-
"38": "9",
12-
"39": "0",
13-
"40": "Ret",
14-
"41": "Esc",
15-
"42": "BSp",
16-
"44": "␣",
17-
"45": "-",
18-
"46": "=",
19-
"47": "{",
20-
"48": "}",
21-
"49": "\\",
22-
"50": "NUHS",
23-
"51": ";",
24-
"52": "'",
25-
"53": "`",
26-
"54": ",",
27-
"55": ".",
28-
"56": "/",
29-
"57": "Cap",
30-
"70": "PrSc",
31-
"71": "ScLk",
32-
"73": "Ins",
33-
"75": "PgUp",
34-
"76": "Del",
35-
"78": "PgDn",
36-
"79": "→",
37-
"80": "←",
38-
"81": "↓",
39-
"82": "↑",
40-
"83": "Num",
41-
"84": "/",
42-
"85": "*",
43-
"86": "-",
44-
"87": "+",
45-
"88": "Enter",
46-
"89": "1 End",
47-
"90": "2 ↓",
48-
"91": "3 PgDn",
49-
"92": "4 ←",
50-
"93": "5",
51-
"94": "6 →",
52-
"95": "7 Home",
53-
"96": "8 ↑",
54-
"97": "9 PgUp",
55-
"98": "0 Ins",
56-
"99": ". Del",
57-
"100": "NUBS",
58-
"103": "=",
59-
"133": ",",
60-
"134": "=",
61-
"176": "00",
62-
"177": "000",
63-
"224": "Ctrl",
64-
"225": "Shift",
65-
"226": "Alt",
66-
"227": "GUI",
67-
"228": "Ctrl",
68-
"229": "Shift",
69-
"230": "AltGr",
70-
"231": "GUI"
3+
"30": { "short": "1" },
4+
"31": { "short": "2" },
5+
"32": { "short": "3" },
6+
"33": { "short": "4" },
7+
"34": { "short": "5" },
8+
"35": { "short": "6" },
9+
"36": { "short": "7" },
10+
"37": { "short": "8" },
11+
"38": { "short": "9" },
12+
"39": { "short": "0" },
13+
"40": { "short": "Ret", "med": "Return" },
14+
"41": { "short": "Esc", "long": "Escape" },
15+
"42": { "short": "BkSp", "med": "BkSpc", "long": "Backspace" },
16+
"44": { "short": "␣", "med": "Space" },
17+
"45": { "short": "-", "med": "Dash" },
18+
"46": { "short": "=", "med": "Equals" },
19+
"47": { "short": "{" },
20+
"48": { "short": "}" },
21+
"49": { "short": "\\" },
22+
"50": { "short": "NUHS", "long": "NonUS Hash" },
23+
"51": { "short": ";" },
24+
"52": { "short": "'" },
25+
"53": { "short": "`" },
26+
"54": { "short": "," },
27+
"55": { "short": "." },
28+
"56": { "short": "/" },
29+
"57": { "short": "Cap", "long": "Caps Lock" },
30+
"70": { "short": "PrSc", "long": "Print Scr" },
31+
"71": { "short": "ScLk", "long": "ScrollLock" },
32+
"72": { "short": "Paus", "med": "Pause" },
33+
"73": { "short": "Ins", "med": "Insert" },
34+
"75": { "short": "PgUp", "med": "PageUp", "long": "Page Up" },
35+
"76": { "short": "Del", "med": "Delete" },
36+
"78": { "short": "PgDn", "med": "PageDn", "long": "Page Down" },
37+
"79": { "short": "→" },
38+
"80": { "short": "←" },
39+
"81": { "short": "↓" },
40+
"82": { "short": "↑" },
41+
"83": { "short": "Num", "med": "NumLck", "long": "Num Lock" },
42+
"84": { "short": "/" },
43+
"85": { "short": "*" },
44+
"86": { "short": "-" },
45+
"87": { "short": "+" },
46+
"88": { "short": "Ent", "med": "KP Ent", "long": "KP Enter" },
47+
"89": { "short": "1 En", "med": "1 End" },
48+
"90": { "short": "2 ↓" },
49+
"91": { "short": "3 PD", "med": "3 PgDn" },
50+
"92": { "short": "4 ←" },
51+
"93": { "short": "5" },
52+
"94": { "short": "6 →" },
53+
"95": { "short": "7 Hm", "med": "7 Home" },
54+
"96": { "short": "8 ↑" },
55+
"97": { "short": "9 PU", "med": "9 PgUp" },
56+
"98": { "short": "0 In", "med": "0 Ins", "long": "0 Insert" },
57+
"99": { "short": ". Dl", "med": ". Del", "long": ". Delete" },
58+
"101": { "short": "Appl", "med": "Appl", "long": "Applicat'n" },
59+
"102": { "short": "Power", "med": "Power" },
60+
"100": { "short": "NUBS" },
61+
"103": { "short": "=" },
62+
"133": { "short": "," },
63+
"134": { "short": "=" },
64+
"176": { "short": "00" },
65+
"177": { "short": "000" },
66+
"224": { "short": "Ctrl", "med": "L Ctrl" },
67+
"225": { "short": "Shft", "med": "L Shft", "long": "L Shift" },
68+
"226": { "short": "Alt", "med": "L Alt", "long": "Left Alt" },
69+
"227": { "short": "GUI", "med": "L GUI", "long": "Left GUI" },
70+
"228": { "short": "Ctrl", "med": "R Ctrl" },
71+
"229": { "short": "Shft", "med": "R Shft", "long": "R Shift" },
72+
"230": { "short": "AltG", "med": "AltGr" },
73+
"231": { "short": "GUI", "med": "R GUI", "long": "Right GUI" }
7174
},
7275
"12": {
73-
"111": "🔆",
74-
"112": "🔅",
75-
"181": "⇥",
76-
"182": "⇤",
77-
"205": "⏯️",
78-
"226": "🔇",
79-
"233": "🔊",
80-
"234": "🔉"
76+
"111": { "short": "🔆" },
77+
"112": { "short": "🔅" },
78+
"181": { "short": "⇥" },
79+
"182": { "short": "⇤" },
80+
"205": { "short": "⏯️" },
81+
"226": { "short": "🔇" },
82+
"233": { "short": "🔊" },
83+
"234": { "short": "🔉" }
8184
}
8285
}

‎src/hid-usages.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@
33
import { UsagePages } from "./keyboard-and-consumer-usage-tables.json";
44
import HidOverrides from "./hid-usage-name-overrides.json";
55

6-
const overrides: Record<string, Record<string, string>> = HidOverrides;
6+
interface HidLabels {
7+
short?: string;
8+
med?: string;
9+
long?: string;
10+
}
11+
12+
const overrides: Record<string, Record<string, HidLabels>> = HidOverrides;
713

814
export interface UsageId {
915
Id: number;
@@ -30,7 +36,17 @@ export const hid_usage_get_label = (
3036
usage_page: number,
3137
usage_id: number
3238
): string | undefined =>
33-
overrides[usage_page.toString()]?.[usage_id.toString()] ||
39+
overrides[usage_page.toString()]?.[usage_id.toString()]?.short ||
3440
UsagePages.find((p) => p.Id === usage_page)?.UsageIds?.find(
3541
(u) => u.Id === usage_id
3642
)?.Name;
43+
44+
export const hid_usage_get_labels = (
45+
usage_page: number,
46+
usage_id: number
47+
): { short?: string; med?: string; long?: string } =>
48+
overrides[usage_page.toString()]?.[usage_id.toString()] || {
49+
short: UsagePages.find((p) => p.Id === usage_page)?.UsageIds?.find(
50+
(u) => u.Id === usage_id
51+
)?.Name,
52+
};

‎src/keyboard/HidUsageLabel.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {
2+
hid_usage_get_labels,
3+
hid_usage_page_and_id_from_usage,
4+
} from "../hid-usages";
5+
6+
export interface HidUsageLabelProps {
7+
hid_usage: number;
8+
}
9+
10+
function remove_prefix(s?: string) {
11+
return s?.replace(/^Keyboard /, "");
12+
}
13+
14+
export const HidUsageLabel = ({ hid_usage }: HidUsageLabelProps) => {
15+
let [page, id] = hid_usage_page_and_id_from_usage(hid_usage);
16+
17+
// TODO: Do something with implicit mods!
18+
page &= 0xff;
19+
20+
let labels = hid_usage_get_labels(page, id);
21+
22+
return (
23+
<span
24+
className="@[10em]:before:content-[attr(data-long-content)] @[6em]:before:content-[attr(data-med-content)] before:content-[attr(aria-label)]"
25+
aria-label={remove_prefix(labels.short)}
26+
data-med-content={remove_prefix(labels.med || labels.short)}
27+
data-long-content={remove_prefix(
28+
labels.long || labels.med || labels.short
29+
)}
30+
/>
31+
);
32+
};

‎src/keyboard/Key.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const Key = ({
5656
const children = Children.map(props.children, (c) => (
5757
<div
5858
data-zoomer={hoverZoom}
59-
className="justify-self-center self-center row-start-2 row-end-3 col-start-2 col-end-3 font-keycap text-lg data-[zoomer=true]:group-hover:text-3xl"
59+
className="justify-self-center self-center row-start-2 row-end-3 col-start-2 col-end-3 font-keycap text-lg data-[zoomer=true]:group-hover:text-2xl"
6060
>
6161
{c}
6262
</div>
@@ -74,10 +74,10 @@ export const Key = ({
7474
data-zoomer={hoverZoom}
7575
className={`rounded${
7676
oneU > 20 ? "-md" : ""
77-
} transition-all duration-100 m-auto p-0 b-0 box-border grid grid-rows-[0_var(--zmk-key-center-height)_0] grid-cols-[0_var(--zmk-key-center-width)_0] data-[zoomer=true]:hover:grid-rows-[1em_var(--zmk-key-center-height)_1em] data-[zoomer=true]:hover:grid-cols-[1em_var(--zmk-key-center-width)_1em] shadow-[0_0_0_1px_inset] shadow-base-content data-[zoomer=true]:shadow-base-200 data-[zoomer=true]:hover:shadow-base-content data-[zoomer=true]:hover:z-50 text-base-content bg-base-100 aria-selected:bg-primary aria-selected:text-primary-content`}
77+
} transition-all duration-100 m-auto p-0 b-0 box-border grid grid-rows-[0_var(--zmk-key-center-height)_0] grid-cols-[0_var(--zmk-key-center-width)_0] data-[zoomer=true]:hover:grid-rows-[1em_var(--zmk-key-center-height)_1em] data-[zoomer=true]:hover:grid-cols-[1em_var(--zmk-key-center-width)_1em] shadow-[0_0_0_1px_inset] shadow-base-content data-[zoomer=true]:shadow-base-200 data-[zoomer=true]:hover:shadow-base-content data-[zoomer=true]:hover:z-50 text-base-content bg-base-100 aria-selected:bg-primary aria-selected:text-primary-content grow @container`}
7878
>
7979
{header && (
80-
<span className="p-0 b-0 m-0 text-xs w-full h-full text-nowrap justify-self-start row-start-1 row-end-2 col-start-1 col-end-4 hidden group-hover:inline-block group-hover:truncate">
80+
<span className="p-0 b-0 m-0 text-xs w-full h-full text-nowrap justify-self-start row-start-1 row-end-2 col-start-1 col-end-4 hidden group-hover:inline-block group-hover:truncate @md:underline">
8181
{header}
8282
</span>
8383
)}

‎src/keyboard/Keymap.tsx‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@ import {
55
import type { GetBehaviorDetailsResponse } from "@zmkfirmware/zmk-studio-ts-client/behaviors";
66

77
import {
8-
hid_usage_get_label,
9-
hid_usage_page_and_id_from_usage,
10-
} from "../hid-usages";
11-
12-
import { LayoutZoom, PhysicalLayout as PhysicalLayoutComp } from "./PhysicalLayout";
8+
LayoutZoom,
9+
PhysicalLayout as PhysicalLayoutComp,
10+
} from "./PhysicalLayout";
11+
import { HidUsageLabel } from "./HidUsageLabel";
1312

1413
type BehaviorMap = Record<number, GetBehaviorDetailsResponse>;
1514

@@ -48,15 +47,6 @@ export const Keymap = ({
4847
};
4948
}
5049

51-
let [page, id] = hid_usage_page_and_id_from_usage(
52-
keymap.layers[selectedLayerIndex].bindings[i].param1
53-
);
54-
55-
// TODO: Do something with implicit mods!
56-
page &= 0xff;
57-
58-
let label = hid_usage_get_label(page, id)?.replace(/^Keyboard /, "");
59-
6050
return {
6151
header:
6252
behaviors[keymap.layers[selectedLayerIndex].bindings[i].behaviorId]
@@ -68,7 +58,11 @@ export const Keymap = ({
6858
r: (k.r || 0) / 100.0,
6959
rx: (k.rx || 0) / 100.0,
7060
ry: (k.ry || 0) / 100.0,
71-
children: <span>{label}</span>,
61+
children: (
62+
<HidUsageLabel
63+
hid_usage={keymap.layers[selectedLayerIndex].bindings[i].param1}
64+
/>
65+
),
7266
};
7367
});
7468

0 commit comments

Comments
 (0)
⚡