Convert to user selected camera matching (#1556)

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

@@ -282,7 +282,11 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
           :value="useCameraSettingsStore().currentCameraSettings.currentPipelineIndex"
           label="Pipeline"
           tooltip="Each pipeline runs on a camera output and stores a unique set of processing settings"
-          :disabled="useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode"
+          :disabled="
+            useCameraSettingsStore().isDriverMode ||
+            useCameraSettingsStore().isCalibrationMode ||
+            !useCameraSettingsStore().hasConnected
+          "
           :items="pipelineNamesWrapper"
           @input="(args) => useCameraSettingsStore().changeCurrentPipelineIndex(args, true)"
         />
@@ -349,7 +353,11 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
           v-model="currentPipelineType"
           label="Type"
           tooltip="Changes the pipeline type, which changes the type of processing that will happen on input frames"
-          :disabled="useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode"
+          :disabled="
+            useCameraSettingsStore().isDriverMode ||
+            useCameraSettingsStore().isCalibrationMode ||
+            !useCameraSettingsStore().hasConnected
+          "
           :items="pipelineTypesWrapper"
           @input="showPipelineTypeChangeDialog = true"
         />

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

@@ -49,6 +49,7 @@ const performanceRecommendation = computed<string>(() => {
       </v-col>
       <v-col class="align-self-center" style="text-align: right; margin-right: 12px; padding-left: 24px">
         <v-chip
+          v-if="useCameraSettingsStore().currentCameraSettings.isConnected"
           label
           :color="fpsTooLow ? 'error' : 'transparent'"
           :text-color="fpsTooLow ? '#C7EA46' : '#ff4d00'"
@@ -58,6 +59,9 @@ const performanceRecommendation = computed<string>(() => {
             >Processing @ {{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;</span
           ><span>{{ performanceRecommendation }}</span>
         </v-chip>
+        <v-chip v-else label color="transparent" text-color="red" style="font-size: 1rem; padding: 0; margin: 0">
+          <span class="pr-1"> Camera not connected </span>
+        </v-chip>
       </v-col>
       <v-col
         class="align-self-center"
@@ -82,10 +86,20 @@ const performanceRecommendation = computed<string>(() => {
     <v-divider style="border-color: white" />
     <v-row class="stream-viewer-container pa-3">
       <v-col v-if="value.includes(0)" class="stream-view">
-        <photon-camera-stream id="input-camera-stream" stream-type="Raw" style="width: 100%; height: auto" />
+        <photon-camera-stream
+          id="input-camera-stream"
+          :camera-settings="useCameraSettingsStore().currentCameraSettings"
+          stream-type="Raw"
+          style="width: 100%; height: auto"
+        />
       </v-col>
       <v-col v-if="value.includes(1)" class="stream-view">
-        <photon-camera-stream id="output-camera-stream" stream-type="Processed" style="width: 100%; height: auto" />
+        <photon-camera-stream
+          id="output-camera-stream"
+          :camera-settings="useCameraSettingsStore().currentCameraSettings"
+          stream-type="Processed"
+          style="width: 100%; height: auto"
+        />
       </v-col>
     </v-row>
   </v-card>

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

@@ -145,31 +145,42 @@ onBeforeUpdate(() => {
 
 <template>
   <v-row no-gutters class="tabGroups">
-    <v-col
-      v-for="(tabGroupData, tabGroupIndex) in tabGroups"
-      :key="tabGroupIndex"
-      :class="tabGroupIndex !== tabGroups.length - 1 && 'pr-3'"
-    >
-      <v-card color="primary" height="100%" class="pr-4 pl-4">
-        <v-tabs
-          v-model="selectedTabs[tabGroupIndex]"
-          grow
-          background-color="primary"
-          dark
-          height="48"
-          slider-color="accent"
-        >
-          <v-tab v-for="(tabConfig, index) in tabGroupData" :key="index">
-            {{ tabConfig.tabName }}
-          </v-tab>
-        </v-tabs>
-        <div class="pl-4 pr-4 pt-4 pb-2">
-          <KeepAlive>
-            <Component :is="tabGroupData[selectedTabs[tabGroupIndex]].component" />
-          </KeepAlive>
-        </div>
-      </v-card>
-    </v-col>
+    <template v-if="!useCameraSettingsStore().hasConnected">
+      <v-col v-if="!useCameraSettingsStore().hasConnected" cols="12">
+        <v-card color="error">
+          <v-card-title class="white--text">
+            Camera has not connected. Please check your connection and try again.
+          </v-card-title>
+        </v-card>
+      </v-col>
+    </template>
+    <template v-else>
+      <v-col
+        v-for="(tabGroupData, tabGroupIndex) in tabGroups"
+        :key="tabGroupIndex"
+        :class="tabGroupIndex !== tabGroups.length - 1 && 'pr-3'"
+      >
+        <v-card color="primary" height="100%" class="pr-4 pl-4">
+          <v-tabs
+            v-model="selectedTabs[tabGroupIndex]"
+            grow
+            background-color="primary"
+            dark
+            height="48"
+            slider-color="accent"
+          >
+            <v-tab v-for="(tabConfig, index) in tabGroupData" :key="index">
+              {{ tabConfig.tabName }}
+            </v-tab>
+          </v-tabs>
+          <div class="pl-4 pr-4 pt-4 pb-2">
+            <KeepAlive>
+              <Component :is="tabGroupData[selectedTabs[tabGroupIndex]].component" />
+            </KeepAlive>
+          </div>
+        </v-card>
+      </v-col>
+    </template>
   </v-row>
 </template>
 

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

@@ -38,11 +38,16 @@ const processingMode = computed<number>({
       <v-col>
         <p style="color: white">Processing Mode</p>
         <v-btn-toggle v-model="processingMode" mandatory dark class="fill">
-          <v-btn color="secondary">
+          <v-btn color="secondary" :disabled="!useCameraSettingsStore().hasConnected">
             <v-icon left>mdi-square-outline</v-icon>
             <span>2D</span>
           </v-btn>
-          <v-btn color="secondary" :disabled="!useCameraSettingsStore().isCurrentVideoFormatCalibrated">
+          <v-btn
+            color="secondary"
+            :disabled="
+              !useCameraSettingsStore().hasConnected || !useCameraSettingsStore().isCurrentVideoFormatCalibrated
+            "
+          >
             <v-icon left>mdi-cube-outline</v-icon>
             <span>3D</span>
           </v-btn>