Improve UI stability, reliability, and readability (#1104)

closes #1090
closes #1030

Also fixes various styling issues and overflow issues for mobile support

photon-client/package.json

@@ -13,35 +13,35 @@
     "format-ci": "prettier --check src/"
   },
   "dependencies": {
-    "@fontsource/prompt": "^5.0.5",
-    "@mdi/font": "^7.2.96",
+    "@fontsource/prompt": "^5.0.9",
+    "@mdi/font": "^7.4.47",
     "@msgpack/msgpack": "^3.0.0-beta2",
-    "axios": "^1.4.0",
+    "axios": "^1.6.3",
     "jspdf": "^2.5.1",
     "pinia": "^2.1.4",
-    "three": "^0.154.0",
+    "three": "^0.160.0",
     "vue": "^2.7.14",
     "vue-router": "^3.6.5",
-    "vuetify": "^2.6.15"
+    "vuetify": "^2.7.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
-    "prettier": "^3.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "prettier": "^3.1.1",
     "@types/node": "^16.11.45",
-    "@types/three": "^0.154.0",
-    "@vitejs/plugin-vue2": "^2.2.0",
-    "@vue/tsconfig": "^0.1.3",
+    "@types/three": "^0.160.0",
+    "@vitejs/plugin-vue2": "^2.3.1",
+    "@vue/tsconfig": "^0.5.1",
     "deepmerge": "^4.3.1",
-    "eslint": "^8.45.0",
-    "eslint-plugin-vue": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.19.2",
     "npm-run-all": "^4.1.5",
     "sass": "~1.32",
     "sass-loader": "^13.3.2",
     "terser": "^5.14.2",
-    "typescript": "~4.7.4",
-    "unplugin-vue-components": "^0.25.1",
-    "vite": "^4.3.9"
+    "typescript": "^5.3.3",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^4.5.1"
   }
 }

photon-client/src/assets/styles/variables.scss

@@ -18,3 +18,7 @@ $heading-font-family: $default-font;
   > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
   background: #005281 !important;
 }
+
+.v-card__title {
+  word-break: break-word !important;
+}

photon-client/src/components/app/photon-log-view.vue

