Vue 3 Upgrade (#1900)

## 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>

photon-client/src/components/settings/ApriltagControlCard.vue

@@ -17,14 +17,14 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
 </script>
 
 <template>
-  <v-card dark style="background-color: #006492">
+  <v-card style="background-color: #006492">
     <v-card-title class="pa-6">AprilTag Field Layout</v-card-title>
     <v-card-text class="pa-6 pt-0">
       <p>Field width: {{ useSettingsStore().currentFieldLayout.field.width.toFixed(2) }} meters</p>
       <p>Field length: {{ useSettingsStore().currentFieldLayout.field.length.toFixed(2) }} meters</p>
 
       <!-- Simple table height must be set here and in the CSS for the fixed-header to work -->
-      <v-simple-table fixed-header height="100%" dense dark>
+      <v-table fixed-header height="100%" density="compact" dark>
         <template #default>
           <thead style="font-size: 1.25rem">
             <tr>
@@ -47,13 +47,13 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
             </tr>
           </tbody>
         </template>
-      </v-simple-table>
+      </v-table>
     </v-card-text>
   </v-card>
 </template>
 
 <style scoped lang="scss">
-.v-data-table {
+.v-table {
   width: 100%;
   height: 100%;
   text-align: center;

photon-client/src/components/settings/DeviceControlCard.vue

@@ -2,6 +2,7 @@
 import { inject, ref } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import PvSelect from "@/components/common/pv-select.vue";
+import PvInput from "@/components/common/pv-input.vue";
 import axios from "axios";
 
 const restartProgram = () => {
@@ -140,10 +141,10 @@ enum ImportType {
   ApriltagFieldLayout
 }
 const showImportDialog = ref(false);
-const importType = ref<ImportType | number>(-1);
+const importType = ref<ImportType | undefined>(undefined);
 const importFile = ref<File | null>(null);
 const handleSettingsImport = () => {
-  if (importType.value === -1 || importFile.value === null) return;
+  if (importType.value === undefined || importFile.value === null) return;
 
   const formData = new FormData();
   formData.append("data", importFile.value);
@@ -198,7 +199,7 @@ const handleSettingsImport = () => {
     });
 
   showImportDialog.value = false;
-  importType.value = -1;
+  importType.value = undefined;
   importFile.value = null;
 };
 
@@ -237,25 +238,25 @@ const nukePhotonConfigDirectory = () => {
 </script>
 
 <template>
-  <v-card dark class="mb-3" style="background-color: #006492">
+  <v-card class="mb-3" style="background-color: #006492">
     <v-card-title class="pa-6">Device Control</v-card-title>
     <div class="pa-6 pt-0">
       <v-row>
         <v-col cols="12" lg="4" md="6">
           <v-btn color="error" @click="restartProgram">
-            <v-icon left class="open-icon"> mdi-restart </v-icon>
+            <v-icon start class="open-icon"> mdi-restart </v-icon>
             <span class="open-label">Restart PhotonVision</span>
           </v-btn>
         </v-col>
         <v-col cols="12" lg="4" md="6">
           <v-btn color="error" @click="restartDevice">
-            <v-icon left class="open-icon"> mdi-restart-alert </v-icon>
+            <v-icon start class="open-icon"> mdi-restart-alert </v-icon>
             <span class="open-label">Restart Device</span>
           </v-btn>
         </v-col>
         <v-col cols="12" lg="4">
           <v-btn color="secondary" @click="openOfflineUpdatePrompt">
-            <v-icon left class="open-icon"> mdi-upload </v-icon>
+            <v-icon start class="open-icon"> mdi-upload </v-icon>
             <span class="open-label">Offline Update</span>
           </v-btn>
           <input ref="offlineUpdate" type="file" accept=".jar" style="display: none" @change="handleOfflineUpdate" />
@@ -265,15 +266,15 @@ const nukePhotonConfigDirectory = () => {
       <v-row>
         <v-col cols="12" sm="6">
           <v-btn color="secondary" @click="() => (showImportDialog = true)">
-            <v-icon left class="open-icon"> mdi-import </v-icon>
+            <v-icon start class="open-icon"> mdi-import </v-icon>
             <span class="open-label">Import Settings</span>
           </v-btn>
           <v-dialog
             v-model="showImportDialog"
             width="600"
-            @input="
+            @update:modelValue="
               () => {
-                importType = -1;
+                importType = undefined;
                 importFile = null;
               }
             "
@@ -301,18 +302,14 @@ const nukePhotonConfigDirectory = () => {
                 <v-row class="mt-6 ml-4 mr-8">
                   <v-file-input
                     v-model="importFile"
-                    :disabled="importType === -1"
-                    :error-messages="importType === -1 ? 'Settings type not selected' : ''"
+                    :disabled="importType === undefined"
+                    :error-messages="importType === undefined ? 'Settings type not selected' : ''"
                     :accept="importType === ImportType.AllSettings ? '.zip' : '.json'"
                   />
                 </v-row>
-                <v-row
-                  class="mt-12 ml-8 mr-8 mb-1"
-                  style="display: flex; align-items: center; justify-content: center"
-                  align="center"
-                >
+                <v-row class="mt-12 ml-8 mr-8 mb-1" style="display: flex; align-items: center; justify-content: center">
                   <v-btn color="secondary" :disabled="importFile === null" @click="handleSettingsImport">
-                    <v-icon left class="open-icon"> mdi-import </v-icon>
+                    <v-icon start class="open-icon"> mdi-import </v-icon>
                     <span class="open-label">Import Settings</span>
                   </v-btn>
                 </v-row>
@@ -322,7 +319,7 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
         <v-col cols="12" sm="6">
           <v-btn color="secondary" @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">Export Settings</span>
           </v-btn>
           <a
@@ -335,7 +332,7 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
         <v-col cols="12" sm="6">
           <v-btn color="secondary" @click="openExportLogsPrompt">
-            <v-icon left class="open-icon"> mdi-download </v-icon>
+            <v-icon start class="open-icon"> mdi-download </v-icon>
             <span class="open-label">Download logs</span>
 
             <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
@@ -350,7 +347,7 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
         <v-col cols="12" sm="6">
           <v-btn color="secondary" @click="useStateStore().showLogModal = true">
-            <v-icon left class="open-icon"> mdi-eye </v-icon>
+            <v-icon start class="open-icon"> mdi-eye </v-icon>
             <span class="open-label">View program logs</span>
           </v-btn>
         </v-col>
@@ -359,10 +356,10 @@ const nukePhotonConfigDirectory = () => {
       <v-row>
         <v-col cols="12">
           <v-btn color="error" @click="() => (showFactoryReset = true)">
-            <v-icon left class="open-icon"> mdi-skull-crossbones </v-icon>
+            <v-icon start class="open-icon"> mdi-skull-crossbones </v-icon>
             <span class="open-icon">
               {{
-                $vuetify.breakpoint.mdAndUp
+                $vuetify.display.mdAndUp
                   ? "Factory Reset PhotonVision and delete EVERYTHING"
                   : "Factory Reset PhotonVision"
               }}
@@ -373,22 +370,22 @@ const nukePhotonConfigDirectory = () => {
     </div>
 
     <v-dialog v-model="showFactoryReset" width="800" dark>
-      <v-card dark color="primary" class="pa-3" flat>
+      <v-card color="primary" class="pa-3" flat>
         <v-card-title style="justify-content: center" class="pb-6">
           <span class="open-label">
-            <v-icon right color="error" class="open-icon ma-1">mdi-nuke</v-icon>
+            <v-icon end color="error" class="open-icon ma-1">mdi-nuke</v-icon>
             Factory Reset PhotonVision
-            <v-icon right color="error" class="open-icon ma-1">mdi-nuke</v-icon>
+            <v-icon end color="error" class="open-icon ma-1">mdi-nuke</v-icon>
           </span>
         </v-card-title>
         <v-card-text class="pt-3">
-          <v-row class="align-center white--text">
+          <v-row class="align-center text-white">
             <v-col cols="12" md="6">
               <span class="mt-3"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
             </v-col>
             <v-col cols="12" md="6">
               <v-btn color="secondary" style="float: right" @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"
@@ -415,11 +412,9 @@ const nukePhotonConfigDirectory = () => {
             :disabled="yesDeleteMySettingsText.toLowerCase() !== expected.toLowerCase()"
             @click="nukePhotonConfigDirectory"
           >
-            <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">
-              {{
-                $vuetify.breakpoint.mdAndUp ? "Delete everything, I have backed up what I need" : "Delete Everything"
-              }}
+              {{ $vuetify.display.mdAndUp ? "Delete everything, I have backed up what I need" : "Delete Everything" }}
             </span>
           </v-btn>
         </v-card-text>

photon-client/src/components/settings/LEDControlCard.vue

@@ -4,7 +4,7 @@ import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 </script>
 
 <template>
-  <v-card dark class="mb-3 pr-6 pb-3" style="background-color: #006492">
+  <v-card class="mb-3 pr-6 pb-3" style="background-color: #006492">
     <v-card-title>LED Control</v-card-title>
     <div class="ml-5">
       <pv-slider
@@ -14,7 +14,7 @@ import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
         :slider-cols="12"
         :min="0"
         :max="100"
-        @input="(args) => useSettingsStore().changeLEDBrightness(args)"
+        @update:modelValue="(args) => useSettingsStore().changeLEDBrightness(args)"
       />
     </div>
   </v-card>

photon-client/src/components/settings/MetricsCard.vue

@@ -120,17 +120,17 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <v-card dark class="mb-3" style="background-color: #006492">
+  <v-card class="mb-3" style="background-color: #006492">
     <v-card-title class="pl-6" style="display: flex; justify-content: space-between">
       <span class="pt-2 pb-2">Stats</span>
-      <v-btn text @click="fetchMetrics">
-        <v-icon left class="open-icon">mdi-reload</v-icon>
+      <v-btn variant="text" @click="fetchMetrics">
+        <v-icon start class="open-icon">mdi-reload</v-icon>
         Last Fetched: {{ metricsLastFetched }}
       </v-btn>
     </v-card-title>
     <v-card-text class="pa-6 pt-0 pb-3">
       <v-card-subtitle class="pa-0" style="font-size: 16px">General Metrics</v-card-subtitle>
-      <v-simple-table class="metrics-table mt-3">
+      <v-table class="metrics-table mt-3">
         <thead>
           <tr>
             <th
@@ -163,11 +163,11 @@ onBeforeMount(() => {
             </td>
           </tr>
         </tbody>
-      </v-simple-table>
+      </v-table>
     </v-card-text>
     <v-card-text class="pa-6 pt-4">
       <v-card-subtitle class="pa-0 pb-1" style="font-size: 16px">Hardware Metrics</v-card-subtitle>
-      <v-simple-table class="metrics-table mt-3">
+      <v-table class="metrics-table mt-3">
         <thead>
           <tr>
             <th
@@ -201,7 +201,7 @@ onBeforeMount(() => {
             </td>
           </tr>
         </tbody>
-      </v-simple-table>
+      </v-table>
     </v-card-text>
   </v-card>
 </template>
@@ -263,7 +263,7 @@ onBeforeMount(() => {
   text-decoration-color: #ffd843;
 }
 
-.v-data-table {
+.v-table {
   thead,
   tbody {
     background-color: #006492;

photon-client/src/components/settings/NetworkingCard.vue

@@ -124,9 +124,14 @@ const saveGeneralSettings = () => {
     });
 };
 
-const currentNetworkInterfaceIndex = computed<number>({
-  get: () => useSettingsStore().networkInterfaceNames.indexOf(useSettingsStore().network.networkManagerIface || ""),
-  set: (v) => (tempSettingsStruct.value.networkManagerIface = useSettingsStore().networkInterfaceNames[v])
+const currentNetworkInterfaceIndex = computed<number | undefined>({
+  get: () => {
+    const index = useSettingsStore().networkInterfaceNames.indexOf(
+      useSettingsStore().network.networkManagerIface || ""
+    );
+    return index === -1 ? undefined : index;
+  },
+  set: (v) => v && (tempSettingsStruct.value.networkManagerIface = useSettingsStore().networkInterfaceNames[v])
 });
 
 watchEffect(() => {
@@ -136,7 +141,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <v-card dark class="mb-3" style="background-color: #006492">
+  <v-card class="mb-3" style="background-color: #006492">
     <v-card-title class="pa-6">Global Settings</v-card-title>
     <div class="pa-6 pt-0">
       <v-divider class="pb-3" />
@@ -157,7 +162,7 @@ watchEffect(() => {
         <v-banner
           v-if="!isValidNetworkTablesIP(tempSettingsStruct.ntServerAddress) && !tempSettingsStruct.runNTServer"
           rounded
-          color="error"
+          bg-color="error"
           text-color="white"
           style="margin: 10px 0"
           icon="mdi-alert-circle-outline"
@@ -233,7 +238,7 @@ watchEffect(() => {
             !useSettingsStore().network.networkingDisabled
           "
           rounded
-          color="error"
+          bg-color="error"
           text-color="white"
           icon="mdi-information-outline"
         >
@@ -248,7 +253,7 @@ watchEffect(() => {
         <v-banner
           v-if="tempSettingsStruct.runNTServer"
           rounded
-          color="error"
+          bg-color="error"
           text-color="white"
           icon="mdi-information-outline"
         >
@@ -265,7 +270,7 @@ watchEffect(() => {
         <v-banner
           v-if="tempSettingsStruct.shouldPublishProto"
           rounded
-          color="error"
+          bg-color="error"
           text-color="white"
           icon="mdi-information-outline"
         >
@@ -276,6 +281,7 @@ watchEffect(() => {
       </v-form>
       <v-btn
         color="accent"
+        :variant="!settingsValid || !settingsHaveChanged() ? 'tonal' : 'elevated'"
         style="color: black; width: 100%"
         :disabled="!settingsValid || !settingsHaveChanged()"
         @click="saveGeneralSettings"

photon-client/src/components/settings/ObjectDetectionCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, inject } from "vue";
 import axios from "axios";
 import { useStateStore } from "@/stores/StateStore";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
@@ -8,6 +8,28 @@ const showImportDialog = ref(false);
 const importRKNNFile = ref<File | null>(null);
 const importLabelsFile = ref<File | null>(null);
 
+const host = inject<string>("backendHost");
+
+const areValidFileNames = (weights: string | null, labels: string | null) => {
+  const weightsRegex = /^([a-zA-Z0-9._]+)-(\d+)-(\d+)-(yolov(?:5|8|11)[nsmlx]*)\.rknn$/;
+  const labelsRegex = /^([a-zA-Z0-9._]+)-(\d+)-(\d+)-(yolov(?:5|8|11)[nsmlx]*)-labels\.txt$/;
+
+  if (weights && labels) {
+    const weightsMatch = weights.match(weightsRegex);
+    const labelsMatch = labels.match(labelsRegex);
+
+    if (weightsMatch && labelsMatch) {
+      return (
+        weightsMatch[1] === labelsMatch[1] &&
+        weightsMatch[2] === labelsMatch[2] &&
+        weightsMatch[3] === labelsMatch[3] &&
+        weightsMatch[4] === labelsMatch[4]
+      );
+    }
+  }
+  return false;
+};
+
 // TODO gray out the button when model is uploading
 const handleImport = async () => {
   if (importRKNNFile.value === null || importLabelsFile.value === null) return;
@@ -65,19 +87,19 @@ const supportedModels = computed(() => {
 </script>
 
 <template>
-  <v-card dark class="mb-3" style="background-color: #006492">
+  <v-card class="mb-3" style="background-color: #006492">
     <v-card-title class="pa-6">Object Detection</v-card-title>
     <div class="pa-6 pt-0">
       <v-row>
         <v-col cols="12 ">
           <v-btn color="secondary" class="justify-center" @click="() => (showImportDialog = true)">
-            <v-icon left class="open-icon"> mdi-import </v-icon>
+            <v-icon start class="open-icon"> mdi-import </v-icon>
             <span class="open-label">Import New Model</span>
           </v-btn>
           <v-dialog
             v-model="showImportDialog"
             width="600"
-            @input="
+            @update:modelValue="
               () => {
                 importRKNNFile = null;
                 importLabelsFile = null;
@@ -87,30 +109,28 @@ const supportedModels = computed(() => {
             <v-card color="primary" dark>
               <v-card-title>Import New Object Detection Model</v-card-title>
               <v-card-text>
-                Upload a new object detection model to this device that can be used in a pipeline. Naming convention
-                should be <code>name-verticalResolution-horizontalResolution-yolovXXX</code>. The
-                <code>name</code> should only include alphanumeric characters, periods, and underscores. Additionally,
-                the labels file ought to have the same name as the RKNN file, with <code>-labels</code> appended to the
-                end. For example, if the RKNN file is named <code>note-640-640-yolov5s.rknn</code>, the labels file
-                should be named <code>note-640-640-yolov5s-labels.txt</code>. Note that ONLY 640x640 YOLOv5, YOLOv8, and
-                YOLOv11 models trained and converted to `.rknn` format for RK3588 CPUs are currently supported!
+                Upload a new object detection model to this device that can be used in a pipeline. Note that ONLY
+                640x640 YOLOv5, YOLOv8, and YOLOv11 models trained and converted to `.rknn` format for RK3588 CPUs are
+                currently supported! See [the documentation]({{
+                  host
+                }}/docs/objectDetection/about-object-detection.html) for more details.
                 <v-row class="mt-6 ml-4 mr-8">
                   <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 v-model="importLabelsFile" label="Labels File" accept=".txt" />
                 </v-row>
-                <v-row
-                  class="mt-12 ml-8 mr-8 mb-1"
-                  style="display: flex; align-items: center; justify-content: center"
-                  align="center"
-                >
+                <v-row class="mt-12 ml-8 mr-8 mb-1" style="display: flex; align-items: center; justify-content: center">
                   <v-btn
                     color="secondary"
-                    :disabled="importRKNNFile === null || importLabelsFile === null"
+                    :disabled="
+                      importRKNNFile === null ||
+                      importLabelsFile === null ||
+                      !areValidFileNames(importRKNNFile.name, importLabelsFile.name)
+                    "
                     @click="handleImport"
                   >
-                    <v-icon left class="open-icon"> mdi-import </v-icon>
+                    <v-icon start class="open-icon"> mdi-import </v-icon>
                     <span class="open-label">Import Object Detection Model</span>
                   </v-btn>
                 </v-row>
@@ -121,7 +141,7 @@ const supportedModels = computed(() => {
       </v-row>
       <v-row>
         <v-col cols="12">
-          <v-simple-table fixed-header height="100%" dense dark>
+          <v-table fixed-header height="100%" density="compact" dark>
             <thead style="font-size: 1.25rem">
               <tr>
                 <th class="text-left">Available Models</th>
@@ -132,7 +152,7 @@ const supportedModels = computed(() => {
                 <td>{{ model }}</td>
               </tr>
             </tbody>
-          </v-simple-table>
+          </v-table>
         </v-col>
       </v-row>
     </div>
@@ -151,7 +171,7 @@ const supportedModels = computed(() => {
     display: none;
   }
 }
-.v-data-table {
+.v-table {
   width: 100%;
   height: 100%;
   text-align: center;