From 7ca017a38cc42e45469588bf8c8f8906473d37bb Mon Sep 17 00:00:00 2001
From: Matthew Morley <matthew.morley.ca@gmail.com>
Date: Sun, 1 Oct 2023 11:17:25 -0400
Subject: [PATCH] Run lint

---
 .gitignore                                    |  1 -
 .../components/dashboard/tabs/TargetsTab.vue  |  4 +-
 .../settings/ApriltagControlCard.vue          | 95 +++++++++++++++++++
 .../src/types/PhotonTrackingTypes.ts          |  8 +-
 4 files changed, 100 insertions(+), 8 deletions(-)
 create mode 100644 photon-client/src/components/settings/ApriltagControlCard.vue

diff --git a/.gitignore b/.gitignore
index 2bb8de0059..609770cdf5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -114,7 +114,6 @@ fabric.properties
 **/.settings
 **/.classpath
 **/.project
-**/settings
 **/dependency-reduced-pom.xml
 # photon-server/photon-vision.iml
 
diff --git a/photon-client/src/components/dashboard/tabs/TargetsTab.vue b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
index 1095946ae5..a4de2b73bd 100644
--- a/photon-client/src/components/dashboard/tabs/TargetsTab.vue
+++ b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
@@ -76,9 +76,7 @@ import { useStateStore } from "@/stores/StateStore";
         </template>
       </v-simple-table>
     </v-row>
-    <p class="white--text">
-      Estimated multi-tag pose: {{  useStateStore().currentPipelineResults?.multitagResult  }}
-    </p>
+    <p class="white--text">Estimated multi-tag pose: {{ useStateStore().currentPipelineResults?.multitagResult }}</p>
   </div>
 </template>
 
diff --git a/photon-client/src/components/settings/ApriltagControlCard.vue b/photon-client/src/components/settings/ApriltagControlCard.vue
new file mode 100644
index 0000000000..bc9a18ca2e
--- /dev/null
+++ b/photon-client/src/components/settings/ApriltagControlCard.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import CvSlider from "@/components/common/cv-slider.vue";
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { useStateStore } from "@/stores/StateStore";
+import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+import { Euler, Quaternion } from "three";
+
+function quatToEuler(quat) {
+  console.log(quat);
+  quat = new Quaternion(quat.X, quat.Y, quat.Z, quat.W);
+  return new Euler().setFromQuaternion(quat, "ZYX");
+}
+
+// Convert from radians to degrees.
+const degrees = function (radians) {
+  return (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 * 3.28084).toFixed(2) }} ft</p>
+      <p>Field length: {{ (useSettingsStore().currentFieldLayout.field.length * 3.28084).toFixed(2) }} ft</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, m</th>
+              <th class="text-center">Y, m</th>
+              <th class="text-center">Z, m</th>
+              <th class="text-center">θ<sub>x</sub>, &deg;</th>
+              <th class="text-center">θ<sub>y</sub>, &deg;</th>
+              <th class="text-center">θ<sub>z</sub>, &deg;</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(tag, index) in useSettingsStore().currentFieldLayout.tags" :key="index">
+              <td>{{ tag.ID }}</td>
+              <td>{{ tag.pose.translation.x.toFixed(2) }}</td>
+              <td>{{ tag.pose.translation.y.toFixed(2) }}</td>
+              <td>{{ tag.pose.translation.z.toFixed(2) }}</td>
+              <td>{{ degrees(quatToEuler(tag.pose.rotation.quaternion).x).toFixed(2) }}&deg;</td>
+              <td>{{ degrees(quatToEuler(tag.pose.rotation.quaternion).y).toFixed(2) }}&deg;</td>
+              <td>{{ degrees(quatToEuler(tag.pose.rotation.quaternion).z).toFixed(2) }}&deg;</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>
diff --git a/photon-client/src/types/PhotonTrackingTypes.ts b/photon-client/src/types/PhotonTrackingTypes.ts
index 1140ae6251..ee19240ffa 100644
--- a/photon-client/src/types/PhotonTrackingTypes.ts
+++ b/photon-client/src/types/PhotonTrackingTypes.ts
@@ -10,10 +10,10 @@ export interface Transform3d {
 }
 
 export interface Quaternion {
-          X: number;
-          Y: number;
-          Z: number;
-          W: number;
+  X: number;
+  Y: number;
+  Z: number;
+  W: number;
 }
 
 export interface AprilTagFieldLayout {