Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-30 02:31:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve UI stability, reliability, and readability (#1104)

Browse Source 
closes #1090
closes #1030

Also fixes various styling issues and overflow issues for mobile support
This commit is contained in:
Sriman Achanta
2024-01-02 11:03:16 -05:00
committed by GitHub
parent 2a1792e71a
commit e4f475a253
24 changed files with 1436 additions and 5260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
photon-client/src/components/dashboard/CamerasCard.vue
View File

@@ -29,61 +29,83 @@ const fpsTooLow = computed<boolean>(() => {
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%" style="display: flex; flex-direction: column" dark>
<v-card-title
class="pb-0 mb-0 pl-4 pt-1"
style="min-height: 50px; justify-content: space-between; align-content: center"
>
<div class="pt-2">
<span class="mr-4">Cameras</span>
<v-row>
<v-col class="align-self-center text-no-wrap">
<v-card-title>Cameras</v-card-title>
</v-col>
<v-col class="align-self-center" style="text-align: right; margin-right: 12px; padding-left: 24px">
<v-chip
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) }}&nbsp;FPS &ndash;
</span>
<span
v-if="
fpsTooLow &&
!useCameraSettingsStore().currentPipelineSettings.inputShouldShow &&
useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.Reflective
"
>
HSV thresholds are too broad; narrow them for better performance
</span>
<span v-else-if="fpsTooLow && useCameraSettingsStore().currentPipelineSettings.inputShouldShow">
stop viewing the raw stream for better performance
</span>
<span v-else>
{{ Math.min(Math.round(useStateStore().currentPipelineResults?.latency || 0), 9999) }} ms latency
</span>
<span class="pr-1"
>Processing @ {{ Math.round(useStateStore().currentPipelineResults?.fps || 0) }}&nbsp;FPS &ndash;</span
><span>{{ performanceRecommendation }}</span>
</v-chip>
</div>
<div>
</v-col>
<v-col
class="align-self-center"
style="
width: min-content;
flex-grow: 0;
display: flex;
justify-content: flex-end;
margin-right: 24px;
padding: 0;
"
>
<v-switch
v-model="driverMode"
:disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
label="Driver Mode"
style="margin-left: auto"
style="margin: 0; padding: 0; padding-left: 18px; margin-top: 14px"
color="accent"
class="pt-2"
/>
</div>
</v-card-title>
</v-col>
</v-row>
<v-divider style="border-color: white" />
<v-row class="pl-3 pr-3 pt-3 pb-3" style="flex-wrap: nowrap; justify-content: center">
<v-col v-show="value.includes(0)" style="max-width: 500px; display: flex; align-items: center">
<v-row class="stream-viewer-container pa-3">
<v-col v-show="value.includes(0)" class="stream-view">
<photon-camera-stream id="input-camera-stream" stream-type="Raw" style="width: 100%; height: auto" />
</v-col>
<v-col v-show="value.includes(1)" style="max-width: 500px; display: flex; align-items: center">
<v-col v-show="value.includes(1)" class="stream-view">
<photon-camera-stream id="output-camera-stream" stream-type="Processed" style="width: 100%; height: auto" />
</v-col>
</v-row>
</v-card>
</template>
<style scoped>
.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>