Early implementation of different keyboard layouts.

Store is functioning as expected, adding new layouts should be trivial and easily scalable.

Implementation is different for each function that uses the keyboard (PasteModal vs Typing in the WebRTC window) these will all require their own testing.

Author: williamjohnstone

config.go

@@ -25,6 +25,7 @@ type Config struct {
 	GoogleIdentity       string            `json:"google_identity"`
 	JigglerEnabled       bool              `json:"jiggler_enabled"`
 	AutoUpdateEnabled    bool              `json:"auto_update_enabled"`
+	KeyboardLayout    string            `json:"keyboard_layout"`
 	IncludePreRelease    bool              `json:"include_pre_release"`
 	HashedPassword       string            `json:"hashed_password"`
 	LocalAuthToken       string            `json:"local_auth_token"`
@@ -41,19 +42,8 @@ type Config struct {
 const configPath = "/userdata/kvm_config.json"
 
 var defaultConfig = &Config{
-	CloudURL:             "https://api.jetkvm.com",
-	AutoUpdateEnabled:    true, // Set a default value
-	DisplayMaxBrightness: 64,
-	DisplayDimAfterSec:   120,  // 2 minutes
-	DisplayOffAfterSec:   1800, // 30 minutes
-	VirtualMediaEnabled:  true,
-	UsbConfig: UsbConfig{
-		VendorId:     "0x1d6b", //The Linux Foundation
-		ProductId:    "0x0104", //Multifunction Composite Gadget
-		SerialNumber: "",
-		Manufacturer: "JetKVM",
-		Product:      "JetKVM USB Emulation Device",
-	},
+	CloudURL:          "https://api.jetkvm.com",
+	AutoUpdateEnabled: true, // Set a default value
 }
 
 var config *Config

jsonrpc.go

@@ -78,6 +78,18 @@ func rpcGetDeviceID() (string, error) {
 	return GetDeviceID(), nil
 }
 
+func rpcGetKeyboardLayout() (string, error) {
+	return config.KeyboardLayout, nil
+}
+
+func rpcSetKeyboardLayout(KeyboardLayout string) (string, error) {
+	config.KeyboardLayout = KeyboardLayout
+	if err := SaveConfig(); err != nil {
+		return config.KeyboardLayout, fmt.Errorf("failed to save config: %w", err)
+	}
+	return KeyboardLayout, nil
+}
+
 var streamFactor = 1.0
 
 func rpcGetStreamQualityFactor() (float64, error) {
@@ -447,6 +459,8 @@ var rpcHandlers = map[string]*jsonrpc.RPCHandler{
 	"setJigglerState":        {Func: rpcSetJigglerState, Params: []string{"enabled"}},
 	"getJigglerState":        {Func: rpcGetJigglerState},
 	"sendWOLMagicPacket":     {Func: rpcSendWOLMagicPacket, Params: []string{"macAddress"}},
+	"getKeyboardLayout": 	  {Func: rpcGetKeyboardLayout},
+	"setKeyboardLayout":      {Func: rpcSetKeyboardLayout, Params: []string{"kbLayout"}},
 	"getStreamQualityFactor": {Func: rpcGetStreamQualityFactor},
 	"setStreamQualityFactor": {Func: rpcSetStreamQualityFactor, Params: []string{"factor"}},
 	"getAutoUpdateState":     {Func: rpcGetAutoUpdateState},

ui/src/components/InfoBar.tsx

@@ -6,10 +6,21 @@ import {
   useSettingsStore,
   useVideoStore,
 } from "@/hooks/stores";
-import { useEffect } from "react";
-import { keys, modifiers } from "@/keyboardMappings";
+import { useEffect, useState } from "react";
+import { keyboardMappingsStore } from "@/keyboardMappings/KeyboardMappingStore";
 
 export default function InfoBar() {
+  const [keys, setKeys] = useState(keyboardMappingsStore.keys);
+  const [modifiers, setModifiers] = useState(keyboardMappingsStore.modifiers);
+
+  useEffect(() => {
+    const unsubscribeKeyboardStore = keyboardMappingsStore.subscribe(() => {
+      setKeys(keyboardMappingsStore.keys); 
+      setModifiers(keyboardMappingsStore.modifiers);
+    });
+    return unsubscribeKeyboardStore; // Cleanup on unmount
+  }, []); 
+
   const activeKeys = useHidStore(state => state.activeKeys);
   const activeModifiers = useHidStore(state => state.activeModifiers);
   const mouseX = useMouseStore(state => state.mouseX);

ui/src/components/VirtualKeyboard.tsx

@@ -7,7 +7,8 @@ import "react-simple-keyboard/build/css/index.css";
 import { useHidStore, useUiStore } from "@/hooks/stores";
 import { Transition } from "@headlessui/react";
 import { cx } from "@/cva.config";
-import { keys, modifiers } from "@/keyboardMappings";
+//import { keys, modifiers } from "@/keyboardMappings/KeyboardMappingStore";
+import { keyboardMappingsStore } from "@/keyboardMappings/KeyboardMappingStore";
 import useKeyboard from "@/hooks/useKeyboard";
 import DetachIconRaw from "@/assets/detach-icon.svg";
 import AttachIconRaw from "@/assets/attach-icon.svg";
@@ -21,6 +22,17 @@ const AttachIcon = ({ className }: { className?: string }) => {
 };
 
 function KeyboardWrapper() {
+  const [keys, setKeys] = useState(keyboardMappingsStore.keys);
+  const [modifiers, setModifiers] = useState(keyboardMappingsStore.modifiers);
+
+  useEffect(() => {
+    const unsubscribeKeyboardStore = keyboardMappingsStore.subscribe(() => {
+      setKeys(keyboardMappingsStore.keys); 
+      setModifiers(keyboardMappingsStore.modifiers);
+    });
+    return unsubscribeKeyboardStore; // Cleanup on unmount
+  }, []); 
+
   const [layoutName, setLayoutName] = useState("default");
 
   const keyboardRef = useRef<HTMLDivElement>(null);

ui/src/components/WebRTCVideo.tsx

@@ -7,7 +7,7 @@ import {
   useUiStore,
   useVideoStore,
 } from "@/hooks/stores";
-import { keys, modifiers } from "@/keyboardMappings";
+import { keyboardMappingsStore } from "@/keyboardMappings/KeyboardMappingStore";
 import { useResizeObserver } from "@/hooks/useResizeObserver";
 import { cx } from "@/cva.config";
 import VirtualKeyboard from "@components/VirtualKeyboard";
@@ -18,6 +18,17 @@ import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { ConnectionErrorOverlay, HDMIErrorOverlay, LoadingOverlay } from "./VideoOverlay";
 
 export default function WebRTCVideo() {
+  const [keys, setKeys] = useState(keyboardMappingsStore.keys);
+  const [modifiers, setModifiers] = useState(keyboardMappingsStore.modifiers);
+
+  useEffect(() => {
+    const unsubscribeKeyboardStore = keyboardMappingsStore.subscribe(() => {
+      setKeys(keyboardMappingsStore.keys); 
+      setModifiers(keyboardMappingsStore.modifiers);
+    });
+    return unsubscribeKeyboardStore; // Cleanup on unmount
+  }, []); 
+
   // Video and stream related refs and states
   const videoElm = useRef<HTMLVideoElement>(null);
   const mediaStream = useRTCStore(state => state.mediaStream);

ui/src/components/popovers/PasteModal.tsx

@@ -9,13 +9,26 @@ 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";
-import { chars, keys, modifiers } from "@/keyboardMappings";
+import { keyboardMappingsStore } from "@/keyboardMappings/KeyboardMappingStore";
 
 const hidKeyboardPayload = (keys: number[], modifier: number) => {
   return { keys, modifier };
 };
 
 export default function PasteModal() {
+  const [keys, setKeys] = useState(keyboardMappingsStore.keys);
+  const [chars, setChars] = useState(keyboardMappingsStore.chars);
+  const [modifiers, setModifiers] = useState(keyboardMappingsStore.modifiers);
+
+  useEffect(() => {
+    const unsubscribeKeyboardStore = keyboardMappingsStore.subscribe(() => {
+      setKeys(keyboardMappingsStore.keys); 
+      setChars(keyboardMappingsStore.chars);
+      setModifiers(keyboardMappingsStore.modifiers);
+    });
+    return unsubscribeKeyboardStore; // Cleanup on unmount
+  }, []); 
+
   const TextAreaRef = useRef<HTMLTextAreaElement>(null);
   const setPasteMode = useHidStore(state => state.setPasteModeEnabled);
   const setDisableVideoFocusTrap = useUiStore(state => state.setDisableVideoFocusTrap);
@@ -41,13 +54,18 @@ export default function PasteModal() {
 
     try {
       for (const char of text) {
-        const { key, shift } = chars[char] ?? {};
+        const { key, shift, alt } = chars[char] ?? {};
         if (!key) continue;
 
+        // Build the modifier bitmask
+        const modifier =
+        (shift ? modifiers["ShiftLeft"] : 0) |
+        (alt ? modifiers["AltLeft"] : 0);
+
         await new Promise<void>((resolve, reject) => {
           send(
             "keyboardReport",
-            hidKeyboardPayload([keys[key]], shift ? modifiers["ShiftLeft"] : 0),
+            hidKeyboardPayload([keys[key]], modifier),
             params => {
               if ("error" in params) return reject(params.error);
               send("keyboardReport", hidKeyboardPayload([], 0), params => {

ui/src/components/sidebar/settings.tsx

@@ -28,6 +28,8 @@ import { useRevalidator } from "react-router-dom";
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
 import PluginList from "@components/PluginList";
 import USBConfigDialog from "@components/USBConfigDialog";
+import { keyboardMappingsStore } from "@/keyboardMappings/KeyboardMappingStore";
+import { KeyboardLayout } from "@/keyboardMappings/KeyboardLayouts";
 
 export function SettingsItem({
   title,
@@ -80,6 +82,7 @@ export default function SettingsSidebar() {
   const setSidebarView = useUiStore(state => state.setSidebarView);
   const settings = useSettingsStore();
   const [send] = useJsonRpc();
+  const [keyboardLayout, setKeyboardLayout] = useState("us");
   const [streamQuality, setStreamQuality] = useState("1");
   const [autoUpdate, setAutoUpdate] = useState(true);
   const [devChannel, setDevChannel] = useState(false);
@@ -150,6 +153,20 @@ export default function SettingsSidebar() {
     });
   };
 
+  const handleKeyboardLayoutChange = (keyboardLayout: string) => {
+    send("setKeyboardLayout", { kbLayout: keyboardLayout }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to set keyboard layout: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      // TODO set this to update to the actual layout chosen
+      keyboardMappingsStore.setLayout(KeyboardLayout.UKApple)
+      setKeyboardLayout(keyboardLayout);
+    });
+  };
+
   const handleStreamQualityChange = (factor: string) => {
     send("setStreamQualityFactor", { factor: Number(factor) }, resp => {
       if ("error" in resp) {
@@ -300,6 +317,11 @@ export default function SettingsSidebar() {
       setDevChannel(resp.result as boolean);
     });
 
+    send("getKeyboardLayout", {}, resp => {
+      if ("error" in resp) return;
+      setKeyboardLayout(String(resp.result));
+    });
+
     send("getStreamQualityFactor", {}, resp => {
       if ("error" in resp) return;
       setStreamQuality(String(resp.result));
@@ -556,6 +578,33 @@ export default function SettingsSidebar() {
             </div>
           </div>
           <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
+        <div className="pb-2 space-y-4">
+          <SectionHeader
+            title="Keyboard"
+            description="Customize keyboard behaviour"
+          />
+          <div className="space-y-4">
+            <SettingsItem
+              title="Keyboard Layout"
+              description="Set keyboard layout (this should match the target machine)"
+            >
+              <SelectMenuBasic
+                size="SM"
+                label=""
+                // TODO figure out how to make this selector wider like the EDID one?
+                //fullWidth
+                value={keyboardLayout}
+                options={[
+                  { value: "uk", label: "GB" },
+                  { value: "uk_apple", label: "GB Apple" },
+                  { value: "us", label: "US" },
+                ]}
+                onChange={e => handleKeyboardLayoutChange(e.target.value)}
+              />
+            </SettingsItem>
+          </div>
+        </div>
+        <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
           <div className="pb-2 space-y-4">
             <SectionHeader
                 title="Video"