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)
This commit is contained in:
Devon Doyle
2025-01-08 16:46:31 -05:00
committed by GitHub
parent 27684eef60
commit e40c8fbca0
14 changed files with 142 additions and 108 deletions

View File

@@ -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>