Merge branch 'master' into 2024

photon-client/.eslintrc.json

@@ -15,6 +15,7 @@
     "object-curly-spacing": ["error", "always"],
     "quote-props": ["error", "as-needed"],
     "no-case-declarations": "off",
-    "vue/require-default-prop": "off"
+    "vue/require-default-prop": "off",
+    "vue/v-on-event-hyphenation": "off"
   }
 }

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

@@ -233,6 +233,7 @@ const endCalibration = () => {
                 :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"

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

@@ -68,7 +68,7 @@ const fpsTooLow = computed<boolean>(() => {
       <div>
         <v-switch
           v-model="driverMode"
-          :disabled="useCameraSettingsStore().isCalibrationMode"
+          :disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
           label="Driver Mode"
           style="margin-left: auto"
           color="accent"
@@ -125,6 +125,7 @@ th {
 
 .stream-container {
   display: flex;
+  justify-content: center;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;

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

@@ -2,13 +2,15 @@
 const props = withDefaults(
   defineProps<{
     iconName: string;
+    disabled?: boolean;
     color?: string;
     tooltip?: string;
     right?: boolean;
     hover?: boolean;
   }>(),
   {
     right: false,
+    disabled: false,
     hover: false
   }
 );
@@ -24,7 +26,14 @@ const hoverClass = props.hover ? "hover" : "";
   <div>
     <v-tooltip :right="right" :bottom="!right" nudge-right="10" :disabled="tooltip === undefined">
       <template #activator="{ on, attrs }">
-        <v-icon :class="hoverClass" :color="color" v-bind="attrs" v-on="on" @click="$emit('click')">
+        <v-icon
+          :class="hoverClass"
+          :color="color"
+          v-bind="attrs"
+          :disabled="disabled"
+          v-on="on"
+          @click="$emit('click')"
+        >
           {{ iconName }}
         </v-icon>
       </template>

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

@@ -35,9 +35,10 @@ const localValue = computed({
 const handleKeydown = ({ key }) => {
   switch (key) {
     case "Enter":
-      if (!(props.rules || []).some((v) => v(localValue.value) === false || typeof v(localValue.value) === "string")) {
-        emit("onEnter", localValue.value);
-      }
+      // Explicitly check that all rule props return true
+      if (!props.rules?.every((rule) => rule(localValue.value) === true)) return;
+
+      emit("onEnter", localValue.value);
       break;
     case "Escape":
       emit("onEscape");

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

@@ -138,7 +138,7 @@ const cancelPipelineCreation = () => {
   newPipelineType.value = useCameraSettingsStore().currentWebsocketPipelineType;
 };
 
-// Pipeline Creation
+// Pipeline Deletion
 const showPipelineDeletionConfirmationDialog = ref(false);
 const confirmDeleteCurrentPipeline = () => {
   useCameraSettingsStore().deleteCurrentPipeline();
@@ -186,6 +186,11 @@ const cancelChangePipelineType = () => {
   showPipelineTypeChangeDialog.value = false;
 };
 
+// Pipeline duplication'
+const duplicateCurrentPipeline = () => {
+  useCameraSettingsStore().duplicatePipeline(useCameraSettingsStore().currentCameraSettings.currentPipelineIndex);
+};
+
 // Change Props whenever the pipeline settings are changed
 useCameraSettingsStore().$subscribe((mutation, state) => {
   const currentCameraSettings = state.cameras[useStateStore().currentCameraIndex];
@@ -225,12 +230,27 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
           :input-cols="12 - 3"
           :rules="[(v) => checkCameraName(v)]"
           label="Camera"
-          @on-enter="saveCameraNameEdit"
-          @on-escape="cancelCameraNameEdit"
+          @onEnter="saveCameraNameEdit"
+          @onEscape="cancelCameraNameEdit"
         />
       </v-col>
       <v-col cols="2" style="display: flex; align-items: center; justify-content: center">
-        <pv-icon color="#c5c5c5" icon-name="mdi-pencil" tooltip="Edit Camera Name" @click="startCameraNameEdit" />
+        <div v-if="isCameraNameEdit" style="display: flex; gap: 14px">
+          <pv-icon
+            icon-name="mdi-content-save"
+            color="#c5c5c5"
+            :disabled="checkCameraName(currentCameraName) !== true"
+            @click="() => saveCameraNameEdit(currentCameraName)"
+          />
+          <pv-icon icon-name="mdi-cancel" color="red darken-2" @click="cancelCameraNameEdit" />
+        </div>
+        <pv-icon
+          v-else
+          color="#c5c5c5"
+          icon-name="mdi-pencil"
+          tooltip="Edit Camera Name"
+          @click="startCameraNameEdit"
+        />
       </v-col>
     </v-row>
     <v-row style="padding: 0 12px 0 24px">
@@ -250,12 +270,21 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
           :input-cols="12 - 3"
           :rules="[(v) => checkPipelineName(v)]"
           label="Pipeline"
-          @on-enter="(v) => savePipelineNameEdit(v)"
-          @on-escape="cancelPipelineNameEdit"
+          @onEnter="(v) => savePipelineNameEdit(v)"
+          @onEscape="cancelPipelineNameEdit"
         />
       </v-col>
       <v-col cols="2" class="pa-0" style="display: flex; align-items: center; justify-content: center">
-        <v-menu v-if="!useCameraSettingsStore().isDriverMode" offset-y nudge-bottom="7" auto>
+        <div v-if="isPipelineNameEdit" style="display: flex; gap: 14px">
+          <pv-icon
+            icon-name="mdi-content-save"
+            color="#c5c5c5"
+            :disabled="checkPipelineName(currentPipelineName) !== true"
+            @click="() => savePipelineNameEdit(currentPipelineName)"
+          />
+          <pv-icon icon-name="mdi-cancel" color="red darken-2" @click="cancelPipelineNameEdit" />
+        </div>
+        <v-menu v-else-if="!useCameraSettingsStore().isDriverMode" offset-y nudge-bottom="7" auto>
           <template #activator="{ on }">
             <v-icon color="#c5c5c5" v-on="on" @click="cancelPipelineNameEdit"> mdi-menu </v-icon>
           </template>
@@ -275,19 +304,21 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
                 <pv-icon color="red darken-2" :right="true" icon-name="mdi-delete" tooltip="Delete pipeline" />
               </v-list-item-title>
             </v-list-item>
-            <v-list-item
-              @click="
-                useCameraSettingsStore().duplicatePipeline(
-                  useCameraSettingsStore().currentCameraSettings.currentPipelineIndex
-                )
-              "
-            >
+            <v-list-item @click="duplicateCurrentPipeline">
               <v-list-item-title>
                 <pv-icon color="#c5c5c5" :right="true" icon-name="mdi-content-copy" tooltip="Duplicate pipeline" />
               </v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>
+        <pv-icon
+          v-else-if="useCameraSettingsStore().isDriverMode && useCameraSettingsStore().pipelineNames.length === 0"
+          color="#c5c5c5"
+          :right="true"
+          icon-name="mdi-plus"
+          tooltip="Add new pipeline"
+          @click="showCreatePipelineDialog"
+        />
       </v-col>
     </v-row>
     <v-row style="padding: 0 12px 12px 24px">
@@ -340,7 +371,13 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
     <v-dialog v-model="showPipelineDeletionConfirmationDialog" dark width="500">
       <v-card dark color="primary">
         <v-card-title> Pipeline Deletion Confirmation </v-card-title>
-        <v-card-text> Are you sure you want to delete this pipeline? This cannot be undone. </v-card-text>
+        <v-card-text>
+          Are you sure you want to delete the pipeline
+          <b style="color: white; font-weight: bold">{{
+            useCameraSettingsStore().currentPipelineSettings.pipelineNickname
+          }}</b
+          >? This cannot be undone.
+        </v-card-text>
         <v-divider />
         <v-card-actions>
           <v-spacer />

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

@@ -66,7 +66,14 @@ const fpsTooLow = computed<boolean>(() => {
         </v-chip>
       </div>
       <div>
-        <v-switch v-model="driverMode" label="Driver Mode" style="margin-left: auto" color="accent" class="pt-2" />
+        <v-switch
+          v-model="driverMode"
+          :disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
+          label="Driver Mode"
+          style="margin-left: auto"
+          color="accent"
+          class="pt-2"
+        />
       </div>
     </v-card-title>
     <v-divider style="border-color: white" />

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

@@ -84,10 +84,11 @@ const interactiveCols = computed(
         (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ outputShowMultipleTargets: value }, false)
       "
     />
-    <cv-switch
+    <pv-switch
       v-if="
         currentPipelineSettings.pipelineType === PipelineType.AprilTag &&
-        useCameraSettingsStore().isCurrentVideoFormatCalibrated
+        useCameraSettingsStore().isCurrentVideoFormatCalibrated &&
+        useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled
       "
       v-model="currentPipelineSettings.doMultiTarget"
       label="Do Multi-Target Estimation"
@@ -96,10 +97,11 @@ const interactiveCols = computed(
       :disabled="!isTagPipeline"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ doMultiTarget: value }, false)"
     />
-    <cv-switch
+    <pv-switch
       v-if="
         currentPipelineSettings.pipelineType === PipelineType.AprilTag &&
-        useCameraSettingsStore().isCurrentVideoFormatCalibrated
+        useCameraSettingsStore().isCurrentVideoFormatCalibrated &&
+        useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled
       "
       v-model="currentPipelineSettings.doSingleTargetAlways"
       label="Always Do Single-Target Estimation"

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

@@ -2,6 +2,8 @@
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { PipelineType } from "@/types/PipelineTypes";
 import { useStateStore } from "@/stores/StateStore";
+
+const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
 </script>
 
 <template>
@@ -58,7 +60,7 @@ import { useStateStore } from "@/stores/StateStore";
                 <td>{{ target.skew.toFixed(2) }}&deg;</td>
                 <td>{{ target.area.toFixed(2) }}&deg;</td>
               </template>
-              <template v-else-if="useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
+              <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>
@@ -78,24 +80,26 @@ import { useStateStore } from "@/stores/StateStore";
     </v-row>
     <v-row
       v-if="
-        useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.AprilTag &&
-        useCameraSettingsStore().currentPipelineSettings.doMultiTarget
+        currentPipelineSettings.pipelineType === PipelineType.AprilTag &&
+        currentPipelineSettings.doMultiTarget &&
+        useCameraSettingsStore().isCurrentVideoFormatCalibrated &&
+        useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled
       "
       align="start"
       class="pb-4 white--text"
     >
-      <v-card-subtitle>Multi-tag pose, field-to-camera</v-card-subtitle>
+      <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 Angle &theta;&deg;</th>
           <th class="text-center">Tags</th>
         </thead>
-        <tbody>
-          <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.x.toFixed(2) }}</td>
-          <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.y.toFixed(2) }}</td>
-          <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.angle_z.toFixed(2) }}</td>
+        <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.angle_z.toFixed(2) }}&deg;</td>
           <td>{{ useStateStore().currentPipelineResults?.multitagResult?.fiducialIDsUsed }}</td>
         </tbody>
       </v-simple-table>

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

@@ -39,11 +39,9 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
           <tbody>
             <tr v-for="(tag, index) in useSettingsStore().currentFieldLayout.tags" :key="index">
               <td>{{ tag.ID }}</td>
-              <td v-for="(val, idx) in Object.values(tag.pose.translation)" :key="idx">
-                {{ val.toFixed(2) }}
-              </td>
+              <td v-for="(val, idx) in Object.values(tag.pose.translation)" :key="idx">{{ val.toFixed(2) }}&nbsp;m</td>
               <td v-for="(val, idx) in Object.values(quaternionToEuler(tag.pose.rotation.quaternion))" :key="idx + 4">
-                {{ val.toFixed(2) }}
+                {{ val.toFixed(2) }}&deg;
               </td>
             </tr>
           </tbody>