Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-07-04 03:11:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Vue 3 Upgrade (#1900)

Browse Source 
## 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>
This commit is contained in:
Graham
2025-05-06 18:21:41 -04:00
committed by GitHub
parent 29f76bc1c3
commit bec8092660
54 changed files with 1661 additions and 1843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
photon-client/src/views/CameraMatchingView.vue
View File

@@ -11,6 +11,8 @@ import {
type UiCameraConfiguration
} from "@/types/SettingTypes";
import { getResolutionString } from "@/lib/PhotonUtils";
import PhotonCameraStream from "@/components/app/photon-camera-stream.vue";
import PvInput from "@/components/common/pv-input.vue";
import PvCameraInfoCard from "@/components/common/pv-camera-info-card.vue";
import axios from "axios";
import PvCameraMatchCard from "@/components/common/pv-camera-match-card.vue";
@@ -278,7 +280,7 @@ const openExportSettingsPrompt = () => {
</script>
<template>
<div class="pa-5">
<div class="pa-3">
<v-row>
<!-- Active modules -->
<v-col
@@ -288,7 +290,7 @@ const openExportSettingsPrompt = () => {
sm="6"
lg="4"
>
<v-card dark color="primary">
<v-card color="primary">
<v-card-title>{{ cameraInfoFor(module.matchedCameraInfo).name }}</v-card-title>
<v-card-subtitle v-if="!cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath)" class="pb-2"
>Status: <span class="inactive-status">Disconnected</span></v-card-subtitle
@@ -303,7 +305,7 @@ const openExportSettingsPrompt = () => {
>
<v-card-subtitle v-else class="pb-2">Status: <span class="mismatch-status">Mismatch</span></v-card-subtitle>
<v-card-text>
<v-simple-table dark dense>
<v-table density="compact">
<tbody>
<tr>
<td>Streams:</td>
@@ -341,7 +343,7 @@ const openExportSettingsPrompt = () => {
</td>
</tr>
</tbody>
</v-simple-table>
</v-table>
<div
v-if="cameraCononected(cameraInfoFor(module.matchedCameraInfo).uniquePath)"
:id="`stream-container-${index}`"
@@ -373,7 +375,7 @@ const openExportSettingsPrompt = () => {
</v-col>
<v-col cols="6" md="5" class="pr-0">
<v-btn
class="black--text"
class="text-black"
color="accent"
style="width: 100%"
:loading="deactivatingModule"
@@ -394,11 +396,11 @@ const openExportSettingsPrompt = () => {
<!-- Disabled modules -->
<v-col v-for="module in disabledVisionModules" :key="`disabled-${module.uniqueName}`" cols="12" sm="6" lg="4">
<v-card dark color="primary">
<v-card color="primary">
<v-card-title>{{ module.nickname }}</v-card-title>
<v-card-subtitle class="pb-2">Status: <span class="inactive-status">Deactivated</span></v-card-subtitle>
<v-card-text>
<v-simple-table dense>
<v-table density="compact">
<tbody>
<tr>
<td>Name</td>
@@ -424,7 +426,7 @@ const openExportSettingsPrompt = () => {
</td>
</tr>
</tbody>
</v-simple-table>
</v-table>
</v-card-text>
<v-card-text class="pt-0">
<v-row>
@@ -444,7 +446,7 @@ const openExportSettingsPrompt = () => {
</v-col>
<v-col cols="6" md="5" class="pr-0">
<v-btn
class="black--text"
class="text-black"
color="accent"
style="width: 100%"
:loading="activatingModule"
@@ -465,7 +467,7 @@ const openExportSettingsPrompt = () => {
<!-- Unassigned cameras -->
<v-col v-for="(camera, index) in unmatchedCameras" :key="index" cols="12" sm="6" lg="4">
<v-card dark color="primary">
<v-card color="primary">
<v-card-title class="pb-2">
<span v-if="camera.PVUsbCameraInfo">USB Camera:</span>
<span v-else-if="camera.PVCSICameraInfo">CSI Camera:</span>
@@ -486,7 +488,7 @@ const openExportSettingsPrompt = () => {
</v-col>
<v-col cols="6">
<v-btn
class="black--text"
class="text-black"
color="accent"
style="width: 100%"
:loading="assigningCamera"
@@ -518,10 +520,10 @@ const openExportSettingsPrompt = () => {
<!-- Camera details modal -->
<v-dialog v-model="viewingDetails" max-width="800">
<v-card v-if="viewingCamera[0] !== null" dark flat color="primary">
<v-card v-if="viewingCamera[0] !== null" flat color="primary">
<v-card-title class="d-flex justify-space-between">
<span>{{ cameraInfoFor(viewingCamera[0])?.name ?? cameraInfoFor(viewingCamera[0])?.baseName }}</span>
<v-btn text @click="setCameraView(null, null)">
<v-btn variant="text" @click="setCameraView(null, null)">
<v-icon>mdi-close-thick</v-icon>
</v-btn>
</v-card-title>
@@ -542,17 +544,17 @@ const openExportSettingsPrompt = () => {
</v-dialog>
<!-- Camera delete modal -->
<v-dialog v-model="viewingDeleteCamera" dark width="800">
<v-card v-if="cameraToDelete !== null" dark class="dialog-container pa-3 pb-2" color="primary" flat>
<v-dialog v-model="viewingDeleteCamera" width="800">
<v-card v-if="cameraToDelete !== null" class="dialog-container pa-3 pb-2" color="primary" flat>
<v-card-title> Delete {{ cameraToDelete.nickname }}? </v-card-title>
<v-card-text>
<v-row class="align-center pt-6">
<v-col cols="12" md="6">
<span class="white--text"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
<span class="text-white"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
</v-col>
<v-col cols="12" md="6">
<v-btn color="secondary" block @click="openExportSettingsPrompt">
<v-icon left class="open-icon"> mdi-export </v-icon>
<v-icon start class="open-icon"> mdi-export </v-icon>
<span class="open-label">Backup Settings</span>
<a
ref="exportSettings"
@@ -581,7 +583,7 @@ const openExportSettingsPrompt = () => {
:loading="deletingCamera"
@click="deleteThisCamera(cameraToDelete.uniqueName)"
>
<v-icon left class="open-icon"> mdi-trash-can-outline </v-icon>
<v-icon start class="open-icon"> mdi-trash-can-outline </v-icon>
<span class="open-label">DELETE (UNRECOVERABLE)</span>
</v-btn>
</v-card-text>
@@ -591,7 +593,11 @@ const openExportSettingsPrompt = () => {
</template>
<style scoped>
.v-data-table {
.v-card-title {
text-wrap-mode: wrap !important;
}
.v-table {
background-color: #006492 !important;
}