Fix rotation issues with showing ATFL

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

@@ -3,13 +3,16 @@ 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");
-};
+const quaternionToEuler = (rot_quat: Quaternion): {x: number, y: number, z: number} => {
+  const quat = new ThreeQuat(rot_quat.X, rot_quat.Y, rot_quat.Z, rot_quat.W);
+  const euler = new Euler().setFromQuaternion(quat, "ZYX");
 
-// Convert from radians to degrees.
-const degrees = (radians: number): number => radians * (180.0 / Math.PI);
+  return {
+    x: euler.x * (180.0 / Math.PI),
+    y: euler.y * (180.0 / Math.PI),
+    z: euler.z * (180.0 / Math.PI)
+  };
+};
 </script>
 
 <template>
@@ -36,11 +39,11 @@ const degrees = (radians: number): number => radians * (180.0 / Math.PI);
           <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">
+              <td v-for="(val, idx) in Object.values(tag.pose.translation)" :key="idx">
                 {{ val.toFixed(2) }}
               </td>
               <td
-                v-for="(val, idx) in Object.values(quatToEuler(tag.pose.rotation.quaternion)).slice(0, 3).map(degrees)"
+                v-for="(val, idx) in Object.values(quaternionToEuler(tag.pose.rotation.quaternion))"
                 :key="idx"
               >
                 {{ val.toFixed(2) }}