Calibration card and PV input styling (#1695)

Images are before and after comparison. Does the following: - Fixes several styling issues with pv-* input elements, including top padding, vertical alignment, and allocated input width ![image](https://github.com/user-attachments/assets/70d37e65-e0cd-4c71-8ea1-941ec2175850) ![image](https://github.com/user-attachments/assets/031d008d-3cce-4ed2-bc88-5fbecf20c94f) - Conforms the calibration details modal to overall styling and spacing standards ![image](https://github.com/user-attachments/assets/18281551-f924-4e12-9ad4-d2ec470dbc70) ![image](https://github.com/user-attachments/assets/db772325-7650-467d-8521-252c7d38601f) (left the blank table there on empty calibrations to give the user a sense of what they might see if they don't have any)
2026-06-26 01:51:40 +00:00 · 2025-01-08 16:46:31 -05:00
parent 27684eef60
commit e40c8fbca0
14 changed files with 142 additions and 108 deletions
--- a/photon-client/src/components/dashboard/tabs/ContoursTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ContoursTab.vue
@@ -69,6 +69,14 @@ const interactiveCols = computed(() =>
        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOrientation: value }, false)
      "
    />
+    <pv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourSortMode"
+      label="Target Sort"
+      tooltip="Chooses the sorting mode used to determine the 'best' targets to provide to user code"
+      :select-cols="interactiveCols"
+      :items="['Largest', 'Smallest', 'Highest', 'Lowest', 'Rightmost', 'Leftmost', 'Centermost']"
+      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourSortMode: value }, false)"
+    />
    <pv-range-slider
      v-model="contourArea"
      label="Area"
@@ -169,6 +177,7 @@ const interactiveCols = computed(() =>
        @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourShape: value }, false)"
      />
      <pv-slider
+        v-if="currentPipelineSettings.contourShape >= 1"
        v-model="currentPipelineSettings.accuracyPercentage"
        :disabled="currentPipelineSettings.contourShape < 1"
        label="Shape Simplification"
@@ -179,6 +188,7 @@ const interactiveCols = computed(() =>
        @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ accuracyPercentage: value }, false)"
      />
      <pv-slider
+        v-if="currentPipelineSettings.contourShape === 0"
        v-model="currentPipelineSettings.circleDetectThreshold"
        :disabled="currentPipelineSettings.contourShape !== 0"
        label="Circle match distance"
@@ -191,6 +201,7 @@ const interactiveCols = computed(() =>
        "
      />
      <pv-slider
+        v-if="currentPipelineSettings.contourShape === 0"
        v-model="currentPipelineSettings.maxCannyThresh"
        :disabled="currentPipelineSettings.contourShape !== 0"
        label="Max Canny Threshold"
@@ -200,6 +211,7 @@ const interactiveCols = computed(() =>
        @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ maxCannyThresh: value }, false)"
      />
      <pv-slider
+        v-if="currentPipelineSettings.contourShape === 0"
        v-model="currentPipelineSettings.circleAccuracy"
        :disabled="currentPipelineSettings.contourShape !== 0"
        label="Circle Accuracy"
@@ -209,6 +221,7 @@ const interactiveCols = computed(() =>
        @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ circleAccuracy: value }, false)"
      />
      <pv-range-slider
+        v-if="currentPipelineSettings.contourShape === 0"
        v-model="contourRadius"
        :disabled="currentPipelineSettings.contourShape !== 0"
        label="Radius"
@@ -218,13 +231,5 @@ const interactiveCols = computed(() =>
        @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourRadius: value }, false)"
      />
    </template>
-    <pv-select
-      v-model="useCameraSettingsStore().currentPipelineSettings.contourSortMode"
-      label="Target Sort"
-      tooltip="Chooses the sorting mode used to determine the 'best' targets to provide to user code"
-      :select-cols="interactiveCols"
-      :items="['Largest', 'Smallest', 'Highest', 'Lowest', 'Rightmost', 'Leftmost', 'Centermost']"
-      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourSortMode: value }, false)"
-    />
  </div>
 </template>
