Save calibration data and show preliminary GUI (#1078)

* Serialize all calibration data

* Run lint

* typing nit

* fix code

* move these tables around some

* Add cool formatting

* add request to get snapshots by resolution and camera

* re-enable all resolutions

* add wip so i can change computers (SQUASH ME AND KILL ME AHHHH)

* Get everything working but viewing snapshots

* Update RequestHandler.java

* Update CameraCalibrationInfoCard.vue

* Update CameraCalibrationInfoCard.vue

* add observation viewer

* round

* fix illiegal import

* Swap to PNG and serialize insolution

* move import/export buttons TO THE TOP

* Update WebsocketDataTypes.ts

* Add snapshotname to observation

* Refactor to serialize snapshot image itself

* Run lint

* Use new base64 image data in info card

* Update SettingTypes.ts

* Create calibration json -> mrcal converter script

* Update calibrationUtils.py

* Fix calibrate NPEs in teest

* Run lint

* Always run cornersubpix

* Update CameraCalibrationInfoCard.vue

Update CameraCalibrationInfoCard.vue

* Update OpenCVHelp.java

* Update OpenCVHelp.java

* Replace test mode camera JSONs

* Run wpiformat

* Revert intrinsics but keep other data

* Remove misc comments

* Rename JsonMat->JsonImageMat and add calobject_warp

* Update Server.java

* Rename cameraExtrinsics to distCoeffs

* fix typing issues

* use util methods

* Formatting fixes

* fix styling

* move to devTools

* remove unneeded or unused imports

* Remove fixed-right css

If its really that big of a deal, we can add it back later, kind of a drag to fix rn.

* Create util method

* Remove extra legacy calibration things

---------

Co-authored-by: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>

photon-client/src/stores/settings/CameraSettingsStore.ts

@@ -4,6 +4,7 @@ import type {
   CameraCalibrationResult,
   CameraSettings,
   ConfigurableCameraSettings,
+  Resolution,
   RobotOffsetType,
   VideoFormat
 } from "@/types/SettingTypes";
@@ -13,6 +14,7 @@ import type { WebsocketCameraSettingsUpdate } from "@/types/WebsocketDataTypes";
 import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
 import type { ActiveConfigurablePipelineSettings, ActivePipelineSettings, PipelineType } from "@/types/PipelineTypes";
 import axios from "axios";
+import { resolutionsAreEqual } from "@/lib/PhotonUtils";
 
 interface CameraSettingsStore {
   cameras: CameraSettings[];
@@ -41,18 +43,22 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
       return this.currentCameraSettings.validVideoFormats[this.currentPipelineSettings.cameraVideoModeIndex];
     },
     isCurrentVideoFormatCalibrated(): boolean {
-      return this.currentCameraSettings.completeCalibrations.some(
-        (v) =>
-          v.resolution.width === this.currentVideoFormat.resolution.width &&
-          v.resolution.height === this.currentVideoFormat.resolution.height
+      return this.currentCameraSettings.completeCalibrations.some((v) =>
+        resolutionsAreEqual(v.resolution, this.currentVideoFormat.resolution)
       );
     },
     cameraNames(): string[] {
       return this.cameras.map((c) => c.nickname);
     },
+    currentCameraName(): string {
+      return this.cameraNames[useStateStore().currentCameraIndex];
+    },
     pipelineNames(): string[] {
       return this.currentCameraSettings.pipelineNicknames;
     },
+    currentPipelineName(): string {
+      return this.pipelineNames[useStateStore().currentCameraIndex];
+    },
     isDriverMode(): boolean {
       return this.currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.DriverMode;
     },
@@ -67,6 +73,7 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
     updateCameraSettingsFromWebsocket(data: WebsocketCameraSettingsUpdate[]) {
       this.cameras = data.map<CameraSettings>((d) => ({
         nickname: d.nickname,
+        uniqueName: d.uniqueName,
         fov: {
           value: d.fov,
           managedByVendor: !d.isFovConfigurable
@@ -92,16 +99,7 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
             standardDeviation: v.standardDeviation,
             mean: v.mean
           })),
-        completeCalibrations: d.calibrations.map<CameraCalibrationResult>((calib) => ({
-          resolution: {
-            height: calib.height,
-            width: calib.width
-          },
-          distCoeffs: calib.distCoeffs,
-          standardDeviation: calib.standardDeviation,
-          perViewErrors: calib.perViewErrors,
-          intrinsics: calib.intrinsics
-        })),
+        completeCalibrations: d.calibrations,
         isCSICamera: d.isCSICamera,
         pipelineNicknames: d.pipelineNicknames,
         currentPipelineIndex: d.currentPipelineIndex,
@@ -360,6 +358,16 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
       };
       return axios.post("/calibration/importFromCalibDB", payload, { headers: { "Content-Type": "text/plain" } });
     },
+    importCalibrationFromData(
+      data: { calibration: CameraCalibrationResult },
+      cameraIndex: number = useStateStore().currentCameraIndex
+    ) {
+      const payload = {
+        ...data,
+        cameraIndex: cameraIndex
+      };
+      return axios.post("/calibration/importFromData", payload);
+    },
     /**
      * Take a snapshot for the calibration processes
      *
@@ -408,6 +416,12 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
         cameraIndex: cameraIndex
       };
       useStateStore().websocket?.send(payload, true);
+    },
+    getCalibrationCoeffs(
+      resolution: Resolution,
+      cameraIndex: number = useStateStore().currentCameraIndex
+    ): CameraCalibrationResult | undefined {
+      return this.cameras[cameraIndex].completeCalibrations.find((v) => resolutionsAreEqual(v.resolution, resolution));
     }
   }
 });