Updated keyboard character codes, added half working spanish mappings

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,
 }
 

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);

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: "en-US", label: "US" },
-                  { value: "uk", label: "UK" },
+                  { value: "en-GB", label: "UK" },
-                  { value: "uk_apple", label: "UK (Apple)" },
+                  { value: "en-GB_apple", label: "UK (Apple)" },
-                  { value: "de_t1", label: "German (T1)" },
+                  { value: "de_DE", label: "German (T1)" },
+                  { value: "es-ES", label: "Spanish (Spain)"},
                 ]}
                 onChange={e => handleKeyboardLayoutChange(e.target.value)}
               />

ui/src/hooks/stores.ts

@@ -539,7 +539,7 @@ export const useLocalAuthModalStore = create<LocalAuthModalState>(set => ({
 }));
 
 class KeyboardMappingsStore {
-  private _layout: string = 'us';
+  private _layout: string = 'en-US';
   private _subscribers: (() => void)[] = [];
   private _mappingsEnabled: boolean = false;
 

ui/src/keyboardMappings/KeyboardLayouts.ts

@@ -1,29 +1,36 @@
-import {keysUKApple, charsUKApple, modifiersUKApple } from './layouts/uk_apple';
+import { keysUKApple, charsUKApple, modifiersUKApple } from './layouts/uk_apple';
-import {keysUK, charsUK, modifiersUK } from './layouts/uk';
+import { keysUK, charsUK, modifiersUK } from './layouts/uk';
-import {keysUS, charsUS, modifiersUS } from './layouts/us';
+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,

ui/src/keyboardMappings/layouts/es.ts

@@ -0,0 +1,68 @@
+import { charsUS, keysUS, modifiersUS } from "./us";
+
+export const keysES = {
+  ...keysUS,
+} as Record<string, number>;
+
+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<string, { key: string; shift: boolean; altLeft?: boolean; altRight?: boolean }>;
+
+export const modifiersES = {
+  ...modifiersUS,
+} as Record<string, number>;