--- a/photon-client/src/components/dashboard/tabs/InputTab.vue
+++ b/photon-client/src/components/dashboard/tabs/InputTab.vue
@@ -77,7 +77,7 @@ const interactiveCols = computed(() =>
      v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
      class="pt-2"
      label="Auto Exposure"
-      :switch-cols="interactiveCols === 8 ? 9 : interactiveCols"
+      :switch-cols="interactiveCols"
      tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraAutoExposure: args }, false)"
    />
@@ -132,15 +132,14 @@ const interactiveCols = computed(() =>
    />
    <pv-switch
      v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoWhiteBalance"
-      class="pt-2"
      label="Auto White Balance"
-      :switch-cols="interactiveCols === 8 ? 9 : interactiveCols"
+      :switch-cols="interactiveCols"
      tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraAutoWhiteBalance: args }, false)"
    />
    <pv-slider
-      v-if="!useCameraSettingsStore().currentPipelineSettings.cameraAutoWhiteBalance"
      v-model="useCameraSettingsStore().currentPipelineSettings.cameraWhiteBalanceTemp"
+      :disabled="useCameraSettingsStore().currentPipelineSettings.cameraAutoWhiteBalance"
      label="White Balance Temperature"
      :min="useCameraSettingsStore().minWhiteBalanceTemp"
      :max="useCameraSettingsStore().maxWhiteBalanceTemp"
@@ -152,7 +151,7 @@ const interactiveCols = computed(() =>
      label="Orientation"
      tooltip="Rotates the camera stream. Rotation not available when camera has been calibrated."
      :items="cameraRotations"
-      :select-cols="interactiveCols === 8 ? 9 : interactiveCols"
+      :select-cols="interactiveCols"
      @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ inputImageRotationMode: args }, false)"
    />
    <pv-select
@@ -160,7 +159,7 @@ const interactiveCols = computed(() =>
      label="Resolution"
      tooltip="Resolution and FPS the camera should directly capture at"
      :items="cameraResolutions"
-      :select-cols="interactiveCols === 8 ? 9 : interactiveCols"
+      :select-cols="interactiveCols"
      @input="(args) => handleResolutionChange(args)"
    />
    <pv-select
@@ -168,7 +167,7 @@ const interactiveCols = computed(() =>
      label="Stream Resolution"
      tooltip="Resolution to which camera frames are downscaled for streaming to the dashboard"
      :items="streamResolutions"
-      :select-cols="interactiveCols === 8 ? 9 : interactiveCols"
+      :select-cols="interactiveCols"
      @input="(args) => handleStreamResolutionChange(args)"
    />
  </div>
--- a/photon-client/src/components/dashboard/tabs/OutputTab.vue
+++ b/photon-client/src/components/dashboard/tabs/OutputTab.vue
@@ -56,27 +56,6 @@ const interactiveCols = computed(() =>

 <template>
  <div>
-    <pv-select
-      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOffsetPointEdge"
-      label="Target Offset Point"
-      tooltip="Changes where the 'center' of the target is (used for calculating e.g. pitch and yaw)"
-      :items="['Center', 'Top', 'Bottom', 'Left', 'Right']"
-      :select-cols="interactiveCols"
-      @input="
-        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOffsetPointEdge: value }, false)
-      "
-    />
-    <pv-select
-      v-if="!isTagPipeline"
-      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
-      label="Target Orientation"
-      tooltip="Used to determine how to calculate target landmarks (e.g. the top, left, or bottom of the target)"
-      :items="['Portrait', 'Landscape']"
-      :select-cols="interactiveCols"
-      @input="
-        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOrientation: value }, false)
-      "
-    />
    <pv-switch
      v-model="useCameraSettingsStore().currentPipelineSettings.outputShowMultipleTargets"
      label="Show Multiple Targets"
@@ -115,6 +94,35 @@ const interactiveCols = computed(() =>
      :disabled="!isTagPipeline || !currentPipelineSettings.doMultiTarget"
      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ doSingleTargetAlways: value }, false)"
    />
