diff --git a/ui/src/components/VirtualKeyboard.tsx b/ui/src/components/VirtualKeyboard.tsx index ec5906c..09a94a6 100644 --- a/ui/src/components/VirtualKeyboard.tsx +++ b/ui/src/components/VirtualKeyboard.tsx @@ -11,7 +11,7 @@ import "react-simple-keyboard/build/css/index.css"; import { useHidStore, useUiStore } from "@/hooks/stores"; import { cx } from "@/cva.config"; -import { keys, modifiers } from "@/keyboardMappings"; +import { keys, modifiers, keyDisplayMap } from "@/keyboardMappings"; import useKeyboard from "@/hooks/useKeyboard"; import DetachIconRaw from "@/assets/detach-icon.svg"; import AttachIconRaw from "@/assets/attach-icon.svg"; @@ -260,136 +260,7 @@ function KeyboardWrapper() { buttons: "CtrlAltDelete AltMetaEscape", }, ]} - display={{ - CtrlAltDelete: "Ctrl + Alt + Delete", - AltMetaEscape: "Alt + Meta + Escape", - Escape: "esc", - Tab: "tab", - Backspace: "backspace", - "(Backspace)": "backspace", - Enter: "enter", - CapsLock: "caps lock", - ShiftLeft: "shift", - ShiftRight: "shift", - ControlLeft: "ctrl", - AltLeft: "alt", - AltRight: "alt", - MetaLeft: "meta", - MetaRight: "meta", - KeyQ: "q", - KeyW: "w", - KeyE: "e", - KeyR: "r", - KeyT: "t", - KeyY: "y", - KeyU: "u", - KeyI: "i", - KeyO: "o", - KeyP: "p", - KeyA: "a", - KeyS: "s", - KeyD: "d", - KeyF: "f", - KeyG: "g", - KeyH: "h", - KeyJ: "j", - KeyK: "k", - KeyL: "l", - KeyZ: "z", - KeyX: "x", - KeyC: "c", - KeyV: "v", - KeyB: "b", - KeyN: "n", - KeyM: "m", - - "(KeyQ)": "Q", - "(KeyW)": "W", - "(KeyE)": "E", - "(KeyR)": "R", - "(KeyT)": "T", - "(KeyY)": "Y", - "(KeyU)": "U", - "(KeyI)": "I", - "(KeyO)": "O", - "(KeyP)": "P", - "(KeyA)": "A", - "(KeyS)": "S", - "(KeyD)": "D", - "(KeyF)": "F", - "(KeyG)": "G", - "(KeyH)": "H", - "(KeyJ)": "J", - "(KeyK)": "K", - "(KeyL)": "L", - "(KeyZ)": "Z", - "(KeyX)": "X", - "(KeyC)": "C", - "(KeyV)": "V", - "(KeyB)": "B", - "(KeyN)": "N", - "(KeyM)": "M", - Digit1: "1", - Digit2: "2", - Digit3: "3", - Digit4: "4", - Digit5: "5", - Digit6: "6", - Digit7: "7", - Digit8: "8", - Digit9: "9", - Digit0: "0", - - "(Digit1)": "!", - "(Digit2)": "@", - "(Digit3)": "#", - "(Digit4)": "$", - "(Digit5)": "%", - "(Digit6)": "^", - "(Digit7)": "&", - "(Digit8)": "*", - "(Digit9)": "(", - "(Digit0)": ")", - Minus: "-", - "(Minus)": "_", - - Equal: "=", - "(Equal)": "+", - BracketLeft: "[", - BracketRight: "]", - "(BracketLeft)": "{", - "(BracketRight)": "}", - Backslash: "\\", - "(Backslash)": "|", - - Semicolon: ";", - "(Semicolon)": ":", - Quote: "'", - "(Quote)": '"', - Comma: ",", - "(Comma)": "<", - Period: ".", - "(Period)": ">", - Slash: "/", - "(Slash)": "?", - Space: " ", - Backquote: "`", - "(Backquote)": "~", - IntlBackslash: "\\", - - F1: "F1", - F2: "F2", - F3: "F3", - F4: "F4", - F5: "F5", - F6: "F6", - F7: "F7", - F8: "F8", - F9: "F9", - F10: "F10", - F11: "F11", - F12: "F12", - }} + display={keyDisplayMap} layout={{ default: [ "CtrlAltDelete AltMetaEscape", diff --git a/ui/src/keyboardMappings.ts b/ui/src/keyboardMappings.ts index ffc781c..347939a 100644 --- a/ui/src/keyboardMappings.ts +++ b/ui/src/keyboardMappings.ts @@ -212,3 +212,80 @@ export const modifiers = { MetaLeft: 0x08, MetaRight: 0x80, } as Record; + +export const modifierDisplayMap: Record = { + ControlLeft: "Left Ctrl", + ControlRight: "Right Ctrl", + ShiftLeft: "Left Shift", + ShiftRight: "Right Shift", + AltLeft: "Left Alt", + AltRight: "Right Alt", + MetaLeft: "Left Meta", + MetaRight: "Right Meta", +} as Record; + +export const keyDisplayMap: Record = { + CtrlAltDelete: "Ctrl + Alt + Delete", + AltMetaEscape: "Alt + Meta + Escape", + Escape: "esc", + Tab: "tab", + Backspace: "backspace", + Enter: "enter", + CapsLock: "caps lock", + ShiftLeft: "shift", + ShiftRight: "shift", + ControlLeft: "ctrl", + AltLeft: "alt", + AltRight: "alt", + MetaLeft: "meta", + MetaRight: "meta", + Space: " ", + Home: "home", + PageUp: "pageup", + Delete: "delete", + End: "end", + PageDown: "pagedown", + ArrowLeft: "←", + ArrowRight: "→", + ArrowUp: "↑", + ArrowDown: "↓", + + // Letters + KeyA: "a", KeyB: "b", KeyC: "c", KeyD: "d", KeyE: "e", + KeyF: "f", KeyG: "g", KeyH: "h", KeyI: "i", KeyJ: "j", + KeyK: "k", KeyL: "l", KeyM: "m", KeyN: "n", KeyO: "o", + KeyP: "p", KeyQ: "q", KeyR: "r", KeyS: "s", KeyT: "t", + KeyU: "u", KeyV: "v", KeyW: "w", KeyX: "x", KeyY: "y", + KeyZ: "z", + + // Numbers + Digit1: "1", Digit2: "2", Digit3: "3", Digit4: "4", Digit5: "5", + Digit6: "6", Digit7: "7", Digit8: "8", Digit9: "9", Digit0: "0", + + // Symbols + Minus: "-", + Equal: "=", + BracketLeft: "[", + BracketRight: "]", + Backslash: "\\", + Semicolon: ";", + Quote: "'", + Comma: ",", + Period: ".", + Slash: "/", + Backquote: "`", + IntlBackslash: "\\", + + // Function keys + F1: "F1", F2: "F2", F3: "F3", F4: "F4", + F5: "F5", F6: "F6", F7: "F7", F8: "F8", + F9: "F9", F10: "F10", F11: "F11", F12: "F12", + + // Numpad + Numpad0: "Num 0", Numpad1: "Num 1", Numpad2: "Num 2", + Numpad3: "Num 3", Numpad4: "Num 4", Numpad5: "Num 5", + Numpad6: "Num 6", Numpad7: "Num 7", Numpad8: "Num 8", + Numpad9: "Num 9", NumpadAdd: "Num +", NumpadSubtract: "Num -", + NumpadMultiply: "Num *", NumpadDivide: "Num /", NumpadDecimal: "Num .", + NumpadEnter: "Num Enter" +};