Load params from a file (#818)

* Add functionality to load parameters from a file

* Add loading params to modified params list

* Address copilot review comments

* Fix bugs in params controller setParam function

* Address copilot review comments

* Fix pytest

Author: 1Blademaster

gcs/electron/main.ts

@@ -41,7 +41,7 @@ import registerVibeStatusIPC, {
   destroyVibeStatusWindow,
 } from "./modules/vibeStatusWindow"
 import registerVideoIPC, { destroyVideoWindow } from "./modules/videoWindow"
-
+import { readParamsFile } from "./utils/paramsFile"
 // The built directory structure
 //
 // ├─┬─┬ dist
@@ -487,6 +487,42 @@ app.whenReady().then(() => {
     return result
   })
 
+  ipcMain.handle("params:load-params-from-file", async (event) => {
+    const window = BrowserWindow.fromWebContents(event.sender)
+    if (!window) {
+      throw new Error("No active window found")
+    }
+
+    const { canceled, filePaths } = await dialog.showOpenDialog({
+      properties: ["openFile"],
+      filters: [
+        { name: "Param File", extensions: ["param"] },
+        { name: "All Files", extensions: ["*"] },
+      ],
+    })
+
+    if (!canceled && filePaths.length > 0) {
+      const filePath = filePaths[0]
+      try {
+        const params = readParamsFile(filePath)
+        return {
+          success: true,
+          path: filePath,
+          name: path.basename(filePath),
+          params: params,
+        }
+      } catch (err) {
+        console.error("Error reading param file:", err)
+        return {
+          success: false,
+          error: err instanceof Error ? err.message : "Unknown error",
+        }
+      }
+    }
+
+    return null
+  })
+
   ipcMain.handle("app:get-node-env", () =>
     app.isPackaged ? "production" : "development",
   )

gcs/electron/preload.js

@@ -32,6 +32,7 @@ const ALLOWED_INVOKE_CHANNELS = [
   "app:open-ekf-status-window",
   "app:update-vibe-status",
   "app:open-vibe-status-window",
+  "params:load-params-from-file",
 ]
 
 const ALLOWED_SEND_CHANNELS = [

gcs/electron/utils/paramsFile.ts

@@ -0,0 +1,25 @@
+import { readFileSync } from "fs"
+
+export const readParamsFile = (filePath: string): Record<string, number> => {
+  try {
+    const fileContents = readFileSync(filePath, "utf-8")
+    const lines = fileContents.split("\n")
+    const params: Record<string, number> = {}
+
+    // Params are stored as key,value pairs on each line
+    lines.forEach((line) => {
+      const trimmedLine = line.trim()
+      if (trimmedLine && !trimmedLine.startsWith("#")) {
+        const [key, value] = trimmedLine.split(",")
+        if (key && value) {
+          params[key.trim()] = parseFloat(value.trim())
+        }
+      }
+    })
+
+    return params
+  } catch (error) {
+    console.error("Error reading params file:", error)
+    throw error
+  }
+}

gcs/src/components/params/loadParamsFileModal.jsx

@@ -0,0 +1,99 @@
+/*
+    Modal that pops up when loading params from a file to show the user the param diff
+*/
+
+// 3rd party imports
+import { Button, Modal, Table, TextInput } from "@mantine/core"
+
+// Redux
+import { useState } from "react"
+import { useDispatch, useSelector } from "react-redux"
+import { showSuccessNotification } from "../../helpers/notification"
+import {
+  appendModifiedParams,
+  selectLoadedFileName,
+  selectLoadedParams,
+  selectLoadParamsFileModalOpen,
+  setLoadParamsFileModalOpen,
+} from "../../redux/slices/paramsSlice"
+
+export default function LoadParamsFileModal() {
+  const dispatch = useDispatch()
+  const opened = useSelector(selectLoadParamsFileModalOpen)
+  const loadedFileName = useSelector(selectLoadedFileName)
+  const loadedParams = useSelector(selectLoadedParams)
+
+  const [paramSearchValue, setParamSearchValue] = useState("")
+
+  function acceptLoadedParams() {
+    dispatch(
+      appendModifiedParams(
+        loadedParams.map((param) => ({
+          param_id: param.id,
+          param_value: param.newValue,
+          param_type: param.type,
+          initial_value: param.oldValue,
+        })),
+      ),
+    )
+    dispatch(setLoadParamsFileModalOpen(false))
+    showSuccessNotification(
+      `Successfully loaded ${loadedParams.length} parameters from ${loadedFileName}`,
+    )
+  }
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={() => dispatch(setLoadParamsFileModalOpen(false))}
+      title={`Load params from ${loadedFileName}`}
+      closeOnClickOutside={false}
+      closeOnEscape={false}
+      centered
+      overlayProps={{
+        backgroundOpacity: 0.55,
+        blur: 3,
+      }}
+      size="auto"
+    >
+      <div className="flex flex-col items-center justify-center gap-4 w-full">
+        <TextInput
+          placeholder="Search parameters"
+          value={paramSearchValue}
+          onChange={(event) => setParamSearchValue(event.currentTarget.value)}
+          className="w-full"
+        />
+        <Table.ScrollContainer maxHeight={600} className="w-full">
+          <Table striped highlightOnHover withColumnBorders>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th className="w-56">Parameter</Table.Th>
+                <Table.Th className="w-40">Current value</Table.Th>
+                <Table.Th className="w-40">New value</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {loadedParams
+                .filter((param) =>
+                  param.id
+                    .toLowerCase()
+                    .includes(paramSearchValue.toLowerCase()),
+                )
+                .sort((a, b) => a.id.localeCompare(b.id))
+                .map((param) => (
+                  <Table.Tr key={param.id}>
+                    <Table.Td>{param.id}</Table.Td>
+                    <Table.Td>{param.oldValue}</Table.Td>
+                    <Table.Td>{param.newValue}</Table.Td>
+                  </Table.Tr>
+                ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+        <Button onClick={acceptLoadedParams} color="green">
+          Load params
+        </Button>
+      </div>
+    </Modal>
+  )
+}

gcs/src/components/params/paramsToolbar.jsx

@@ -14,6 +14,7 @@ import {
   IconPower,
   IconRefresh,
   IconTool,
+  IconUpload,
 } from "@tabler/icons-react"
 
 // Styling imports
@@ -41,7 +42,7 @@ import {
   toggleShowModifiedParams,
 } from "../../redux/slices/paramsSlice.js"
 
-export default function ParamsToolbar() {
+export default function ParamsToolbar({ loadParamsFromFile }) {
   const dispatch = useDispatch()
   const modifiedParams = useSelector(selectModifiedParams)
   const showModifiedParams = useSelector(selectShowModifiedParams)
@@ -144,6 +145,15 @@ export default function ParamsToolbar() {
       >
         Save params to file
       </Button>
+
+      <Button
+        size="sm"
+        rightSection={<IconUpload size={14} />}
+        onClick={loadParamsFromFile}
+        color={tailwindColors.blue[600]}
+      >
+        Load params from file
+      </Button>
     </div>
   )
 }

gcs/src/components/params/rowItem.jsx

@@ -89,7 +89,7 @@ const RowItem = memo(({ index, style }) => {
         <ValueInput index={index} paramDef={paramDef} className="grow" />
         {hasBeenModified && (
           <Tooltip
-            label={`Reset to previous value of ${paramPreviousValue.param_value}`}
+            label={`Reset to previous value of ${paramPreviousValue?.param_value}`}
           >
             <ActionIcon
               size="lg"

gcs/src/helpers/mavlinkConstants.js

@@ -519,3 +519,20 @@ export const EKF_STATUS_WARNING_LEVEL = 0.5
 export const EKF_STATUS_DANGER_LEVEL = 0.8
 export const VIBE_STATUS_WARNING_LEVEL = 30
 export const VIBE_STATUS_DANGER_LEVEL = 60
+
+export const EXCLUDE_PARAMS_LOAD = [
+  "ARSPD_OFFSET",
+  "CMD_INDEX",
+  "CMD_TOTAL",
+  "FENCE_TOTAL",
+  "FORMAT_VERSION",
+  "GND_ABS_PRESS",
+  "GND_TEMP",
+  "LOG_LASTFILE",
+  "MIS_TOTAL",
+  "SYSID_SW_MREV",
+  "SYS_NUM_RESETS",
+  "STAT_BOOTCNT",
+  "STAT_RESET",
+  "STAT_RUNTIME",
+]

gcs/src/params.jsx

@@ -22,6 +22,9 @@ import { Row } from "./components/params/row.jsx"
 
 // Redux
 import { useDispatch, useSelector } from "react-redux"
+import LoadParamsFileModal from "./components/params/loadParamsFileModal.jsx"
+import { EXCLUDE_PARAMS_LOAD } from "./helpers/mavlinkConstants.js"
+import { showErrorNotification } from "./helpers/notification.js"
 import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice.js"
 import {
   emitRefreshParams,
@@ -36,9 +39,22 @@ import {
   selectShownParams,
   setFetchingVars,
   setHasFetchedOnce,
+  setLoadedFileName,
+  setLoadedParams,
+  setLoadParamsFileModalOpen,
   setShownParams,
 } from "./redux/slices/paramsSlice.js"
 
+function cleanFloat(value, decimals = 5) {
+  if (typeof value === "number") {
+    return Number(value.toFixed(decimals))
+  }
+  if (!isNaN(value)) {
+    return Number(parseFloat(value).toFixed(decimals))
+  }
+  return value
+}
+
 export default function Params() {
   const dispatch = useDispatch()
   const connected = useSelector(selectConnectedToDrone)
@@ -58,12 +74,6 @@ export default function Params() {
   const fetchingVars = useSelector(selectFetchingVars)
   const fetchingVarsProgress = useSelector(selectFetchingVarsProgress)
 
-  function fetchParams() {
-    dispatch(setFetchingVars(true))
-    dispatch(emitRefreshParams())
-    dispatch(setHasFetchedOnce(true))
-  }
-
   // Reset state if we loose connection
   useEffect(() => {
     if (!connected) {
@@ -89,9 +99,68 @@ export default function Params() {
     dispatch(setShownParams(filteredParams))
   }, [debouncedSearchValue, showModifiedParams, params, modifiedParams])
 
+  function fetchParams() {
+    dispatch(setFetchingVars(true))
+    dispatch(emitRefreshParams())
+    dispatch(setHasFetchedOnce(true))
+  }
+
+  async function loadParamsFromFile() {
+    const result = await window.ipcRenderer.invoke(
+      "params:load-params-from-file",
+    )
+    if (!result) {
+      return
+    }
+
+    if (result.success) {
+      dispatch(setLoadedFileName(result.name))
+
+      // Only keep params that are different to the current ones
+      const loadedParamsList = []
+      for (const [key, value] of Object.entries(result.params)) {
+        if (EXCLUDE_PARAMS_LOAD.includes(key)) {
+          continue
+        }
+
+        const existingParam = params.find((param) => param.param_id === key)
+        const cleanedNewValue = cleanFloat(value)
+
+        if (existingParam) {
+          const cleanedOldValue = cleanFloat(existingParam.param_value)
+
+          if (cleanedOldValue !== cleanedNewValue) {
+            loadedParamsList.push({
+              id: key,
+              oldValue: cleanedOldValue,
+              newValue: cleanedNewValue,
+              type: existingParam.param_type,
+            })
+          }
+        } else {
+          loadedParamsList.push({
+            id: key,
+            oldValue: null,
+            newValue: cleanedNewValue,
+            type: null,
+          })
+        }
+      }
+      dispatch(setLoadedParams(loadedParamsList))
+      dispatch(setLoadParamsFileModalOpen(true))
+    } else {
+      showErrorNotification(
+        `Error loading params from file: ${
+          result.error || "Please try again."
+        }`,
+      )
+    }
+  }
+
   return (
     <Layout currentPage="params">
       <AutopilotRebootModal />
+      <LoadParamsFileModal />
 
       {connected ? (
         <>
@@ -112,7 +181,7 @@ export default function Params() {
 
           {Object.keys(params).length > 0 && !fetchingVars && (
             <div className="w-full h-full contents">
-              <ParamsToolbar />
+              <ParamsToolbar loadParamsFromFile={loadParamsFromFile} />
 
               <div className="h-full w-2/3 mx-auto">
                 <AutoSizer>