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)

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

@@ -218,7 +218,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
     <v-card class="mb-3" color="primary" dark>
       <v-card-title class="pa-6 pb-3">Camera Calibration</v-card-title>
       <v-card-text v-show="!isCalibrating">
-        <v-card-subtitle class="pt-3 pl-2 pb-3">Current Calibration</v-card-subtitle>
+        <v-card-subtitle class="pt-3 pl-2 pb-4 white--text">Current Calibration</v-card-subtitle>
         <v-simple-table fixed-header height="100%" dense>
           <thead>
             <tr>
@@ -252,7 +252,9 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
         </v-simple-table>
       </v-card-text>
       <v-card-text v-if="useCameraSettingsStore().isConnected" class="d-flex flex-column pa-6 pt-0">
-        <v-card-subtitle v-show="!isCalibrating" class="pl-0">Configure New Calibration</v-card-subtitle>
+        <v-card-subtitle v-show="!isCalibrating" class="pl-0 pb-3 pt-3 white--text"
+          >Configure New Calibration</v-card-subtitle
+        >
         <v-form ref="form" v-model="settingsValid">
           <!-- TODO: the default videoFormatIndex is 0, but the list of unique video mode indexes might not include 0. getUniqueVideoResolutionStrings indexing is also different from the normal video mode indexing -->
           <pv-select

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

@@ -90,18 +90,13 @@ const calibrationImageURL = (index: number) =>
 </script>
 
 <template>
-  <v-card color="primary" class="pa-6" dark>
+  <v-card color="primary" dark>
-    <v-row>
+    <div class="d-flex flex-wrap pr-md-3">
-      <v-col cols="12" md="5">
+      <v-col cols="12" md="6">
-        <v-card-title class="pl-0 ml-0"
+        <v-card-title class="pl-3 pb-0 pb-md-4"> Calibration Details </v-card-title>
-          ><span class="text-no-wrap" style="white-space: pre !important">Calibration Details: </span
-          ><span class="text-no-wrap"
-            >{{ useCameraSettingsStore().currentCameraName }}@{{ getResolutionString(videoFormat.resolution) }}</span
-          ></v-card-title
-        >
       </v-col>
-      <v-col>
+      <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pl-6 pl-md-3">
-        <v-btn color="secondary" class="mt-4" style="width: 100%" @click="openUploadPhotonCalibJsonPrompt">
+        <v-btn color="secondary" style="width: 100%" @click="openUploadPhotonCalibJsonPrompt">
           <v-icon left> mdi-import</v-icon>
           <span>Import</span>
         </v-btn>
@@ -113,10 +108,9 @@ const calibrationImageURL = (index: number) =>
           @change="importCalibration"
         />
       </v-col>
-      <v-col>
+      <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pr-6 pr-md-3">
         <v-btn
           color="secondary"
-          class="mt-4"
           :disabled="!currentCalibrationCoeffs"
           style="width: 100%"
           @click="openExportCalibrationPrompt"
@@ -131,10 +125,17 @@ const calibrationImageURL = (index: number) =>
           target="_blank"
         />
       </v-col>
-    </v-row>
+    </div>
-    <v-row v-if="currentCalibrationCoeffs" class="pt-2">
+    <v-card-title class="pt-0 pb-3"
-      <v-card-subtitle>Calibration Details</v-card-subtitle>
+      >{{ useCameraSettingsStore().currentCameraName }}@{{ getResolutionString(videoFormat.resolution) }}</v-card-title
-      <v-simple-table dense style="width: 100%" class="pl-2 pr-2">
+    >
+    <v-card-text v-if="!currentCalibrationCoeffs">
+      <v-banner rounded color="secondary" text-color="white" class="mt-3" icon="mdi-alert-circle-outline">
+        The selected video format has not been calibrated.
+      </v-banner>
+    </v-card-text>
+    <v-card-text>
+      <v-simple-table dense style="width: 100%">
         <template #default>
           <thead>
             <tr>
@@ -238,15 +239,16 @@ const calibrationImageURL = (index: number) =>
           </tbody>
         </template>
       </v-simple-table>
-      <hr style="width: 100%" class="ma-6" />
+    </v-card-text>
-      <v-card-subtitle>Per Observation Details</v-card-subtitle>
+    <v-card-title v-if="currentCalibrationCoeffs" class="pt-0">Individual Observations</v-card-title>
+    <v-card-text v-if="currentCalibrationCoeffs">
       <v-data-table
         dense
         style="width: 100%"
-        class="pl-2 pr-2"
         :headers="[
           { text: 'Observation Id', value: 'index' },
-          { text: 'Mean Reprojection Error', value: 'mean' }
+          { text: 'Mean Reprojection Error', value: 'mean' },
+          { text: '', value: 'data-table-expand' }
         ]"
         :items="getObservationDetails()"
         item-key="index"
@@ -261,10 +263,7 @@ const calibrationImageURL = (index: number) =>
           </td>
         </template>
       </v-data-table>
