From 940612ab6a17173bde91f0bccc6ebefc8d9ecc4b Mon Sep 17 00:00:00 2001 From: William Johnstone Date: Fri, 11 Apr 2025 13:26:49 +0100 Subject: [PATCH] Updated keyboard character codes, added half working spanish mappings --- config.go | 2 +- ui/src/components/WebRTCVideo.tsx | 2 + ui/src/components/sidebar/settings.tsx | 11 ++-- ui/src/hooks/stores.ts | 2 +- ui/src/keyboardMappings/KeyboardLayouts.ts | 21 ++++--- ui/src/keyboardMappings/layouts/es.ts | 68 ++++++++++++++++++++++ 6 files changed, 92 insertions(+), 14 deletions(-) create mode 100644 ui/src/keyboardMappings/layouts/es.ts diff --git a/config.go b/config.go index eb707c5..3657653 100644 --- a/config.go +++ b/config.go @@ -31,7 +31,7 @@ const configPath = "/userdata/kvm_config.json" var defaultConfig = &Config{ CloudURL: "https://api.jetkvm.com", AutoUpdateEnabled: true, // Set a default value - KeyboardLayout: "us", + KeyboardLayout: "en-US", KeyboardMappingEnabled: false, } diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx index 2ec820d..ec690a6 100644 --- a/ui/src/components/WebRTCVideo.tsx +++ b/ui/src/components/WebRTCVideo.tsx @@ -22,6 +22,8 @@ import { ConnectionErrorOverlay, HDMIErrorOverlay, LoadingOverlay } from "./Vide // An appropriate error message will need to be displayed in order to alert users to browser compatibility issues. // This requires TLS, waiting on TLS support. + +// TODO Implement keyboard mapping setup in initial JetKVM setup export default function WebRTCVideo() { const [keys, setKeys] = useState(useKeyboardMappingsStore.keys); const [chars, setChars] = useState(useKeyboardMappingsStore.chars); diff --git a/ui/src/components/sidebar/settings.tsx b/ui/src/components/sidebar/settings.tsx index 4e8d37c..f6f47c1 100644 --- a/ui/src/components/sidebar/settings.tsx +++ b/ui/src/components/sidebar/settings.tsx @@ -78,7 +78,7 @@ export default function SettingsSidebar() { const setSidebarView = useUiStore(state => state.setSidebarView); const settings = useSettingsStore(); const [send] = useJsonRpc(); - const [keyboardLayout, setKeyboardLayout] = useState("us"); + const [keyboardLayout, setKeyboardLayout] = useState("en-US"); const [kbMappingEnabled, setKeyboardMapping] = useState(false); const [streamQuality, setStreamQuality] = useState("1"); const [autoUpdate, setAutoUpdate] = useState(true); @@ -580,10 +580,11 @@ export default function SettingsSidebar() { //fullWidth value={keyboardLayout} options={[ - { value: "us", label: "US" }, - { value: "uk", label: "UK" }, - { value: "uk_apple", label: "UK (Apple)" }, - { value: "de_t1", label: "German (T1)" }, + { value: "en-US", label: "US" }, + { value: "en-GB", label: "UK" }, + { value: "en-GB_apple", label: "UK (Apple)" }, + { value: "de_DE", label: "German (T1)" }, + { value: "es-ES", label: "Spanish (Spain)"}, ]} onChange={e => handleKeyboardLayoutChange(e.target.value)} /> diff --git a/ui/src/hooks/stores.ts b/ui/src/hooks/stores.ts index 23958c7..2116b4c 100644 --- a/ui/src/hooks/stores.ts +++ b/ui/src/hooks/stores.ts @@ -539,7 +539,7 @@ export const useLocalAuthModalStore = create(set => ({ })); class KeyboardMappingsStore { - private _layout: string = 'us'; + private _layout: string = 'en-US'; private _subscribers: (() => void)[] = []; private _mappingsEnabled: boolean = false; diff --git a/ui/src/keyboardMappings/KeyboardLayouts.ts b/ui/src/keyboardMappings/KeyboardLayouts.ts index 11fd798..920eeb4 100644 --- a/ui/src/keyboardMappings/KeyboardLayouts.ts +++ b/ui/src/keyboardMappings/KeyboardLayouts.ts @@ -1,29 +1,36 @@ -import {keysUKApple, charsUKApple, modifiersUKApple } from './layouts/uk_apple'; -import {keysUK, charsUK, modifiersUK } from './layouts/uk'; -import {keysUS, charsUS, modifiersUS } from './layouts/us'; +import { keysUKApple, charsUKApple, modifiersUKApple } from './layouts/uk_apple'; +import { keysUK, charsUK, modifiersUK } from './layouts/uk'; +import { keysUS, charsUS, modifiersUS } from './layouts/us'; import { keysDE_T1, charsDE_T1, modifiersDE_T1 } from './layouts/de_t1'; +import { keysES, charsES, modifiersES } from './layouts/es'; export function getKeyboardMappings(layout: string) { switch (layout) { - case "uk_apple": + case "en-GB_apple": return { keys: keysUKApple, chars: charsUKApple, modifiers: modifiersUKApple, }; - case "uk": + case "en-GB": return { keys: keysUK, chars: charsUK, modifiers: modifiersUK, }; - case "de_t1": + case "de-DE": return { keys: keysDE_T1, chars: charsDE_T1, modifiers: modifiersDE_T1, }; - case "us": + case "es-ES": + return { + keys: keysES, + chars: charsES, + modifiers: modifiersES, + }; + case "en-US": default: return { keys: keysUS, diff --git a/ui/src/keyboardMappings/layouts/es.ts b/ui/src/keyboardMappings/layouts/es.ts new file mode 100644 index 0000000..ada24f7 --- /dev/null +++ b/ui/src/keyboardMappings/layouts/es.ts @@ -0,0 +1,68 @@ +import { charsUS, keysUS, modifiersUS } from "./us"; + +export const keysES = { + ...keysUS, +} as Record; + +export const charsES = { + ...charsUS, + + "ñ": { key: "Semicolon", shift: false }, + "Ñ": { key: "Semicolon", shift: true }, + + "º": { key: "Backquote", shift: false }, + "ª": { key: "Backquote", shift: true }, + + "¡": { key: "Equals", shift: false}, + + "¿": { key: "Slash", shift: false, altRight: true }, + "?": { key: "Slash", shift: true }, + + "|": { key: "Digit1", shift: false, altRight: true }, + + "@": { key: "Digit2", shift: false, altRight: true }, + "\"": { key: "Digit2", shift: true }, + + "·": { key: "Digit3", shift: false, altRight: true }, + "#": { key: "Digit3", shift: true }, + + "$": { key: "Digit4", shift: true }, + "€": { key: "Digit5", shift: false, altRight: true }, + + "&": { key: "Digit6", shift: true }, + + "/": { key: "Digit7", shift: true }, + "(": { key: "Digit8", shift: true }, + ")": { key: "Digit9", shift: true }, + "=": { key: "Digit0", shift: true }, + + "'": { key: "Quote", shift: false }, + "?": { key: "Quote", shift: true }, + + "-": { key: "Minus", shift: false }, + "_": { key: "Minus", shift: true }, + + "`": { key: "IntlBackslash", shift: false }, + "^": { key: "IntlBackslash", shift: true }, + "[": { key: "IntlBackslash", shift: false, altRight: true }, + "{": { key: "IntlBackslash", shift: true, altRight: true }, + + "+": { key: "Equal", shift: true }, + "]": { key: "Equal", shift: false, altRight: true }, + "}": { key: "Equal", shift: true, altRight: true }, + + "<": { key: "Backslash", shift: false }, + ">": { key: "Backslash", shift: true }, + + + ",": { key: "Comma", shift: false }, + ";": { key: "Comma", shift: true }, + + ".": { key: "Period", shift: false }, + ":": { key: "Period", shift: true }, + +} as Record; + +export const modifiersES = { + ...modifiersUS, +} as Record; \ No newline at end of file