feat(usb): dynamic usb devices config

Author: ym

config.go

@@ -20,6 +20,13 @@ type UsbConfig struct {
 	Product      string `json:"product"`
 }
 
+type UsbDevicesConfig struct {
+	AbsoluteMouse bool `json:"absolute_mouse"`
+	RelativeMouse bool `json:"relative_mouse"`
+	Keyboard      bool `json:"keyboard"`
+	MassStorage   bool `json:"mass_storage"`
+}
+
 type Config struct {
 	CloudURL             string            `json:"cloud_url"`
 	CloudAppURL          string            `json:"cloud_app_url"`
@@ -38,6 +45,7 @@ type Config struct {
 	DisplayDimAfterSec   int               `json:"display_dim_after_sec"`
 	DisplayOffAfterSec   int               `json:"display_off_after_sec"`
 	UsbConfig            *UsbConfig        `json:"usb_config"`
+	UsbDevices           *UsbDevicesConfig `json:"usb_devices"`
 }
 
 const configPath = "/userdata/kvm_config.json"
@@ -57,6 +65,12 @@ var defaultConfig = &Config{
 		Manufacturer: "JetKVM",
 		Product:      "USB Emulation Device",
 	},
+	UsbDevices: &UsbDevicesConfig{
+		AbsoluteMouse: true,
+		RelativeMouse: true,
+		Keyboard:      true,
+		MassStorage:   true,
+	},
 }
 
 var (
@@ -95,6 +109,10 @@ func LoadConfig() {
 		loadedConfig.UsbConfig = defaultConfig.UsbConfig
 	}
 
+	if loadedConfig.UsbDevices == nil {
+		loadedConfig.UsbDevices = defaultConfig.UsbDevices
+	}
+
 	config = &loadedConfig
 }
 

jsonrpc.go