-    </v-row>
+    </v-card-text>
-    <v-row v-else class="pt-2 mb-0 pb-0">
-      The selected video format doesn't have any additional information as it has yet to be calibrated.
-    </v-row>
   </v-card>
 </template>
 
@@ -275,7 +274,6 @@ const calibrationImageURL = (index: number) =>
 .snapshot-preview {
   max-width: 55%;
 }
-
 @media only screen and (max-width: 512px) {
   .snapshot-preview {
     max-width: 100%;

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

@@ -134,6 +134,10 @@ th {
   text-align: center;
 }
 
+.v-input--switch {
+  margin-top: 0;
+}
+
 .stream-container {
   display: flex;
   justify-content: center;

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

@@ -69,3 +69,8 @@ const handleKeydown = ({ key }) => {
     </v-col>
   </div>
 </template>
+<style scoped>
+.v-text-field {
+  margin-top: 0px;
+}
+</style>

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

@@ -47,3 +47,9 @@ const localValue = computed({
     </v-col>
   </div>
 </template>
+<style scoped>
+.v-input--radio-group {
+  padding-top: 0;
+  margin-top: 0;
+}
+</style>

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

@@ -69,8 +69,9 @@ const items = computed<SelectItem[]>(() => {
     </v-col>
   </div>
 </template>
-<style>
+<style scoped>
 .v-select {
   padding-top: 0px;
+  margin-top: 0px;
 }
 </style>

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

@@ -46,10 +46,10 @@ const localValue = computed({
 
 <template>
   <div class="d-flex">
-    <v-col :cols="12 - sliderCols - 1" class="pl-0 d-flex align-center">
+    <v-col :cols="12 - sliderCols" class="pl-0 d-flex align-center">
       <tooltipped-label :tooltip="tooltip" :label="label" />
     </v-col>
-    <v-col :cols="sliderCols">
+    <v-col :cols="sliderCols - 1">
       <v-slider
         v-model="localValue"
         dark

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

@@ -41,7 +41,7 @@ const localValue = computed({
     </v-col>
   </div>
 </template>
-<style>
+<style scoped>
 .v-input--selection-controls {
   margin-top: 0px;
 }

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

@@ -90,6 +90,9 @@ const performanceRecommendation = computed<string>(() => {
 </template>
 
 <style scoped>
+.v-input--switch {
+  margin-top: 0;
+}
 .stream-viewer-container {
   display: flex;
   justify-content: center;

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>

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>

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
+    <div
-      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
       v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
-      align="center"
+      class="d-flex align-center"
-      justify="start"
     >
-      <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-col cols="6" class="pr-0">
-      <v-row
-        v-else-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode === RobotOffsetPointMode.Dual"
-      >
-        <v-col>
           <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 cols="12" lg="4" class="pl-0 pl-lg-2 pr-0">
-      <v-col>
+          <v-btn
-        <v-btn
+            small
-          small
+            block
-          color="yellow darken-3"
+            color="yellow darken-3"
-          style="width: 100%"
+            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
-          @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
+          >
-        >
+            Clear All Points
-          Clear All Points
+          </v-btn>
-        </v-btn>
+        </v-col>
-      </v-col>
+      </v-card-text>
-    </v-row>
+    </div>
   </div>
 </template>
 

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">
+          <v-card-text class="pa-0 pt-3 pb-3">
-            Cancel
+            <v-btn block color="accent" class="black--text" small @click="disableColorPicking"> Cancel </v-btn>
-          </v-btn>
+          </v-card-text>
         </template>
       </div>
     </div>

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

@@ -140,7 +140,7 @@ watchEffect(() => {
     <v-card-title class="pa-6">Global Settings</v-card-title>
     <div class="pa-6 pt-0">
       <v-divider class="pb-3" />
-      <v-card-title class="pl-0">Networking</v-card-title>
+      <v-card-title class="pl-0 pt-3 pb-3">Networking</v-card-title>
       <v-form ref="form" v-model="settingsValid">
         <pv-input
           v-model="tempSettingsStruct.ntServerAddress"
@@ -203,7 +203,7 @@ watchEffect(() => {
           "
         />
         <v-divider class="mt-3 pb-3" />
-        <v-card-title class="pl-0">Advanced Networking</v-card-title>
+        <v-card-title class="pl-0 pt-3 pb-3">Advanced Networking</v-card-title>
         <pv-switch
           v-show="!useSettingsStore().network.networkingDisabled"
           v-model="tempSettingsStruct.shouldManage"
@@ -255,7 +255,7 @@ watchEffect(() => {
           This mode is intended for debugging; it should be off for proper usage. PhotonLib will NOT work!
         </v-banner>
         <v-divider class="mt-3 pb-3" />
-        <v-card-title class="pl-0">Miscellaneous</v-card-title>
+        <v-card-title class="pl-0 pt-3 pb-3">Miscellaneous</v-card-title>
         <pv-switch
           v-model="tempSettingsStruct.shouldPublishProto"
           label="Also Publish Protobuf"