@@ -47,25 +47,33 @@ document.addEventListener("keydown", (e) => {
 <template>
   <v-dialog v-model="useStateStore().showLogModal" width="1500" dark>
     <v-card dark class="pt-3" color="primary" flat>
-      <v-card-title>
-        View Program Logs
-        <v-btn color="secondary" style="margin-left: auto" depressed @click="handleLogExport">
-          <v-icon left> mdi-download </v-icon>
-          Download Current Log
-
-          <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
-          <a
-            ref="exportLogFile"
-            style="color: black; text-decoration: none; display: none"
-            :href="`http://${backendHost}/api/utils/photonvision-journalctl.txt`"
-            download="photonvision-journalctl.txt"
-            target="_blank"
-          />
-        </v-btn>
-      </v-card-title>
+      <v-row class="heading-container pl-6 pr-6">
+        <v-col>
+          <v-card-title>View Program Logs</v-card-title>
+        </v-col>
+        <v-col class="align-self-center">
+          <v-btn
+            color="secondary"
+            style="margin-left: auto; max-width: 500px; width: 100%"
+            depressed
+            @click="handleLogExport"
+          >
+            <v-icon left class="open-icon"> mdi-download </v-icon>
+            <span class="open-label">Download Current Log</span>
 
+            <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
+            <a
+              ref="exportLogFile"
+              style="color: black; text-decoration: none; display: none"
+              :href="`http://${backendHost}/api/utils/photonvision-journalctl.txt`"
+              download="photonvision-journalctl.txt"
+              target="_blank"
+            />
+          </v-btn>
+        </v-col>
+      </v-row>
       <div class="pr-6 pl-6">
-        <v-btn-toggle v-model="selectedLogLevels" dark multiple class="fill mb-4">
+        <v-btn-toggle v-model="selectedLogLevels" dark multiple class="fill mb-4 overflow-x-auto">
           <v-btn v-for="level in [0, 1, 2, 3]" :key="level" color="secondary" class="fill">
             {{ getLogLevelFromIndex(level) }}
           </v-btn>
@@ -102,4 +110,18 @@ document.addEventListener("keydown", (e) => {
   width: 25%;
   height: 100%;
 }
+@media only screen and (max-width: 512px) {
+  .heading-container {
+    flex-direction: column;
+    padding-bottom: 14px;
+  }
+}
+@media only screen and (max-width: 312px) {
+  .open-icon {
+    margin: 0 !important;
+  }
+  .open-label {
+    display: none;
+  }
+}
 </style>

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

@@ -11,28 +11,28 @@ import PvSwitch from "@/components/common/pv-switch.vue";
 import PvSelect from "@/components/common/pv-select.vue";
 import PvNumberInput from "@/components/common/pv-number-input.vue";
 import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
+import { getResolutionString, resolutionsAreEqual } from "@/lib/PhotonUtils";
 
 const settingsValid = ref(true);
 
 const getCalibrationCoeffs = (resolution: Resolution) => {
-  return useCameraSettingsStore().currentCameraSettings.completeCalibrations.find(
-    (cal) => cal.resolution.width === resolution.width && cal.resolution.height === resolution.height
+  return useCameraSettingsStore().currentCameraSettings.completeCalibrations.find((cal) =>
+    resolutionsAreEqual(cal.resolution, resolution)
   );
 };
 const getUniqueVideoResolutions = (): VideoFormat[] => {
   const uniqueResolutions: VideoFormat[] = [];
   useCameraSettingsStore().currentCameraSettings.validVideoFormats.forEach((format, index) => {
-    if (
-      !uniqueResolutions.some(
-        (v) => v.resolution.width === format.resolution.width && v.resolution.height === format.resolution.height
-      )
-    ) {
+    if (!uniqueResolutions.some((v) => resolutionsAreEqual(v.resolution, format.resolution))) {
       format.index = index;
 
       const calib = getCalibrationCoeffs(format.resolution);
       if (calib !== undefined) {
         format.standardDeviation = calib.standardDeviation;
-        format.mean = calib.perViewErrors.reduce((a, b) => a + b) / calib.perViewErrors.length;
+        format.mean =
+          calib.perViewErrors === null
+            ? Number.NaN
+            : calib.perViewErrors.reduce((a, b) => a + b) / calib.perViewErrors.length;
         format.horizontalFOV = 2 * Math.atan2(format.resolution.width / 2, calib.intrinsics[0]) * (180 / Math.PI);
         format.verticalFOV = 2 * Math.atan2(format.resolution.height / 2, calib.intrinsics[4]) * (180 / Math.PI);
         format.diagonalFOV =
@@ -54,9 +54,9 @@ const getUniqueVideoResolutions = (): VideoFormat[] => {
   );
   return uniqueResolutions;
 };
-const getUniqueVideoResolutionStrings = () =>
+const getUniqueVideoResolutionStrings = (): { name: string; value: number }[] =>
   getUniqueVideoResolutions().map<{ name: string; value: number }>((f) => ({
-    name: `${f.resolution.width} X ${f.resolution.height}`,
+    name: `${getResolutionString(f.resolution)}`,
     // Index won't ever be undefined
     value: f.index || 0
   }));
@@ -150,9 +150,9 @@ const importCalibrationFromCalibDB = ref();
 const openCalibUploadPrompt = () => {
   importCalibrationFromCalibDB.value.click();
 };
-const readImportedCalibration = (payload: Event) => {
-  if (payload.target == null || !payload.target?.files) return;
-  const files: FileList = payload.target.files as FileList;
+const readImportedCalibration = () => {
+  const files = importCalibrationFromCalibDB.value.files;
+  if (files.length === 0) return;
 
   files[0].text().then((text) => {
     useCameraSettingsStore()
@@ -221,100 +221,96 @@ const endCalibration = () => {
     <v-card class="mb-3 pr-6 pb-3" color="primary" dark>
       <v-card-title>Camera Calibration</v-card-title>
       <div class="ml-5">
-        <v-row>
-          <v-col cols="12" md="6">
-            <v-form ref="form" v-model="settingsValid">
-              <pv-select
-                v-model="useStateStore().calibrationData.videoFormatIndex"
-                label="Resolution"
-                :select-cols="7"
-                :disabled="isCalibrating"
-                tooltip="Resolution to calibrate at (you will have to calibrate every resolution you use 3D mode on)"
-                :items="getUniqueVideoResolutionStrings()"
-              />
-              <pv-select
-                v-show="isCalibrating"
-                v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
-                label="Decimation"
-                tooltip="Resolution to which camera frames are downscaled for detection. Calibration still uses full-res"
-                :items="calibrationDivisors"
-                :select-cols="7"
-                @input="
-                  (v) => useCameraSettingsStore().changeCurrentPipelineSetting({ streamingFrameDivisor: v }, false)
-                "
-              />
-              <pv-select
-                v-model="boardType"
-                label="Board Type"
-                tooltip="Calibration board pattern to use"
-                :select-cols="7"
-                :items="['Chessboard', 'Dotboard']"
-                :disabled="isCalibrating"
-              />
-              <pv-number-input
-                v-model="squareSizeIn"
-                label="Pattern Spacing (in)"
-                tooltip="Spacing between pattern features in inches"
-                :disabled="isCalibrating"
-                :rules="[(v) => v > 0 || 'Size must be positive']"
-                :label-cols="5"
-              />
-              <pv-number-input
-                v-model="patternWidth"
-                label="Board Width (in)"
-                tooltip="Width of the board in dots or chessboard squares"
-                :disabled="isCalibrating"
-                :rules="[(v) => v >= 4 || 'Width must be at least 4']"
-                :label-cols="5"
-              />
-              <pv-number-input
-                v-model="patternHeight"
-                label="Board Height (in)"
-                tooltip="Height of the board in dots or chessboard squares"
-                :disabled="isCalibrating"
-                :rules="[(v) => v >= 4 || 'Height must be at least 4']"
-                :label-cols="5"
-              />
-            </v-form>
-          </v-col>
-          <v-col cols="12" md="6">
-            <v-row align="start" class="pb-4 pt-2">
-              <v-simple-table fixed-header height="100%" dense>
-                <thead>
-                  <tr>
-                    <th>Resolution</th>
-                    <th>Mean Error</th>
-                    <th>Standard Deviation</th>
-                    <th>Horizontal FOV</th>
-                    <th>Vertical FOV</th>
-                    <th>Diagonal FOV</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="(value, index) in getUniqueVideoResolutions()" :key="index">
-                    <td>{{ value.resolution.width }} X {{ value.resolution.height }}</td>
-                    <td>{{ value.mean !== undefined ? value.mean.toFixed(2) + "px" : "-" }}</td>
-                    <td>
-                      {{ value.standardDeviation !== undefined ? value.standardDeviation.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>
-                  </tr>
-                </tbody>
-              </v-simple-table>
-            </v-row>
-            <v-row justify="center">
-              <v-chip
-                v-show="isCalibrating"
-                label
-                :color="useStateStore().calibrationData.hasEnoughImages ? 'secondary' : 'gray'"
-              >
-                Snapshots: {{ useStateStore().calibrationData.imageCount }} of at least
-                {{ useStateStore().calibrationData.minimumImageCount }}
-              </v-chip>
-            </v-row>
-          </v-col>
+        <v-row v-show="!isCalibrating" class="pb-12">
+          <v-card-subtitle class="pb-0 mb-0 pl-3">Complete Calibrations</v-card-subtitle>
+          <v-simple-table fixed-header height="100%" dense class="mt-2">
+            <thead>
+              <tr>
+                <th>Resolution</th>
+                <th>Mean Error</th>
+                <th>Horizontal FOV</th>
+                <th>Vertical FOV</th>
+                <th>Diagonal FOV</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(value, index) in getUniqueVideoResolutions()" :key="index">
+                <td>{{ getResolutionString(value.resolution) }}</td>
+                <td>
+                  {{ value.mean !== undefined ? (isNaN(value.mean) ? "NaN" : 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>
+              </tr>
+            </tbody>
+          </v-simple-table>
+        </v-row>
+        <v-divider />
+        <v-row style="display: flex; flex-direction: column" class="mt-4">
+          <v-card-subtitle v-show="!isCalibrating" class="pl-3 pa-0 ma-0"> Configure New Calibration</v-card-subtitle>
+          <v-form ref="form" v-model="settingsValid" class="pl-4 mb-10 pr-5">
+            <pv-select
+              v-model="useStateStore().calibrationData.videoFormatIndex"
+              label="Resolution"
+              :select-cols="7"
+              :disabled="isCalibrating"
+              tooltip="Resolution to calibrate at (you will have to calibrate every resolution you use 3D mode on)"
+              :items="getUniqueVideoResolutionStrings()"
+            />
+            <pv-select
+              v-show="isCalibrating"
+              v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
+              label="Decimation"
+              tooltip="Resolution to which camera frames are downscaled for detection. Calibration still uses full-res"
+              :items="calibrationDivisors"
+              :select-cols="7"
+              @input="(v) => useCameraSettingsStore().changeCurrentPipelineSetting({ streamingFrameDivisor: v }, false)"
+            />
+            <pv-select
+              v-model="boardType"
+              label="Board Type"
+              tooltip="Calibration board pattern to use"
+              :select-cols="7"
+              :items="['Chessboard', 'Dotboard']"
+              :disabled="isCalibrating"
+            />
+            <pv-number-input
+              v-model="squareSizeIn"
+              label="Pattern Spacing (in)"
+              tooltip="Spacing between pattern features in inches"
+              :disabled="isCalibrating"
+              :rules="[(v) => v > 0 || 'Size must be positive']"
+              :label-cols="5"
+            />
+            <pv-number-input
+              v-model="patternWidth"
+              label="Board Width (in)"
+              tooltip="Width of the board in dots or chessboard squares"
+              :disabled="isCalibrating"
+              :rules="[(v) => v >= 4 || 'Width must be at least 4']"
+              :label-cols="5"
+            />
+            <pv-number-input
+              v-model="patternHeight"
+              label="Board Height (in)"
+              tooltip="Height of the board in dots or chessboard squares"
+              :disabled="isCalibrating"
+              :rules="[(v) => v >= 4 || 'Height must be at least 4']"
+              :label-cols="5"
+            />
+          </v-form>
+          <v-row justify="center">
+            <v-chip
+              v-show="isCalibrating"
+              label
+              :color="useStateStore().calibrationData.hasEnoughImages ? 'secondary' : 'gray'"
+              class="mb-6"
+            >
+              Snapshots: {{ useStateStore().calibrationData.imageCount }} of at least
+              {{ useStateStore().calibrationData.minimumImageCount }}
+            </v-chip>
+          </v-row>
         </v-row>
         <v-row v-if="isCalibrating">
           <v-col cols="12" class="pt-0">
@@ -387,7 +383,8 @@ const endCalibration = () => {
               :disabled="!settingsValid"
               @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot() : startCalibration()"
             >
-              {{ isCalibrating ? "Take Snapshot" : "Start Calibration" }}
+              <v-icon left class="calib-btn-icon"> {{ isCalibrating ? "mdi-camera" : "mdi-flag-outline" }} </v-icon>
+              <span class="calib-btn-label">{{ isCalibrating ? "Take Snapshot" : "Start Calibration" }}</span>
             </v-btn>
           </v-col>
           <v-col :cols="6">
@@ -399,7 +396,12 @@ const endCalibration = () => {
               :disabled="!isCalibrating || !settingsValid"
               @click="endCalibration"
             >
-              {{ useStateStore().calibrationData.hasEnoughImages ? "Finish Calibration" : "Cancel Calibration" }}
+              <v-icon left class="calib-btn-icon">
+                {{ useStateStore().calibrationData.hasEnoughImages ? "mdi-flag-checkered" : "mdi-flag-off-outline" }}
+              </v-icon>
+              <span class="calib-btn-label">{{
+                useStateStore().calibrationData.hasEnoughImages ? "Finish Calibration" : "Cancel Calibration"
+              }}</span>
             </v-btn>
           </v-col>
         </v-row>
@@ -413,14 +415,14 @@ const endCalibration = () => {
               :disabled="!settingsValid"
               @click="downloadCalibBoard"
             >
-              <v-icon left> mdi-download </v-icon>
-              Generate Board
+              <v-icon left class="calib-btn-icon"> mdi-download </v-icon>
+              <span class="calib-btn-label">Generate Board</span>
             </v-btn>
           </v-col>
           <v-col :cols="6">
             <v-btn color="secondary" :disabled="isCalibrating" small style="width: 100%" @click="openCalibUploadPrompt">
-              <v-icon left> mdi-upload </v-icon>
-              Import From CalibDB
+              <v-icon left class="calib-btn-icon"> mdi-upload </v-icon>
+              <span class="calib-btn-label">Import From CalibDB</span>
             </v-btn>
             <input
               ref="importCalibrationFromCalibDB"
@@ -456,7 +458,7 @@ const endCalibration = () => {
                 {{
                   getUniqueVideoResolutionStrings().find(
                     (v) => v.value === useStateStore().calibrationData.videoFormatIndex
-                  ).name
+                  )?.name
                 }}!
               </v-card-text>
             </template>
@@ -482,6 +484,7 @@ const endCalibration = () => {
 <style scoped lang="scss">
 .v-data-table {
   text-align: center;
+  width: 100%;
 
   th,
   td {
@@ -509,4 +512,13 @@ const endCalibration = () => {
     border-radius: 10px;
   }
 }
+
+@media only screen and (max-width: 512px) {
+  .calib-btn-icon {
+    margin: 0 !important;
+  }
+  .calib-btn-label {
+    display: none;
+  }
+}
 </style>

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

@@ -96,8 +96,8 @@ const expanded = ref([]);
     <v-row class="pl-6">
       <v-col>
         <v-btn color="secondary" @click="fetchSnapshots">
-          <v-icon left> mdi-folder </v-icon>
-          Show Saved Snapshots
+          <v-icon left class="open-icon"> mdi-folder </v-icon>
+          <span class="open-label">Show Saved Snapshots</span>
         </v-btn>
       </v-col>
     </v-row>
@@ -199,4 +199,12 @@ const expanded = ref([]);
     max-width: 100%;
   }
 }
+@media only screen and (max-width: 351px) {
+  .open-icon {
+    margin: 0 !important;
+  }
+  .open-label {
+    display: none;
+  }
+}
 </style>

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

@@ -103,16 +103,16 @@ const fpsTooLow = computed<boolean>(() => {
           class="fill"
           :disabled="useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode"
         >
-          <v-icon>mdi-import</v-icon>
-          <span>Raw</span>
+          <v-icon left class="mode-btn-icon">mdi-import</v-icon>
+          <span class="mode-btn-label">Raw</span>
         </v-btn>
         <v-btn
           color="secondary"
           class="fill"
           :disabled="useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode"
         >
-          <v-icon>mdi-export</v-icon>
-          <span>Processed</span>
+          <v-icon left class="mode-btn-icon">mdi-export</v-icon>
+          <span class="mode-btn-label">Processed</span>
         </v-btn>
       </v-btn-toggle>
     </div>
@@ -156,4 +156,12 @@ th {
     max-width: 50%;
   }
 }
+@media only screen and (max-width: 351px) {
+  .mode-btn-icon {
+    margin: 0 !important;
+  }
+  .mode-btn-label {
+    display: none;
+  }
+}
 </style>

photon-client/src/components/dashboard/CamerasCard.vue

@@ -29,61 +29,83 @@ const fpsTooLow = computed<boolean>(() => {
 
   return currFPS - targetFPS < -5 && currFPS !== 0 && !driverMode && gpuAccel && isReflective;
 });
+
+const performanceRecommendation = computed<string>(() => {
+  if (
+    fpsTooLow.value &&
+    !useCameraSettingsStore().currentPipelineSettings.inputShouldShow &&
+    useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.Reflective
+  ) {
+    return "HSV thresholds are too broad; narrow them for better performance";
+  } else if (fpsTooLow.value && useCameraSettingsStore().currentPipelineSettings.inputShouldShow) {
+    return "Stop viewing the raw stream for better performance";
+  } else {
+    return `${Math.min(Math.round(useStateStore().currentPipelineResults?.latency || 0), 9999)} ms latency`;
+  }
+});
 </script>
 
 <template>
   <v-card color="primary" height="100%" style="display: flex; flex-direction: column" dark>
-    <v-card-title
-      class="pb-0 mb-0 pl-4 pt-1"
-      style="min-height: 50px; justify-content: space-between; align-content: center"
-    >
-      <div class="pt-2">
-        <span class="mr-4">Cameras</span>
+    <v-row>
+      <v-col class="align-self-center text-no-wrap">
+        <v-card-title>Cameras</v-card-title>
+      </v-col>
+      <v-col class="align-self-center" style="text-align: right; margin-right: 12px; padding-left: 24px">
         <v-chip
           label
           :color="fpsTooLow ? 'error' : 'transparent'"
           :text-color="fpsTooLow ? '#C7EA46' : '#ff4d00'"
           style="font-size: 1rem; padding: 0; margin: 0"
         >
-          <span class="pr-1">
-            Processing @ {{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;
-          </span>
-          <span
-            v-if="
-              fpsTooLow &&
-              !useCameraSettingsStore().currentPipelineSettings.inputShouldShow &&
-              useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.Reflective
-            "
-          >
-            HSV thresholds are too broad; narrow them for better performance
-          </span>
-          <span v-else-if="fpsTooLow && useCameraSettingsStore().currentPipelineSettings.inputShouldShow">
-            stop viewing the raw stream for better performance
-          </span>
-          <span v-else>
-            {{ Math.min(Math.round(useStateStore().currentPipelineResults?.latency || 0), 9999) }} ms latency
-          </span>
+          <span class="pr-1"
+            >Processing @ {{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;</span
+          ><span>{{ performanceRecommendation }}</span>
         </v-chip>
-      </div>
-      <div>
+      </v-col>
+      <v-col
+        class="align-self-center"
+        style="
+          width: min-content;
+          flex-grow: 0;
+          display: flex;
+          justify-content: flex-end;
+          margin-right: 24px;
+          padding: 0;
+        "
+      >
         <v-switch
           v-model="driverMode"
           :disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
           label="Driver Mode"
-          style="margin-left: auto"
+          style="margin: 0; padding: 0; padding-left: 18px; margin-top: 14px"
           color="accent"
-          class="pt-2"
         />
-      </div>
-    </v-card-title>
+      </v-col>
+    </v-row>
     <v-divider style="border-color: white" />
-    <v-row class="pl-3 pr-3 pt-3 pb-3" style="flex-wrap: nowrap; justify-content: center">
-      <v-col v-show="value.includes(0)" style="max-width: 500px; display: flex; align-items: center">
+    <v-row class="stream-viewer-container pa-3">
+      <v-col v-show="value.includes(0)" class="stream-view">
         <photon-camera-stream id="input-camera-stream" stream-type="Raw" style="width: 100%; height: auto" />
       </v-col>
-      <v-col v-show="value.includes(1)" style="max-width: 500px; display: flex; align-items: center">
+      <v-col v-show="value.includes(1)" class="stream-view">
         <photon-camera-stream id="output-camera-stream" stream-type="Processed" style="width: 100%; height: auto" />
       </v-col>
     </v-row>
   </v-card>
 </template>
+
+<style scoped>
+.stream-viewer-container {
+  display: flex;
+  justify-content: center;
+}
+.stream-view {
+  max-width: 500px;
+}
+@media only screen and (max-width: 512px) {
+  .stream-view {
+    min-width: 80%;
+  }
+}
+</style>

photon-client/src/components/dashboard/StreamConfigCard.vue

@@ -39,11 +39,11 @@ const processingMode = computed<number>({
         <p style="color: white">Processing Mode</p>
         <v-btn-toggle v-model="processingMode" mandatory dark class="fill">
           <v-btn color="secondary">
-            <v-icon>mdi-square-outline</v-icon>
+            <v-icon left>mdi-square-outline</v-icon>
             <span>2D</span>
           </v-btn>
           <v-btn color="secondary" :disabled="!useCameraSettingsStore().isCurrentVideoFormatCalibrated">
-            <v-icon>mdi-cube-outline</v-icon>
+            <v-icon left>mdi-cube-outline</v-icon>
             <span>3D</span>
           </v-btn>
         </v-btn-toggle>
@@ -54,12 +54,12 @@ const processingMode = computed<number>({
         <p style="color: white">Stream Display</p>
         <v-btn-toggle v-model="localValue" :multiple="true" mandatory dark class="fill">
           <v-btn color="secondary" class="fill">
-            <v-icon>mdi-import</v-icon>
-            <span>Raw</span>
+            <v-icon left class="mode-btn-icon">mdi-import</v-icon>
+            <span class="mode-btn-label">Raw</span>
           </v-btn>
           <v-btn color="secondary" class="fill">
-            <v-icon>mdi-export</v-icon>
-            <span>Processed</span>
+            <v-icon left class="mode-btn-icon">mdi-export</v-icon>
+            <span class="mode-btn-label">Processed</span>
           </v-btn>
         </v-btn-toggle>
       </v-col>
@@ -82,4 +82,13 @@ th {
   width: 80px;
   text-align: center;
 }
+
+@media only screen and (max-width: 351px) {
+  .mode-btn-icon {
+    margin: 0 !important;
+  }
+  .mode-btn-label {
+    display: none;
+  }
+}
 </style>

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

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { PipelineType } from "@/types/PipelineTypes";
 import PvSelect from "@/components/common/pv-select.vue";
 import PvSlider from "@/components/common/pv-slider.vue";
 import PvSwitch from "@/components/common/pv-switch.vue";
 import { computed, getCurrentInstance } from "vue";
 import { useStateStore } from "@/stores/StateStore";
+import type { ActivePipelineSettings } from "@/types/PipelineTypes";
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 
 // TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
 // Defer reference to store access method
-const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
+const currentPipelineSettings = computed<ActivePipelineSettings>(
+  () => useCameraSettingsStore().currentPipelineSettings
+);
 
 const interactiveCols = computed(
   () =>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
-import { PipelineType } from "@/types/PipelineTypes";
+import { PipelineType, type ActivePipelineSettings } from "@/types/PipelineTypes";
 import PvSlider from "@/components/common/pv-slider.vue";
 import PvSwitch from "@/components/common/pv-switch.vue";
 import PvRangeSlider from "@/components/common/pv-range-slider.vue";
@@ -10,7 +10,9 @@ import { useStateStore } from "@/stores/StateStore";
 
 // TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
 // Defer reference to store access method
-const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
+const currentPipelineSettings = computed<ActivePipelineSettings>(
+  () => useCameraSettingsStore().currentPipelineSettings
+);
 
 const interactiveCols = computed(
   () =>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
-import { PipelineType } from "@/types/PipelineTypes";
+import { type ActivePipelineSettings, PipelineType } from "@/types/PipelineTypes";
 import PvRangeSlider from "@/components/common/pv-range-slider.vue";
 import PvSelect from "@/components/common/pv-select.vue";
 import PvSlider from "@/components/common/pv-slider.vue";
@@ -9,7 +9,9 @@ import { useStateStore } from "@/stores/StateStore";
 
 // TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
 // Defer reference to store access method
-const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
+const currentPipelineSettings = computed<ActivePipelineSettings>(
+  () => useCameraSettingsStore().currentPipelineSettings
+);
 
 // TODO fix pv-range-slider so that store access doesn't need to be deferred
 const contourArea = computed<[number, number]>({
@@ -26,23 +28,23 @@ const contourFullness = computed<[number, number]>({
 });
 const contourPerimeter = computed<[number, number]>({
   get: () =>
-    currentPipelineSettings.pipelineType === PipelineType.ColoredShape
-      ? (Object.values(currentPipelineSettings.contourPerimeter) as [number, number])
+    currentPipelineSettings.value.pipelineType === PipelineType.ColoredShape
+      ? (Object.values(currentPipelineSettings.value.contourPerimeter) as [number, number])
       : ([0, 0] as [number, number]),
   set: (v) => {
-    if (currentPipelineSettings.pipelineType === PipelineType.ColoredShape) {
-      currentPipelineSettings.contourPerimeter = v;
+    if (currentPipelineSettings.value.pipelineType === PipelineType.ColoredShape) {
+      currentPipelineSettings.value.contourPerimeter = v;
     }
   }
 });
 const contourRadius = computed<[number, number]>({
   get: () =>
-    currentPipelineSettings.pipelineType === PipelineType.ColoredShape
-      ? (Object.values(currentPipelineSettings.contourRadius) as [number, number])
+    currentPipelineSettings.value.pipelineType === PipelineType.ColoredShape
+      ? (Object.values(currentPipelineSettings.value.contourRadius) as [number, number])
       : ([0, 0] as [number, number]),
   set: (v) => {
-    if (currentPipelineSettings.pipelineType === PipelineType.ColoredShape) {
-      currentPipelineSettings.contourRadius = v;
+    if (currentPipelineSettings.value.pipelineType === PipelineType.ColoredShape) {
+      currentPipelineSettings.value.contourRadius = v;
     }
   }
 });
@@ -103,8 +105,8 @@ const interactiveCols = computed(
       v-model="contourPerimeter"
       label="Perimeter"
       tooltip="Min and max perimeter of the shape, in pixels"
-      min="0"
-      max="4000"
+      :min="0"
+      :max="4000"
       :slider-cols="interactiveCols"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourPerimeter: value }, false)"
     />

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

@@ -6,6 +6,7 @@ import PvSelect from "@/components/common/pv-select.vue";
 import { computed, getCurrentInstance } from "vue";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
+import { getResolutionString } from "@/lib/PhotonUtils";
 
 // Due to something with libcamera or something else IDK much about, the 90° rotations need to be disabled if the libcamera drivers are being used.
 const cameraRotations = computed(() =>
@@ -30,7 +31,7 @@ const getNumberOfSkippedDivisors = () => streamDivisors.length - getFilteredStre
 
 const cameraResolutions = computed(() =>
   useCameraSettingsStore().currentCameraSettings.validVideoFormats.map(
-    (f) => `${f.resolution.width} X ${f.resolution.height} at ${f.fps} FPS, ${f.pixelFormat}`
+    (f) => `${getResolutionString(f.resolution)} at ${f.fps} FPS, ${f.pixelFormat}`
   )
 );
 const handleResolutionChange = (value: number) => {
@@ -48,7 +49,11 @@ const streamResolutions = computed(() => {
   const streamDivisors = getFilteredStreamDivisors();
   const currentResolution = useCameraSettingsStore().currentVideoFormat.resolution;
   return streamDivisors.map(
-    (x) => `${Math.floor(currentResolution.width / x)} X ${Math.floor(currentResolution.height / x)}`
+    (x) =>
+      `${getResolutionString({
+        width: Math.floor(currentResolution.width / x),
+        height: Math.floor(currentResolution.height / x)
+      })}`
   );
 });
 const handleStreamResolutionChange = (value: number) => {

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import PvSelect from "@/components/common/pv-select.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
-import { PipelineType, RobotOffsetPointMode } from "@/types/PipelineTypes";
+import { type ActivePipelineSettings, PipelineType, RobotOffsetPointMode } from "@/types/PipelineTypes";
 import PvSwitch from "@/components/common/pv-switch.vue";
 import { computed, getCurrentInstance } from "vue";
 import { RobotOffsetType } from "@/types/SettingTypes";
@@ -40,7 +40,11 @@ const offsetPoints = computed<MetricItem[]>(() => {
   }
 });
 
-const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
+// TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
+// Defer reference to store access method
+const currentPipelineSettings = computed<ActivePipelineSettings>(
+  () => useCameraSettingsStore().currentPipelineSettings
+);
 
 const interactiveCols = computed(
   () =>

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

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
-import { PipelineType } from "@/types/PipelineTypes";
+import { type ActivePipelineSettings, PipelineType } from "@/types/PipelineTypes";
 import { useStateStore } from "@/stores/StateStore";
+import { angleModulus, toDeg } from "@/lib/MathUtils";
+import { computed } from "vue";
 
-const wrapToPi = (delta: number): number => {
-  let ret = delta;
-  while (ret < -Math.PI) ret += Math.PI * 2;
-  while (ret > Math.PI) ret -= Math.PI * 2;
-  return ret;
-};
+// TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
+// Defer reference to store access method
+const currentPipelineSettings = computed<ActivePipelineSettings>(
+  () => useCameraSettingsStore().currentPipelineSettings
+);
 
 const calculateStdDev = (values: number[]): number => {
   if (values.length < 2) return 0;
@@ -21,14 +22,9 @@ const calculateStdDev = (values: number[]): number => {
 
   // Borrowed from WPILib's Rotation2d
   const hypot = Math.hypot(cosmean, sinmean);
-  let mean;
-  if (hypot > 1e-6) {
-    mean = Math.atan2(sinmean / hypot, cosmean / hypot);
-  } else {
-    mean = 0;
-  }
+  const mean = hypot > 1e-6 ? Math.atan2(sinmean / hypot, cosmean / hypot) : 0;
 
-  return Math.sqrt(values.map((x) => Math.pow(wrapToPi(x - mean), 2)).reduce((a, b) => a + b) / values.length);
+  return Math.sqrt(values.map((x) => Math.pow(angleModulus(x - mean), 2)).reduce((a, b) => a + b) / values.length);
 };
 const resetCurrentBuffer = () => {
   // Need to clear the array in place
@@ -38,71 +34,78 @@ const resetCurrentBuffer = () => {
 
 <template>
   <div>
-    <v-row align="start" class="pb-4" style="height: 300px">
-      <v-simple-table fixed-header dense dark>
+    <v-row align="start" class="pb-4">
+      <v-simple-table dense class="pt-2 pb-12">
         <template #default>
-          <thead style="font-size: 1.25rem">
+          <thead>
             <tr>
               <th
                 v-if="
-                  useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag ||
-                  useCameraSettingsStore().currentPipelineType === PipelineType.Aruco
+                  currentPipelineSettings.pipelineType === PipelineType.AprilTag ||
+                  currentPipelineSettings.pipelineType === PipelineType.Aruco
                 "
-                class="text-center"
+                class="text-center white--text"
               >
                 Fiducial ID
               </th>
               <template v-if="!useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
-                <th class="text-center">Pitch &theta;&deg;</th>
-                <th class="text-center">Yaw &theta;&deg;</th>
-                <th class="text-center">Skew &theta;&deg;</th>
-                <th class="text-center">Area %</th>
+                <th class="text-center white--text">Pitch &theta;&deg;</th>
+                <th class="text-center white--text">Yaw &theta;&deg;</th>
+                <th class="text-center white--text">Skew &theta;&deg;</th>
+                <th class="text-center white--text">Area %</th>
               </template>
               <template v-else>
-                <th class="text-center">X meters</th>
-                <th class="text-center">Y meters</th>
-                <th class="text-center">Z Angle &theta;&deg;</th>
+                <th class="text-center white--text">X meters</th>
+                <th class="text-center white--text">Y meters</th>
+                <th class="text-center white--text">Z Angle &theta;&deg;</th>
               </template>
               <template
                 v-if="
-                  (useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag ||
-                    useCameraSettingsStore().currentPipelineType === PipelineType.Aruco) &&
+                  (currentPipelineSettings.pipelineType === PipelineType.AprilTag ||
+                    currentPipelineSettings.pipelineType === PipelineType.Aruco) &&
                   useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled
                 "
               >
-                <th class="text-center">Ambiguity Ratio</th>
+                <th class="text-center white--text">Ambiguity Ratio</th>
               </template>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(target, index) in useStateStore().currentPipelineResults?.targets" :key="index">
+            <tr
+              v-for="(target, index) in useStateStore().currentPipelineResults?.targets"
+              :key="index"
+              class="white--text"
+            >
               <td
                 v-if="
-                  useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag ||
-                  useCameraSettingsStore().currentPipelineType === PipelineType.Aruco
+                  currentPipelineSettings.pipelineType === PipelineType.AprilTag ||
+                  currentPipelineSettings.pipelineType === PipelineType.Aruco
                 "
+                class="text-center"
               >
                 {{ target.fiducialId }}
               </td>
               <template v-if="!useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
-                <td>{{ target.pitch.toFixed(2) }}&deg;</td>
-                <td>{{ target.yaw.toFixed(2) }}&deg;</td>
-                <td>{{ target.skew.toFixed(2) }}&deg;</td>
-                <td>{{ target.area.toFixed(2) }}&deg;</td>
+                <td class="text-center">{{ target.pitch.toFixed(2) }}&deg;</td>
+                <td class="text-center">{{ target.yaw.toFixed(2) }}&deg;</td>
+                <td class="text-center">{{ target.skew.toFixed(2) }}&deg;</td>
+                <td class="text-center">{{ target.area.toFixed(2) }}&deg;</td>
               </template>
               <template v-else>
-                <td>{{ target.pose?.x.toFixed(2) }}&nbsp;m</td>
-                <td>{{ target.pose?.y.toFixed(2) }}&nbsp;m</td>
-                <td>{{ (((target.pose?.angle_z || 0) * 180.0) / Math.PI).toFixed(2) }}&deg;</td>
+                <td class="text-center">{{ target.pose?.x.toFixed(2) }}&nbsp;m</td>
+                <td class="text-center">{{ target.pose?.y.toFixed(2) }}&nbsp;m</td>
+                <td class="text-center">{{ toDeg(target.pose?.angle_z || 0).toFixed(2) }}&deg;</td>
               </template>
               <template
                 v-if="
-                  (useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag ||
-                    useCameraSettingsStore().currentPipelineType === PipelineType.Aruco) &&
+                  (currentPipelineSettings.pipelineType === PipelineType.AprilTag ||
+                    currentPipelineSettings.pipelineType === PipelineType.Aruco) &&
                   useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled
                 "
               >
-                <td>{{ target.ambiguity >= 0 ? target.ambiguity.toFixed(2) : "(In Multi-Target)" }}</td>
+                <td class="text-center">
+                  {{ target.ambiguity >= 0 ? target.ambiguity.toFixed(2) : "(In Multi-Target)" }}
+                </td>
               </template>
             </tr>
           </tbody>
@@ -111,9 +114,9 @@ const resetCurrentBuffer = () => {
     </v-row>
     <v-container
       v-if="
-        (useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag ||
-          useCameraSettingsStore().currentPipelineType === PipelineType.Aruco) &&
-        useCameraSettingsStore().currentPipelineSettings.doMultiTarget &&
+        (currentPipelineSettings.pipelineType === PipelineType.AprilTag ||
+          currentPipelineSettings.pipelineType === PipelineType.Aruco) &&
+        currentPipelineSettings.doMultiTarget &&
         useCameraSettingsStore().isCurrentVideoFormatCalibrated &&
         useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled
       "
@@ -122,46 +125,57 @@ const resetCurrentBuffer = () => {
         <v-card-subtitle class="ma-0 pa-0 pb-4" style="font-size: 16px"
           >Multi-tag pose, field-to-camera</v-card-subtitle
         >
-        <v-simple-table fixed-header height="100%" dense dark>
-          <thead style="font-size: 1.25rem">
-            <th class="text-center">X meters</th>
-            <th class="text-center">Y meters</th>
-            <th class="text-center">Z meters</th>
-            <th class="text-center">X Angle &theta;&deg;</th>
-            <th class="text-center">Y Angle &theta;&deg;</th>
-            <th class="text-center">Z Angle &theta;&deg;</th>
-            <th class="text-center">Tags</th>
-          </thead>
-          <tbody v-show="useStateStore().currentPipelineResults?.multitagResult">
-            <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.x.toFixed(2) }}&nbsp;m</td>
-            <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.y.toFixed(2) }}&nbsp;m</td>
-            <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.z.toFixed(2) }}&nbsp;m</td>
-            <td>
-              {{
-                (
-                  (useStateStore().currentPipelineResults?.multitagResult?.bestTransform.angle_x || 0) *
-                  (180.0 / Math.PI)
-                ).toFixed(2)
-              }}&deg;
-            </td>
-            <td>
-              {{
-                (
-                  (useStateStore().currentPipelineResults?.multitagResult?.bestTransform.angle_y || 0) *
-                  (180.0 / Math.PI)
-                ).toFixed(2)
-              }}&deg;
-            </td>
-            <td>
-              {{
-                (
-                  (useStateStore().currentPipelineResults?.multitagResult?.bestTransform.angle_z || 0) *
-                  (180.0 / Math.PI)
-                ).toFixed(2)
-              }}&deg;
-            </td>
-            <td>{{ useStateStore().currentPipelineResults?.multitagResult?.fiducialIDsUsed }}</td>
-          </tbody>
+        <v-simple-table dense>
+          <template #default>
+            <thead>
+              <tr class="white--text">
+                <th class="text-center white--text">X meters</th>
+                <th class="text-center white--text">Y meters</th>
+                <th class="text-center white--text">Z meters</th>
+                <th class="text-center white--text">X Angle &theta;&deg;</th>
+                <th class="text-center white--text">Y Angle &theta;&deg;</th>
+                <th class="text-center white--text">Z Angle &theta;&deg;</th>
+                <th class="text-center white--text">Tags</th>
+              </tr>
+            </thead>
+            <tbody v-show="useStateStore().currentPipelineResults?.multitagResult">
+              <tr>
+                <td class="text-center white--text">
+                  {{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.x.toFixed(2) }}&nbsp;m
+                </td>
+                <td class="text-center white--text">
+                  {{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.y.toFixed(2) }}&nbsp;m
+                </td>
+                <td class="text-center white--text">
+                  {{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.z.toFixed(2) }}&nbsp;m
+                </td>
+                <td class="text-center white--text">
+                  {{
+                    toDeg(useStateStore().currentPipelineResults?.multitagResult?.bestTransform.angle_x || 0).toFixed(
+                      2
+                    )
+                  }}&deg;
+                </td>
+                <td class="text-center white--text">
+                  {{
+                    toDeg(useStateStore().currentPipelineResults?.multitagResult?.bestTransform.angle_y || 0).toFixed(
+                      2
+                    )
+                  }}&deg;
+                </td>
+                <td class="text-center white--text">
+                  {{
+                    toDeg(useStateStore().currentPipelineResults?.multitagResult?.bestTransform.angle_z || 0).toFixed(
+                      2
+                    )
+                  }}&deg;
+                </td>
+                <td class="text-center white--text">
+                  {{ useStateStore().currentPipelineResults?.multitagResult?.fiducialIDsUsed }}
+                </td>
+              </tr>
+            </tbody>
+          </template>
         </v-simple-table>
       </v-row>
       <v-row class="pb-4 white--text" style="display: flex; flex-direction: column">
@@ -172,53 +186,65 @@ const resetCurrentBuffer = () => {
         <v-btn color="secondary" class="mb-4 mt-1" style="width: min-content" depressed @click="resetCurrentBuffer"
           >Reset Samples</v-btn
         >
-        <v-simple-table fixed-header height="100%" dense dark>
-          <thead style="font-size: 1.25rem">
-            <th class="text-center">X meters</th>
-            <th class="text-center">Y meters</th>
-            <th class="text-center">Z meters</th>
-            <th class="text-center">X Angle &theta;&deg;</th>
-            <th class="text-center">Y Angle &theta;&deg;</th>
-            <th class="text-center">Z Angle &theta;&deg;</th>
-          </thead>
-          <tbody v-show="useStateStore().currentPipelineResults?.multitagResult">
-            <td>
-              {{
-                calculateStdDev(useStateStore().currentMultitagBuffer?.map((v) => v.bestTransform.x) || []).toFixed(5)
-              }}&nbsp;m
-            </td>
-            <td>
-              {{
-                calculateStdDev(useStateStore().currentMultitagBuffer?.map((v) => v.bestTransform.y) || []).toFixed(5)
-              }}&nbsp;m
-            </td>
-            <td>
-              {{
-                calculateStdDev(useStateStore().currentMultitagBuffer?.map((v) => v.bestTransform.z) || []).toFixed(5)
-              }}&nbsp;m
-            </td>
-            <td>
-              {{
-                calculateStdDev(
-                  useStateStore().currentMultitagBuffer?.map((v) => v.bestTransform.angle_x * (180.0 / Math.PI)) || []
-                ).toFixed(5)
-              }}&deg;
-            </td>
-            <td>
-              {{
-                calculateStdDev(
-                  useStateStore().currentMultitagBuffer?.map((v) => v.bestTransform.angle_y * (180.0 / Math.PI)) || []
-                ).toFixed(5)
-              }}&deg;
-            </td>
-            <td>
-              {{
-                calculateStdDev(
-                  useStateStore().currentMultitagBuffer?.map((v) => v.bestTransform.angle_z * (180.0 / Math.PI)) || []
-                ).toFixed(5)
-              }}&deg;
-            </td>
-          </tbody>
+        <v-simple-table dense>
+          <template #default>
+            <thead>
+              <tr>
+                <th class="text-center white--text">X meters</th>
+                <th class="text-center white--text">Y meters</th>
+                <th class="text-center white--text">Z meters</th>
+                <th class="text-center white--text">X Angle &theta;&deg;</th>
+                <th class="text-center white--text">Y Angle &theta;&deg;</th>
+                <th class="text-center white--text">Z Angle &theta;&deg;</th>
+              </tr>
+            </thead>
+            <tbody v-show="useStateStore().currentPipelineResults?.multitagResult">
+              <tr>
+                <td class="text-center white--text">
+                  {{
+                    calculateStdDev(useStateStore().currentMultitagBuffer?.map((v) => v.bestTransform.x) || []).toFixed(
+                      5
+                    )
+                  }}&nbsp;m
+                </td>
+                <td class="text-center white--text">
+                  {{
+                    calculateStdDev(useStateStore().currentMultitagBuffer?.map((v) => v.bestTransform.y) || []).toFixed(
+                      5
+                    )
+                  }}&nbsp;m
+                </td>
+                <td class="text-center white--text">
+                  {{
+                    calculateStdDev(useStateStore().currentMultitagBuffer?.map((v) => v.bestTransform.z) || []).toFixed(
+                      5
+                    )
+                  }}&nbsp;m
+                </td>
+                <td class="text-center white--text">
+                  {{
+                    calculateStdDev(
+                      useStateStore().currentMultitagBuffer?.map((v) => toDeg(v.bestTransform.angle_x)) || []
+                    ).toFixed(5)
+                  }}&deg;
+                </td>
+                <td class="text-center white--text">
+                  {{
+                    calculateStdDev(
+                      useStateStore().currentMultitagBuffer?.map((v) => toDeg(v.bestTransform.angle_y)) || []
+                    ).toFixed(5)
+                  }}&deg;
+                </td>
+                <td class="text-center white--text">
+                  {{
+                    calculateStdDev(
+                      useStateStore().currentMultitagBuffer?.map((v) => toDeg(v.bestTransform.angle_z)) || []
+                    ).toFixed(5)
+                  }}&deg;
+                </td>
+              </tr>
+            </tbody>
+          </template>
         </v-simple-table>
       </v-row>
     </v-container>
@@ -227,23 +253,30 @@ const resetCurrentBuffer = () => {
 
 <style scoped lang="scss">
 .v-data-table {
-  width: 100%;
-  height: 100%;
-  text-align: center;
   background-color: #006492 !important;
+  width: 100%;
+  font-size: 1rem !important;
 
-  th,
-  td {
-    background-color: #006492 !important;
-    font-size: 1rem !important;
+  thead {
+    tr {
+      th {
+        font-size: 1rem !important;
+        color: white !important;
+      }
+    }
   }
-
-  td {
-    font-family: monospace !important;
-  }
-
-  tbody :hover td {
-    background-color: #005281 !important;
+  tbody {
+    :hover {
+      td {
+        background-color: #005281 !important;
+      }
+    }
+    tr {
+      td {
+        font-size: 1rem !important;
+        color: white !important;
+      }
+    }
   }
 
   ::-webkit-scrollbar {

photon-client/src/components/settings/ApriltagControlCard.vue

@@ -2,15 +2,16 @@
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { Euler, Quaternion as ThreeQuat } from "three";
 import type { Quaternion } from "@/types/PhotonTrackingTypes";
+import { toDeg } from "@/lib/MathUtils";
 
 const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: number } => {
   const quat = new ThreeQuat(rot_quat.X, rot_quat.Y, rot_quat.Z, rot_quat.W);
   const euler = new Euler().setFromQuaternion(quat, "ZYX");
 
   return {
-    x: euler.x * (180.0 / Math.PI),
-    y: euler.y * (180.0 / Math.PI),
-    z: euler.z * (180.0 / Math.PI)
+    x: toDeg(euler.x),
+    y: toDeg(euler.y),
+    z: toDeg(euler.z)
   };
 };
 </script>
@@ -62,6 +63,7 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
   td {
     background-color: #006492 !important;
     font-size: 1rem !important;
+    color: white !important;
   }
 
   td {

photon-client/src/components/settings/DeviceControlCard.vue

@@ -63,11 +63,12 @@ const offlineUpdate = ref();
 const openOfflineUpdatePrompt = () => {
   offlineUpdate.value.click();
 };
-const handleOfflineUpdate = (payload: Event & { target: (EventTarget & HTMLInputElement) | null }) => {
-  if (payload.target === null || !payload.target.files) return;
+const handleOfflineUpdate = () => {
+  const files = offlineUpdate.value.files;
+  if (files.length === 0) return;
 
   const formData = new FormData();
-  formData.append("jarData", payload.target.files[0]);
+  formData.append("jarData", files[0]);
 
   useStateStore().showSnackbarMessage({
     message: "New Software Upload in Progress...",
@@ -209,20 +210,20 @@ const handleSettingsImport = () => {
       <v-row>
         <v-col cols="12" lg="4" md="6">
           <v-btn color="red" @click="restartProgram">
-            <v-icon left> mdi-restart </v-icon>
-            Restart PhotonVision
+            <v-icon left class="open-icon"> mdi-restart </v-icon>
+            <span class="open-label">Restart PhotonVision</span>
           </v-btn>
         </v-col>
         <v-col cols="12" lg="4" md="6">
           <v-btn color="red" @click="restartDevice">
-            <v-icon left> mdi-restart-alert </v-icon>
-            Restart Device
+            <v-icon left class="open-icon"> mdi-restart-alert </v-icon>
+            <span class="open-label">Restart Device</span>
           </v-btn>
         </v-col>
         <v-col cols="12" lg="4">
           <v-btn color="secondary" @click="openOfflineUpdatePrompt">
-            <v-icon left> mdi-upload </v-icon>
-            Offline Update
+            <v-icon left class="open-icon"> mdi-upload </v-icon>
+            <span class="open-label">Offline Update</span>
           </v-btn>
           <input ref="offlineUpdate" type="file" accept=".jar" style="display: none" @change="handleOfflineUpdate" />
         </v-col>
@@ -231,8 +232,8 @@ const handleSettingsImport = () => {
       <v-row>
         <v-col cols="12" sm="6">
           <v-btn color="secondary" @click="() => (showImportDialog = true)">
-            <v-icon left> mdi-import </v-icon>
-            Import Settings
+            <v-icon left class="open-icon"> mdi-import </v-icon>
+            <span class="open-label">Import Settings</span>
           </v-btn>
           <v-dialog
             v-model="showImportDialog"
@@ -278,8 +279,8 @@ const handleSettingsImport = () => {
                   align="center"
                 >
                   <v-btn color="secondary" :disabled="importFile === null" @click="handleSettingsImport">
-                    <v-icon left> mdi-import </v-icon>
-                    Import Settings
+                    <v-icon left class="open-icon"> mdi-import </v-icon>
+                    <span class="open-label">Import Settings</span>
                   </v-btn>
                 </v-row>
               </v-card-text>
@@ -288,8 +289,8 @@ const handleSettingsImport = () => {
         </v-col>
         <v-col cols="12" sm="6">
           <v-btn color="secondary" @click="openExportSettingsPrompt">
-            <v-icon left> mdi-export </v-icon>
-            Export Settings
+            <v-icon left class="open-icon"> mdi-export </v-icon>
+            <span class="open-label">Export Settings</span>
           </v-btn>
           <a
             ref="exportSettings"
@@ -301,8 +302,8 @@ const handleSettingsImport = () => {
         </v-col>
         <v-col cols="12" sm="6">
           <v-btn color="secondary" @click="openExportLogsPrompt">
-            <v-icon left> mdi-download </v-icon>
-            Download Current Log
+            <v-icon left class="open-icon"> mdi-download </v-icon>
+            <span class="open-label">Download Current Log</span>
 
             <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
             <a
@@ -316,8 +317,8 @@ const handleSettingsImport = () => {
         </v-col>
         <v-col cols="12" sm="6">
           <v-btn color="secondary" @click="useStateStore().showLogModal = true">
-            <v-icon left> mdi-eye </v-icon>
-            Show log viewer
+            <v-icon left class="open-icon"> mdi-eye </v-icon>
+            <span class="open-label">Show log viewer</span>
           </v-btn>
         </v-col>
       </v-row>
@@ -332,4 +333,12 @@ const handleSettingsImport = () => {
 .v-btn {
   width: 100%;
 }
+@media only screen and (max-width: 351px) {
+  .open-icon {
+    margin: 0 !important;
+  }
+  .open-label {
+    display: none;
+  }
+}
 </style>

photon-client/src/lib/MathUtils.ts

@@ -0,0 +1,13 @@
+export const mean = (values: number[]): number | undefined => {
+  if (values.length === 0) return undefined;
+  return values.reduce((acc, num) => acc + num, 0) / values.length;
+};
+
+export const angleModulus = (valueRad: number): number => {
+  while (valueRad < -Math.PI) valueRad += Math.PI * 2;
+  while (valueRad > Math.PI) valueRad -= Math.PI * 2;
+  return valueRad;
+};
+
+export const toDeg = (val: number) => val * (180.0 / Math.PI);
+export const toRad = (val: number) => val * (Math.PI / 180.0);

photon-client/src/lib/PhotonUtils.ts

@@ -0,0 +1,20 @@
+import type { Resolution } from "@/types/SettingTypes";
+
+export const resolutionsAreEqual = (a: Resolution, b: Resolution) => {
+  return a.height === b.height && a.width === b.width;
+};
+
+export const getResolutionString = (resolution: Resolution): string => `${resolution.width}x${resolution.height}`;
+
+export const parseJsonFile = async <T extends Record<string, any>>(file: File): Promise<T> => {
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+    fileReader.onload = (event) => {
+      const target: FileReader | null = event.target;
+      if (target === null) reject();
+      else resolve(JSON.parse(target.result as string) as T);
+    };
+    fileReader.onerror = (error) => reject(error);
+    fileReader.readAsText(file);
+  });
+};

photon-client/src/types/PipelineTypes.ts

@@ -93,7 +93,11 @@ export type ConfigurablePipelineSettings = Partial<
     | "cornerDetectionStrategy"
   >
 >;
-export const DefaultPipelineSettings: PipelineSettings = {
+// Omitted settings are changed for all pipeline types
+export const DefaultPipelineSettings: Omit<
+  PipelineSettings,
+  "cameraGain" | "targetModel" | "ledMode" | "outputShowMultipleTargets" | "cameraExposure" | "pipelineType"
+> = {
   offsetRobotOffsetMode: RobotOffsetPointMode.None,
   streamingFrameDivisor: 0,
   offsetDualPointBArea: 0,
@@ -130,15 +134,7 @@ export const DefaultPipelineSettings: PipelineSettings = {
   cornerDetectionStrategy: 0,
   cornerDetectionAccuracyPercentage: 10,
   hsvSaturation: { first: 50, second: 255 },
-  contourIntersection: 1,
-
-  // These settings will be overridden by different pipeline types
-  cameraGain: -1,
-  targetModel: -1,
-  ledMode: false,
-  outputShowMultipleTargets: false,
-  cameraExposure: -1,
-  pipelineType: -1
+  contourIntersection: 1
 };
 
 export interface ReflectivePipelineSettings extends PipelineSettings {
@@ -264,6 +260,7 @@ export type ConfigurableArucoPipelineSettings = Partial<Omit<ArucoPipelineSettin
   ConfigurablePipelineSettings;
 export const DefaultArucoPipelineSettings: ArucoPipelineSettings = {
   ...DefaultPipelineSettings,
+  cameraGain: 75,
   outputShowMultipleTargets: true,
   targetModel: TargetModel.AprilTag6in_16h5,
   cameraExposure: -1,

photon-client/src/types/SettingTypes.ts

@@ -85,7 +85,7 @@ export interface CameraCalibrationResult {
   resolution: Resolution;
   distCoeffs: number[];
   standardDeviation: number;
-  perViewErrors: number[];
+  perViewErrors: number[] | null;
   intrinsics: number[];
 }
 

photon-client/src/types/WebsocketDataTypes.ts

@@ -25,7 +25,8 @@ export interface WebsocketCompleteCalib {
   height: number;
   width: number;
   standardDeviation: number;
-  perViewErrors: number[];
+  // perViewErrors not set in test mode
+  perViewErrors: number[] | null;
   intrinsics: number[];
 }
 

photon-client/tsconfig.config.json

@@ -1,6 +1,6 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "include": ["vite.config.*"],
   "compilerOptions": {
     "composite": true,
     "types": ["node"]

photon-client/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "compilerOptions": {
     "moduleResolution": "node",
@@ -7,6 +7,7 @@
     "strict": true,
     "removeComments": true,
     "sourceMap": true,
+    "module": "ESNext",
     "types": ["node"],
     "baseUrl": ".",
     "paths": {