Remove camera index in ui

photon-client/src/App.vue

@@ -34,8 +34,8 @@ if (!is_demo) {
       if (data.updatePipelineResult !== undefined) {
         useStateStore().updateBackendResultsFromWebsocket(data.updatePipelineResult);
       }
-      if (data.mutatePipelineSettings !== undefined && data.cameraIndex !== undefined) {
-        useCameraSettingsStore().changePipelineSettingsInStore(data.mutatePipelineSettings, data.cameraIndex);
+      if (data.mutatePipelineSettings !== undefined && data.cameraUniqueName !== undefined) {
+        useCameraSettingsStore().changePipelineSettingsInStore(data.mutatePipelineSettings, data.cameraUniqueName);
       }
       if (data.calibrationData !== undefined) {
         useStateStore().updateCalibrationStateValuesFromWebsocket(data.calibrationData);

photon-client/src/components/app/photon-sidebar.vue

@@ -20,7 +20,8 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
 
 const needsCamerasConfigured = computed<boolean>(() => {
   return (
-    useCameraSettingsStore().cameras.length === 0 || useCameraSettingsStore().cameras[0] === PlaceholderCameraSettings
+    Object.values(useCameraSettingsStore().cameras).length === 0 ||
+    useCameraSettingsStore().cameras["PlaceHolder Name"] === PlaceholderCameraSettings
   );
 });
 </script>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import PvSelect from "@/components/common/pv-select.vue";
+import PvSelect, { type SelectItem } from "@/components/common/pv-select.vue";
 import PvNumberInput from "@/components/common/pv-number-input.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
@@ -121,7 +121,7 @@ const openExportSettingsPrompt = () => {
 const yesDeleteMySettingsText = ref("");
 const deleteThisCamera = () => {
   const payload = {
-    cameraUniqueName: useCameraSettingsStore().cameraUniqueNames[useStateStore().currentCameraIndex]
+    cameraUniqueName: useStateStore().currentCameraUniqueName
   };
 
   axios
@@ -152,16 +152,22 @@ const deleteThisCamera = () => {
     });
   showDeleteCamera.value = false;
 };
+const wrappedCameras = computed<SelectItem[]>(() =>
+  Object.keys(useCameraSettingsStore().cameras).map((cameraUniqueName) => ({
+    name: useCameraSettingsStore().cameras[cameraUniqueName].nickname,
+    value: cameraUniqueName
+  }))
+);
 </script>
 
 <template>
   <v-card class="mb-3 pr-6 pb-3" color="primary" dark>
     <v-card-title>Camera Settings</v-card-title>
     <div class="ml-5">
       <pv-select
-        v-model="useStateStore().currentCameraIndex"
+        v-model="useStateStore().currentCameraUniqueName"
         label="Camera"
-        :items="useCameraSettingsStore().cameraNames"
+        :items="wrappedCameras"
         :select-cols="8"
       />
       <pv-number-input
@@ -213,9 +219,7 @@ const deleteThisCamera = () => {
 
     <v-dialog v-model="showDeleteCamera" dark width="1500">
       <v-card dark class="dialog-container pa-6" color="primary" flat>
-        <v-card-title
-          >Delete camera "{{ useCameraSettingsStore().cameraNames[useStateStore().currentCameraIndex] }}"</v-card-title
-        >
+        <v-card-title>Delete camera "{{ useCameraSettingsStore().currentCameraName }}"</v-card-title>
         <v-row class="pl-3 align-center pa-6">
           <v-col cols="12" md="6">
             <span class="mt-3"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>

photon-client/src/components/common/pv-select.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue";
 import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 
-interface SelectItem {
+export interface SelectItem {
   name: string | number;
   value: string | number;
   disabled?: boolean;
@@ -14,7 +14,7 @@ const props = withDefaults(
     tooltip?: string;
     selectCols?: number;
     // TODO fully update v-model usage in custom components on Vue3 update
-    value: number;
+    value: any;
     disabled?: boolean;
     items: string[] | number[] | SelectItem[];
   }>(),
@@ -25,7 +25,7 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-  (e: "input", value: number): void;
+  (e: "input", value: string): void;
 }>();
 
 const localValue = computed({

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import PvSelect from "@/components/common/pv-select.vue";
+import PvSelect, { type SelectItem } from "@/components/common/pv-select.vue";
 import { useStateStore } from "@/stores/StateStore";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
@@ -9,10 +9,10 @@ import PvInput from "@/components/common/pv-input.vue";
 import { PipelineType } from "@/types/PipelineTypes";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 
-const changeCurrentCameraIndex = (index: number) => {
-  useCameraSettingsStore().setCurrentCameraIndex(index, true);
+const changeCurrentCameraUniqueName = (cameraUniqueName: string) => {
+  useCameraSettingsStore().setCurrentCameraUniqueName(cameraUniqueName, true);
 
-  switch (useCameraSettingsStore().cameras[index].pipelineSettings.pipelineType) {
+  switch (useCameraSettingsStore().cameras[cameraUniqueName].pipelineSettings.pipelineType) {
     case PipelineType.Reflective:
       pipelineType.value = WebsocketPipelineType.Reflective;
       break;
@@ -86,7 +86,7 @@ const cancelCameraNameEdit = () => {
 };
 
 // Pipeline Name Edit
-const pipelineNamesWrapper = computed<{ name: string; value: number }[]>(() => {
+const pipelineNamesWrapper = computed<SelectItem[]>(() => {
   const pipelineNames = useCameraSettingsStore().pipelineNames.map((name, index) => ({ name: name, value: index }));
 
   if (useCameraSettingsStore().isDriverMode) {
@@ -212,7 +212,7 @@ const duplicateCurrentPipeline = () => {
 
 // Change Props whenever the pipeline settings are changed
 useCameraSettingsStore().$subscribe((mutation, state) => {
-  const currentCameraSettings = state.cameras[useStateStore().currentCameraIndex];
+  const currentCameraSettings = state.cameras[useStateStore().currentCameraUniqueName];
 
   switch (currentCameraSettings.pipelineSettings.pipelineType) {
     case PipelineType.Reflective:
@@ -232,6 +232,12 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
       break;
   }
 });
+const wrappedCameras = computed<SelectItem[]>(() =>
+  Object.keys(useCameraSettingsStore().cameras).map((cameraUniqueName) => ({
+    name: useCameraSettingsStore().cameras[cameraUniqueName].nickname,
+    value: cameraUniqueName
+  }))
+);
 </script>
 
 <template>
@@ -240,10 +246,10 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
       <v-col cols="10" class="pa-0">
         <pv-select
           v-if="!isCameraNameEdit"
-          v-model="useStateStore().currentCameraIndex"
+          v-model="useStateStore().currentCameraUniqueName"
           label="Camera"
-          :items="useCameraSettingsStore().cameraNames"
-          @input="changeCurrentCameraIndex"
+          :items="wrappedCameras"
+          @input="changeCurrentCameraUniqueName"
         />
         <pv-input
           v-else

photon-client/src/stores/StateStore.ts

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import type { LogMessage, VsmState } from "@/types/SettingTypes";
 import type { AutoReconnectingWebsocket } from "@/lib/AutoReconnectingWebsocket";
 import type { MultitagResult, PipelineResult } from "@/types/PhotonTrackingTypes";
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import type {
   WebsocketCalibrationData,
   WebsocketLogMessage,
@@ -22,7 +23,7 @@ interface StateStore {
   showLogModal: boolean;
   sidebarFolded: boolean;
   logMessages: LogMessage[];
-  currentCameraIndex: number;
+  currentCameraUniqueName: string;
 
   backendResults: Record<number, PipelineResult>;
   multitagResultBuffer: Record<string, MultitagResult[]>;
@@ -48,6 +49,7 @@ interface StateStore {
 
 export const useStateStore = defineStore("state", {
   state: (): StateStore => {
+    const cameraStore = useCameraSettingsStore();
     return {
       backendConnected: false,
       websocket: undefined,
@@ -59,7 +61,7 @@ export const useStateStore = defineStore("state", {
       sidebarFolded:
         localStorage.getItem("sidebarFolded") === null ? false : localStorage.getItem("sidebarFolded") === "true",
       logMessages: [],
-      currentCameraIndex: 0,
+      currentCameraUniqueName: Object.keys(cameraStore.cameras)[0],
 
       backendResults: {
         0: {
@@ -97,11 +99,12 @@ export const useStateStore = defineStore("state", {
   },
   getters: {
     currentPipelineResults(): PipelineResult | undefined {
-      return this.backendResults[this.currentCameraIndex.toString()];
+      return this.backendResults[this.currentCameraUniqueName.toString()];
     },
     currentMultitagBuffer(): MultitagResult[] | undefined {
-      if (!this.multitagResultBuffer[this.currentCameraIndex]) this.multitagResultBuffer[this.currentCameraIndex] = [];
-      return this.multitagResultBuffer[this.currentCameraIndex];
+      if (!this.multitagResultBuffer[this.currentCameraUniqueName])
+        this.multitagResultBuffer[this.currentCameraUniqueName] = [];
+      return this.multitagResultBuffer[this.currentCameraUniqueName];
     }
   },
   actions: {