From 5e5df483e2f571f371e0a3ffdb646ae616be958b Mon Sep 17 00:00:00 2001
From: Devon Doyle <devondoyle@outlook.com>
Date: Tue, 14 Jan 2025 02:30:25 -0500
Subject: [PATCH] Camera disconnected + stream normalization improvements
 (#1701)

---
 .../src/assets/images/loading-transparent.svg |  57 +++++
 .../components/app/photon-camera-stream.vue   |  16 +-
 .../components/common/pv-camera-info-card.vue |   8 +-
 .../common/pv-camera-match-card.vue           |  16 +-
 .../src/components/common/pv-input.vue        |   7 +
 .../settings/ObjectDetectionCard.vue          |   6 +-
 .../src/views/CameraMatchingView.vue          | 201 ++++++++----------
 7 files changed, 180 insertions(+), 131 deletions(-)
 create mode 100644 photon-client/src/assets/images/loading-transparent.svg

diff --git a/photon-client/src/assets/images/loading-transparent.svg b/photon-client/src/assets/images/loading-transparent.svg
new file mode 100644
index 000000000..e0bdca029
--- /dev/null
+++ b/photon-client/src/assets/images/loading-transparent.svg
@@ -0,0 +1,57 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block; background: rgb(0, 100, 146);" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g transform="translate(80,50)">
+<g transform="rotate(0)">
+<circle fill-opacity="1" fill="#ffd943" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.8177570093457943s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.8177570093457943s" values="1;0" repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(71.21320343559643,71.21320343559643)">
+<g transform="rotate(45)">
+<circle fill-opacity="0.875" fill="#ffd943" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.7009345794392523s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.7009345794392523s" values="1;0" repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(50,80)">
+<g transform="rotate(90)">
+<circle fill-opacity="0.75" fill="#ffd943" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.5841121495327103s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.5841121495327103s" values="1;0" repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(28.786796564403577,71.21320343559643)">
+<g transform="rotate(135)">
+<circle fill-opacity="0.625" fill="#ffd943" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.4672897196261682s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.4672897196261682s" values="1;0" repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(20,50.00000000000001)">
+<g transform="rotate(180)">
+<circle fill-opacity="0.5" fill="#ffd943" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.35046728971962615s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.35046728971962615s" values="1;0" repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(28.78679656440357,28.786796564403577)">
+<g transform="rotate(225)">
+<circle fill-opacity="0.375" fill="#ffd943" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.2336448598130841s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.2336448598130841s" values="1;0" repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(49.99999999999999,20)">
+<g transform="rotate(270)">
+<circle fill-opacity="0.25" fill="#ffd943" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.11682242990654206s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.11682242990654206s" values="1;0" repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(71.21320343559643,28.78679656440357)">
+<g transform="rotate(315)">
+<circle fill-opacity="0.125" fill="#ffd943" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" values="1.5 1.5;1 1" begin="0s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="0s" values="1;0" repeatCount="indefinite" dur="0.9345794392523364s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g></g></g><!-- [ldio] generated by https://loading.io --></svg>
diff --git a/photon-client/src/components/app/photon-camera-stream.vue b/photon-client/src/components/app/photon-camera-stream.vue
index 19b5516b2..063d55347 100644
--- a/photon-client/src/components/app/photon-camera-stream.vue
+++ b/photon-client/src/components/app/photon-camera-stream.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, ref, onBeforeUnmount } from "vue";
 import { useStateStore } from "@/stores/StateStore";
-import loadingImage from "@/assets/images/loading.svg";
+import loadingImage from "@/assets/images/loading-transparent.svg";
 import type { StyleValue } from "vue/types/jsx";
 import PvIcon from "@/components/common/pv-icon.vue";
 import type { UiCameraConfiguration } from "@/types/SettingTypes";
@@ -9,7 +9,6 @@ import type { UiCameraConfiguration } from "@/types/SettingTypes";
 const props = defineProps<{
   streamType: "Raw" | "Processed";
   id: string;
-  outerId?: string;
   cameraSettings: UiCameraConfiguration;
 }>();
 
@@ -91,7 +90,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div :id="outerId" class="stream-container" :style="containerStyle">
+  <div class="stream-container" :style="containerStyle">
     <img :src="loadingImage" class="stream-loading" />
     <img
       :id="id"
