feat: Improved key rendering for HID usages.

* 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.
zmkfirmware · Oct 9, 2024 · bf40ddc · bf40ddc
1 parent 1e4e8a2
commit bf40ddc
Show file tree

Hide file tree

Showing 10 changed files with 202 additions and 115 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tauri-apps/api": "^2.0.0",
     "@tauri-apps/plugin-cli": "^2.0.0",
     "@zmkfirmware/zmk-studio-ts-client": "^0.0.18",

diff --git a/src/hid-usage-name-overrides.json b/src/hid-usage-name-overrides.json
@@ -1,82 +1,85 @@
 {
   "7": {
-    "30": "1",
-    "31": "2",
-    "32": "3",
-    "33": "4",
-    "34": "5",
-    "35": "6",
-    "36": "7",
-    "37": "8",
-    "38": "9",
-    "39": "0",
-    "40": "Ret",
-    "41": "Esc",
-    "42": "BSp",
-    "44": "␣",
-    "45": "-",
-    "46": "=",
-    "47": "{",
-    "48": "}",
-    "49": "\\",
-    "50": "NUHS",
-    "51": ";",
-    "52": "'",
-    "53": "`",
-    "54": ",",
-    "55": ".",
-    "56": "/",
-    "57": "Cap",
-    "70": "PrSc",
-    "71": "ScLk",
-    "73": "Ins",
-    "75": "PgUp",
-    "76": "Del",
-    "78": "PgDn",
-    "79": "→",
-    "80": "←",
-    "81": "↓",
-    "82": "↑",
-    "83": "Num",
-    "84": "/",
-    "85": "*",
-    "86": "-",
-    "87": "+",
-    "88": "Enter",
-    "89": "1 End",
-    "90": "2 ↓",
-    "91": "3 PgDn",
-    "92": "4 ←",
-    "93": "5",
-    "94": "6 →",
-    "95": "7 Home",
-    "96": "8 ↑",
-    "97": "9 PgUp",
-    "98": "0 Ins",
-    "99": ". Del",
-    "100": "NUBS",
-    "103": "=",
-    "133": ",",
-    "134": "=",
-    "176": "00",
-    "177": "000",
-    "224": "Ctrl",
-    "225": "Shift",
-    "226": "Alt",
-    "227": "GUI",
-    "228": "Ctrl",
-    "229": "Shift",
-    "230": "AltGr",
-    "231": "GUI"
+    "30": { "short": "1" },
+    "31": { "short": "2" },
+    "32": { "short": "3" },
+    "33": { "short": "4" },
+    "34": { "short": "5" },
+    "35": { "short": "6" },
+    "36": { "short": "7" },
+    "37": { "short": "8" },
+    "38": { "short": "9" },
+    "39": { "short": "0" },
+    "40": { "short": "Ret", "med": "Return" },
+    "41": { "short": "Esc", "long": "Escape" },
+    "42": { "short": "BkSp", "med": "BkSpc", "long": "Backspace" },
+    "44": { "short": "␣", "med": "Space" },
+    "45": { "short": "-", "med": "Dash" },
+    "46": { "short": "=", "med": "Equals" },
+    "47": { "short": "{" },
+    "48": { "short": "}" },
+    "49": { "short": "\\" },
+    "50": { "short": "NUHS", "long": "NonUS Hash" },
+    "51": { "short": ";" },
+    "52": { "short": "'" },
+    "53": { "short": "`" },
+    "54": { "short": "," },
+    "55": { "short": "." },
+    "56": { "short": "/" },
+    "57": { "short": "Cap", "long": "Caps Lock" },
+    "70": { "short": "PrSc", "long": "Print Scr" },
+    "71": { "short": "ScLk", "long": "ScrollLock" },
+    "72": { "short": "Paus", "med": "Pause" },
+    "73": { "short": "Ins", "med": "Insert" },
+    "75": { "short": "PgUp", "med": "PageUp", "long": "Page Up" },
+    "76": { "short": "Del", "med": "Delete" },
+    "78": { "short": "PgDn", "med": "PageDn", "long": "Page Down" },
+    "79": { "short": "→" },
+    "80": { "short": "←" },
+    "81": { "short": "↓" },
+    "82": { "short": "↑" },
+    "83": { "short": "Num", "med": "NumLck", "long": "Num Lock" },
+    "84": { "short": "/" },
+    "85": { "short": "*" },
+    "86": { "short": "-" },
+    "87": { "short": "+" },
+    "88": { "short": "Ent", "med": "KP Ent", "long": "KP Enter" },
+    "89": { "short": "1 En", "med": "1 End" },
+    "90": { "short": "2 ↓" },
+    "91": { "short": "3 PD", "med": "3 PgDn" },
+    "92": { "short": "4 ←" },
+    "93": { "short": "5" },
+    "94": { "short": "6 →" },
+    "95": { "short": "7 Hm", "med": "7 Home" },
+    "96": { "short": "8 ↑" },
+    "97": { "short": "9 PU", "med": "9 PgUp" },
+    "98": { "short": "0 In", "med": "0 Ins", "long": "0 Insert" },
+    "99": { "short": ". Dl", "med": ". Del", "long": ". Delete" },
+    "101": { "short": "Appl", "med": "Appl", "long": "Applicat'n" },
+    "102": { "short": "Power", "med": "Power" },
+    "100": { "short": "NUBS" },
+    "103": { "short": "=" },
+    "133": { "short": "," },
+    "134": { "short": "=" },
+    "176": { "short": "00" },
+    "177": { "short": "000" },
+    "224": { "short": "Ctrl", "med": "L Ctrl" },
+    "225": { "short": "Shft", "med": "L Shft", "long": "L Shift" },
+    "226": { "short": "Alt", "med": "L Alt", "long": "Left Alt" },
+    "227": { "short": "GUI", "med": "L GUI", "long": "Left GUI" },
+    "228": { "short": "Ctrl", "med": "R Ctrl" },
+    "229": { "short": "Shft", "med": "R Shft", "long": "R Shift" },
+    "230": { "short": "AltG", "med": "AltGr" },
+    "231": { "short": "GUI", "med": "R GUI", "long": "Right GUI" }
   },
   "12": {
-    "111": "🔆",
-    "112": "🔅",
-    "181": "⇥",
-    "182": "⇤",
-    "205": "⏯️",
-    "226": "🔇",
-    "233": "🔊",
-    "234": "🔉"
+    "111": { "short": "🔆" },
+    "112": { "short": "🔅" },
+    "181": { "short": "⇥" },
+    "182": { "short": "⇤" },
+    "205": { "short": "⏯️" },
+    "226": { "short": "🔇" },
+    "233": { "short": "🔊" },
+    "234": { "short": "🔉" }
   }
 }
