Camera disconnected + stream normalization improvements (#1701)

This commit is contained in:
Devon Doyle
2025-01-14 02:30:25 -05:00
committed by GitHub
parent 009ec9e1d4
commit 5e5df483e2
7 changed files with 180 additions and 131 deletions

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, inject, ref, onBeforeUnmount } from "vue";
import { useStateStore } from "@/stores/StateStore";
import loadingImage from "@/assets/images/loading.svg";
import loadingImage from "@/assets/images/loading-transparent.svg";
import type { StyleValue } from "vue/types/jsx";
import PvIcon from "@/components/common/pv-icon.vue";
import type { UiCameraConfiguration } from "@/types/SettingTypes";
@@ -9,7 +9,6 @@ import type { UiCameraConfiguration } from "@/types/SettingTypes";
const props = defineProps<{
streamType: "Raw" | "Processed";
id: string;
outerId?: string;
cameraSettings: UiCameraConfiguration;
}>();
@@ -91,7 +90,7 @@ onBeforeUnmount(() => {
</script>
<template>
<div :id="outerId" class="stream-container" :style="containerStyle">
<div class="stream-container" :style="containerStyle">
<img :src="loadingImage" class="stream-loading" />
<img
:id="id"
@@ -131,18 +130,25 @@ onBeforeUnmount(() => {
display: flex;
position: relative;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
justify-content: center;
align-items: center;
}
.stream-loading {
position: absolute;
width: 100%;
height: 100%;
width: 25%;
height: 25%;
object-fit: contain;
}
.stream-video {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
}
.stream-overlay {

View File

@@ -57,14 +57,14 @@ const cameraInfoFor: any = (camera: PVCameraInfo) => {
<td>Path:</td>
<td style="word-break: break-all">{{ cameraInfoFor(camera).path }}</td>
</tr>
<tr v-if="cameraInfoFor(camera).otherPaths !== undefined && cameraInfoFor(camera).otherPaths !== null">
<td>Other Paths:</td>
<td>{{ cameraInfoFor(camera).otherPaths }}</td>
</tr>
<tr v-if="cameraInfoFor(camera).uniquePath !== undefined && cameraInfoFor(camera).uniquePath !== null">
<td>Unique Path:</td>
<td style="word-break: break-all">{{ cameraInfoFor(camera).uniquePath }}</td>
</tr>
<tr v-if="cameraInfoFor(camera).otherPaths !== undefined && cameraInfoFor(camera).otherPaths !== null">
<td>Other Paths:</td>
<td>{{ cameraInfoFor(camera).otherPaths }}</td>
</tr>
</tbody>
</v-simple-table>
</div>

View File

@@ -95,14 +95,6 @@ const cameraInfoFor = (camera: PVCameraInfo): any => {
<td style="word-break: break-all">{{ cameraInfoFor(saved).path }}</td>
<td style="word-break: break-all">{{ cameraInfoFor(current).path }}</td>
</tr>
<tr
v-if="cameraInfoFor(saved).otherPaths !== undefined && cameraInfoFor(saved).otherPaths !== null"
:class="!_.isEqual(cameraInfoFor(saved).otherPaths, cameraInfoFor(current).otherPaths) ? 'mismatch' : ''"
>
<td>Other Paths:</td>
<td>{{ cameraInfoFor(saved).otherPaths }}</td>
<td>{{ cameraInfoFor(current).otherPaths }}</td>
</tr>
<tr
v-if="cameraInfoFor(saved).uniquePath !== undefined && cameraInfoFor(saved).uniquePath !== null"
:class="cameraInfoFor(saved).uniquePath !== cameraInfoFor(current).uniquePath ? 'mismatch' : ''"
@@ -111,6 +103,14 @@ const cameraInfoFor = (camera: PVCameraInfo): any => {
<td style="word-break: break-all">{{ cameraInfoFor(saved).uniquePath }}</td>
<td style="word-break: break-all">{{ cameraInfoFor(current).uniquePath }}</td>
</tr>
<tr
v-if="cameraInfoFor(saved).otherPaths !== undefined && cameraInfoFor(saved).otherPaths !== null"
:class="!_.isEqual(cameraInfoFor(saved).otherPaths, cameraInfoFor(current).otherPaths) ? 'mismatch' : ''"
>
<td>Other Paths:</td>
<td>{{ cameraInfoFor(saved).otherPaths }}</td>
<td>{{ cameraInfoFor(current).otherPaths }}</td>
</tr>
</tbody>
</v-simple-table>
</div>

View File

@@ -64,6 +64,7 @@ const handleKeydown = ({ key }) => {
:error-messages="errorMessage"
:rules="rules"
hide-details="auto"
class="light-error"
@keydown="handleKeydown"
/>
</v-col>
@@ -74,3 +75,9 @@ const handleKeydown = ({ key }) => {
margin-top: 0px;
}
</style>
<style>
.light-error .error--text {
color: red !important;
caret-color: red !important;
}
</style>

View File

@@ -70,7 +70,7 @@ const supportedModels = computed(() => {
<div class="pa-6 pt-0">
<v-row>
<v-col cols="12 ">
<v-btn color="secondary" @click="() => (showImportDialog = true)" class="justify-center">
<v-btn color="secondary" class="justify-center" @click="() => (showImportDialog = true)">
<v-icon left class="open-icon"> mdi-import </v-icon>
<span class="open-label">Import New Model</span>
</v-btn>
@@ -94,10 +94,10 @@ const supportedModels = computed(() => {
named <code>note-640-640-yolov5s-labels.txt</code>. Note that ONLY 640x640 YOLOv5 & YOLOv8 models
trained and converted to `.rknn` format for RK3588 CPUs are currently supported!
<v-row class="mt-6 ml-4 mr-8">
<v-file-input label="RKNN File" v-model="importRKNNFile" accept=".rknn" />
<v-file-input v-model="importRKNNFile" label="RKNN File" accept=".rknn" />
</v-row>
<v-row class="mt-6 ml-4 mr-8">
<v-file-input label="Labels File" v-model="importLabelsFile" accept=".txt" />
<v-file-input v-model="importLabelsFile" label="Labels File" accept=".txt" />
</v-row>
<v-row
class="mt-12 ml-8 mr-8 mb-1"