Fix compiler error

Using { send } gives the resp a type instead of any

ui/src/components/JigglerSetting.tsx

@@ -30,7 +30,7 @@ export function JigglerSetting({
     },
   );
 
-  const [send] = useJsonRpc();
+  const { send } = useJsonRpc();
   const [timezones, setTimezones] = useState<string[]>([]);
 
   useEffect(() => {

ui/src/components/VirtualKeyboard.tsx

@@ -1,6 +1,6 @@
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { AnimatePresence, motion } from "framer-motion";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Keyboard from "react-simple-keyboard";
 
 import Card from "@components/Card";
@@ -15,7 +15,7 @@ import { cx } from "@/cva.config";
 import { useHidStore, useUiStore } from "@/hooks/stores";
 import useKeyboard from "@/hooks/useKeyboard";
 import { useKeyboardLayout } from "@/hooks/useKeyboardLayout";
-import { keys } from "@/keyboardMappings";
+import { keys, modifiers, latchingKeys, decodeModifiers } from "@/keyboardMappings";
 
 export const DetachIcon = ({ className }: { className?: string }) => {
   return <img src={DetachIconRaw} alt="Detach Icon" className={className} />;
@@ -26,11 +26,9 @@ const AttachIcon = ({ className }: { className?: string }) => {
 };
 
 function KeyboardWrapper() {
-  const [layoutName] = useState("default");
-
   const keyboardRef = useRef<HTMLDivElement>(null);
   const { isAttachedVirtualKeyboardVisible, setAttachedVirtualKeyboardVisibility } = useUiStore();
-  const { keysDownState, isVirtualKeyboardEnabled, setVirtualKeyboardEnabled } = useHidStore();
+  const { keysDownState, /* keyboardLedState,*/ isVirtualKeyboardEnabled, setVirtualKeyboardEnabled } = useHidStore();
   const { handleKeyPress, executeMacro } = useKeyboard();
 
   const [isDragging, setIsDragging] = useState(false);
@@ -39,20 +37,29 @@ function KeyboardWrapper() {
 
   const { keyboard }  = useKeyboardLayout();
 
-  /*
-  // These will be used to display the currently pressed keys and modifiers on the virtual keyboard
+  //const isCapsLockActive = useMemo(() => {
+  //  return (keyboardLedState.caps_lock);
+  //}, [keyboardLedState]);
 
-  // used to show the modifier keys that are in the "down state" on the virtual keyboard
-  const keyNamesFromModifierMask = (activeModifiers: number): string[] => {
-    return Object.entries(modifiers).filter(m => (activeModifiers & m[1]) !== 0).map(m => m[0]);
-  }
+  const { isShiftActive, /*isControlActive, isAltActive, isMetaActive, isAltGrActive*/ } = useMemo(() => {
+    return decodeModifiers(keysDownState.modifier);
+  }, [keysDownState]);
 
-  // used to show the regular keys that are in the "down state" on the virtual keyboard
-  const keyNamesFromDownKeys = (downKeys: number[]) => {
-    return Object.entries(keys).filter(([_, code]) => downKeys.includes(code)).map(([name, _]) => name);
-  }
-  */
+  const mainLayoutName = useMemo(() => {
+   const layoutName = isShiftActive ? "shift": "default";
+   return layoutName;
+  }, [isShiftActive]);
 
+  const keyNamesForDownKeys = useMemo(() => {
+    const activeModifierMask = keysDownState.modifier || 0;
+    const modifierNames = Object.entries(modifiers).filter(([_, mask]) => (activeModifierMask & mask) !== 0).map(([name, _]) => name);
+
+    const keysDown = keysDownState.keys || [];
+    const keyNames = Object.entries(keys).filter(([_, value]) => keysDown.includes(value)).map(([name, _]) => name);
+
+    return [...modifierNames,...keyNames, ' ']; // we have to have at least one space to avoid keyboard whining
+  }, [keysDownState]);
+  
   const startDrag = useCallback((e: MouseEvent | TouchEvent) => {
     if (!keyboardRef.current) return;
     if (e instanceof TouchEvent && e.touches.length > 1) return;
@@ -122,10 +129,18 @@ function KeyboardWrapper() {
     };
   }, [endDrag, onDrag, startDrag]);
 
+  const onKeyUp = useCallback(
+    async (_: string, e: MouseEvent | undefined) => {
+      e?.preventDefault();
+      e?.stopPropagation();
+    },
+    []
+  );
+
   const onKeyDown = useCallback(
-    async (key: string) => {
-      const latchingKeys = ["CapsLock", "ScrollLock", "NumLock", "Meta", "Compose", "Kana"];
-      const dynamicKeys = ["ShiftLeft", "ShiftRight", "ControlLeft", "ControlRight", "AltLeft", "AltRight", "MetaLeft", "MetaRight"];
+    async (key: string, e: MouseEvent | undefined) => {
+      e?.preventDefault();
+      e?.stopPropagation();
 
       // handle the fake key-macros we have defined for common combinations
       if (key === "CtrlAltDelete") {
@@ -152,8 +167,8 @@ function KeyboardWrapper() {
       }
 
       // if they press any of the dynamic keys, we send a keypress down event but we don't release it until they click it again
-      if (dynamicKeys.includes(key)) {
-        const currentlyDown = keysDownState.keys.includes(keys[key]);
+      if (Object.keys(modifiers).includes(key)) {
+        const currentlyDown = keyNamesForDownKeys.includes(key);
         console.debug(`Dynamic key pressed: ${key} was currently down: ${currentlyDown}, toggling state`);
         handleKeyPress(keys[key], !currentlyDown)
         return;
@@ -165,16 +180,9 @@ function KeyboardWrapper() {
       handleKeyPress(keys[cleanKey], true);
       setTimeout(() => handleKeyPress(keys[cleanKey], false), 50);
     },
-    [executeMacro, handleKeyPress, keysDownState],
+    [executeMacro, handleKeyPress, keyNamesForDownKeys],
   );
 
-  // TODO handle the display of down keys and the layout change for shift/caps lock
-  //  const { isCapsLockActive } = useShallow(useHidStore());
-  // // Handle toggle of layout for shift or caps lock
-  // const toggleLayout = () => {
-  //  setLayoutName(prevLayout => (prevLayout === "default" ? "shift" : "default"));
-  // };
-
   return (
     <div
       className="transition-all duration-500 ease-in-out"
@@ -248,37 +256,68 @@ function KeyboardWrapper() {
                   <div className="flex flex-col bg-blue-50/80 md:flex-row dark:bg-slate-700">
                     <Keyboard
                       baseClass="simple-keyboard-main"
-                      layoutName={layoutName}
+                      layoutName={mainLayoutName}
                       onKeyPress={onKeyDown}
+                      onKeyReleased={onKeyUp}
                       buttonTheme={[
                         {
                           class: "combination-key",
                           buttons: "CtrlAltDelete AltMetaEscape CtrlAltBackspace",
                         },
+                        {
+                          class: "down-key",
+                          buttons: keyNamesForDownKeys.join(" "),
+                        },
                       ]}
                       display={keyboard.keyDisplayMap}
                       layout={keyboard.virtualKeyboard.main}
                       disableButtonHold={true}
                       debug={false}
+                      preventMouseDownDefault={true}
+                      preventMouseUpDefault={true}
+                      stopMouseDownPropagation={true}
+                      stopMouseUpPropagation={true}
+                      physicalKeyboardHighlight={true}
+                      physicalKeyboardHighlightPress={true}
+                      physicalKeyboardHighlightPreventDefault={true}
+                      enableLayoutCandidates={false}
                     />
 
                     <div className="controlArrows">
                       <Keyboard
                         baseClass="simple-keyboard-control"
                         theme="simple-keyboard hg-theme-default hg-layout-default"
-                        layoutName={layoutName}
+                        layoutName="default"
                         onKeyPress={onKeyDown}
+                        onKeyReleased={onKeyUp}
                         display={keyboard.keyDisplayMap}
                         layout={keyboard.virtualKeyboard.control}
                         debug={false}
+                        preventMouseDownDefault={true}
+                        preventMouseUpDefault={true}
+                        stopMouseDownPropagation={true}
+                        stopMouseUpPropagation={true}
+                        physicalKeyboardHighlight={true}
+                        physicalKeyboardHighlightPress={true}
+                        physicalKeyboardHighlightPreventDefault={true}
+                        enableLayoutCandidates={false}
                       />
                       <Keyboard
                         baseClass="simple-keyboard-arrows"
                         theme="simple-keyboard hg-theme-default hg-layout-default"
                         onKeyPress={onKeyDown}
+                        onKeyReleased={onKeyUp}
                         display={keyboard.keyDisplayMap}
                         layout={keyboard.virtualKeyboard.arrows}
                         debug={false}
+                        preventMouseDownDefault={true}
+                        preventMouseUpDefault={true}
+                        stopMouseDownPropagation={true}
+                        stopMouseUpPropagation={true}
+                        physicalKeyboardHighlight={true}
+                        physicalKeyboardHighlightPress={true}
+                        physicalKeyboardHighlightPreventDefault={true}
+                        enableLayoutCandidates={false}
                       />
                     </div>
                     { /* TODO add optional number pad */ }

ui/src/components/popovers/PasteModal.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { LuCornerDownLeft } from "react-icons/lu";
 import { ExclamationCircleIcon } from "@heroicons/react/16/solid";
 import { useClose } from "@headlessui/react";

ui/src/hooks/useKeyboard.ts

@@ -136,6 +136,7 @@ export default function useKeyboard() {
   const handleKeyPress = useCallback(
     async (key: number, press: boolean) => {
       if (rpcDataChannel?.readyState !== "open") return;
+      if ((key || 0) === 0) return; // ignore zero key presses (they are bad mappings)
 
       if (keyPressReportApiAvailable) {
         // if the keyPress api is available, we can just send the key press event

ui/src/index.css

@@ -315,6 +315,11 @@ video::-webkit-media-controls {
   @apply inline-flex h-auto! w-auto! grow-0 py-1 text-xs;
 }
 
+.hg-theme-default .hg-row .down-key {
+  background: rgb(28, 28, 28);
+  @apply text-white! font-bold!;
+}
+
 .hg-theme-default .hg-row .hg-button-container,
 .hg-theme-default .hg-row .hg-button:not(:last-child) {
   @apply mr-[2px]! md:mr-[5px]!;

ui/src/keyboardLayouts/de_DE.ts

@@ -10,107 +10,137 @@ const keyHat: KeyCombo = { key: "Backquote" } // accent circonflexe (accent hat)
 const keyGrave: KeyCombo = { key: "Equal", shift: true } // accent grave, mark ` placed above the letter
 
 const chars = {
+  a: { key: "KeyA" },
+  "á": { key: "KeyA", accentKey: keyAcute },
+  "â": { key: "KeyA", accentKey: keyHat },
+  "à": { key: "KeyA", accentKey: keyGrave },
   A: { key: "KeyA", shift: true },
   "Á": { key: "KeyA", shift: true, accentKey: keyAcute },
   "Â": { key: "KeyA", shift: true, accentKey: keyHat },
   "À": { key: "KeyA", shift: true, accentKey: keyGrave },
+  "☺": { key: "KeyA", altRight: true }, // white smiling face ☺
+  b: { key: "KeyB" },
   B: { key: "KeyB", shift: true },
+  "‹": { key: "KeyB", altRight: true }, // single left-pointing angle quotation mark, ‹
+  c: { key: "KeyC" },
   C: { key: "KeyC", shift: true },
+  "\u202f": { key: "KeyC", altRight: true }, // narrow no-break space
+  d: { key: "KeyD" },
   D: { key: "KeyD", shift: true },
+  "′": { key: "KeyD", altRight: true }, // prime, mark ′ placed above the letter
+  e: { key: "KeyE" },
+  "é": { key: "KeyE", accentKey: keyAcute },
+  "ê": { key: "KeyE", accentKey: keyHat },
+  "è": { key: "KeyE", accentKey: keyGrave },
+  "€": { key: "KeyE", altRight: true },
   E: { key: "KeyE", shift: true },
   "É": { key: "KeyE", shift: true, accentKey: keyAcute },
   "Ê": { key: "KeyE", shift: true, accentKey: keyHat },
   "È": { key: "KeyE", shift: true, accentKey: keyGrave },
-  F: { key: "KeyF", shift: true },
-  G: { key: "KeyG", shift: true },
-  H: { key: "KeyH", shift: true },
-  I: { key: "KeyI", shift: true },
-  "Í": { key: "KeyI", shift: true, accentKey: keyAcute },
-  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
-  "Ì": { key: "KeyI", shift: true, accentKey: keyGrave },
-  J: { key: "KeyJ", shift: true },
-  K: { key: "KeyK", shift: true },
-  L: { key: "KeyL", shift: true },
-  M: { key: "KeyM", shift: true },
-  N: { key: "KeyN", shift: true },
-  O: { key: "KeyO", shift: true },
-  "Ó": { key: "KeyO", shift: true, accentKey: keyAcute },
-  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
-  "Ò": { key: "KeyO", shift: true, accentKey: keyGrave },
-  P: { key: "KeyP", shift: true },
-  Q: { key: "KeyQ", shift: true },
-  R: { key: "KeyR", shift: true },
-  S: { key: "KeyS", shift: true },
-  T: { key: "KeyT", shift: true },
-  U: { key: "KeyU", shift: true },
-  "Ú": { key: "KeyU", shift: true, accentKey: keyAcute },
-  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
-  "Ù": { key: "KeyU", shift: true, accentKey: keyGrave },
-  V: { key: "KeyV", shift: true },
-  W: { key: "KeyW", shift: true },
-  X: { key: "KeyX", shift: true },
-  Y: { key: "KeyZ", shift: true },
-  Z: { key: "KeyY", shift: true },
-  a: { key: "KeyA" },
-  "á": { key: "KeyA", accentKey: keyAcute },
-  "â": { key: "KeyA", accentKey: keyHat },
-  "à": { key: "KeyA", accentKey: keyGrave},
-  b: { key: "KeyB" },
-  c: { key: "KeyC" },
-  d: { key: "KeyD" },
-  e: { key: "KeyE" },
-  "é": { key: "KeyE", accentKey: keyAcute},
-  "ê": { key: "KeyE", accentKey: keyHat },
-  "è": { key: "KeyE", accentKey: keyGrave },
-  "€": { key: "KeyE", altRight: true },
   f: { key: "KeyF" },
+  F: { key: "KeyF", shift: true },
+  "˟": { key: "KeyF", deadKey: true, altRight: true }, // modifier letter cross accent, ˟
+  G: { key: "KeyG", shift: true },
   g: { key: "KeyG" },
+  "ẞ": { key: "KeyG", altRight: true }, // capital sharp S, ẞ
   h: { key: "KeyH" },
+  H: { key: "KeyH", shift: true },
+  "ˍ": { key: "KeyH", deadKey: true, altRight: true }, // modifier letter low macron, ˍ
   i: { key: "KeyI" },
   "í": { key: "KeyI", accentKey: keyAcute },
   "î": { key: "KeyI", accentKey: keyHat },
   "ì": { key: "KeyI", accentKey: keyGrave },
+  I: { key: "KeyI", shift: true },
+  "Í": { key: "KeyI", shift: true, accentKey: keyAcute },
+  "Î": { key: "KeyI", shift: true, accentKey: keyHat },
+  "Ì": { key: "KeyI", shift: true, accentKey: keyGrave },
+  "˜": { key: "KeyI", deadKey: true, altRight: true }, // tilde accent, mark ˜ placed above the letter
   j: { key: "KeyJ" },
+  J: { key: "KeyJ", shift: true },
+  "¸": { key: "KeyJ", deadKey: true, altRight: true }, // cedilla accent, mark ¸ placed below the letter
   k: { key: "KeyK" },
+  K: { key: "KeyK", shift: true },
   l: { key: "KeyL" },
+  L: { key: "KeyL", shift: true },
+  "ˏ": { key: "KeyL", deadKey: true, altRight: true }, // modifier letter reversed comma, ˏ
   m: { key: "KeyM" },
+  M: { key: "KeyM", shift: true },
   "µ": { key: "KeyM", altRight: true },
   n: { key: "KeyN" },
+  N: { key: "KeyN", shift: true },
+  "–": { key: "KeyN", altRight: true }, // en dash, –
   o: { key: "KeyO" },
   "ó": { key: "KeyO", accentKey: keyAcute },
   "ô": { key: "KeyO", accentKey: keyHat },
   "ò": { key: "KeyO", accentKey: keyGrave },
+  O: { key: "KeyO", shift: true },
+  "Ó": { key: "KeyO", shift: true, accentKey: keyAcute },
+  "Ô": { key: "KeyO", shift: true, accentKey: keyHat },
+  "Ò": { key: "KeyO", shift: true, accentKey: keyGrave },
+  "˚": { key: "KeyO", deadKey: true, altRight: true }, // ring above, ˚
   p: { key: "KeyP" },
+  P: { key: "KeyP", shift: true },
+  "ˀ": { key: "KeyP", deadKey: true, altRight: true }, // modifier letter apostrophe, ʾ
   q: { key: "KeyQ" },
+  Q: { key: "KeyQ", shift: true },
   "@": { key: "KeyQ", altRight: true },
+  R: { key: "KeyR", shift: true },
   r: { key: "KeyR" },
+  "˝": { key: "KeyR", deadKey: true, altRight: true }, // double acute accent, mark ˝ placed above the letter
+  S: { key: "KeyS", shift: true },
   s: { key: "KeyS" },
+  "″": { key: "KeyS", altRight: true }, // double prime, mark ″ placed above the letter
+  T: { key: "KeyT", shift: true },
   t: { key: "KeyT" },
+  "ˇ": { key: "KeyT", deadKey: true, altRight: true }, // caron/hacek accent, mark ˇ placed above the letter
   u: { key: "KeyU" },
   "ú": { key: "KeyU", accentKey: keyAcute },
   "û": { key: "KeyU", accentKey: keyHat },
   "ù": { key: "KeyU", accentKey: keyGrave },
+  U: { key: "KeyU", shift: true },
+  "Ú": { key: "KeyU", shift: true, accentKey: keyAcute },
+  "Û": { key: "KeyU", shift: true, accentKey: keyHat },
+  "Ù": { key: "KeyU", shift: true, accentKey: keyGrave },
+  "˘": { key: "KeyU", deadKey: true, altRight: true }, // breve accent, ˘ placed above the letter
   v: { key: "KeyV" },
+  V: { key: "KeyV", shift: true },
+  "«": { key: "KeyV", altRight: true }, // left-pointing double angle quotation mark, «
   w: { key: "KeyW" },
+  W: { key: "KeyW", shift: true },
+  "¯": { key: "KeyW", deadKey: true, altRight: true }, // macron accent, mark ¯ placed above the letter
   x: { key: "KeyX" },
+  X: { key: "KeyX", shift: true },
+  "»": { key: "KeyX", altRight: true },
+  // cross key between shift and y (aka OEM 102 key)
   y: { key: "KeyZ" },
+  Y: { key: "KeyZ", shift: true },
+  "›": { key: "KeyZ", altRight: true }, // single right-pointing angle quotation mark, ›
   z: { key: "KeyY" },
+  Z: { key: "KeyY", shift: true },
+  "¨": { key: "KeyY", deadKey: true, altRight: true }, // diaeresis accent, mark ¨ placed above the letter
   "°": { key: "Backquote", shift: true },
   "^": { key: "Backquote", deadKey: true },
+  "|": { key: "Backquote", altRight: true },
   1: { key: "Digit1" },
   "!": { key: "Digit1", shift: true },
+  "’": { key: "Digit1", altRight: true }, // single quote, mark ’ placed above the letter
   2: { key: "Digit2" },
   "\"": { key: "Digit2", shift: true },
   "²": { key: "Digit2", altRight: true },
+  "<": { key: "Digit2", altRight: true }, // non-US < and >
   3: { key: "Digit3" },
   "§": { key: "Digit3", shift: true },
   "³": { key: "Digit3", altRight: true },
+  ">": { key: "Digit3", altRight: true }, // non-US < and >
   4: { key: "Digit4" },
   "$": { key: "Digit4", shift: true },
+  "—": { key: "Digit4", altRight: true }, // em dash, — 
   5: { key: "Digit5" },
   "%": { key: "Digit5", shift: true },
+  "¡": { key: "Digit5", altRight: true }, // inverted exclamation mark, ¡
   6: { key: "Digit6" },
   "&": { key: "Digit6", shift: true },
+  "¿": { key: "Digit6", altRight: true }, // inverted question mark, ¿
   7: { key: "Digit7" },
   "/": { key: "Digit7", shift: true },
   "{": { key: "Digit7", altRight: true },
@@ -126,40 +156,192 @@ const chars = {
   "ß": { key: "Minus" },
   "?": { key: "Minus", shift: true },
   "\\": { key: "Minus", altRight: true },
-  "´": { key: "Equal", deadKey: true },
-  "`": { key: "Equal", shift: true, deadKey: true },
+  "´": { key: "Equal", deadKey: true }, // accent acute, mark ´ placed above the letter
+  "`": { key: "Equal", shift: true, deadKey: true },  // accent grave, mark ` placed above the letter
+  "˙": { key: "Equal", control: true, altRight: true, deadKey: true }, // acute accent, mark ˙ placed above the letter
   "ü": { key: "BracketLeft" },
   "Ü": { key: "BracketLeft", shift: true },
+  Escape: { key: "BracketLeft", control: true },
+  "ʼ": { key: "BracketLeft", altRight: true }, // modifier letter apostrophe, ʼ
   "+": { key: "BracketRight" },
   "*": { key: "BracketRight", shift: true },
+  Control: { key: "BracketRight", control: true },
   "~": { key: "BracketRight", altRight: true },
   "ö": { key: "Semicolon" },
   "Ö": { key: "Semicolon", shift: true },
+  "ˌ": { key: "Semicolon", deadkey: true, altRight: true }, // modifier letter low vertical line, ˌ
   "ä": { key: "Quote" },
   "Ä": { key: "Quote", shift: true },
+  "˗": { key: "Quote", deadKey: true, altRight: true }, // modifier letter minus sign, ˗
   "#": { key: "Backslash" },
   "'": { key: "Backslash", shift: true },
+  "−": { key: "Backslash", altRight: true }, // minus sign, −
   ",": { key: "Comma" },
   ";": { key: "Comma", shift: true },
+  "\u2011": { key: "Comma", altRight: true }, // non-breaking hyphen, ‑
   ".": { key: "Period" },
   ":": { key: "Period", shift: true },
+  "·": { key: "Period", altRight: true }, // middle dot, ·
   "-": { key: "Slash" },
   "_": { key: "Slash", shift: true },
-  "<": { key: "IntlBackslash" },
-  ">": { key: "IntlBackslash", shift: true },
-  "|": { key: "IntlBackslash", altRight: true },
+  "\u00ad": { key: "Slash", altRight: true }, // soft hyphen, ­
   " ": { key: "Space" },
   "\n": { key: "Enter" },
   Enter: { key: "Enter" },
   Tab: { key: "Tab" },
 } as Record<string, KeyCombo>;
 
+export const keyDisplayMap: Record<string, string> = {
+  ...en_US.keyDisplayMap,
+  // now override the English keyDisplayMap with German specific keys
+
+  // Combination keys
+  CtrlAltDelete: "Strg + Alt + Entf",
+  CtrlAltBackspace: "Strg + Alt + ←",
+
+  // German action keys
+  AltLeft: "Alt",
+  AltRight: "AltGr",
+  Backspace: "Rücktaste",
+  "(Backspace)": "Rücktaste",
+  CapsLock: "Feststelltaste",
+  Clear: "Entf",
+  ControlLeft: "Strg",
+  ControlRight: "Strg",
+  Delete: "Entf",
+  End: "Ende",
+  Enter: "Eingabe",
+  Escape: "Esc",
+  Home: "Pos1",
+  Insert: "Einfg",
+  Menu: "Menü",
+  MetaLeft: "Meta",
+  MetaRight: "Meta",
+  PageDown: "Bild ↓",
+  PageUp: "Bild ↑",
+  ShiftLeft: "Umschalt",
+  ShiftRight: "Umschalt",
+
+  // German umlauts and ß
+  BracketLeft: "ü",
+  "(BracketLeft)": "Ü",
+  Semicolon: "ö",
+  "(Semicolon)": "Ö",
+  Quote: "ä",
+  "(Quote)": "Ä",
+  Minus: "ß",
+  "(Minus)": "?",
+  Equal: "´",
+  "(Equal)": "`",
+  Backslash: "#",
+  "(Backslash)": "'",
+
+  // Shifted Numbers
+  "(Digit2)": "\"",
+  "(Digit3)": "§",
+  "(Digit6)": "&",
+  "(Digit7)": "/",
+  "(Digit8)": "(",
+  "(Digit9)": ")",
+  "(Digit0)": "=",
+
+  // Additional German symbols
+  Backquote: "^",
+  "(Backquote)": "°",
+  Comma: ",",
+  "(Comma)": ";",
+  Period: ".",
+  "(Period)": ":",
+  Slash: "-",
+  "(Slash)": "_",
+
+  // Numpad
+  NumpadDecimal: "Num ,",
+  NumpadEnter: "Num Eingabe",
+  NumpadInsert: "Einfg",
+  NumpadDelete: "Entf",
+
+  // Modals
+  PrintScreen: "Druck",
+  ScrollLock: "Rollen",
+  "(Pause)": "Unterbr",
+}
+
+export const modifierDisplayMap: Record<string, string> = {
+  ShiftLeft: "Umschalt (links)",
+  ShiftRight: "Umschalt (rechts)",
+  ControlLeft: "Strg (links)",
+  ControlRight: "Strg (rechts)",
+  AltLeft: "Alt",
+  AltRight: "AltGr",
+  MetaLeft: "Meta (links)",
+  MetaRight: "Meta (rechts)",
+  AltGr: "AltGr",
+} as Record<string, string>;
+
+export const virtualKeyboard = {
+  main: {
+    default: [
+      "CtrlAltDelete AltMetaEscape CtrlAltBackspace",
+      "Escape  F1 F2 F3 F4  F5 F6 F7 F8  F9 F10 F11 F12",
+      "Backquote Digit1 Digit2 Digit3 Digit4 Digit5 Digit6 Digit7 Digit8 Digit9 Digit0 Minus Equal Backspace",
+      "Tab KeyQ KeyW KeyE KeyR KeyT KeyY KeyU KeyI KeyO KeyP BracketLeft BracketRight",
+      "CapsLock KeyA KeyS KeyD KeyF KeyG KeyH KeyJ KeyK KeyL Semicolon Quote Backslash Enter",
+      "ShiftLeft KeyZ KeyX KeyC KeyV KeyB KeyN KeyM Comma Period Slash ShiftRight",
+      "ControlLeft MetaLeft AltLeft Space AltGr MetaRight Menu ControlRight",
+    ],
+    shift: [
+      "CtrlAltDelete AltMetaEscape CtrlAltBackspace",
+      "Escape F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12",
+      "(Backquote) (Digit1) (Digit2) (Digit3) (Digit4) (Digit5) (Digit6) (Digit7) (Digit8) (Digit9) (Digit0) (Minus) (Equal) (Backspace)",
+      "Tab (KeyQ) (KeyW) (KeyE) (KeyR) (KeyT) (KeyY) (KeyU) (KeyI) (KeyO) (KeyP) (BracketLeft) (BracketRight) (Backslash)",
+      "CapsLock (KeyA) (KeyS) (KeyD) (KeyF) (KeyG) (KeyH) (KeyJ) (KeyK) (KeyL) (Semicolon) (Quote) Enter",
+      "ShiftLeft (KeyZ) (KeyX) (KeyC) (KeyV) (KeyB) (KeyN) (KeyM) (Comma) (Period) (Slash) ShiftRight",
+      "ControlLeft MetaLeft AltLeft Space AltGr MetaRight Menu ControlRight",
+    ]
+  },
+  control: {
+    default: [
+      "PrintScreen ScrollLock Pause",
+      "Insert Home PageUp",
+      "Delete End PageDown"
+    ],
+    shift: [
+      "(PrintScreen) ScrollLock (Pause)",
+      "Insert Home PageUp",
+      "Delete End PageDown"
+    ],
+  },
+
+  arrows: {
+    default: [
+      " ArrowUp ",
+      "ArrowLeft ArrowDown ArrowRight"],
+  },
+
+  numpad: {
+    numlocked: [
+      "NumLock NumpadDivide NumpadMultiply NumpadSubtract",
+      "Numpad7 Numpad8 Numpad9 NumpadAdd",
+      "Numpad4 Numpad5 Numpad6",
+      "Numpad1 Numpad2 Numpad3 NumpadEnter",
+      "Numpad0 NumpadDecimal",
+    ],
+    default: [
+      "NumLock NumpadDivide NumpadMultiply NumpadSubtract",
+      "Home ArrowUp PageUp NumpadAdd",
+      "ArrowLeft Clear ArrowRight",
+      "End ArrowDown PageDown NumpadEnter",
+      "NumpadInsert NumpadDelete",
+    ],
+  }
+}
+
 export const de_DE: KeyboardLayout = {
   isoCode: isoCode,
   name: name,
   chars: chars,
-  // TODO need to localize these maps and layouts
-  keyDisplayMap: en_US.keyDisplayMap, 
-  modifierDisplayMap: en_US.modifierDisplayMap,
-  virtualKeyboard: en_US.virtualKeyboard
+  keyDisplayMap: keyDisplayMap,
+  modifierDisplayMap: modifierDisplayMap,
+  virtualKeyboard: virtualKeyboard
 };

ui/src/keyboardLayouts/en_US.ts

@@ -3,12 +3,14 @@ import { KeyboardLayout, KeyCombo } from "../keyboardLayouts"
 const name = "English (US)";
 const isoCode = "en-US";
 
-// dead keys
+// dead keys for "international" 101 keyboards TODO
+/*
 const keyAcute = { key: "Quote", control: true, menu: true, mark: "´" } // acute accent
 const keyCedilla = { key: ".", shift: true, alt: true, mark: "¸" } // cedilla accent
 const keyComma = { key: "BracketRight", shift: true, altRight: true, mark: "," } // comma accent
 const keyDiaeresis = { key: "Quote", shift: true, control: true, menu: true, mark: "¨" } // diaeresis accent
 const keyDegree = { key: "Semicolon", shift: true, control: true, menu: true, mark: "°" } // degree accent
+*/
 
 export const chars = {
   A: { key: "KeyA", shift: true },
@@ -141,7 +143,7 @@ export const keyDisplayMap: Record<string, string> = {
   CtrlAltDelete: "Ctrl + Alt + Delete",
   AltMetaEscape: "Alt + Meta + Escape",
   CtrlAltBackspace: "Ctrl + Alt + Backspace",
-  AltGraph: "AltGr",
+  AltGr: "AltGr",
   AltLeft: "Alt",
   AltRight: "Alt",
   ArrowDown: "↓",
@@ -160,6 +162,7 @@ export const keyDisplayMap: Record<string, string> = {
   Escape: "Esc",
   Home: "Home",
   Insert: "Insert",
+  Menu: "Menu",
   MetaLeft: "Meta",
   MetaRight: "Meta",
   PageDown: "PgDn",

ui/src/keyboardLayouts/pl_PL_t.ts

@@ -36,9 +36,11 @@ const chars = {
   b: { key: "KeyB" },
 
   C: { key: "KeyC", shift: true },
+  "Ć": { key: "KeyC", shift: true, accentKey: keyAcute },
   "Č": { key: "KeyC", shift: true, accentKey: keyHacek },
   "Ç": { key: "KeyC", shift: true, accentKey: keyCedilla }, //  "Ç": { key: "Backslash", shift: true },
   c: { key: "KeyC" },
+  "ć": { key: "KeyC", shift: false, accentKey: keyAcute },
   "č": { key: "KeyC", accentKey: keyHacek },
   "ç": { key: "KeyC", accentKey: keyCedilla }, //  "ç": { key: "Backslash" },
 
@@ -56,7 +58,7 @@ const chars = {
   "È": { key: "KeyE", shift: true, accentKey: keyGrave },
   "Ẽ": { key: "KeyE", shift: true, accentKey: keyTylda },
   e: { key: "KeyE" },
-  "ę": { key: "KeyE", ctrl: true, meta: true, accentKey: keyOgonek },
+  "ę": { key: "KeyE", ctrl: true, alt: true, accentKey: keyOgonek },
   "ë": { key: "KeyE", accentKey: keyDiaresis },
   "ě": { key: "KeyE", accentKey: keyHacek },
   "é": { key: "KeyE", accentKey: keyAcute },
@@ -86,7 +88,6 @@ const chars = {
   "ì": { key: "KeyI", accentKey: keyGrave },
   "ĩ": { key: "KeyI", accentKey: keyTylda },
 
-
   J: { key: "KeyJ", shift: true },
   j: { key: "KeyJ" },
 
@@ -175,7 +176,7 @@ const chars = {
   Z: { key: "KeyZ", shift: true },
   "Ž": { key: "KeyZ", shift: true, accentKey: keyHacek },
   "Ź": { key: "KeyZ", shift: true, ctrl: true, meta: true, accentKey: keyAcute },
-  z: { key: "KeyZ" },  W: { key: "KeyW", shift: true },
+  z: { key: "KeyZ" },
   "ž": { key: "KeyZ", accentKey: keyHacek },
   "ź": { key: "KeyX",ctrl: true, meta: true, accentKey: keyAcute }, // not a typo, it's on the X key
   "ż": { key: "KeyZ", ctrl: true, meta: true, accentKey: keyDotAbove },
@@ -190,30 +191,29 @@ const chars = {
   "\"": { key: "Digit2", shift: true },
   "@": { key: "Digit2", altRight: true },
   3: { key: "Digit3" },
-  "·": { key: "Digit3", shift: true },
-  "#": { key: "Digit3", altRight: true },
+  "#": { key: "Digit3", shift: true },
   4: { key: "Digit4" },
   "$": { key: "Digit4", shift: true },
   5: { key: "Digit5" },
   "%": { key: "Digit5", shift: true },
   6: { key: "Digit6" },
-  "&": { key: "Digit6", shift: true },
+  "^": { key: "Digit6", shift: true },
   "¬": { key: "Digit6", altRight: true },
   7: { key: "Digit7" },
-  "/": { key: "Digit7", shift: true },
+  "&": { key: "Digit7", shift: true },
   8: { key: "Digit8" },
-  "(": { key: "Digit8", shift: true },
+  "*": { key: "Digit8", shift: true },
   9: { key: "Digit9" },
-  ")": { key: "Digit9", shift: true },
+  "(": { key: "Digit9", shift: true },
   0: { key: "Digit0" },
-  "=": { key: "Digit0", shift: true },
+  ")": { key: "Digit0", shift: true },
   "'": { key: "Minus" },
   "?": { key: "Minus", shift: true },
   "¡": { key: "Equal", deadKey: true },
   "¿": { key: "Equal", shift: true },
   "[": { key: "BracketLeft", altRight: true },
   "+": { key: "BracketRight" },
-  "*": { key: "BracketRight", shift: true },
+  //"*": { key: "BracketRight", shift: true },
   "]": { key: "BracketRight", altRight: true },
   "ñ": { key: "Semicolon" },
   "Ñ": { key: "Semicolon", shift: true },

ui/src/keyboardMappings.ts

@@ -5,7 +5,7 @@
 export const keys = {
   Again: 0x79,
   AlternateErase: 0x9d,
-  AltGraph: 0xe5,
+  AltGr: 0xe6,        // aka AltRight
   AltLeft: 0xe2,
   AltRight: 0xe6,
   Application: 0x65,
@@ -262,6 +262,7 @@ export const modifiers = {
   AltRight: 0x40,
   MetaLeft: 0x08,
   MetaRight: 0x80,
+  AltGr: 0x40,
 } as Record<string, number>;
 
 export const hidKeyToModifierMask = {
@@ -271,6 +272,18 @@ export const hidKeyToModifierMask = {
   0xe3: modifiers.MetaLeft,
   0xe4: modifiers.ControlRight,
   0xe5: modifiers.ShiftRight,
-  0xe6: modifiers.AltRight,
+  0xe6: modifiers.AltRight, // can also be AltGr
   0xe7: modifiers.MetaRight,
-} as Record<number, number>;
+} as Record<number, number>;
+
+export const latchingKeys = ["CapsLock", "ScrollLock", "NumLock", "Meta", "Compose", "Kana"];
+
+export function decodeModifiers(modifier: number) {
+  return { 
+    isShiftActive: (modifier & (modifiers.ShiftLeft | modifiers.ShiftRight)) !== 0,
+    isControlActive: (modifier & (modifiers.ControlLeft | modifiers.ControlRight)) !== 0,
+    isAltActive: (modifier & (modifiers.AltLeft | modifiers.AltRight)) !== 0,
+    isMetaActive: (modifier & (modifiers.MetaLeft | modifiers.MetaRight)) !== 0,
+    isAltGrActive: (modifier & modifiers.AltGr) !== 0,
+  };
+}