Skip to content

Commit

Permalink
Change interactive input components cols based on media queries
Browse files Browse the repository at this point in the history
  • Loading branch information
@srimanachanta
srimanachanta committed Jul 15, 2023
1 parent 4f286f8 commit b80cc7c
Show file tree
Hide file tree
Showing 7 changed files with 73 additions and 40 deletions.
16 changes: 10 additions & 6 deletions photon-client/src/components/dashboard/PipelineConfigTabs/AprilTagTab.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,14 @@ import { PipelineType } from "@/types/PipelineTypes";
import CvSelect from "@/components/common/cv-select.vue";
import CvSlider from "@/components/common/cv-slider.vue";
import CvSwitch from "@/components/common/cv-switch.vue";
import {computed, getCurrentInstance} from "vue";
import {useStateStore} from "@/stores/StateStore";
// TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
// Defer reference to store access method
const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
</script>

<template>
Expand All @@ -16,13 +20,13 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
v-model="currentPipelineSettings.tagFamily"
label="Target family"
:items="['AprilTag Family 36h11', 'AprilTag Family 25h9', 'AprilTag Family 16h5']"
:select-cols="10"
:select-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({tagFamily: value}, false)"
/>
<cv-slider
v-model="currentPipelineSettings.decimate"
class="pt-2"
:slider-cols="10"
:slider-cols="interactiveCols"
label="Decimate"
tooltip="Increases FPS at the expense of range by reducing image resolution initially"
:min="1"
Expand All @@ -32,7 +36,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
<cv-slider
v-model="currentPipelineSettings.blur"
class="pt-2"
:slider-cols="10"
:slider-cols="interactiveCols"
label="Blur"
tooltip="Gaussian blur added to the image, high FPS cost for slightly decreased noise"
:min="0"
Expand All @@ -43,7 +47,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
<cv-slider
v-model="currentPipelineSettings.threads"
class="pt-2"
:slider-cols="10"
:slider-cols="interactiveCols"
label="Threads"
tooltip="Number of threads spawned by the AprilTag detector"
:min="1"
Expand All @@ -60,7 +64,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
<cv-slider
v-model="currentPipelineSettings.decisionMargin"
class="pt-2 pb-4"
:slider-cols="10"
:slider-cols="interactiveCols"
label="Decision Margin Cutoff"
tooltip="Tags with a 'margin' (decoding quality score) less than this wil be rejected. Increase this to reduce the number of false positive detections"
:min="0"
Expand All @@ -70,7 +74,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
<cv-slider
v-model="currentPipelineSettings.numIterations"
class="pt-2 pb-4"
:slider-cols="10"
:slider-cols="interactiveCols"
label="Pose Estimation Iterations"
tooltip="Number of iterations the pose estimation algorithm will run, 50-100 is a good starting point"
:min="0"
Expand Down
10 changes: 7 additions & 3 deletions photon-client/src/components/dashboard/PipelineConfigTabs/ArucoTab.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,22 @@
import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
import { PipelineType } from "@/types/PipelineTypes";
import CvSlider from "@/components/common/cv-slider.vue";
import {computed, getCurrentInstance} from "vue";
import {useStateStore} from "@/stores/StateStore";
// TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
// Defer reference to store access method
const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
</script>

<template>
<div v-if="currentPipelineSettings.pipelineType === PipelineType.Aruco">
<cv-slider
v-model="currentPipelineSettings.decimate"
class="pt-2"
:slider-cols="10"
:slider-cols="interactiveCols"
label="Decimate"
tooltip="Increases FPS at the expense of range by reducing image resolution initially"
:min="1"
Expand All @@ -23,7 +27,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
<cv-slider
v-model="currentPipelineSettings.numIterations"
class="pt-2"
:slider-cols="10"
:slider-cols="interactiveCols"
label="Corner Iterations"
tooltip="How many iterations are going to be used in order to refine corners. Higher values are lead to more accuracy at the cost of performance"
:min="30"
Expand All @@ -34,7 +38,7 @@ const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings
<cv-slider
v-model="currentPipelineSettings.cornerAccuracy"
class="pt-2"
:slider-cols="10"
:slider-cols="interactiveCols"
label="Corner Accuracy"
tooltip="Minimum accuracy for the corners, lower is better but more performance intensive "
:min="0.01"
Expand Down
34 changes: 21 additions & 13 deletions photon-client/src/components/dashboard/PipelineConfigTabs/ContoursTab.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import { PipelineType } from "@/types/PipelineTypes";
import CvRangeSlider from "@/components/common/cv-range-slider.vue";
import CvSelect from "@/components/common/cv-select.vue";
import CvSlider from "@/components/common/cv-slider.vue";
import { computed } from "vue";
import {computed, getCurrentInstance} from "vue";
import {useStateStore} from "@/stores/StateStore";
// TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
// Defer reference to store access method
Expand Down Expand Up @@ -39,6 +40,8 @@ const contourRadius = computed<[number, number]>({
}
}
});
const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
</script>