diff --git a/src/hid-usages.ts b/src/hid-usages.ts
@@ -3,7 +3,13 @@
 import { UsagePages } from "./keyboard-and-consumer-usage-tables.json";
 import HidOverrides from "./hid-usage-name-overrides.json";
 
-const overrides: Record<string, Record<string, string>> = HidOverrides;
+interface HidLabels {
+  short?: string;
+  med?: string;
+  long?: string;
+}
+
+const overrides: Record<string, Record<string, HidLabels>> = HidOverrides;
 
 export interface UsageId {
   Id: number;
@@ -30,7 +36,17 @@ export const hid_usage_get_label = (
   usage_page: number,
   usage_id: number
 ): string | undefined =>
-  overrides[usage_page.toString()]?.[usage_id.toString()] ||
+  overrides[usage_page.toString()]?.[usage_id.toString()]?.short ||
   UsagePages.find((p) => p.Id === usage_page)?.UsageIds?.find(
     (u) => u.Id === usage_id
   )?.Name;
+
+export const hid_usage_get_labels = (
+  usage_page: number,
+  usage_id: number
+): { short?: string; med?: string; long?: string } =>
+  overrides[usage_page.toString()]?.[usage_id.toString()] || {
+    short: UsagePages.find((p) => p.Id === usage_page)?.UsageIds?.find(
+      (u) => u.Id === usage_id
+    )?.Name,
+  };
diff --git a/src/keyboard/HidUsageLabel.tsx b/src/keyboard/HidUsageLabel.tsx
@@ -0,0 +1,32 @@
+import {
+  hid_usage_get_labels,
+  hid_usage_page_and_id_from_usage,
+} from "../hid-usages";
+
+export interface HidUsageLabelProps {
+  hid_usage: number;
+}
+
+function remove_prefix(s?: string) {
+  return s?.replace(/^Keyboard /, "");
+}
+
+export const HidUsageLabel = ({ hid_usage }: HidUsageLabelProps) => {
+  let [page, id] = hid_usage_page_and_id_from_usage(hid_usage);
+
+  // TODO: Do something with implicit mods!
+  page &= 0xff;
+
+  let labels = hid_usage_get_labels(page, id);
+
+  return (
+    <span
+      className="@[10em]:before:content-[attr(data-long-content)] @[6em]:before:content-[attr(data-med-content)] before:content-[attr(aria-label)]"
+      aria-label={remove_prefix(labels.short)}
+      data-med-content={remove_prefix(labels.med || labels.short)}
+      data-long-content={remove_prefix(
+        labels.long || labels.med || labels.short
+      )}
+    />
+  );
+};
diff --git a/src/keyboard/Key.stories.tsx b/src/keyboard/Key.stories.tsx
@@ -29,7 +29,13 @@ export const Normal: Story = {
     width: 1,
     height: 1,
     header: "Key Press",
-    children: [<span>A</span>],
+    children: [
+      <span
+        className="@[4em]:before:content-[attr(data-long-content)] before:content-[attr(aria-label)]"
+        aria-label="A"
+        data-long-content="AAAA"
+      ></span>,
+    ],
   },
 };
 
