Run multitag on coprocessor (#816)

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+import { Euler, Quaternion as ThreeQuat } from "three";
+import type { Quaternion } from "@/types/PhotonTrackingTypes";
+
+const quatToEuler = (quat: Quaternion): Euler => {
+  const three_quat = new ThreeQuat(quat.X, quat.Y, quat.Z, quat.W);
+  return new Euler().setFromQuaternion(three_quat, "ZYX");
+};
+
+// Convert from radians to degrees.
+const degrees = (radians: number): number => (radians * 180) / Math.PI;
+</script>
+
+<template>
+  <v-card dark class="mb-3 pr-6 pb-3" style="background-color: #006492">
+    <v-card-title>Apriltag Layout</v-card-title>
+    <div class="ml-5">
+      <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>
+        <template #default>
+          <thead style="font-size: 1.25rem">
+            <tr>
+              <th class="text-center">ID</th>
+              <th class="text-center">X, meters</th>
+              <th class="text-center">Y, meters</th>
+              <th class="text-center">Z, meters</th>
+              <th class="text-center">θ<sub>x</sub> angle, &deg;</th>
+              <th class="text-center">θ<sub>y</sub> angle, &deg;</th>
+              <th class="text-center">θ<sub>z</sub> angle, &deg;</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(tag, index) in useSettingsStore().currentFieldLayout.tags" :key="index">
+              <td>{{ tag.ID }}</td>
+              <td v-for="(val, idx) in Object.values(tag.pose.translation).slice(0, 3).map(degrees)" :key="idx">
+                {{ val.toFixed(2) }}
+              </td>
+              <td
+                v-for="(val, idx) in Object.values(quatToEuler(tag.pose.rotation.quaternion)).slice(0, 3).map(degrees)"
+                :key="idx"
+              >
+                {{ val.toFixed(2) }}
+              </td>
+            </tr>
+          </tbody>
+        </template>
+      </v-simple-table>
+    </div>
+  </v-card>
+</template>
+
+<style scoped lang="scss">
+.v-data-table {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background-color: #006492 !important;
+
+  th,
+  td {
+    background-color: #006492 !important;
+    font-size: 1rem !important;
+  }
+
+  td {
+    font-family: monospace !important;
+  }
+
+  tbody :hover td {
+    background-color: #005281 !important;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0.55em;
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #ffd843;
+    border-radius: 10px;
+  }
+}
+</style>

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

@@ -135,7 +135,8 @@ enum ImportType {
   AllSettings,
   HardwareConfig,
   HardwareSettings,
-  NetworkConfig
+  NetworkConfig,
+  ApriltagFieldLayout
 }
 const showImportDialog = ref(false);
 const importType = ref<ImportType | number>(-1);
@@ -157,6 +158,9 @@ const handleSettingsImport = () => {
     case ImportType.NetworkConfig:
       settingsEndpoint = "/networkConfig";
       break;
+    case ImportType.ApriltagFieldLayout:
+      settingsEndpoint = "/aprilTagFieldLayout";
+      break;
     default:
     case ImportType.AllSettings:
       settingsEndpoint = "";
@@ -249,7 +253,13 @@ const handleSettingsImport = () => {
                     v-model="importType"
                     label="Type"
                     tooltip="Select the type of settings file you are trying to upload"
-                    :items="['All Settings', 'Hardware Config', 'Hardware Settings', 'Network Config']"
+                    :items="[
+                      'All Settings',
+                      'Hardware Config',
+                      'Hardware Settings',
+                      'Network Config',
+                      'Apriltag Layout'
+                    ]"
                     :select-cols="10"
                     style="width: 100%"
                   />

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

@@ -72,12 +72,12 @@ const fetchMetrics = () => {
       if (error.request) {
         useStateStore().showSnackbarMessage({
           color: "error",
-          message: "Unable to fetch Metrics! The backend didn't respond."
+          message: "Unable to fetch metrics! The backend didn't respond."
         });
       } else {
         useStateStore().showSnackbarMessage({
           color: "error",
-          message: "An error occurred while trying to fetch Metrics."
+          message: "An error occurred while trying to fetch metrics."
         });
       }
     })