@@ -131,18 +130,25 @@ onBeforeUnmount(() => {
   display: flex;
   position: relative;
   width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  justify-content: center;
+  align-items: center;
 }
 
 .stream-loading {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  width: 25%;
+  height: 25%;
+  object-fit: contain;
 }
 
 .stream-video {
   position: absolute;
   width: 100%;
   height: 100%;
+  object-fit: contain;
 }
 
 .stream-overlay {
diff --git a/photon-client/src/components/common/pv-camera-info-card.vue b/photon-client/src/components/common/pv-camera-info-card.vue
index f62c1aa5b..accf0e7eb 100644
--- a/photon-client/src/components/common/pv-camera-info-card.vue
+++ b/photon-client/src/components/common/pv-camera-info-card.vue
@@ -57,14 +57,14 @@ const cameraInfoFor: any = (camera: PVCameraInfo) => {
           <td>Path:</td>
           <td style="word-break: break-all">{{ cameraInfoFor(camera).path }}</td>
         </tr>
-        <tr v-if="cameraInfoFor(camera).otherPaths !== undefined && cameraInfoFor(camera).otherPaths !== null">
-          <td>Other Paths:</td>
-          <td>{{ cameraInfoFor(camera).otherPaths }}</td>
-        </tr>
         <tr v-if="cameraInfoFor(camera).uniquePath !== undefined && cameraInfoFor(camera).uniquePath !== null">
           <td>Unique Path:</td>
           <td style="word-break: break-all">{{ cameraInfoFor(camera).uniquePath }}</td>
         </tr>
+        <tr v-if="cameraInfoFor(camera).otherPaths !== undefined && cameraInfoFor(camera).otherPaths !== null">
+          <td>Other Paths:</td>
+          <td>{{ cameraInfoFor(camera).otherPaths }}</td>
+        </tr>
       </tbody>
     </v-simple-table>
   </div>
diff --git a/photon-client/src/components/common/pv-camera-match-card.vue b/photon-client/src/components/common/pv-camera-match-card.vue
index 863b6c4d4..23a755f06 100644
--- a/photon-client/src/components/common/pv-camera-match-card.vue
+++ b/photon-client/src/components/common/pv-camera-match-card.vue
@@ -95,14 +95,6 @@ const cameraInfoFor = (camera: PVCameraInfo): any => {
           <td style="word-break: break-all">{{ cameraInfoFor(saved).path }}</td>
           <td style="word-break: break-all">{{ cameraInfoFor(current).path }}</td>
         </tr>
-        <tr
-          v-if="cameraInfoFor(saved).otherPaths !== undefined && cameraInfoFor(saved).otherPaths !== null"
-          :class="!_.isEqual(cameraInfoFor(saved).otherPaths, cameraInfoFor(current).otherPaths) ? 'mismatch' : ''"
-        >
-          <td>Other Paths:</td>
-          <td>{{ cameraInfoFor(saved).otherPaths }}</td>
-          <td>{{ cameraInfoFor(current).otherPaths }}</td>
-        </tr>
         <tr
           v-if="cameraInfoFor(saved).uniquePath !== undefined && cameraInfoFor(saved).uniquePath !== null"
           :class="cameraInfoFor(saved).uniquePath !== cameraInfoFor(current).uniquePath ? 'mismatch' : ''"
@@ -111,6 +103,14 @@ const cameraInfoFor = (camera: PVCameraInfo): any => {
           <td style="word-break: break-all">{{ cameraInfoFor(saved).uniquePath }}</td>
           <td style="word-break: break-all">{{ cameraInfoFor(current).uniquePath }}</td>
         </tr>
+        <tr
+          v-if="cameraInfoFor(saved).otherPaths !== undefined && cameraInfoFor(saved).otherPaths !== null"
+          :class="!_.isEqual(cameraInfoFor(saved).otherPaths, cameraInfoFor(current).otherPaths) ? 'mismatch' : ''"
+        >
+          <td>Other Paths:</td>
+          <td>{{ cameraInfoFor(saved).otherPaths }}</td>
+          <td>{{ cameraInfoFor(current).otherPaths }}</td>
+        </tr>
       </tbody>
     </v-simple-table>
   </div>
diff --git a/photon-client/src/components/common/pv-input.vue b/photon-client/src/components/common/pv-input.vue
index cce6c8972..4b4c608f1 100644
--- a/photon-client/src/components/common/pv-input.vue
+++ b/photon-client/src/components/common/pv-input.vue
@@ -64,6 +64,7 @@ const handleKeydown = ({ key }) => {
         :error-messages="errorMessage"
         :rules="rules"
         hide-details="auto"
+        class="light-error"
         @keydown="handleKeydown"
       />
     </v-col>
@@ -74,3 +75,9 @@ const handleKeydown = ({ key }) => {
   margin-top: 0px;
 }
 </style>
+<style>
+.light-error .error--text {
+  color: red !important;
+  caret-color: red !important;
+}
+</style>
diff --git a/photon-client/src/components/settings/ObjectDetectionCard.vue b/photon-client/src/components/settings/ObjectDetectionCard.vue
index 7a85904a4..5b81d2f63 100644
--- a/photon-client/src/components/settings/ObjectDetectionCard.vue
+++ b/photon-client/src/components/settings/ObjectDetectionCard.vue
@@ -70,7 +70,7 @@ const supportedModels = computed(() => {
     <div class="pa-6 pt-0">
       <v-row>
         <v-col cols="12 ">
-          <v-btn color="secondary" @click="() => (showImportDialog = true)" class="justify-center">
+          <v-btn color="secondary" class="justify-center" @click="() => (showImportDialog = true)">
             <v-icon left class="open-icon"> mdi-import </v-icon>
             <span class="open-label">Import New Model</span>
           </v-btn>
@@ -94,10 +94,10 @@ const supportedModels = computed(() => {
                 named <code>note-640-640-yolov5s-labels.txt</code>. Note that ONLY 640x640 YOLOv5 & YOLOv8 models
                 trained and converted to `.rknn` format for RK3588 CPUs are currently supported!
                 <v-row class="mt-6 ml-4 mr-8">
-                  <v-file-input label="RKNN File" v-model="importRKNNFile" accept=".rknn" />
+                  <v-file-input v-model="importRKNNFile" label="RKNN File" accept=".rknn" />
                 </v-row>
                 <v-row class="mt-6 ml-4 mr-8">
-                  <v-file-input label="Labels File" v-model="importLabelsFile" accept=".txt" />
+                  <v-file-input v-model="importLabelsFile" label="Labels File" accept=".txt" />
                 </v-row>
                 <v-row
                   class="mt-12 ml-8 mr-8 mb-1"
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index 028ee82e1..082ab1285 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
-import { computed, inject, onMounted, ref } from "vue";
+import { computed, inject, ref } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import {
   PlaceholderCameraSettings,
@@ -28,10 +28,7 @@ const activateModule = (moduleUniqueName: string) => {
 
   fetch(url.toString(), {
     method: "POST"
-  }).finally(() => {
-    activatingModule.value = false;
-    setTimeout(() => enforceStreamHeight(), 1000);
-  });
+  }).finally(() => (activatingModule.value = false));
 };
 
 const assigningCamera = ref(false);
@@ -43,10 +40,7 @@ const assignCamera = (cameraInfo: PVCameraInfo) => {
 
   fetch(url.toString(), {
     method: "POST"
-  }).finally(() => {
-    assigningCamera.value = false;
-    setTimeout(() => enforceStreamHeight(), 1000);
-  });
+  }).finally(() => (assigningCamera.value = false));
 };
 
 const deactivatingModule = ref(false);
@@ -122,7 +116,8 @@ const camerasMatch = (camera1: PVCameraInfo, camera2: PVCameraInfo) => {
   else return false;
 };
 
-const cameraInfoFor = (camera: PVCameraInfo): PVUsbCameraInfo | PVCSICameraInfo | PVFileCameraInfo | any => {
+const cameraInfoFor = (camera: PVCameraInfo | null): PVUsbCameraInfo | PVCSICameraInfo | PVFileCameraInfo | any => {
+  if (!camera) return null;
   if (camera.PVUsbCameraInfo) {
     return camera.PVUsbCameraInfo;
   }
@@ -135,76 +130,67 @@ const cameraInfoFor = (camera: PVCameraInfo): PVUsbCameraInfo | PVCSICameraInfo
   return {};
 };
 
-const uniquePathForCamera = (info: PVCameraInfo) => {
-  if (info.PVUsbCameraInfo) {
-    return info.PVUsbCameraInfo.uniquePath;
-  }
-  if (info.PVCSICameraInfo) {
-    return info.PVCSICameraInfo.uniquePath;
-  }
-  if (info.PVFileCameraInfo) {
-    return info.PVFileCameraInfo.uniquePath;
-  }
-
-  // TODO - wut
-  return "";
-};
-
 /**
  * Find the PVCameraInfo currently occupying the same uniquepath as the the given module
  */
 const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
   if (!info) {
     return {
-      PVFileCameraInfo: {
-        name: "!",
-        path: "!",
-        uniquePath: "!"
-      },
+      PVFileCameraInfo: undefined,
       PVCSICameraInfo: undefined,
       PVUsbCameraInfo: undefined
     };
   }
   return (
     useStateStore().vsmState.allConnectedCameras.find(
-      (it) => uniquePathForCamera(it) === uniquePathForCamera(info)
+      (it) => cameraInfoFor(it).uniquePath === cameraInfoFor(info).uniquePath
     ) || {
-      PVFileCameraInfo: {
-        name: "!",
-        path: "!",
-        uniquePath: "!"
-      },
+      PVFileCameraInfo: undefined,
       PVCSICameraInfo: undefined,
       PVUsbCameraInfo: undefined
     }
   );
 };
 
-const unmatchedCameras = computed(() => {
-  const activeVmPaths = Object.values(useCameraSettingsStore().cameras).map((it) =>
-    uniquePathForCamera(it.matchedCameraInfo)
+const cameraCononected = (uniquePath: string): boolean => {
+  return (
+    useStateStore().vsmState.allConnectedCameras.find((it) => cameraInfoFor(it).uniquePath === uniquePath) !== undefined
   );
-  const disabledVmPaths = useStateStore().vsmState.disabledConfigs.map((it) =>
-    uniquePathForCamera(it.matchedCameraInfo)
+};
+
+const unmatchedCameras = computed(() => {
+  const activeVmPaths = Object.values(useCameraSettingsStore().cameras).map(
+    (it) => cameraInfoFor(it.matchedCameraInfo).uniquePath
+  );
+  const disabledVmPaths = useStateStore().vsmState.disabledConfigs.map(
+    (it) => cameraInfoFor(it.matchedCameraInfo).uniquePath
   );
 
   return useStateStore().vsmState.allConnectedCameras.filter(
-    (it) => !activeVmPaths.includes(uniquePathForCamera(it)) && !disabledVmPaths.includes(uniquePathForCamera(it))
+    (it) =>
+      !activeVmPaths.includes(cameraInfoFor(it).uniquePath) && !disabledVmPaths.includes(cameraInfoFor(it).uniquePath)
   );
 });
 
 const activeVisionModules = computed(() =>
-  Object.values(useCameraSettingsStore().cameras).filter(
-    (camera) => JSON.stringify(camera) !== JSON.stringify(PlaceholderCameraSettings)
-  )
+  Object.values(useCameraSettingsStore().cameras)
+    // Ignore placeholder camera
+    .filter((camera) => JSON.stringify(camera) !== JSON.stringify(PlaceholderCameraSettings))
+    // Display connected cameras first
+    .sort(
+      (first, second) =>
+        (cameraCononected(cameraInfoFor(second.matchedCameraInfo).uniquePath) ? 1 : 0) -
+        (cameraCononected(cameraInfoFor(first.matchedCameraInfo).uniquePath) ? 1 : 0)
+    )
 );
+
 const disabledVisionModules = computed(() => useStateStore().vsmState.disabledConfigs);
 
 const viewingDetails = ref(false);
-const viewingCamera = ref<PVCameraInfo | null>(null);
-const setCameraView = (camera: PVCameraInfo | null) => {
-  viewingDetails.value = camera !== null;
-  viewingCamera.value = camera;
+const viewingCamera = ref<[PVCameraInfo | null, boolean | null]>([null, null]);
+const setCameraView = (camera: PVCameraInfo | null, isConnected: boolean | null) => {
+  viewingDetails.value = camera !== null && isConnected !== null;
+  viewingCamera.value = [camera, isConnected];
 };
 
 const viewingDeleteCamera = ref(false);
@@ -219,30 +205,6 @@ const exportSettings = ref();
 const openExportSettingsPrompt = () => {
   exportSettings.value.click();
 };
-
-const enforceStreamHeight = () => {
-  const streamWidth = document.getElementById("stream-container-0")?.offsetWidth ?? 0;
-  if (streamWidth === 0) return;
-
-  Object.values(useCameraSettingsStore().cameras)
-    .filter((camera) => JSON.stringify(camera) !== JSON.stringify(PlaceholderCameraSettings))
-    .forEach((element, index) => {
-      let stream = document.getElementById(`outer-output-camera-stream-${index}`);
-      if (!stream) return;
-
-      stream?.classList.remove("tall-stream", "wide-stream", "d-none");
-      let streamRes = element.validVideoFormats[0].resolution.width / element.validVideoFormats[0].resolution.height;
-      let containerRes = streamWidth / 250.0;
-      if (element.pipelineSettings.inputImageRotationMode % 2 == 1) streamRes = 1 / streamRes;
-      if (streamRes > containerRes) stream?.classList.add("wide-stream");
-      else stream?.classList.add("tall-stream");
-    });
-};
-
-onMounted(() => {
-  setTimeout(() => enforceStreamHeight(), 1000);
-  window.addEventListener("resize", enforceStreamHeight);
-});
 </script>
 
 <template>
@@ -258,31 +220,33 @@ onMounted(() => {
       >
         <v-card dark color="primary">
           <v-card-title>{{ cameraInfoFor(module.matchedCameraInfo).name }}</v-card-title>
-          <v-card-subtitle v-if="camerasMatch(getMatchedDevice(module.matchedCameraInfo), module.matchedCameraInfo)"
+          <v-card-subtitle v-if="!cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath)" class="pb-2"
+            >Status: <span class="inactive-status">Disconnected</span></v-card-subtitle
+          >
+          <v-card-subtitle
+            v-else-if="
+              cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath) &&
+              camerasMatch(getMatchedDevice(module.matchedCameraInfo), module.matchedCameraInfo)
+            "
+            class="pb-2"
             >Status: <span class="active-status">Active</span></v-card-subtitle
           >
-          <v-card-subtitle v-else>Status: <span class="mismatch-status">Mismatch</span></v-card-subtitle>
+          <v-card-subtitle v-else class="pb-2">Status: <span class="mismatch-status">Mismatch</span></v-card-subtitle>
           <v-card-text>
-            <v-simple-table dark dense class="mb-3">
+            <v-simple-table dark dense>
               <tbody>
                 <tr>
                   <td>Streams:</td>
                   <td>
-                    <a :href="formatUrl(module.stream.inputPort)" target="_blank" class="stream-link"> Input Stream </a>
+                    <a :href="formatUrl(module.stream.inputPort)" target="_blank" class="stream-link"> Input </a>
                     /
-                    <a :href="formatUrl(module.stream.outputPort)" target="_blank" class="stream-link">
-                      Output Stream
-                    </a>
+                    <a :href="formatUrl(module.stream.outputPort)" target="_blank" class="stream-link"> Output </a>
                   </td>
                 </tr>
                 <tr>
                   <td>Pipelines</td>
                   <td>{{ module.pipelineNicknames.join(", ") }}</td>
                 </tr>
-                <tr>
-                  <td>Connected</td>
-                  <td>{{ module.isConnected }}</td>
-                </tr>
                 <tr>
                   <td>Calibrations</td>
                   <td>
@@ -292,8 +256,13 @@ onMounted(() => {
                     }}
                   </td>
                 </tr>
-                <tr v-if="module.isConnected && useStateStore().backendResults[module.uniqueName]">
-                  <td>Frames Processed</td>
+                <tr
+                  v-if="
+                    cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath) &&
+                    useStateStore().backendResults[module.uniqueName]
+                  "
+                >
+                  <td style="width: 50%">Frames Processed</td>
                   <td>
                     {{ useStateStore().backendResults[module.uniqueName].sequenceID }} ({{
                       useStateStore().backendResults[module.uniqueName].fps
@@ -304,23 +273,31 @@ onMounted(() => {
               </tbody>
             </v-simple-table>
             <div
+              v-if="cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath)"
               :id="`stream-container-${index}`"
-              class="d-flex flex-column justify-center align-center"
+              class="d-flex flex-column justify-center align-center mt-3"
               style="height: 250px"
             >
               <photon-camera-stream
                 :id="`output-camera-stream-${index}`"
                 :camera-settings="module"
                 stream-type="Processed"
-                :outer-id="`outer-output-camera-stream-${index}`"
-                class="d-none"
               />
             </div>
           </v-card-text>
           <v-card-text class="pt-0">
             <v-row>
               <v-col cols="12" md="4" class="pr-md-0 pb-0 pb-md-3">
-                <v-btn color="secondary" style="width: 100%" @click="setCameraView(module.matchedCameraInfo)">
+                <v-btn
+                  color="secondary"
+                  style="width: 100%"
+                  @click="
+                    setCameraView(
+                      module.matchedCameraInfo,
+                      cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath)
+                    )
+                  "
+                >
                   <span>Details</span>
                 </v-btn>
               </v-col>
@@ -349,7 +326,7 @@ onMounted(() => {
       <v-col v-for="module in disabledVisionModules" :key="`disabled-${module.uniqueName}`" cols="12" sm="6" lg="4">
         <v-card dark color="primary">
           <v-card-title>{{ module.nickname }}</v-card-title>
-          <v-card-subtitle>Status: <span class="inactive-status">Deactivated</span></v-card-subtitle>
+          <v-card-subtitle class="pb-2">Status: <span class="inactive-status">Deactivated</span></v-card-subtitle>
           <v-card-text>
             <v-simple-table dense>
               <tbody>
@@ -365,7 +342,7 @@ onMounted(() => {
                 </tr>
                 <tr>
                   <td>Connected</td>
-                  <td>{{ module.isConnected }}</td>
+                  <td>{{ cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath) }}</td>
                 </tr>
                 <tr>
                   <td>Calibrations</td>
@@ -382,7 +359,16 @@ onMounted(() => {
           <v-card-text class="pt-0">
             <v-row>
               <v-col cols="12" md="4" class="pr-md-0 pb-0 pb-md-3">
-                <v-btn color="secondary" style="width: 100%" @click="setCameraView(module.matchedCameraInfo)">
+                <v-btn
+                  color="secondary"
+                  style="width: 100%"
+                  @click="
+                    setCameraView(
+                      module.matchedCameraInfo,
+                      cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath)
+                    )
+                  "
+                >
                   <span>Details</span>
                 </v-btn>
               </v-col>
@@ -410,7 +396,7 @@ onMounted(() => {
       <!-- Unassigned cameras -->
       <v-col v-for="(camera, index) in unmatchedCameras" :key="index" cols="12" sm="6" lg="4">
         <v-card dark color="primary">
-          <v-card-title>
+          <v-card-title class="pb-2">
             <span v-if="camera.PVUsbCameraInfo">USB Camera:</span>
             <span v-else-if="camera.PVCSICameraInfo">CSI Camera:</span>
             <span v-else-if="camera.PVFileCameraInfo">File Camera:</span>
@@ -424,7 +410,7 @@ onMounted(() => {
           <v-card-text class="pt-0">
             <v-row>
               <v-col cols="6" class="pr-0">
-                <v-btn color="secondary" style="width: 100%" @click="setCameraView(camera)">
+                <v-btn color="secondary" style="width: 100%" @click="setCameraView(camera, false)">
                   <span>Details</span>
                 </v-btn>
               </v-col>
@@ -462,22 +448,25 @@ onMounted(() => {
 
     <!-- Camera details modal -->
     <v-dialog v-model="viewingDetails" max-width="800">
-      <v-card v-if="viewingCamera !== null" dark flat color="primary">
+      <v-card v-if="viewingCamera[0] !== null" dark flat color="primary">
         <v-card-title class="d-flex justify-space-between">
-          <span>{{ cameraInfoFor(viewingCamera)?.name ?? cameraInfoFor(viewingCamera)?.baseName }}</span>
-          <v-btn text @click="setCameraView(null)">
+          <span>{{ cameraInfoFor(viewingCamera[0])?.name ?? cameraInfoFor(viewingCamera[0])?.baseName }}</span>
+          <v-btn text @click="setCameraView(null, null)">
             <v-icon>mdi-close-thick</v-icon>
           </v-btn>
         </v-card-title>
-        <v-card-text v-if="!camerasMatch(getMatchedDevice(viewingCamera), viewingCamera)">
+        <v-card-text v-if="!viewingCamera[1]">
+          <PvCameraInfoCard :camera="viewingCamera[0]" />
+        </v-card-text>
+        <v-card-text v-else-if="!camerasMatch(getMatchedDevice(viewingCamera[0]), viewingCamera[0])">
           <v-banner rounded color="error" text-color="white" icon="mdi-information-outline" class="mb-3">
             It looks like a different camera may have been connected to this device! Compare the following information
             carefully.
           </v-banner>
-          <PvCameraMatchCard :saved="viewingCamera" :current="getMatchedDevice(viewingCamera)" />
+          <PvCameraMatchCard :saved="viewingCamera[0]" :current="getMatchedDevice(viewingCamera[0])" />
         </v-card-text>
         <v-card-text v-else>
-          <PvCameraInfoCard :camera="getMatchedDevice(viewingCamera)" />
+          <PvCameraInfoCard :camera="getMatchedDevice(viewingCamera[0])" />
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -561,14 +550,4 @@ a:active,
   background-color: transparent;
   text-decoration: none;
 }
-
-.wide-stream {
-  width: 100%;
-  height: auto;
-}
-
-.tall-stream {
-  height: 100%;
-  width: auto;
-}
 </style>