Initial AprilTag support (#458)

(Very) beta AprilTag support in PhotonVision. Disables Picam GPU acceleration until we can debug auto exposure in the MMAL driver.

Co-authored-by: Banks Troutman <btrout.dhrs@gmail.com>
Co-authored-by: Matt <matthew.morley.ca@gmail.com>
Co-authored-by: Chris Gerth <gerth2@users.noreply.github.com>
Co-authored-by: Chris <chrisgerth010592@gmail.com>
Co-authored-by: mdurrani808 <mdurrani808@gmail.com>

photon-client/src/views/PipelineView.vue

@@ -34,7 +34,7 @@
                 :text-color="fpsTooLow ? 'white' : 'grey'"
               >
                 <span class="pr-1">{{ Math.round($store.state.pipelineResults.fps) }}&nbsp;FPS &ndash;</span>
-                <span v-if="!fpsTooLow">{{ Math.min(Math.round($store.state.pipelineResults.latency), 100) }} ms latency</span>
+                <span v-if="!fpsTooLow">{{ Math.min(Math.round($store.state.pipelineResults.latency), 9999) }} ms latency</span>
                 <span v-else-if="!$store.getters.currentPipelineSettings.inputShouldShow">HSV thresholds are too broad; narrow them for better performance</span>
                 <span v-else>stop viewing the color stream for better performance</span>
               </v-chip>
@@ -175,7 +175,7 @@
               slider-color="accent"
             >
               <v-tab
-                v-for="(tab, i) in tabs.filter(it => it.name !== '3D' || $store.getters.currentPipelineSettings.solvePNPEnabled)"
+                v-for="(tab, i) in tabs"
                 :key="i"
               >
                 {{ tab.name }}
@@ -262,6 +262,7 @@ import ContoursTab from './PipelineViews/ContoursTab';
 import OutputTab from './PipelineViews/OutputTab';
 import TargetsTab from "./PipelineViews/TargetsTab";
 import PnPTab from './PipelineViews/PnPTab';
+import AprilTagTab from './PipelineViews/AprilTagTab';
 
 export default {
     name: 'Pipeline',
@@ -274,6 +275,7 @@ export default {
         OutputTab,
         TargetsTab,
         PnPTab,
+        AprilTagTab,
     },
     data() {
         return {
@@ -308,6 +310,10 @@ export default {
                         name: "Contours",
                         component: "ContoursTab",
                     },
+                    apriltag: {
+                        name: "AprilTag",
+                        component: "AprilTagTab",
+                    },
                     output: {
                         name: "Output",
                         component: "OutputTab",
@@ -322,6 +328,11 @@ export default {
                     }
                 };
 
+                // If not in 3d, name "3D" is illegal
+                const allow3d = this.$store.getters.currentPipelineSettings.solvePNPEnabled;
+                // If in apriltag, "Threshold" and "Contours" are illegal -- otherwise "AprilTag" is
+                const isAprilTag = (this.$store.getters.currentPipelineSettings.pipelineType - 2) === 2;
+
                 // 2D array of tab names and component names; each sub-array is a separate tab group
                 let ret = [];
                 if (this.$vuetify.breakpoint.smAndDown || this.$store.getters.isDriverMode || (this.$vuetify.breakpoint.mdAndDown && !this.$store.state.compactMode)) {
@@ -329,22 +340,36 @@ export default {
                     ret[0] = Object.values(tabs);
                 } else if (this.$vuetify.breakpoint.mdAndDown || !this.$store.state.compactMode) {
                     // Two tab groups, one with "input, threshold, contours, output" and the other with "target info, 3D"
-                    ret[0] = [tabs.input, tabs.threshold, tabs.contours, tabs.output];
+                    ret[0] = [tabs.input, tabs.threshold, tabs.contours, tabs.apriltag, tabs.output];
                     ret[1] = [tabs.targets, tabs.pnp];
                 } else if (this.$vuetify.breakpoint.lgAndDown) {
                     // Three tab groups, one with "input", one with "threshold, contours, output", and the other with "target info, 3D"
                     ret[0] = [tabs.input];
-                    ret[1] = [tabs.threshold, tabs.contours, tabs.output];
+                    ret[1] = [tabs.threshold, tabs.contours, tabs.apriltag, tabs.output];
                     ret[2] = [tabs.targets, tabs.pnp];
                 } else if (this.$vuetify.breakpoint.xl) {
                     // Three tab groups, one with "input", one with "threshold, contours", and the other with "output, target info, 3D"
                     ret[0] = [tabs.input];
                     ret[1] = [tabs.threshold];
-                    ret[2] = [tabs.contours, tabs.output];
+                    ret[2] = [tabs.contours, tabs.apriltag, tabs.output];
                     ret[3] = [tabs.targets, tabs.pnp];
                 }
 
-                return ret;
+                for(let i = 0; i < ret.length; i++) {
+                  const group = ret[i];
+
+                  // All the tabs we allow
+                  const filteredGroup = group.filter(it =>
+                          !(!allow3d && it.name === "3D")
+                       && !(isAprilTag && (it.name === "Threshold"))
+                       && !(isAprilTag && (it.name === "Contours"))
+                       && !(!isAprilTag && it.name === "AprilTag")
+                      );
+                  ret[i] = filteredGroup;
+                }
+
+                // One last filter to remove empty lists
+                return ret.filter(it => it !== undefined && it.length > 0);
             }
         },
         processingMode: {

photon-client/src/views/PipelineViews/AprilTagTab.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <v-select
+      v-model="selectedFamily"
+      dark
+      color="accent"
+      item-color="secondary"
+      label="Select target family"
+      :items="familyList"
+      @input="handlePipelineUpdate('tagFamily', targetList.indexOf(selectedModel))"
+    />
+    <CVslider
+      v-model="decimate"
+      class="pt-2"
+      slider-cols="12"
+      name="Decimate"
+      min="0"
+      max="3"
+      step=".01"
+      @input="handlePipelineData('decimate')"
+    />
+    <CVslider
+      v-model="blur"
+      class="pt-2"
+      slider-cols="12"
+      name="Blur"
+      min="0"
+      max="5"
+      step=".01"
+      @input="handlePipelineData('blur')"
+    />
+    <CVslider
+      v-model="threads"
+      class="pt-2"
+      slider-cols="12"
+      name="Threads"
+      min="1"
+      max="8"
+      step="1"
+      @input="handlePipelineData('threads')"
+    />
+    <CVswitch
+      v-model="refineEdges"
+      class="pt-2"
+      slider-cols="12"
+      name="Refine Edges"
+      @input="handlePipelineData('refineEdges')"
+    />
+  </div>
+</template>
+
+<script>
+    import CVslider from '../../components/common/cv-slider'
+    import CVswitch from '../../components/common/cv-switch'
+
+    export default {
+        name: "AprilTag",
+        components: {
+          CVslider,
+          CVswitch,
+        },
+        data() {
+            return {
+              familyList: ["tag36h11"],
+            }
+        },
+        computed: {
+          selectedFamily: {
+            get() {
+                let ret = this.$store.getters.currentPipelineSettings.tagFamily
+                return this.familyList[ret];
+            },
+            set(val) {
+                this.$store.commit("mutatePipeline", {"tagFamily": this.familyList.indexOf(val)})
+            }
+          },
+          decimate: {
+            get() {
+                return this.$store.getters.currentPipelineSettings.decimate
+            },
+            set(val) {
+                this.$store.commit("mutatePipeline", {"decimate": val});
+            }
+          },
+          blur: {
+            get() {
+                return this.$store.getters.currentPipelineSettings.blur
+            },
+            set(val) {
+                this.$store.commit("mutatePipeline", {"blur": val});
+            }
+          },
+          threads: {
+            get() {
+                return this.$store.getters.currentPipelineSettings.threads
+            },
+            set(val) {
+                this.$store.commit("mutatePipeline", {"threads": val});
+            }
+          },
+          refineEdges: {
+            get() {
+                return this.$store.getters.currentPipelineSettings.refineEdges
+            },
+            set(val) {
+                this.$store.commit("mutatePipeline", {"refineEdges": val});
+            }
+          },
+        },
+        methods: {
+        }
+    }
+</script>

photon-client/src/views/PipelineViews/InputTab.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <CVslider
+      v-if="cameraExposure !== -1"
       v-model="cameraExposure"
       name="Exposure"
       min="0"

photon-client/src/views/PipelineViews/TargetsTab.vue

@@ -18,29 +18,43 @@
               <th class="text-center">
                 Target
               </th>
+              <th class="text-center" v-if="$store.getters.pipelineType === 4">
+                Fiducial ID
+              </th>
               <template v-if="!$store.getters.currentPipelineSettings.solvePNPEnabled">
                 <th class="text-center">
-                  Pitch
+                  Pitch,&nbsp;&deg;
                 </th>
                 <th class="text-center">
-                  Yaw
+                  Yaw,&nbsp;&deg;
                 </th>
                 <th class="text-center">
-                  Skew
+                  Skew,&nbsp;&deg;
+                </th>
+                <th class="text-center">
+                  Area, %
                 </th>
               </template>
-              <th class="text-center">
-                Area
-              </th>
-              <template v-if="$store.getters.currentPipelineSettings.solvePNPEnabled">
+              <template v-else-if="$store.getters.pipelineType === 4 && $store.getters.currentPipelineSettings.solvePNPEnabled">
                 <th class="text-center">
-                  X
+                  X,&nbsp;m
                 </th>
                 <th class="text-center">
-                  Y
+                  Y,&nbsp;m
                 </th>
                 <th class="text-center">
-                  Angle
+                  Z Angle,&nbsp;&deg;
+                </th>
+              </template>
+              <template v-else-if="$store.getters.currentPipelineSettings.solvePNPEnabled">
+                <th class="text-center">
+                  X,&nbsp;m
+                </th>
+                <th class="text-center">
+                  Y,&nbsp;m
+                </th>
+                <th class="text-center">
+                  Z Angle,&nbsp;&deg;
                 </th>
               </template>
             </tr>
@@ -51,17 +65,25 @@
               :key="index"
             >
               <td>{{ index }}</td>
+              <td v-if="$store.getters.pipelineType === 4">
+                {{ parseInt(value.fiducialId) }}
+              </td>
               <template v-if="!$store.getters.currentPipelineSettings.solvePNPEnabled">
                 <td>{{ parseFloat(value.pitch).toFixed(2) }}</td>
                 <td>{{ parseFloat(value.yaw).toFixed(2) }}</td>
                 <td>{{ parseFloat(value.skew).toFixed(2) }}</td>
+                <td>{{ parseFloat(value.area).toFixed(2) }}</td>
               </template>
-              <td>{{ parseFloat(value.area).toFixed(2) }}</td>
-              <template v-if="$store.getters.currentPipelineSettings.solvePNPEnabled">
-                <!-- TODO: Make sure that units are correct -->
+              <template v-else-if="$store.getters.currentPipelineSettings.solvePNPEnabled && $store.getters.pipelineType === 4">
+                <td>{{ parseInt(value.fiducialId) }} </td>
                 <td>{{ parseFloat(value.pose.x).toFixed(2) }}&nbsp;m</td>
                 <td>{{ parseFloat(value.pose.y).toFixed(2) }}&nbsp;m</td>
-                <td>{{ parseFloat(value.pose.rot).toFixed(2) }}&deg;</td>
+                <td>{{ (parseFloat(value.pose.angle_z) * 180 / Math.PI).toFixed(2) }}&deg;</td>
+              </template>
+              <template v-else-if="$store.getters.currentPipelineSettings.solvePNPEnabled">
+                <td>{{ parseFloat(value.pose.x).toFixed(2) }}&nbsp;m</td>
+                <td>{{ parseFloat(value.pose.y).toFixed(2) }}&nbsp;m</td>
+                <td>{{ (parseFloat(value.pose.angle_z) * 180 / Math.PI).toFixed(2) }}&deg;</td>
               </template>
             </tr>
           </tbody>