Show board outliers in calibration info card (#1267)

photon-client/src/components/app/photon-3d-visualizer.vue

@@ -8,8 +8,10 @@ import { onBeforeUnmount, onMounted, watchEffect } from "vue";
 const {
   ArrowHelper,
   BoxGeometry,
+  CameraHelper,
   Color,
   ConeGeometry,
+  Group,
   Mesh,
   MeshNormalMaterial,
   PerspectiveCamera,
@@ -20,6 +22,18 @@ const {
 } = await import("three");
 const { TrackballControls } = await import("three/examples/jsm/controls/TrackballControls");
 
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { createPerspectiveCamera } from "@/lib/ThreeUtils";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
+
+const calibrationCoeffs = useCameraSettingsStore().getCalibrationCoeffs(
+  useCameraSettingsStore().currentCameraSettings.validVideoFormats[
+    useCameraSettingsStore().currentPipelineSettings.cameraVideoModeIndex
+  ].resolution
+);
+
 const props = defineProps<{
   targets: PhotonTarget[];
 }>();
@@ -32,15 +46,18 @@ let controls: TrackballControls | undefined;
 let previousTargets: Object3D[] = [];
 const drawTargets = (targets: PhotonTarget[]) => {
   // Check here, since if we check in watchEffect this never gets called
-  if (scene === undefined || camera === undefined || renderer === undefined || controls === undefined) {
+  if (!scene || !camera || !renderer || !controls) {
     return;
   }
 
+  if (theme.global.name.value === "LightTheme") scene.background = new Color(0xa9a9a9);
+  else scene.background = new Color(0x000000);
+
   scene.remove(...previousTargets);
   previousTargets = [];
 
   targets.forEach((target) => {
-    if (target.pose === undefined) return;
+    if (!target.pose) return;
 
     const geometry = new BoxGeometry(0.3 / 5, 0.2, 0.2);
     const material = new MeshNormalMaterial();
@@ -70,6 +87,18 @@ const drawTargets = (targets: PhotonTarget[]) => {
     previousTargets.push(arrow);
   });
 
+  if (calibrationCoeffs) {
+    // And show camera frustum
+    const calibCamera = createPerspectiveCamera(calibrationCoeffs.resolution, calibrationCoeffs.cameraIntrinsics, 10);
+    const helper = new CameraHelper(calibCamera);
+    const helperGroup = new Group();
+    helperGroup.add(helper);
+    // Flip to +Z forward
+    helperGroup.rotateX(-Math.PI / 2.0);
+    helperGroup.rotateY(-Math.PI / 2.0);
+    previousTargets.push(helperGroup);
+  }
+
   if (previousTargets.length > 0) {
     scene.add(...previousTargets);
   }
@@ -78,7 +107,7 @@ const onWindowResize = () => {
   const container = document.getElementById("container");
   const canvas = document.getElementById("view");
 
-  if (container === null || canvas === null || camera === undefined || renderer === undefined) {
+  if (!container || !canvas || !camera || !renderer) {
     return;
   }
 
@@ -89,7 +118,7 @@ const onWindowResize = () => {
   renderer.setSize(canvas.clientWidth, canvas.clientHeight);
 };
 const resetCamFirstPerson = () => {
-  if (scene === undefined || camera === undefined || controls === undefined) {
+  if (!scene || !camera || !controls) {
     return;
   }
 
@@ -103,7 +132,7 @@ const resetCamFirstPerson = () => {
   }
 };
 const resetCamThirdPerson = () => {
-  if (scene === undefined || camera === undefined || controls === undefined) {
+  if (!scene || !camera || !controls) {
     return;
   }
 
@@ -122,10 +151,11 @@ onMounted(async () => {
   camera = new PerspectiveCamera(75, 800 / 800, 0.1, 1000);
 
   const canvas = document.getElementById("view");
-  if (canvas === null) return;
+  if (!canvas) return;
   renderer = new WebGLRenderer({ canvas: canvas });
 
-  scene.background = new Color(0xa9a9a9);
+  if (theme.global.name.value === "LightTheme") scene.background = new Color(0xa9a9a9);
+  else scene.background = new Color(0x000000);
 
   onWindowResize();
   window.addEventListener("resize", onWindowResize);
@@ -169,7 +199,7 @@ onMounted(async () => {
   controls.update();
 
   const animate = () => {
-    if (scene === undefined || camera === undefined || renderer === undefined || controls === undefined) {
+    if (!scene || !camera || !renderer || !controls) {
       return;
     }
 
@@ -192,18 +222,31 @@ watchEffect(() => {
 
 <template>
   <div id="container" style="width: 100%">
-    <v-row>
-      <v-col align-self="stretch" style="display: flex; justify-content: center">
-        <canvas id="view" />
+    <div class="d-flex flex-wrap pt-0 pb-2">
+      <v-col cols="12" md="6" class="pl-0">
+        <v-card-title class="pa-0"> Target Visualization </v-card-title>
       </v-col>
-    </v-row>
-    <v-row style="margin-bottom: 24px">
-      <v-col style="display: flex; justify-content: center">
-        <v-btn color="secondary" @click="resetCamFirstPerson"> First Person </v-btn>
+      <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pl-6 pl-md-3">
+        <v-btn
+          style="width: 100%"
+          color="buttonActive"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="resetCamFirstPerson"
+        >
+          First Person
+        </v-btn>
       </v-col>
-      <v-col style="display: flex; justify-content: center">
-        <v-btn color="secondary" @click="resetCamThirdPerson"> Third Person </v-btn>
+      <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pr-0">
+        <v-btn
+          style="width: 100%"
+          color="buttonActive"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="resetCamThirdPerson"
+        >
+          Third Person
+        </v-btn>
       </v-col>
-    </v-row>
+    </div>
+    <canvas id="view" class="w-100" />
   </div>
 </template>

photon-client/src/components/app/photon-calibration-visualizer.vue

@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch, watchEffect, type Ref } from "vue";
+const {
+  AmbientLight,
+  AxesHelper,
+  BoxGeometry,
+  CameraHelper,
+  Color,
+  ConeGeometry,
+  Group,
+  Mesh,
+  MeshNormalMaterial,
+  MeshPhongMaterial,
+  PerspectiveCamera,
+  Scene,
+  SphereGeometry,
+  WebGLRenderer
+} = await import("three");
+const { TrackballControls } = await import("three/examples/jsm/controls/TrackballControls");
+import type { BoardObservation, CameraCalibrationResult } from "@/types/SettingTypes";
+import axios from "axios";
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { useTheme } from "vuetify";
+import { createPerspectiveCamera } from "@/lib/ThreeUtils";
+
+const theme = useTheme();
+
+const props = defineProps<{
+  cameraUniqueName: string;
+  resolution: { width: number; height: number };
+  title: string;
+}>();
+
+let scene: Scene | undefined;
+let camera: PerspectiveCamera | undefined;
+let renderer: WebGLRenderer | undefined;
+let controls: TrackballControls | undefined;
+
+const createChessboard = (obs: BoardObservation, cal: CameraCalibrationResult): Group => {
+  const group = new Group();
+
+  if (obs.locationInImageSpace.length === 0) return group;
+
+  // Add corner spheres
+  obs.locationInObjectSpace.forEach((corner, idx) => {
+    if (corner.x < 0 || corner.y < 0) return;
+
+    const isOutlier = !obs.cornersUsed[idx];
+
+    const color = isOutlier ? 0xff3333 : 0x33ff33;
+
+    const sphereGeom = new SphereGeometry(cal.calobjectSpacing / 8, 8, 8);
+    const sphereMat = new MeshPhongMaterial({
+      color: color,
+      opacity: 1,
+      transparent: !isOutlier
+    });
+    const sphere = new Mesh(sphereGeom, sphereMat);
+    sphere.position.set(corner.x, corner.y, corner.z);
+    group.add(sphere);
+  });
+
+  return group;
+};
+
+let previousTargets: Object3D[] = [];
+let baseAspect: number | undefined;
+const drawCalibration = (cal: CameraCalibrationResult | null) => {
+  // Check here, since if we check in watchEffect this never gets called
+  if (!cal || !scene || !camera || !renderer || !controls) {
+    return;
+  }
+
+  scene.remove(...previousTargets);
+  previousTargets = [];
+
+  // Draw all chessboards with transparency
+  cal.observations.forEach((obs) => {
+    const pose = obs.optimisedCameraToObject;
+
+    // Create chessboard
+    const board = createChessboard(obs, cal);
+    board.userData.isCalibrationObject = true;
+
+    // Apply transform from camera to chessboard
+    const pos = pose.translation;
+    board.position.set(pos.x, pos.y, pos.z);
+
+    if (pose.rotation.quaternion) {
+      const q = pose.rotation.quaternion;
+      board.quaternion.set(q.X, q.Y, q.Z, q.W);
+    }
+
+    previousTargets.push(board);
+  });
+
+  // And show camera frustum
+  const calibCamera = createPerspectiveCamera(props.resolution, cal.cameraIntrinsics);
+  const helper = new CameraHelper(calibCamera);
+
+  // Flip to +Z forward
+  const helperGroup = new Group();
+  helperGroup.add(helper);
+  helperGroup.rotateY(Math.PI);
+
+  previousTargets.push(helperGroup);
+
+  if (previousTargets.length > 0) {
+    scene.add(...previousTargets);
+  }
+};
+
+const calibrationData: Ref<CameraCalibrationResult | null> = ref(null);
+const isLoading: Ref<boolean> = ref(true);
+const error: Ref<string | null> = ref(null);
+
+const fetchCalibrationData = async () => {
+  isLoading.value = true;
+  error.value = null;
+
+  try {
+    const response = await axios.get("/settings/camera/getCalibration", {
+      params: {
+        cameraUniqueName: props.cameraUniqueName,
+        width: props.resolution.width,
+        height: props.resolution.height
+      }
+    });
+    calibrationData.value = response.data;
+  } catch (err) {
+    console.error("Failed to fetch calibration data:", err);
+    error.value = "Failed to load calibration data";
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const onWindowResize = () => {
+  const container = document.getElementById("container");
+  const canvas = document.getElementById("view");
+
+  if (!container || !canvas || !camera || !renderer) {
+    return;
+  }
+
+  // Compute a concrete width from the container and derive height from a
+  // stable base aspect ratio (calculated on mount) to avoid feedback loops
+  // where updating canvas size changes container size while resizing
+  const width = Math.max(1, Math.floor(container.clientWidth));
+  let height: number;
+  if (baseAspect && baseAspect > 0) {
+    height = Math.max(1, Math.floor(width / baseAspect));
+  } else {
+    height = Math.max(1, Math.floor(container.clientHeight));
+  }
+
+  // Use updateStyle=false so Three.js does not write to canvas style,
+  // which can affect layout and re-trigger resize events
+  renderer.setSize(width, height, false);
+  camera.aspect = width / height;
+  camera.updateProjectionMatrix();
+};
+
+const resetCamFirstPerson = () => {
+  if (!scene || !camera || !controls) {
+    return;
+  }
+
+  controls.reset();
+  camera.position.set(0, 0, 0.05);
+  camera.up.set(0, -1, 0);
+  controls.target.set(0.0, 0.0, 1.0);
+  controls.update();
+  if (previousTargets.length > 0) {
+    scene.add(...previousTargets);
+  }
+};
+
+const resetCamThirdPerson = () => {
+  if (!scene || !camera || !controls) {
+    return;
+  }
+
+  controls.reset();
+  camera.position.set(-0.3, -0.2, -0.3);
+  camera.up.set(0, -1, 0);
+  controls.target.set(0.0, 0.0, 0.4);
+  controls.update();
+  if (previousTargets.length > 0) {
+    scene.add(...previousTargets);
+  }
+};
+
+let animationFrameId: number | null = null;
+
+onMounted(async () => {
+  // Grab data first off
+  fetchCalibrationData();
+
+  scene = new Scene();
+  camera = new PerspectiveCamera(75, 800 / 800, 0.1, 1000);
+
+  const canvas = document.getElementById("view");
+  if (!canvas) return;
+  renderer = new WebGLRenderer({ canvas: canvas });
+
+  // Add lights
+  const ambientLight = new AmbientLight(0xffffff, 0.6);
+  scene.add(ambientLight);
+
+  if (theme.global.name.value === "LightTheme") scene.background = new Color(0xa9a9a9);
+  else scene.background = new Color(0x000000);
+
+  // Initialize a stable aspect ratio so subsequent resize events derive
+  // height from width, avoiding layout feedback during continuous resizing
+  try {
+    const initWidth = Math.max(1, Math.floor(document.getElementById("container")?.clientWidth || 1));
+    const initHeight = Math.max(1, Math.floor(document.getElementById("container")?.clientHeight || 1));
+    baseAspect = initWidth / Math.max(1, initHeight);
+  } catch {
+    baseAspect = undefined;
+  }
+
+  onWindowResize();
+  window.addEventListener("resize", onWindowResize);
+
+  const referenceFrameCues: Object3D[] = [];
+
+  // Draw the reference frame
+  referenceFrameCues.push(new AxesHelper(0.3));
+
+  // Draw the Camera Body
+  const camSize = 0.04;
+  const camBodyGeometry = new BoxGeometry(camSize, camSize, camSize);
+  const camLensGeometry = new ConeGeometry(camSize * 0.4, camSize * 0.8, 30);
+  const camMaterial = new MeshNormalMaterial();
+  const camBody = new Mesh(camBodyGeometry, camMaterial);
+  const camLens = new Mesh(camLensGeometry, camMaterial);
+  camBody.position.set(0, 0, 0);
+  camLens.rotateX(-Math.PI / 2);
+  camLens.position.set(0, 0, camSize * 0.8);
+  referenceFrameCues.push(camBody);
+  referenceFrameCues.push(camLens);
+
+  controls = new TrackballControls(camera, renderer.domElement);
+  controls.rotateSpeed = 1.0;
+  controls.zoomSpeed = 1.2;
+  controls.panSpeed = 0.8;
+  controls.noZoom = false;
+  controls.noPan = false;
+  controls.staticMoving = true;
+  controls.dynamicDampingFactor = 0.3;
+
+  scene.add(...referenceFrameCues);
+  resetCamThirdPerson();
+
+  controls.update();
+
+  const animate = () => {
+    if (!scene || !camera || !renderer || !controls) {
+      return;
+    }
+
+    animationFrameId = requestAnimationFrame(animate);
+
+    controls.update();
+    renderer.render(scene, camera);
+  };
+
+  animate();
+});
+
+const cleanup = () => {
+  window.removeEventListener("resize", onWindowResize);
+
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId);
+  }
+
+  if (controls) {
+    controls.dispose();
+  }
+
+  if (renderer) {
+    renderer.dispose();
+    renderer.forceContextLoss();
+  }
+
+  if (scene) {
+    scene.traverse((object) => {
+      if (object instanceof Mesh) {
+        object.geometry?.dispose();
+        if (object.material) {
+          if (Array.isArray(object.material)) {
+            object.material.forEach((material) => material.dispose());
+          } else {
+            object.material.dispose();
+          }
+        }
+      }
+    });
+  }
+
+  scene = undefined;
+  camera = undefined;
+  renderer = undefined;
+  controls = undefined;
+  previousTargets = [];
+};
+
+onBeforeUnmount(cleanup);
+
+// If hot-reloading, cleanup on hot reload
+if (import.meta.hot) {
+  import.meta.hot.dispose(() => {
+    cleanup();
+  });
+}
+
+watchEffect(() => {
+  drawCalibration(calibrationData.value);
+});
+
+watch(
+  () => [
+    props.cameraUniqueName,
+    props.resolution.width,
+    props.resolution.height,
+    useCameraSettingsStore().getCalibrationCoeffs(props.resolution)
+  ],
+  () => {
+    console.log("Camera or resolution changed, refetching calibration");
+    fetchCalibrationData();
+  }
+);
+</script>
+
+<template>
+  <div style="width: 100%; height: 100%" class="d-flex flex-column">
+    <div class="d-flex flex-wrap pt-0 pb-2">
+      <v-col cols="12" md="6" class="pl-0">
+        <v-card-title class="pa-0">
+          {{ props.title }}
+        </v-card-title>
+      </v-col>
+      <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pl-6 pl-md-3">
+        <v-btn
+          style="width: 100%"
+          color="buttonActive"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="resetCamFirstPerson"
+        >
+          First Person
+        </v-btn>
+      </v-col>
+      <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pr-0">
+        <v-btn
+          style="width: 100%"
+          color="buttonActive"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="resetCamThirdPerson"
+        >
+          Third Person
+        </v-btn>
+      </v-col>
+    </div>
+    <div id="container" style="flex: 1 1 auto">
+      <canvas id="view" class="w-100 h-100" />
+    </div>
+  </div>
+</template>

photon-client/src/components/cameras/CameraCalibrationCard.vue

@@ -38,7 +38,8 @@ const getUniqueVideoFormatsByResolution = (): VideoFormat[] => {
     if (!skip) {
       const calib = useCameraSettingsStore().getCalibrationCoeffs(format.resolution);
       if (calib !== undefined) {
-        // For each error, square it, sum the squares, and divide by total points N
+        // Mean overall reprojection error
+        // Calculated as average of each observation's mean error
         if (calib.meanErrors.length)
           format.mean = calib.meanErrors.reduce((a, b) => a + b, 0) / calib.meanErrors.length;
         else format.mean = NaN;
@@ -249,27 +250,31 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               <th>Horizontal FOV</th>
               <th>Vertical FOV</th>
               <th>Diagonal FOV</th>
-              <th>Info</th>
             </tr>
           </thead>
           <tbody style="cursor: pointer">
-            <tr v-for="(value, index) in getUniqueVideoFormatsByResolution()" :key="index">
-              <td>{{ getResolutionString(value.resolution) }}</td>
-              <td>
-                {{ value.mean !== undefined ? (isNaN(value.mean) ? "Unknown" : value.mean.toFixed(2) + "px") : "-" }}
-              </td>
-              <td>{{ value.horizontalFOV !== undefined ? value.horizontalFOV.toFixed(2) + "°" : "-" }}</td>
-              <td>{{ value.verticalFOV !== undefined ? value.verticalFOV.toFixed(2) + "°" : "-" }}</td>
-              <td>{{ value.diagonalFOV !== undefined ? value.diagonalFOV.toFixed(2) + "°" : "-" }}</td>
-              <v-tooltip location="bottom">
-                <template #activator="{ props }">
-                  <td v-bind="props" @click="setSelectedVideoFormat(value)">
-                    <v-icon size="small" color="primary">mdi-information</v-icon>
+            <v-tooltip
+              v-for="(value, index) in getUniqueVideoFormatsByResolution()"
+              :key="index"
+              transition=""
+              location="bottom"
+              :open-delay="100"
+            >
+              <template #activator="{ props }">
+                <tr :key="index" v-bind="props" @click="setSelectedVideoFormat(value)">
+                  <td>{{ getResolutionString(value.resolution) }}</td>
+                  <td>
+                    {{
+                      value.mean !== undefined ? (isNaN(value.mean) ? "Unknown" : value.mean.toFixed(2) + "px") : "-"
+                    }}
                   </td>
-                </template>
-                <span>View calibration information</span>
-              </v-tooltip>
-            </tr>
+                  <td>{{ value.horizontalFOV !== undefined ? value.horizontalFOV.toFixed(2) + "°" : "-" }}</td>
+                  <td>{{ value.verticalFOV !== undefined ? value.verticalFOV.toFixed(2) + "°" : "-" }}</td>
+                  <td>{{ value.diagonalFOV !== undefined ? value.diagonalFOV.toFixed(2) + "°" : "-" }}</td>
+                </tr>
+              </template>
+              <span>View calibration information</span>
+            </v-tooltip>
           </tbody>
         </v-table>
       </v-card-text>

photon-client/src/components/cameras/CameraCalibrationInfoCard.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import PhotonCalibrationVisualizer from "@/components/app/photon-calibration-visualizer.vue";
 import type { CameraCalibrationResult, VideoFormat } from "@/types/SettingTypes";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
@@ -8,7 +9,6 @@ import { useTheme } from "vuetify";
 import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 
 const theme = useTheme();
-
 const props = defineProps<{
   videoFormat: VideoFormat;
 }>();
@@ -79,8 +79,10 @@ const importCalibration = async () => {
 };
 
 interface ObservationDetails {
-  mean: number;
   index: number;
+  mean: number;
+  numOutliers: number;
+  numMissing: number;
 }
 
 const currentCalibrationCoeffs = computed<CameraCalibrationResult | undefined>(() =>
@@ -92,7 +94,9 @@ const getObservationDetails = (): ObservationDetails[] | undefined => {
 
   return coefficients?.meanErrors.map((m, i) => ({
     index: i,
-    mean: parseFloat(m.toFixed(2))
+    mean: parseFloat(m.toFixed(2)),
+    numOutliers: coefficients.numOutliers[i],
+    numMissing: coefficients.numMissing[i]
   }));
 };
 
@@ -101,213 +105,236 @@ const exportCalibrationURL = computed<string>(() =>
 );
 const calibrationImageURL = (index: number) =>
   useCameraSettingsStore().getCalImageUrl(inject<string>("backendHost") as string, props.videoFormat.resolution, index);
+
+const tab = ref("details");
+const viewingImg = ref(0);
 </script>
+
 <template>
   <v-card color="surface" dark>
-    <div class="d-flex flex-wrap pt-2 pl-2 pr-2 align-center">
-      <v-col cols="12" md="6">
-        <v-card-title class="pa-0"> Calibration Details </v-card-title>
-      </v-col>
-      <v-col cols="12" md="6" class="d-flex align-center pt-0 pt-md-3">
-        <v-btn
-          color="buttonPassive"
-          class="mr-2"
-          style="flex: 1"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-          @click="openUploadPhotonCalibJsonPrompt"
-        >
-          <v-icon start size="large">mdi-import</v-icon>
-          <span>Import</span>
-        </v-btn>
-        <input
-          ref="importCalibrationFromPhotonJson"
-          type="file"
-          accept=".json"
-          style="display: none"
-          @change="importCalibration"
-        />
-        <v-btn
-          color="buttonPassive"
-          class="mr-2"
-          :disabled="!currentCalibrationCoeffs"
-          style="flex: 1"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-          @click="openExportCalibrationPrompt"
-        >
-          <v-icon start size="large">mdi-export</v-icon>
-          <span>Export</span>
-        </v-btn>
-        <a
-          ref="exportCalibration"
-          style="color: black; text-decoration: none; display: none"
-          :href="exportCalibrationURL"
-          target="_blank"
-        />
-        <v-btn
-          color="error"
-          :disabled="!currentCalibrationCoeffs"
-          style="flex: 1"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-          @click="() => (confirmRemoveDialog = { show: true, vf: props.videoFormat })"
-        >
-          <v-icon start size="large">mdi-delete</v-icon>
-          <span>Delete</span>
-        </v-btn>
-      </v-col>
-    </div>
-    <v-card-title class="pt-0 pb-0"
-      >{{ useCameraSettingsStore().currentCameraName }}@{{ getResolutionString(videoFormat.resolution) }}</v-card-title
-    >
-    <v-card-text v-if="!currentCalibrationCoeffs">
-      <v-alert
-        class="pt-3 pb-3"
-        color="primary"
-        density="compact"
-        text="The selected video format has not been calibrated."
-        icon="mdi-alert-circle-outline"
-        :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
-      />
-    </v-card-text>
-    <v-card-text class="pt-0">
-      <v-table density="compact" style="width: 100%">
-        <template #default>
-          <thead>
-            <tr>
-              <th class="text-left">Name</th>
-              <th class="text-left">Value</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Fx</td>
-              <td>
-                {{
-                  useCameraSettingsStore()
-                    .getCalibrationCoeffs(props.videoFormat.resolution)
-                    ?.cameraIntrinsics.data[0].toFixed(2) || 0.0
-                }}
-                mm
-              </td>
-            </tr>
-            <tr>
-              <td>Fy</td>
-              <td>
-                {{
-                  useCameraSettingsStore()
-                    .getCalibrationCoeffs(props.videoFormat.resolution)
-                    ?.cameraIntrinsics.data[4].toFixed(2) || 0.0
-                }}
-                mm
-              </td>
-            </tr>
-            <tr>
-              <td>Cx</td>
-              <td>
-                {{
-                  useCameraSettingsStore()
-                    .getCalibrationCoeffs(props.videoFormat.resolution)
-                    ?.cameraIntrinsics.data[2].toFixed(2) || 0.0
-                }}
-                px
-              </td>
-            </tr>
-            <tr>
-              <td>Cy</td>
-              <td>
-                {{
-                  useCameraSettingsStore()
-                    .getCalibrationCoeffs(props.videoFormat.resolution)
-                    ?.cameraIntrinsics.data[5].toFixed(2) || 0.0
-                }}
-                px
-              </td>
-            </tr>
-            <tr>
-              <td>Distortion</td>
-              <td>
-                {{
-                  useCameraSettingsStore()
-                    .getCalibrationCoeffs(props.videoFormat.resolution)
-                    ?.distCoeffs.data.map((it) => parseFloat(it.toFixed(3))) || []
-                }}
-              </td>
-            </tr>
-            <tr>
-              <td>Mean Err</td>
-              <td>
-                {{
-                  videoFormat.mean !== undefined
-                    ? isNaN(videoFormat.mean)
-                      ? "NaN"
-                      : videoFormat.mean.toFixed(2) + "px"
-                    : "-"
-                }}
-              </td>
-            </tr>
-            <tr>
-              <td>Horizontal FOV</td>
-              <td>
-                {{ videoFormat.horizontalFOV !== undefined ? videoFormat.horizontalFOV.toFixed(2) + "°" : "-" }}
-              </td>
-            </tr>
-            <tr>
-              <td>Vertical FOV</td>
-              <td>{{ videoFormat.verticalFOV !== undefined ? videoFormat.verticalFOV.toFixed(2) + "°" : "-" }}</td>
-            </tr>
-            <tr>
-              <td>Diagonal FOV</td>
-              <td>{{ videoFormat.diagonalFOV !== undefined ? videoFormat.diagonalFOV.toFixed(2) + "°" : "-" }}</td>
-            </tr>
-            <!-- Board warp, only shown for mrcal-calibrated cameras -->
-            <tr v-if="currentCalibrationCoeffs?.calobjectWarp?.length === 2">
-              <td>Board warp, X/Y</td>
-              <td>
-                {{
-                  useCameraSettingsStore()
-                    .getCalibrationCoeffs(props.videoFormat.resolution)
-                    ?.calobjectWarp?.map((it) => (it * 1000).toFixed(2) + " mm")
-                    .join(" / ")
-                }}
-              </td>
-            </tr>
-          </tbody>
-        </template>
-      </v-table>
-    </v-card-text>
-    <v-card-title v-if="currentCalibrationCoeffs" class="pt-0 pb-0">Individual Observations</v-card-title>
-    <v-card-text v-if="currentCalibrationCoeffs" class="pt-0">
-      <v-data-table
-        density="compact"
-        style="width: 100%"
-        :headers="[
-          { title: 'Observation Id', key: 'index' },
-          { title: 'Mean Reprojection Error', key: 'mean' },
-          { title: '', key: 'data-table-expand' }
-        ]"
-        :items="getObservationDetails()"
-        item-value="index"
-        show-expand
-      >
-        <template #item.data-table-expand="{ internalItem, toggleExpand }">
+    <v-card-title class="pb-2">
+      <div class="d-flex flex-wrap">
+        <v-col cols="12" md="6" class="pa-0">
+          <v-card-title class="pa-0"> Calibration Details </v-card-title>
+        </v-col>
+        <v-col cols="6" md="3" class="d-flex align-center pt-0 pb-0 pl-0">
           <v-btn
-            icon="mdi-eye"
-            class="text-none"
-            color="medium-emphasis"
-            size="small"
-            variant="text"
-            slim
-            @click="toggleExpand(internalItem)"
-          ></v-btn>
-        </template>
+            color="buttonPassive"
+            style="width: 100%"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="openUploadPhotonCalibJsonPrompt"
+          >
+            <v-icon start size="large"> mdi-import</v-icon>
+            <span>Import</span>
+          </v-btn>
+          <input
+            ref="importCalibrationFromPhotonJson"
+            type="file"
+            accept=".json"
+            style="display: none"
+            @change="importCalibration"
+          />
+        </v-col>
+        <v-col cols="6" md="3" class="d-flex align-center pt-0 pb-0 pr-0">
+          <v-btn
+            color="buttonPassive"
+            :disabled="!currentCalibrationCoeffs"
+            style="width: 100%"
+            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            @click="openExportCalibrationPrompt"
+          >
+            <v-icon start size="large">mdi-export</v-icon>
+            <span>Export</span>
+          </v-btn>
+          <a
+            ref="exportCalibration"
+            style="color: black; text-decoration: none; display: none"
+            :href="exportCalibrationURL"
+            target="_blank"
+          />
+        </v-col>
+      </div>
+    </v-card-title>
 
-        <template #expanded-row="{ columns, item }">
-          <td :colspan="columns.length">
-            <div style="display: flex; justify-content: center; width: 100%">
-              <img :src="calibrationImageURL(item.index)" alt="observation image" class="snapshot-preview pt-2 pb-2" />
-            </div>
-          </td>
-        </template>
-      </v-data-table>
+    <v-card-text class="d-flex flex-row pt-0">
+      <v-col cols="4" class="pa-0">
+        <v-tabs v-model="tab" grow bg-color="surface" height="48" slider-color="buttonActive">
+          <v-tab key="details" value="details">Details</v-tab>
+          <v-tab key="observations" value="observations">Observations</v-tab>
+        </v-tabs>
+        <v-tabs-window v-model="tab" class="pt-3">
+          <v-tabs-window-item key="details" value="details">
+            <v-table style="width: 100%" density="compact">
+              <template #default>
+                <tbody>
+                  <tr>
+                    <td>Camera</td>
+                    <td>
+                      {{ useCameraSettingsStore().currentCameraName }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Resolution</td>
+                    <td>
+                      {{ getResolutionString(videoFormat.resolution) }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Fx</td>
+                    <td>
+                      {{
+                        useCameraSettingsStore()
+                          .getCalibrationCoeffs(props.videoFormat.resolution)
+                          ?.cameraIntrinsics.data[0].toFixed(2) || 0.0
+                      }}
+                      mm
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Fy</td>
+                    <td>
+                      {{
+                        useCameraSettingsStore()
+                          .getCalibrationCoeffs(props.videoFormat.resolution)
+                          ?.cameraIntrinsics.data[4].toFixed(2) || 0.0
+                      }}
+                      mm
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Cx</td>
+                    <td>
+                      {{
+                        useCameraSettingsStore()
+                          .getCalibrationCoeffs(props.videoFormat.resolution)
+                          ?.cameraIntrinsics.data[2].toFixed(2) || 0.0
+                      }}
+                      px
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Cy</td>
+                    <td>
+                      {{
+                        useCameraSettingsStore()
+                          .getCalibrationCoeffs(props.videoFormat.resolution)
+                          ?.cameraIntrinsics.data[5].toFixed(2) || 0.0
+                      }}
+                      px
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Distortion</td>
+                    <td>
+                      {{
+                        useCameraSettingsStore()
+                          .getCalibrationCoeffs(props.videoFormat.resolution)
+                          ?.distCoeffs.data.map((it) => parseFloat(it.toFixed(3))) || []
+                      }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Mean Err</td>
+                    <td>
+                      {{
+                        videoFormat.mean !== undefined
+                          ? isNaN(videoFormat.mean)
+                            ? "NaN"
+                            : videoFormat.mean.toFixed(2) + "px"
+                          : "-"
+                      }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Horizontal FOV</td>
+                    <td>
+                      {{ videoFormat.horizontalFOV !== undefined ? videoFormat.horizontalFOV.toFixed(2) + "°" : "-" }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Vertical FOV</td>
+                    <td>
+                      {{ videoFormat.verticalFOV !== undefined ? videoFormat.verticalFOV.toFixed(2) + "°" : "-" }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Diagonal FOV</td>
+                    <td>
+                      {{ videoFormat.diagonalFOV !== undefined ? videoFormat.diagonalFOV.toFixed(2) + "°" : "-" }}
+                    </td>
+                  </tr>
+                  <!-- Board warp, only shown for mrcal-calibrated cameras -->
+                  <tr v-if="currentCalibrationCoeffs?.calobjectWarp?.length === 2">
+                    <td>Board warp, X/Y</td>
+                    <td>
+                      {{
+                        currentCalibrationCoeffs?.calobjectWarp?.map((it) => (it * 1000).toFixed(2) + " mm").join(" / ")
+                      }}
+                    </td>
+                  </tr>
+                </tbody>
+              </template>
+            </v-table>
+          </v-tabs-window-item>
+          <v-tabs-window-item key="observations" value="observations">
+            <v-data-table
+              id="observations-table"
+              items-per-page-text="Page size:"
+              density="compact"
+              style="width: 100%"
+              :headers="[
+                { title: 'Id', key: 'index' },
+                { title: 'Mean Reprojection Error', key: 'mean' }
+              ]"
+              :items="getObservationDetails()"
+              item-value="index"
+              show-expand
+            >
+              <template #item.data-table-expand="{ internalItem }">
+                <v-btn
+                  class="text-none"
+                  size="small"
+                  variant="text"
+                  slim
+                  rounded
+                  @click="viewingImg = internalItem.index"
+                >
+                  <v-icon
+                    size="large"
+                    :color="viewingImg === internalItem.index ? 'buttonActive' : 'rgba(255, 255, 255, 0.7)'"
+                    >mdi-eye</v-icon
+                  >
+                </v-btn>
+              </template>
+            </v-data-table>
+          </v-tabs-window-item>
+        </v-tabs-window>
+      </v-col>
+      <v-col cols="8" class="pa-0 pl-6">
+        <v-card-text class="pa-0 fill-height d-flex justify-center align-center">
+          <div v-if="!currentCalibrationCoeffs">
+            <v-alert
+              class="pt-3 pb-3"
+              color="primary"
+              text="The selected video format has not been calibrated."
+              icon="mdi-alert-circle-outline"
+              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+            />
+          </div>
+          <Suspense v-else-if="tab === 'details'">
+            <!-- Allows us to import three js when it's actually needed  -->
+            <PhotonCalibrationVisualizer
+              :camera-unique-name="useCameraSettingsStore().currentCameraSettings.uniqueName"
+              :resolution="props.videoFormat.resolution"
+              title="Camera to Board Transforms"
+            />
+            <template #fallback> Loading... </template>
+          </Suspense>
+          <div v-else style="display: flex; justify-content: center; width: 100%">
+            <img :src="calibrationImageURL(viewingImg)" alt="observation image" class="snapshot-preview pt-2 pb-2" />
+          </div>
+        </v-card-text>
+      </v-col>
     </v-card-text>
   </v-card>
 
@@ -322,11 +349,7 @@ const calibrationImageURL = (index: number) =>
 
 <style scoped>
 .snapshot-preview {
-  max-width: 55%;
-}
-@media only screen and (max-width: 512px) {
-  .snapshot-preview {
-    max-width: 100%;
-  }
+  max-width: 100%;
+  max-height: 100%;
 }
 </style>

photon-client/src/components/dashboard/tabs/Map3DTab.vue

@@ -9,20 +9,11 @@ const trackedTargets = computed<PhotonTarget[]>(() => useStateStore().currentPip
 
 <template>
   <div>
-    <v-row style="width: 100%">
-      <v-col>
-        <span class="text-white">Target Visualization</span>
-      </v-col>
-    </v-row>
-    <v-row style="width: 100%">
-      <v-col style="display: flex; align-items: center; justify-content: center">
-        <Suspense>
-          <!-- Allows us to import three js when it's actually needed  -->
-          <photon3d-visualizer :targets="trackedTargets" />
+    <Suspense>
+      <!-- Allows us to import three js when it's actually needed  -->
+      <photon3d-visualizer :targets="trackedTargets" />
 
-          <template #fallback> Loading... </template>
-        </Suspense>
-      </v-col>
-    </v-row>
+      <template #fallback> Loading... </template>
+    </Suspense>
   </div>
 </template>