Feature/usb config - Rebasing USB Config Changes on Dev Branch (#185)

* rebasing on dev branch

* fixed formatting

* fixed formatting

* removed query params

* moved usb settings to hardware setting

* swapped from error to log

* added fix for any change to product name now resulting in show the spinner as custom on page reload

* formatting

---------

Co-authored-by: JackTheRooster <adrian@rydeas.com>
Co-authored-by: Adam Shiervani <adam.shiervani@gmail.com>

config.go

@@ -12,6 +12,14 @@ type WakeOnLanDevice struct {
 	MacAddress string `json:"macAddress"`
 }
 
+type UsbConfig struct {
+	VendorId     string `json:"vendor_id"`
+	ProductId    string `json:"product_id"`
+	SerialNumber string `json:"serial_number"`
+	Manufacturer string `json:"manufacturer"`
+	Product      string `json:"product"`
+}
+
 type Config struct {
 	CloudURL             string            `json:"cloud_url"`
 	CloudToken           string            `json:"cloud_token"`
@@ -28,6 +36,7 @@ type Config struct {
 	DisplayMaxBrightness int               `json:"display_max_brightness"`
 	DisplayDimAfterSec   int               `json:"display_dim_after_sec"`
 	DisplayOffAfterSec   int               `json:"display_off_after_sec"`
+	UsbConfig            UsbConfig         `json:"usb_config"`
 }
 
 const configPath = "/userdata/kvm_config.json"
@@ -39,6 +48,13 @@ var defaultConfig = &Config{
 	DisplayMaxBrightness: 64,
 	DisplayDimAfterSec:   120,  // 2 minutes
 	DisplayOffAfterSec:   1800, // 30 minutes
+	UsbConfig: UsbConfig{
+		VendorId:     "0x1d6b", //The Linux Foundation
+		ProductId:    "0x0104", //Multifunction Composite Gadget
+		SerialNumber: "",
+		Manufacturer: "JetKVM",
+		Product:      "JetKVM USB Emulation Device",
+	},
 }
 
 var (

jsonrpc.go

@@ -538,6 +538,29 @@ func rpcSetUsbEmulationState(enabled bool) error {
 	}
 }
 
+func rpcGetUsbConfig() (UsbConfig, error) {
+	LoadConfig()
+	return config.UsbConfig, nil
+}
+
+func rpcSetUsbConfig(usbConfig UsbConfig) error {
+	LoadConfig()
+	config.UsbConfig = usbConfig
+
+	err := UpdateGadgetConfig()
+	if err != nil {
+		return fmt.Errorf("failed to write gadget config: %w", err)
+	}
+
+	err = SaveConfig()
+	if err != nil {
+		return fmt.Errorf("failed to save usb config: %w", err)
+	}
+
+	log.Printf("[jsonrpc.go:rpcSetUsbConfig] usb config set to %s", usbConfig)
+	return nil
+}
+
 func rpcGetWakeOnLanDevices() ([]WakeOnLanDevice, error) {
 	if config.WakeOnLanDevices == nil {
 		return []WakeOnLanDevice{}, nil
@@ -791,6 +814,8 @@ var rpcHandlers = map[string]RPCHandler{
 	"isUpdatePending":        {Func: rpcIsUpdatePending},
 	"getUsbEmulationState":   {Func: rpcGetUsbEmulationState},
 	"setUsbEmulationState":   {Func: rpcSetUsbEmulationState, Params: []string{"enabled"}},
+	"getUsbConfig":           {Func: rpcGetUsbConfig},
+	"setUsbConfig":           {Func: rpcSetUsbConfig, Params: []string{"usbConfig"}},
 	"checkMountUrl":          {Func: rpcCheckMountUrl, Params: []string{"url"}},
 	"getVirtualMediaState":   {Func: rpcGetVirtualMediaState},
 	"getStorageSpace":        {Func: rpcGetStorageSpace},

ui/src/components/USBConfigDialog.tsx

@@ -0,0 +1,216 @@
+import { GridCard } from "@/components/Card";
+import {useCallback, useEffect, useState} from "react";
+import { Button } from "@components/Button";
+import LogoBlueIcon from "@/assets/logo-blue.svg";
+import LogoWhiteIcon from "@/assets/logo-white.svg";
+import Modal from "@components/Modal";
+import { InputFieldWithLabel } from "./InputField";
+import { useJsonRpc } from "@/hooks/useJsonRpc";
+import { useUsbConfigModalStore } from "@/hooks/stores";
+import ExtLink from "@components/ExtLink";
+import { UsbConfigState } from "@/hooks/stores"
+
+export default function USBConfigDialog({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) {
+  return (
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <Dialog setOpen={setOpen} />
+    </Modal>
+  );
+}
+
+export function Dialog({ setOpen }: { setOpen: (open: boolean) => void }) {
+  const { modalView, setModalView } = useUsbConfigModalStore();
+  const [error, setError] = useState<string | null>(null);
+
+  const [send] = useJsonRpc();
+
+  const handleUsbConfigChange = useCallback((usbConfig: object) => {
+    send("setUsbConfig", { usbConfig }, resp => {
+      if ("error" in resp) {
+        setError(`Failed to update USB Config: ${resp.error.data || "Unknown error"}`);
+        return;
+      }
+      setModalView("updateUsbConfigSuccess");
+    });
+  }, [send, setModalView]);
+
+  return (
+    <GridCard cardClassName="relative max-w-lg mx-auto text-left pointer-events-auto dark:bg-slate-800">
+      <div className="p-10">
+        {modalView === "updateUsbConfig" && (
+          <UpdateUsbConfigModal
+            onSetUsbConfig={handleUsbConfigChange}
+            onCancel={() => setOpen(false)}
+            error={error}
+          />
+        )}
+        {modalView === "updateUsbConfigSuccess" && (
+          <SuccessModal
+            headline="USB Configuration Updated Successfully"
+            description="You've successfully updated the USB Configuration"
+            onClose={() => setOpen(false)}
+          />
+        )}
+      </div>
+    </GridCard>
+  );
+}
+
+function UpdateUsbConfigModal({
+  onSetUsbConfig,
+  onCancel,
+  error,
+}: {
+  onSetUsbConfig: (usb_config: object) => void;
+  onCancel: () => void;
+  error: string | null;
+}) {
+  const [usbConfigState, setUsbConfigState] = useState<UsbConfigState>({
+    vendor_id: '',
+    product_id: '',
+    serial_number: '',
+    manufacturer: '',
+    product: ''
+  });
+  const [send] = useJsonRpc();
+
+  const syncUsbConfig = useCallback(() => {
+    send("getUsbConfig", {}, resp => {
+      if ("error" in resp) {
+        console.error("Failed to load USB Config:", resp.error);
+      } else {
+        setUsbConfigState(resp.result as UsbConfigState);
+      }
+    });
+  }, [send, setUsbConfigState]);
+
+    // Load stored usb config from the backend
+  useEffect(() => {
+    syncUsbConfig();
+  }, [syncUsbConfig]);
+
+  const handleUsbVendorIdChange = (value: string) => {
+    setUsbConfigState({... usbConfigState, vendor_id: value})
+  };
+
+  const handleUsbProductIdChange = (value: string) => {
+    setUsbConfigState({... usbConfigState, product_id: value})
+  };
+
+  const handleUsbSerialChange = (value: string) => {
+    setUsbConfigState({... usbConfigState, serial_number: value})
+  };
+
+  const handleUsbManufacturer = (value: string) => {
+    setUsbConfigState({... usbConfigState, manufacturer: value})
+  };
+
+  const handleUsbProduct = (value: string) => {
+    setUsbConfigState({... usbConfigState, product: value})
+  };
+
+  return (
+    <div className="flex flex-col items-start justify-start space-y-4 text-left">
+      <div>
+        <img src={LogoWhiteIcon} alt="" className="h-[24px] hidden dark:block" />
+        <img src={LogoBlueIcon} alt="" className="h-[24px] dark:hidden" />
+      </div>
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-lg font-semibold dark:text-white">USB Emulation Configuration</h2>
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            Set custom USB parameters to control how the USB device is emulated.
+            The device will rebind once the parameters are updated.
+          </p>
+          <div className="flex justify-start mt-4 text-xs text-slate-500 dark:text-slate-400">
+            <ExtLink
+              href={`https://the-sz.com/products/usbid/index.php`}
+              className="hover:underline"
+            >
+              Look up USB Device IDs here
+            </ExtLink>
+          </div>
+        </div>
+        <InputFieldWithLabel
+          required
+          label="Vendor ID"
+          placeholder="Enter Vendor ID"
+          pattern="^0[xX][\da-fA-F]{4}$"
+          defaultValue={usbConfigState?.vendor_id}
+          onChange={e => handleUsbVendorIdChange(e.target.value)}
+        />
+        <InputFieldWithLabel
+          required
+          label="Product ID"
+          placeholder="Enter Product ID"
+          pattern="^0[xX][\da-fA-F]{4}$"
+          defaultValue={usbConfigState?.product_id}
+          onChange={e => handleUsbProductIdChange(e.target.value)}
+        />
+        <InputFieldWithLabel
+          required
+          label="Serial Number"
+          placeholder="Enter Serial Number"
+          defaultValue={usbConfigState?.serial_number}
+          onChange={e => handleUsbSerialChange(e.target.value)}
+        />
+        <InputFieldWithLabel
+          required
+          label="Manufacturer"
+          placeholder="Enter Manufacturer"
+          defaultValue={usbConfigState?.manufacturer}
+          onChange={e => handleUsbManufacturer(e.target.value)}
+        />
+        <InputFieldWithLabel
+          required
+          label="Product Name"
+          placeholder="Enter Product Name"
+          defaultValue={usbConfigState?.product}
+          onChange={e => handleUsbProduct(e.target.value)}
+        />
+        <div className="flex gap-x-2">
+          <Button
+            size="SM"
+            theme="primary"
+            text="Update USB Config"
+            onClick={() => onSetUsbConfig(usbConfigState)}
+          />
+          <Button size="SM" theme="light" text="Not Now" onClick={onCancel} />
+        </div>
+        {error && <p className="text-sm text-red-500">{error}</p>}
+      </div>
+    </div>
+  );
+}
+
+function SuccessModal({
+  headline,
+  description,
+  onClose,
+}: {
+  headline: string;
+  description: string;
+  onClose: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-start justify-start w-full max-w-lg space-y-4 text-left">
+      <div>
+        <img src={LogoWhiteIcon} alt="" className="h-[24px] hidden dark:block" />
+        <img src={LogoBlueIcon} alt="" className="h-[24px] dark:hidden" />
+      </div>
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-lg font-semibold dark:text-white">{headline}</h2>
+          <p className="text-sm text-slate-600 dark:text-slate-400">{description}</p>
+        </div>
+        <Button size="SM" theme="primary" text="Close" onClick={onClose} />
+      </div>
+    </div>
+  );
+}

ui/src/components/sidebar/settings.tsx

@@ -5,6 +5,7 @@ import {
   useSettingsStore,
   useUiStore,
   useUpdateStore,
+  useUsbConfigModalStore
 } from "@/hooks/stores";
 import { Checkbox } from "@components/Checkbox";
 import { Button, LinkButton } from "@components/Button";
@@ -13,7 +14,7 @@ import { SectionHeader } from "@components/SectionHeader";
 import { GridCard } from "@components/Card";
 import { CheckCircleIcon } from "@heroicons/react/20/solid";
 import { cx } from "@/cva.config";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {useCallback, useEffect, useMemo, useRef, useState} from "react";
 import { isOnDevice } from "@/main";
 import PointingFinger from "@/assets/pointing-finger.svg";
 import MouseIcon from "@/assets/mouse-icon.svg";
@@ -26,6 +27,8 @@ import LocalAuthPasswordDialog from "@/components/LocalAuthPasswordDialog";
 import { LocalDevice } from "@routes/devices.$id";
 import { useRevalidator } from "react-router-dom";
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
+import USBConfigDialog from "@components/USBConfigDialog";
+import { UsbConfigState } from "@/hooks/stores"
 import { CLOUD_APP, DEVICE_API } from "@/ui.config";
 import { InputFieldWithLabel } from "../InputField";
 
@@ -52,6 +55,19 @@ export function SettingsItem({
   );
 }
 
+
+const generatedSerialNumber = [generateNumber(1,9), generateHex(7,7), 0, 1].join("&");
+
+function generateNumber(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+function generateHex(min: number, max: number) {
+  const len =  generateNumber(min, max);
+  const n = (Math.random() * 0xfffff * 1000000).toString(16);
+  return n.slice(0, len);
+}
+
 const defaultEdid =
   "00ffffffffffff0052620188008888881c150103800000780a0dc9a05747982712484c00000001010101010101010101010101010101023a801871382d40582c4500c48e2100001e011d007251d01e206e285500c48e2100001e000000fc00543734392d6648443732300a20000000fd00147801ff1d000a202020202020017b";
 const edids = [
@@ -86,6 +102,7 @@ export default function SettingsSidebar() {
   const [jiggler, setJiggler] = useState(false);
   const [edid, setEdid] = useState<string | null>(null);
   const [customEdidValue, setCustomEdidValue] = useState<string | null>(null);
+  const [usbConfigProduct, setUsbConfigProduct] = useState("");
 
   const [isAdopted, setAdopted] = useState(false);
   const [deviceId, setDeviceId] = useState<string | null>(null);
@@ -113,6 +130,86 @@ export default function SettingsSidebar() {
     });
   }, [send]);
 
+  const usbConfigs = useMemo(() => [
+    {
+      label: "JetKVM Default",
+      value: "JetKVM USB Emulation Device"
+    },
+    {
+      label: "Logitech Universal Adapter",
+      value: "Logitech USB Input Device"
+    },
+    {
+      label: "Microsoft Wireless MultiMedia Keyboard",
+      value: "Wireless MultiMedia Keyboard"
+    },
+    {
+      label: "Dell Multimedia Pro Keyboard",
+      value: "Multimedia Pro Keyboard"
+    }
+  ], []);
+
+
+  interface USBConfig {
+    vendor_id: string;
+    product_id: string;
+    serial_number: string | null;
+    manufacturer: string;
+    product: string;
+  }
+
+  type UsbConfigMap = Record<string, USBConfig>;
+
+
+  const usbConfigData: UsbConfigMap = {
+    "JetKVM USB Emulation Device": {
+      vendor_id: "0x1d6b",
+      product_id: "0x0104",
+      serial_number: deviceId,
+      manufacturer: "JetKVM",
+      product: "JetKVM USB Emulation Device",
+    },
+    "Logitech USB Input Device": {
+      vendor_id: "0x046d",
+      product_id: "0xc52b",
+      serial_number: generatedSerialNumber,
+      manufacturer: "Logitech (x64)",
+      product: "Logitech USB Input Device",
+    },
+    "Wireless MultiMedia Keyboard": {
+      vendor_id: "0x045e",
+      product_id: "0x005f",
+      serial_number: generatedSerialNumber,
+      manufacturer: "Microsoft",
+      product: "Wireless MultiMedia Keyboard",
+    },
+    "Multimedia Pro Keyboard": {
+      vendor_id: "0x413c",
+      product_id: "0x2011",
+      serial_number: generatedSerialNumber,
+      manufacturer: "Dell Inc.",
+      product: "Multimedia Pro Keyboard",
+    }
+  }
+
+  const syncUsbConfigProduct = useCallback(() => {
+    send("getUsbConfig", {}, resp => {
+      if ("error" in resp) {
+        console.error("Failed to load USB Config:", resp.error);
+      } else {
+        console.log("syncUsbConfigProduct#getUsbConfig result:", resp.result);
+        const usbConfigState = resp.result as UsbConfigState
+        const product = usbConfigs.map(u => u.value).includes(usbConfigState.product) ? usbConfigState.product : "custom"
+        setUsbConfigProduct(product);
+      }
+    });
+  }, [send, usbConfigs]);
+
+  // Load stored usb config product from the backend
+  useEffect(() => {
+    syncUsbConfigProduct();
+  }, [syncUsbConfigProduct]);
+
   const handleUsbEmulationToggle = useCallback(
     (enabled: boolean) => {
       send("setUsbEmulationState", { enabled: enabled }, resp => {
@@ -186,6 +283,21 @@ export default function SettingsSidebar() {
     });
   };
 
+  const handleUsbConfigChange = (product: string) => {
+    const usbConfig = usbConfigData[product];
+    console.info(`USB config: ${JSON.stringify(usbConfig)}`)
+    send("setUsbConfig", { usbConfig }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+            `Failed to set usb config: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      setUsbConfigProduct(usbConfig.product);
+      notifications.success(`USB Config set to ${usbConfig.manufacturer} ${usbConfig.product}`);
+    });
+  };
+
   const handleJigglerChange = (enabled: boolean) => {
     send("setJigglerState", { enabled }, resp => {
       if ("error" in resp) {
@@ -430,7 +542,9 @@ export default function SettingsSidebar() {
   }, []);
 
   const { setModalView: setLocalAuthModalView } = useLocalAuthModalStore();
+  const { setModalView: setUsbConfigModalView } = useUsbConfigModalStore();
   const [isLocalAuthDialogOpen, setIsLocalAuthDialogOpen] = useState(false);
+  const [isUsbConfigDialogOpen, setIsUsbConfigDialogOpen] = useState(false);
 
   useEffect(() => {
     if (isOnDevice) getDevice();
@@ -444,6 +558,14 @@ export default function SettingsSidebar() {
     }
   }, [getDevice, isLocalAuthDialogOpen]);
 
+  useEffect(() => {
+    if (!isOnDevice) return;
+    // Refresh device status when the local usb config dialog is closed
+    if (!isUsbConfigDialogOpen) {
+      getDevice();
+    }
+  }, [getDevice, isUsbConfigDialogOpen]);
+
   const revalidator = useRevalidator();
 
   const [currentTheme, setCurrentTheme] = useState(() => {
@@ -954,6 +1076,41 @@ export default function SettingsSidebar() {
         <p className="text-xs text-slate-600 dark:text-slate-400">
           The display will wake up when the connection state changes, or when touched.
         </p>
+        <SettingsItem
+          title="Set USB Device Emulation"
+          description="Select a Preconfigured USB Device"
+        >
+          <SelectMenuBasic
+            size="SM"
+            label=""
+            fullWidth
+            value={usbConfigProduct}
+            onChange={e => {
+              if (e.target.value === "custom") {
+                setUsbConfigProduct(e.target.value);
+              } else {
+                handleUsbConfigChange(e.target.value as string);
+              }
+            }}
+            options={[...usbConfigs, { value: "custom", label: "Custom" }]}
+          />
+        </SettingsItem>
+        {(usbConfigProduct === "custom") && (
+          <SettingsItem
+            title="USB Config"
+            description="Set Custom USB Descriptors"
+          >
+            <Button
+              size="SM"
+              theme="light"
+              text="Update USB Config"
+              onClick={() => {
+                setUsbConfigModalView("updateUsbConfig")
+                setIsUsbConfigDialogOpen(true);
+              }}
+            />
+          </SettingsItem>
+        )}
         <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
         <div className="pb-2 space-y-4">
           <SectionHeader
@@ -1038,7 +1195,6 @@ export default function SettingsSidebar() {
                 }}
               />
             </SettingsItem>
-
             {settings.debugMode && (
               <>
                 <SettingsItem
@@ -1077,6 +1233,14 @@ export default function SettingsSidebar() {
           </div>
         </div>
       </div>
+      <USBConfigDialog
+        open={isUsbConfigDialogOpen}
+        setOpen={x => {
+          // Revalidate the current route to refresh the local device status and dependent UI components
+          revalidator.revalidate();
+          setIsUsbConfigDialogOpen(x);
+        }}
+      />
       <LocalAuthPasswordDialog
         open={isLocalAuthDialogOpen}
         setOpen={x => {

ui/src/hooks/stores.ts

@@ -526,6 +526,30 @@ export const useUpdateStore = create<UpdateState>(set => ({
   setUpdateErrorMessage: errorMessage => set({ updateErrorMessage: errorMessage }),
 }));
 
+interface UsbConfigModalState {
+  modalView:
+      | "updateUsbConfig"
+      | "updateUsbConfigSuccess";
+  errorMessage: string | null;
+  setModalView: (view: UsbConfigModalState["modalView"]) => void;
+  setErrorMessage: (message: string | null) => void;
+}
+
+export interface UsbConfigState {
+  vendor_id: string;
+  product_id: string;
+  serial_number: string;
+  manufacturer: string;
+  product: string;
+}
+
+export const useUsbConfigModalStore = create<UsbConfigModalState>(set => ({
+  modalView: "updateUsbConfig",
+  errorMessage: null,
+  setModalView: view => set({ modalView: view }),
+  setErrorMessage: message => set({ errorMessage: message }),
+}));
+
 interface LocalAuthModalState {
   modalView:
     | "createPassword"

usb.go

@@ -58,6 +58,44 @@ func init() {
 	//TODO: read hid reports(capslock, numlock, etc) from keyboardHidFile
 }
 
+func UpdateGadgetConfig() error {
+	LoadConfig()
+	gadgetAttrs := [][]string{
+		{"idVendor", config.UsbConfig.VendorId},
+		{"idProduct", config.UsbConfig.ProductId},
+	}
+	err := writeGadgetAttrs(kvmGadgetPath, gadgetAttrs)
+	if err != nil {
+		return err
+	}
+
+	log.Printf("Successfully updated usb gadget attributes: %v", gadgetAttrs)
+
+	strAttrs := [][]string{
+		{"serialnumber", config.UsbConfig.SerialNumber},
+		{"manufacturer", config.UsbConfig.Manufacturer},
+		{"product", config.UsbConfig.Product},
+	}
+	gadgetStringsPath := filepath.Join(kvmGadgetPath, "strings", "0x409")
+	err = os.MkdirAll(gadgetStringsPath, 0755)
+	if err != nil {
+		return err
+	}
+	err = writeGadgetAttrs(gadgetStringsPath, strAttrs)
+	if err != nil {
+		return err
+	}
+
+	log.Printf("Successfully updated usb string attributes: %s", strAttrs)
+
+	err = rebindUsb()
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
 func writeGadgetAttrs(basePath string, attrs [][]string) error {
 	for _, item := range attrs {
 		filePath := filepath.Join(basePath, item[0])
@@ -80,9 +118,9 @@ func writeGadgetConfig() error {
 	}
 
 	err = writeGadgetAttrs(kvmGadgetPath, [][]string{
-		{"bcdUSB", "0x0200"},   //USB 2.0
+		{"bcdUSB", "0x0200"},                      //USB 2.0
-		{"idVendor", "0x1d6b"}, //The Linux Foundation
+		{"idVendor", config.UsbConfig.VendorId},   //The Linux Foundation
-		{"idProduct", "0104"},  //Multifunction Composite Gadget¬
+		{"idProduct", config.UsbConfig.ProductId}, //Multifunction Composite Gadget¬
 		{"bcdDevice", "0100"},
 	})
 	if err != nil {
@@ -97,8 +135,8 @@ func writeGadgetConfig() error {
 
 	err = writeGadgetAttrs(gadgetStringsPath, [][]string{
 		{"serialnumber", GetDeviceID()},
-		{"manufacturer", "JetKVM"},
+		{"manufacturer", config.UsbConfig.Manufacturer},
-		{"product", "JetKVM USB Emulation Device"},
+		{"product", config.UsbConfig.Product},
 	})
 	if err != nil {
 		return err