<template>
Expand All @@ -48,6 +51,7 @@ const contourRadius = computed<[number, number]>({
label="Area"
:min="0"
:max="100"
:slider-cols="interactiveCols"
:step="0.01"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourArea: value}, false)"
/>
Expand All @@ -58,6 +62,7 @@ const contourRadius = computed<[number, number]>({
tooltip="Min and max ratio between the width and height of a contour's bounding rectangle"
:min="0"
:max="100"
:slider-cols="interactiveCols"
:step="0.1"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourRatio: value}, false)"
/>
Expand All @@ -66,7 +71,7 @@ const contourRadius = computed<[number, number]>({
label="Target Orientation"
tooltip="Used to determine how to calculate target landmarks, as well as aspect ratio"
:items="['Portrait', 'Landscape']"
:select-cols="10"
:select-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOrientation: value}, false)"
/>
<cv-range-slider
Expand All @@ -76,6 +81,7 @@ const contourRadius = computed<[number, number]>({
tooltip="Min and max ratio between a contour's area and its bounding rectangle"
:min="0"
:max="100"
:slider-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFullness: value}, false)"
/>
<cv-range-slider
Expand All @@ -85,6 +91,7 @@ const contourRadius = computed<[number, number]>({
tooltip="Min and max perimeter of the shape, in pixels"
min="0"
max="4000"
:slider-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourPerimeter: value}, false)"
/>
<cv-slider
Expand All @@ -93,7 +100,7 @@ const contourRadius = computed<[number, number]>({
tooltip="Rejects contours whose average area is less than the given percentage of the average area of all the other contours"
:min="0"
:max="100"
:slider-cols="10"
:slider-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourSpecklePercentage: value}, false)"
/>
<template v-if="currentPipelineSettings.pipelineType === PipelineType.Reflective">
Expand All @@ -104,7 +111,7 @@ const contourRadius = computed<[number, number]>({
:min="0.1"
:max="4"
:step="0.1"
:slider-cols="10"
:slider-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFilterRangeX: value}, false)"
/>
<cv-slider
Expand All @@ -114,22 +121,22 @@ const contourRadius = computed<[number, number]>({
:min="0.1"
:max="4"
:step="0.1"
:slider-cols="10"
:slider-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFilterRangeY: value}, false)"
/>
<cv-select
v-model="useCameraSettingsStore().currentPipelineSettings.contourGroupingMode"
label="Target Grouping"
tooltip="Whether or not every two targets are paired with each other (good for e.g. 2019 targets)"
:select-cols="10"
:select-cols="interactiveCols"
:items="['Single','Dual','Two or More']"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourGroupingMode: value}, false)"
/>
<cv-select
v-model="useCameraSettingsStore().currentPipelineSettings.contourIntersection"
label="Target Intersection"
tooltip="If target grouping is in dual mode it will use this dropdown to decide how targets are grouped with adjacent targets"
:select-cols="10"
:select-cols="interactiveCols"
:items="['None','Up','Down','Left','Right']"
:disabled="useCameraSettingsStore().currentPipelineSettings.contourGroupingMode === 0"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourIntersection: value}, false)"
Expand All @@ -141,7 +148,7 @@ const contourRadius = computed<[number, number]>({
v-model="currentPipelineSettings.contourShape"
label="Target Shape"
tooltip="The shape of targets to look for"
:select-cols="10"
:select-cols="interactiveCols"
:items="['Circle', 'Polygon', 'Triangle', 'Quadrilateral']"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourShape: value}, false)"
/>
Expand All @@ -152,7 +159,7 @@ const contourRadius = computed<[number, number]>({
tooltip="How much we should simply the input contour before checking how many sides it has"
:min="0"
:max="100"
:slider-cols="10"
:slider-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({accuracyPercentage: value}, false)"
/>
<cv-slider
Expand All @@ -162,7 +169,7 @@ const contourRadius = computed<[number, number]>({
tooltip="How close the centroid of a contour must be to the center of a circle in order for them to be matched"
:min="1"
:max="100"
:slider-cols="10"
:slider-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({circleDetectThreshold: value}, false)"
/>
<cv-range-slider
Expand All @@ -171,6 +178,7 @@ const contourRadius = computed<[number, number]>({
label="Radius"
:min="0"
:max="100"
:slider-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourRadius: value}, false)"
/>
<cv-slider
Expand All @@ -179,7 +187,7 @@ const contourRadius = computed<[number, number]>({
label="Max Canny Threshold"
:min="1"
:max="100"
:slider-cols="10"
:slider-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({maxCannyThresh: value}, false)"
/>
<cv-slider
Expand All @@ -188,7 +196,7 @@ const contourRadius = computed<[number, number]>({
label="Circle Accuracy"
:min="1"
:max="100"
:slider-cols="10"
:slider-cols="interactiveCols"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({circleAccuracy: value}, false)"
/>
<v-divider class="mt-3" />
Expand All @@ -197,7 +205,7 @@ const contourRadius = computed<[number, number]>({
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="10"
:select-cols="interactiveCols"
:items="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Centermost']"
@input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourSortMode: value}, false)"
/>
Expand Down
23 changes: 13 additions & 10 deletions photon-client/src/components/dashboard/PipelineConfigTabs/InputTab.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import CvSlider from "@/components/common/cv-slider.vue";
import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
import CvSwitch from "@/components/common/cv-switch.vue";
import CvSelect from "@/components/common/cv-select.vue";
import { computed } from "vue";
import { computed, getCurrentInstance} from "vue";
import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
import { useStateStore } from "@/stores/StateStore";
// Due to something with libcamera or something else IDK much about, the 90° rotations need to be disabled if the libcamera drivers are being used.
const cameraRotations = computed(() => ["Normal","90° CW","180°","90° CCW"].map((v, i) => ({ name: v, value: i, disabled: useSettingsStore().gpuAccelerationEnabled ? [1, 3].includes(i) : false })));
Expand Down Expand Up @@ -41,6 +42,8 @@ const streamResolutions = computed(() => {
const handleStreamResolutionChange = (value: number) => {
useCameraSettingsStore().changeCurrentPipelineSetting({ streamingFrameDivisor: value + getNumberOfSkippedDivisors() }, false);
};
const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
</script>

<template>
Expand All @@ -52,7 +55,7 @@ const handleStreamResolutionChange = (value: number) => {
tooltip="Directly controls how much light is allowed to fall onto the sensor, which affects apparent brightness"
:min="0"
:max="100"
:slider-cols="10"
:slider-cols="interactiveCols"
:step="0.1"
@input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraExposure: args}, false)"
/>
Expand All @@ -61,14 +64,14 @@ const handleStreamResolutionChange = (value: number) => {
label="Brightness"
:min="0"
:max="100"
:slider-cols="10"
:slider-cols="interactiveCols"
@input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBrightness: args}, false)"
/>
<cv-switch
v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
class="pt-2"
label="Auto Exposure"
:label-cols="2"
:switch-cols="interactiveCols"
tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
@input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraAutoExposure: args}, false)"
/>
Expand All @@ -79,7 +82,7 @@ const handleStreamResolutionChange = (value: number) => {
tooltip="Controls camera gain, similar to brightness"
:min="0"
:max="100"
:slider-cols="10"
:slider-cols="interactiveCols"
@input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraGain: args}, false)"
/>
<cv-slider
Expand All @@ -88,7 +91,7 @@ const handleStreamResolutionChange = (value: number) => {
label="Red AWB Gain"
:min="0"
:max="100"
:slider-cols="10"
:slider-cols="interactiveCols"
tooltip="Controls red automatic white balance gain, which affects how the camera captures colors in different conditions"
@input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraRedGain: args}, false)"
/>
Expand All @@ -98,7 +101,7 @@ const handleStreamResolutionChange = (value: number) => {
label="Blue AWB Gain"
:min="0"
:max="100"
:slider-cols="10"
:slider-cols="interactiveCols"
tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
@input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBlueGain: args}, false)"
/>
Expand All @@ -107,23 +110,23 @@ const handleStreamResolutionChange = (value: number) => {
label="Orientation"
tooltip="Rotates the camera stream"
:items="cameraRotations"
:select-cols="10"
:select-cols="interactiveCols"
@input="args => useCameraSettingsStore().changeCurrentPipelineSetting({inputImageRotationMode: args}, false)"
/>
<cv-select
v-model="useCameraSettingsStore().currentPipelineSettings.cameraVideoModeIndex"
label="Resolution"
tooltip="Resolution and FPS the camera should directly capture at"
:items="cameraResolutions"
:select-cols="10"
:select-cols="interactiveCols"
@input="args => handleResolutionChange(args)"
/>
<cv-select
v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
label="Stream Resolution"
tooltip="Resolution to which camera frames are downscaled for streaming to the dashboard"
:items="streamResolutions"
:select-cols="10"
:select-cols="interactiveCols"
@input="args => handleStreamResolutionChange(args)"
/>
</div>
Expand Down
Loading

0 comments on commit b80cc7c

Please sign in to comment.