mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-25 01:41:40 +00:00
e40c8fbca0
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   - Conforms the calibration details modal to overall styling and spacing standards   (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)
109 lines
3.9 KiB
Vue
109 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
|
|
import { useStateStore } from "@/stores/StateStore";
|
|
import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
|
|
import { PipelineType } from "@/types/PipelineTypes";
|
|
import PhotonCameraStream from "@/components/app/photon-camera-stream.vue";
|
|
|
|
defineProps<{
|
|
// TODO fully update v-model usage in custom components on Vue3 update
|
|
value: number[];
|
|
}>();
|
|
|
|
const driverMode = computed<boolean>({
|
|
get: () => useCameraSettingsStore().isDriverMode,
|
|
set: (v) => useCameraSettingsStore().setDriverMode(v)
|
|
});
|
|
|
|
const fpsTooLow = computed<boolean>(() => {
|
|
const currFPS = useStateStore().currentPipelineResults?.fps || 0;
|
|
const targetFPS = useCameraSettingsStore().currentVideoFormat.fps;
|
|
const driverMode = useCameraSettingsStore().isDriverMode;
|
|
const gpuAccel = useSettingsStore().general.gpuAcceleration !== undefined;
|
|
const isReflective = useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.Reflective;
|
|
|
|
return currFPS - targetFPS < -5 && currFPS !== 0 && !driverMode && gpuAccel && isReflective;
|
|
});
|
|
|
|
const performanceRecommendation = computed<string>(() => {
|
|
if (
|
|
fpsTooLow.value &&
|
|
!useCameraSettingsStore().currentPipelineSettings.inputShouldShow &&
|
|
useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.Reflective
|
|
) {
|
|
return "HSV thresholds are too broad; narrow them for better performance";
|
|
} else if (fpsTooLow.value && useCameraSettingsStore().currentPipelineSettings.inputShouldShow) {
|
|
return "Stop viewing the raw stream for better performance";
|
|
} else {
|
|
return `${Math.min(Math.round(useStateStore().currentPipelineResults?.latency || 0), 9999)} ms latency`;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<v-card color="primary" height="100%" class="d-flex flex-column" dark>
|
|
<v-card-title class="justify-space-between align-center pt-3 pb-3">
|
|
<span>Cameras</span>
|
|
<v-chip
|
|
v-if="useCameraSettingsStore().currentCameraSettings.isConnected"
|
|
label
|
|
:color="fpsTooLow ? 'error' : 'transparent'"
|
|
:text-color="fpsTooLow ? '#C7EA46' : '#ff4d00'"
|
|
style="font-size: 1rem; padding: 0; margin: 0"
|
|
>
|
|
<span class="pr-1"
|
|
>Processing @ {{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }} FPS –</span
|
|
><span>{{ performanceRecommendation }}</span>
|
|
</v-chip>
|
|
<v-chip v-else label color="transparent" text-color="red" style="font-size: 1rem; padding: 0; margin: 0">
|
|
<span class="pr-1"> Camera not connected </span>
|
|
</v-chip>
|
|
<v-switch
|
|
v-model="driverMode"
|
|
:disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
|
|
label="Driver Mode"
|
|
color="accent"
|
|
hide-details="auto"
|
|
/>
|
|
</v-card-title>
|
|
<v-divider class="ml-3 mr-3" />
|
|
<v-row class="stream-viewer-container pa-3 align-center">
|
|
<v-col v-if="value.includes(0)" class="stream-view">
|
|
<photon-camera-stream
|
|
id="input-camera-stream"
|
|
:camera-settings="useCameraSettingsStore().currentCameraSettings"
|
|
stream-type="Raw"
|
|
style="width: 100%; height: auto"
|
|
/>
|
|
</v-col>
|
|
<v-col v-if="value.includes(1)" class="stream-view">
|
|
<photon-camera-stream
|
|
id="output-camera-stream"
|
|
:camera-settings="useCameraSettingsStore().currentCameraSettings"
|
|
stream-type="Processed"
|
|
style="width: 100%; height: auto"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.v-input--switch {
|
|
margin-top: 0;
|
|
}
|
|
.stream-viewer-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.stream-view {
|
|
max-width: 500px;
|
|
}
|
|
@media only screen and (max-width: 512px) {
|
|
.stream-view {
|
|
min-width: 80%;
|
|
}
|
|
}
|
|
</style>
|