mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-25 01:41:40 +00:00
## Description Upgrades to Vue 3 and necessary associated dependencies. Also fixes some issues with the layout and adds validation for object detection models. Closes #885, closes #1943, closes #1449. ## Meta Merge checklist: - [x] Pull Request title is [short, imperative summary](https://cbea.ms/git-commit/) of proposed changes - [x] The description documents the _what_ and _why_ - [ ] If this PR changes behavior or adds a feature, user documentation is updated - [ ] If this PR touches photon-serde, all messages have been regenerated and hashes have not changed unexpectedly - [ ] If this PR touches configuration, this is backwards compatible with settings back to v2024.3.1 - [ ] If this PR touches pipeline settings or anything related to data exchange, the frontend typing is updated - [ ] If this PR addresses a bug, a regression test for it is added --------- Co-authored-by: Matt M <matthew.morley.ca@gmail.com> Co-authored-by: Gold856 <117957790+Gold856@users.noreply.github.com> Co-authored-by: samfreund <techguy763@gmail.com>
88 lines
3.7 KiB
Vue
88 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
|
|
import { PipelineType, type ActivePipelineSettings } from "@/types/PipelineTypes";
|
|
import PvSlider from "@/components/common/pv-slider.vue";
|
|
import PvSwitch from "@/components/common/pv-switch.vue";
|
|
import PvRangeSlider from "@/components/common/pv-range-slider.vue";
|
|
import PvSelect from "@/components/common/pv-select.vue";
|
|
import { computed } from "vue";
|
|
import { useStateStore } from "@/stores/StateStore";
|
|
import { useDisplay } from "vuetify";
|
|
|
|
// 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 = computed<ActivePipelineSettings>(
|
|
() => useCameraSettingsStore().currentPipelineSettings
|
|
);
|
|
const { mdAndDown } = useDisplay();
|
|
const interactiveCols = computed(() =>
|
|
mdAndDown.value && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode) ? 8 : 7
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="currentPipelineSettings.pipelineType === PipelineType.Aruco">
|
|
<pv-select
|
|
v-model="currentPipelineSettings.tagFamily"
|
|
label="Target family"
|
|
:items="['AprilTag Family 36h11', 'AprilTag Family 16h5']"
|
|
:select-cols="interactiveCols"
|
|
@update:modelValue="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ tagFamily: value }, false)"
|
|
/>
|
|
<pv-range-slider
|
|
v-model="currentPipelineSettings.threshWinSizes"
|
|
label="Thresh Min/Max Size"
|
|
tooltip="The minimum and maximum adaptive threshold window size. Larger windows tend more towards global thresholding, but small windows can be weak to noise."
|
|
:min="3"
|
|
:max="255"
|
|
:slider-cols="interactiveCols"
|
|
:step="2"
|
|
@update:modelValue="
|
|
(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ threshWinSizes: value }, false)
|
|
"
|
|
/>
|
|
<pv-slider
|
|
v-model="currentPipelineSettings.threshStepSize"
|
|
:slider-cols="interactiveCols"
|
|
label="Thresh Step Size"
|
|
tooltip="Smaller values will cause more steps between the min/max sizes. More, varied steps can improve detection robustness to lighting, but may decrease performance."
|
|
:min="2"
|
|
:max="128"
|
|
:step="1"
|
|
@update:modelValue="
|
|
(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ threshStepSize: value }, false)
|
|
"
|
|
/>
|
|
<pv-slider
|
|
v-model="currentPipelineSettings.threshConstant"
|
|
:slider-cols="interactiveCols"
|
|
label="Thresh Constant"
|
|
tooltip="Affects the threshold window mean value cutoff for all steps. Higher values can improve performance, but may harm detection rate."
|
|
:min="0"
|
|
:max="128"
|
|
:step="1"
|
|
@update:modelValue="
|
|
(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ threshConstant: value }, false)
|
|
"
|
|
/>
|
|
<pv-switch
|
|
v-model="currentPipelineSettings.useCornerRefinement"
|
|
label="Refine Corners"
|
|
tooltip="Further refine the initial corners with subpixel accuracy."
|
|
:switch-cols="interactiveCols"
|
|
@update:modelValue="
|
|
(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ useCornerRefinement: value }, false)
|
|
"
|
|
/>
|
|
<pv-switch
|
|
v-model="currentPipelineSettings.debugThreshold"
|
|
label="Debug Threshold"
|
|
tooltip="Display the first threshold step to the color stream."
|
|
:switch-cols="interactiveCols"
|
|
@update:modelValue="
|
|
(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ debugThreshold: value }, false)
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|