+    <pv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOffsetPointEdge"
+      label="Target Offset Point"
+      tooltip="Changes where the 'center' of the target is (used for calculating e.g. pitch and yaw)"
+      :items="['Center', 'Top', 'Bottom', 'Left', 'Right']"
+      :select-cols="interactiveCols"
+      @input="
+        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOffsetPointEdge: value }, false)
+      "
+    />
+    <pv-select
+      v-if="!isTagPipeline"
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
+      label="Target Orientation"
+      tooltip="Used to determine how to calculate target landmarks (e.g. the top, left, or bottom of the target)"
+      :items="['Portrait', 'Landscape']"
+      :select-cols="interactiveCols"
+      @input="
+        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOrientation: value }, false)
+      "
+    />
+    <pv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode"
+      label="Robot Offset Mode"
+      tooltip="Used to add an arbitrary offset to the location of the targeting crosshair"
+      :items="['None', 'Single Point', 'Dual Point']"
+      :select-cols="interactiveCols"
+      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ offsetRobotOffsetMode: value }, false)"
+    />
    <table
      v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
      class="metrics-table mt-3 mb-3"
@@ -130,71 +138,74 @@ const interactiveCols = computed(() =>
        </td>
      </tr>
    </table>
-    <pv-select
-      v-model="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode"
-      label="Robot Offset Mode"
-      tooltip="Used to add an arbitrary offset to the location of the targeting crosshair"
-      :items="['None', 'Single Point', 'Dual Point']"
-      :select-cols="interactiveCols"
-      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ offsetRobotOffsetMode: value }, false)"
-    />
-    <v-row
+    <div
      v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
-      align="center"
-      justify="start"
+      class="d-flex align-center"
    >
-      <v-row
+      <v-card-text
        v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode === RobotOffsetPointMode.Single"
+        class="d-flex pa-0 flex-wrap"
      >
-        <v-col>
+        <v-col cols="6" class="pl-0">
          <v-btn
            small
+            block
            color="accent"
-            style="width: 100%"
            class="black--text"
            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Single)"
          >
            Take Point
          </v-btn>
        </v-col>
-      </v-row>
-      <v-row
-        v-else-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode === RobotOffsetPointMode.Dual"
-      >
-        <v-col>
+        <v-col cols="6" class="pr-0">
          <v-btn
            small
+            block
+            color="yellow darken-3"
+            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
+          >
+            Clear All Points
+          </v-btn>
+        </v-col>
+      </v-card-text>
+      <v-card-text
+        v-else-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode === RobotOffsetPointMode.Dual"
+        class="d-flex pa-0 flex-wrap"
+      >
+        <v-col cols="6" lg="4" class="pl-0 pr-2">
+          <v-btn
+            small
+            block
            color="accent"
-            style="width: 100%"
            class="black--text"
            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualFirst)"
          >
            Take First Point
          </v-btn>
        </v-col>
-        <v-col>
+        <v-col cols="6" lg="4" class="pl-2 pr-0 pr-lg-2">
          <v-btn
            small
+            block
            color="accent"
-            style="width: 100%"
            class="black--text"
            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualSecond)"
          >
            Take Second Point
          </v-btn>
        </v-col>
-      </v-row>
-      <v-col>
-        <v-btn
-          small
-          color="yellow darken-3"
-          style="width: 100%"
-          @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
-        >
-          Clear All Points
-        </v-btn>
-      </v-col>
-    </v-row>
+        <v-col cols="12" lg="4" class="pl-0 pl-lg-2 pr-0">
+          <v-btn
+            small
+            block
+            color="yellow darken-3"
+            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
+          >
+            Clear All Points
+          </v-btn>
+        </v-col>
+      </v-card-text>
+    </div>
  </div>
 </template>

--- a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
@@ -211,9 +211,9 @@ const interactiveCols = computed(() =>
          </v-col>
        </template>
        <template v-else>
-          <v-btn color="accent" class="ma-2 black--text" style="width: 30%" small @click="disableColorPicking">
-            Cancel
-          </v-btn>
+          <v-card-text class="pa-0 pt-3 pb-3">
+            <v-btn block color="accent" class="black--text" small @click="disableColorPicking"> Cancel </v-btn>
+          </v-card-text>
        </template>
      </div>
    </div>