@@ -39,7 +45,7 @@ export const Selected: Story = {
     width: 1,
     height: 1,
     header: "Key Press",
-    children: [<span>B</span>],
+    children: [<span className="">B</span>],
   },
 };
 

diff --git a/src/keyboard/Key.tsx b/src/keyboard/Key.tsx
@@ -56,7 +56,7 @@ export const Key = ({
   const children = Children.map(props.children, (c) => (
     <div
       data-zoomer={hoverZoom}
-      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"
+      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"
     >
       {c}
     </div>
@@ -74,10 +74,10 @@ export const Key = ({
         data-zoomer={hoverZoom}
         className={`rounded${
           oneU > 20 ? "-md" : ""
-        } 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`}
+        } 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`}
       >
         {header && (
-          <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">
+          <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">
             {header}
           </span>
         )}

diff --git a/src/keyboard/Keymap.tsx b/src/keyboard/Keymap.tsx
@@ -5,11 +5,10 @@ import {
 import type { GetBehaviorDetailsResponse } from "@zmkfirmware/zmk-studio-ts-client/behaviors";
 
 import {
-  hid_usage_get_label,
-  hid_usage_page_and_id_from_usage,
-} from "../hid-usages";
-
-import { LayoutZoom, PhysicalLayout as PhysicalLayoutComp } from "./PhysicalLayout";
+  LayoutZoom,
+  PhysicalLayout as PhysicalLayoutComp,
+} from "./PhysicalLayout";
+import { HidUsageLabel } from "./HidUsageLabel";
 
 type BehaviorMap = Record<number, GetBehaviorDetailsResponse>;
 
@@ -48,15 +47,6 @@ export const Keymap = ({
       };
     }
 
-    let [page, id] = hid_usage_page_and_id_from_usage(
-      keymap.layers[selectedLayerIndex].bindings[i].param1
-    );
-
-    // TODO: Do something with implicit mods!
-    page &= 0xff;
-
-    let label = hid_usage_get_label(page, id)?.replace(/^Keyboard /, "");
-
     return {
       header:
         behaviors[keymap.layers[selectedLayerIndex].bindings[i].behaviorId]
@@ -68,7 +58,11 @@ export const Keymap = ({
       r: (k.r || 0) / 100.0,
       rx: (k.rx || 0) / 100.0,
       ry: (k.ry || 0) / 100.0,
-      children: <span>{label}</span>,
+      children: (
+        <HidUsageLabel
+          hid_usage={keymap.layers[selectedLayerIndex].bindings[i].param1}
+        />
+      ),
     };
   });