@@ -544,19 +544,7 @@ func rpcGetUsbConfig() (UsbConfig, error) {
 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
+	return updateUsbRelatedConfig()
 }
 
 func rpcGetWakeOnLanDevices() ([]WakeOnLanDevice, error) {
@@ -751,6 +739,41 @@ func rpcSetSerialSettings(settings SerialSettings) error {
 	return nil
 }
 
+func rpcGetUsbDevices() (UsbDevicesConfig, error) {
+	return *config.UsbDevices, nil
+}
+
+func updateUsbRelatedConfig() error {
+	if err := UpdateGadgetConfig(); err != nil {
+		return fmt.Errorf("failed to write gadget config: %w", err)
+	}
+	if err := SaveConfig(); err != nil {
+		return fmt.Errorf("failed to save config: %w", err)
+	}
+	return nil
+}
+
+func rpcSetUsbDevices(usbDevices UsbDevicesConfig) error {
+	config.UsbDevices = &usbDevices
+	return updateUsbRelatedConfig()
+}
+
+func rpcSetUsbDeviceState(device string, enabled bool) error {
+	switch device {
+	case "absoluteMouse":
+		config.UsbDevices.AbsoluteMouse = enabled
+	case "relativeMouse":
+		config.UsbDevices.RelativeMouse = enabled
+	case "keyboard":
+		config.UsbDevices.Keyboard = enabled
+	case "massStorage":
+		config.UsbDevices.MassStorage = enabled
+	default:
+		return fmt.Errorf("invalid device: %s", device)
+	}
+	return updateUsbRelatedConfig()
+}
+
 func rpcSetCloudUrl(apiUrl string, appUrl string) error {
 	config.CloudURL = apiUrl
 	config.CloudAppURL = appUrl
@@ -831,6 +854,9 @@ var rpcHandlers = map[string]RPCHandler{
 	"setATXPowerAction":      {Func: rpcSetATXPowerAction, Params: []string{"action"}},
 	"getSerialSettings":      {Func: rpcGetSerialSettings},
 	"setSerialSettings":      {Func: rpcSetSerialSettings, Params: []string{"settings"}},
+	"getUsbDevices":          {Func: rpcGetUsbDevices},
+	"setUsbDevices":          {Func: rpcSetUsbDevices, Params: []string{"devices"}},
+	"setUsbDeviceState":      {Func: rpcSetUsbDeviceState, Params: []string{"device", "enabled"}},
 	"setCloudUrl":            {Func: rpcSetCloudUrl, Params: []string{"apiUrl", "appUrl"}},
 	"getScrollSensitivity":   {Func: rpcGetScrollSensitivity},
 	"setScrollSensitivity":   {Func: rpcSetScrollSensitivity, Params: []string{"sensitivity"}},

ui/src/components/UsbDeviceSetting.tsx

@@ -0,0 +1,130 @@
+import { useCallback } from "react";
+
+import { useEffect, useState } from "react";
+import { useJsonRpc } from "../hooks/useJsonRpc";
+import notifications from "../notifications";
+import { SettingsItem } from "../routes/devices.$id.settings";
+import Checkbox from "./Checkbox";
+
+export interface USBConfig {
+  vendor_id: string;
+  product_id: string;
+  serial_number: string;
+  manufacturer: string;
+  product: string;
+}
+
+export interface UsbDeviceConfig {
+  keyboard: boolean;
+  absolute_mouse: boolean;
+  relative_mouse: boolean;
+  mass_storage: boolean;
+}
+
+const defaultUsbDeviceConfig: UsbDeviceConfig = {
+  keyboard: true,
+  absolute_mouse: true,
+  relative_mouse: true,
+  mass_storage: true,
+}
+
+export function UsbDeviceSetting() {
+  const [send] = useJsonRpc();
+
+  const [usbDeviceConfig, setUsbDeviceConfig] = useState<UsbDeviceConfig>(defaultUsbDeviceConfig);
+  const syncUsbDeviceConfig = useCallback(() => {
+    send("getUsbDevices", {}, resp => {
+      if ("error" in resp) {
+        console.error("Failed to load USB devices:", resp.error);
+        notifications.error(
+          `Failed to load USB devices: ${resp.error.data || "Unknown error"}`,
+        );
+      } else {
+        console.log("syncUsbDeviceConfig#getUsbDevices result:", resp.result);
+        const usbConfigState = resp.result as UsbDeviceConfig;
+        setUsbDeviceConfig(usbConfigState);
+      }
+    });
+  }, [send]);
+
+  const handleUsbConfigChange = useCallback(
+    (devices: UsbDeviceConfig) => {
+      send("setUsbDevices", { devices }, resp => {
+        if ("error" in resp) {
+          notifications.error(
+            `Failed to set usb devices: ${resp.error.data || "Unknown error"}`,
+          );
+          return;
+        }
+        // setUsbConfigProduct(usbConfig.product);
+        notifications.success(
+          `USB Devices updated`
+        );
+        syncUsbDeviceConfig();
+      });
+    },
+    [send, syncUsbDeviceConfig],
+  );
+
+  const onUsbConfigItemChange = useCallback((key: keyof UsbDeviceConfig) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUsbDeviceConfig((val) => {
+      val[key] = e.target.checked;
+      handleUsbConfigChange(val);
+      return val;
+    });
+  }, [handleUsbConfigChange]);
+
+  useEffect(() => {
+    syncUsbDeviceConfig();
+  }, [syncUsbDeviceConfig]);
+
+  return (
+    <>
+      <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
+      <div className="space-y-4">
+        <SettingsItem
+          title="Enable Keyboard"
+          description="Enable Keyboard"
+        >
+          <Checkbox
+            checked={usbDeviceConfig.keyboard}
+            onChange={onUsbConfigItemChange("keyboard")}
+          />
+        </SettingsItem>
+      </div>
+      <div className="space-y-4">
+        <SettingsItem
+          title="Enable Absolute Mouse (Pointer)"
+          description="Enable Absolute Mouse (Pointer)"
+        >
+          <Checkbox
+            checked={usbDeviceConfig.absolute_mouse}
+            onChange={onUsbConfigItemChange("absolute_mouse")}
+          />
+        </SettingsItem>
+      </div>
+      <div className="space-y-4">
+        <SettingsItem
+          title="Enable Relative Mouse"
+          description="Enable Relative Mouse"
+        >
+          <Checkbox
+            checked={usbDeviceConfig.relative_mouse}
+            onChange={onUsbConfigItemChange("relative_mouse")}
+          />
+        </SettingsItem>
+      </div>
+      <div className="space-y-4">
+        <SettingsItem
+          title="Enable USB Mass Storage"
+          description="Sometimes it might need to be disabled to prevent issues with certain devices"
+        >
+          <Checkbox
+            checked={usbDeviceConfig.mass_storage}
+            onChange={onUsbConfigItemChange("mass_storage")}
+          />
+        </SettingsItem>
+      </div>
+    </>
+  );
+}

ui/src/routes/devices.$id.settings.hardware.tsx

@@ -7,6 +7,7 @@ import { useJsonRpc } from "@/hooks/useJsonRpc";
 import notifications from "../notifications";
 import { SelectMenuBasic } from "@components/SelectMenuBasic";
 import { UsbConfigSetting } from "../components/UsbConfigSetting";
+import { UsbDeviceSetting } from "@components/UsbDeviceSetting";
 import { FeatureFlag } from "../components/FeatureFlag";
 
 export default function SettingsHardwareRoute() {
@@ -132,6 +133,10 @@ export default function SettingsHardwareRoute() {
       <FeatureFlag minAppVersion="0.3.8">
         <UsbConfigSetting />
       </FeatureFlag>
+
+      <FeatureFlag minAppVersion="0.3.8">
+        <UsbDeviceSetting />
+      </FeatureFlag>
     </div>
   );
 }