Calculate and Report FOV from Calibration Coefficients (#486)

photon-client/package-lock.json

@@ -19,8 +19,7 @@
         "three-full": "^28.0.2",
         "vue": "^2.6.12",
         "vue-axios": "^2.1.5",
-        "vue-native-websocket": "git+https://github.com/PhotonVision/vue-native-websocket.git#5189f29",
-        "vue-router": "^3.4.3",
+        "vue-native-websocket": "git+https://github.com/PhotonVision/vue-native-websocket.git#5189f29",        "vue-router": "^3.4.3",
         "vuetify": "^2.3.10",
         "vuex": "^3.5.1"
       },
@@ -25271,8 +25270,7 @@
     },
     "vue-native-websocket": {
       "version": "git+ssh://git@github.com/PhotonVision/vue-native-websocket.git#7a327918e03b215b6899b0d648c5130ece1fa912",
-      "from": "vue-native-websocket@git+https://github.com/PhotonVision/vue-native-websocket.git#7a32791"
-    },
+      "from": "vue-native-websocket@git+https://github.com/PhotonVision/vue-native-websocket.git#7a32791"    },
     "vue-router": {
       "version": "3.4.3"
     },

photon-client/src/components/pipeline/3D/MiniMap.vue

@@ -1,11 +1,14 @@
 <template>
-  <div id="MapContainer" style="flex-grow:1">
+  <div
+    id="MapContainer"
+    style="flex-grow:1"
+  >
     <v-row>
       <v-col
         align="center"
         cols="12"
       >
-        <span class="white--text" >Target Location</span>
+        <span class="white--text">Target Location</span>
       </v-col>
     </v-row>
     <v-row>
@@ -14,7 +17,10 @@
         cols="12"
         align-self="stretch"
       >
-        <canvas id="canvasId" style="width:100%;height:100%"/>
+        <canvas
+          id="canvasId"
+          style="width:100%;height:100%"
+        />
       </v-col>
     </v-row>
   </div>
@@ -59,71 +65,6 @@ export default {
       }
     },
   },
-  methods: {
-    drawTargets() {
-      this.scene.remove(...this.cubes)
-      this.cubes = []
-
-      for (const target of this.targets) {
-        const geometry = new BoxGeometry(0.2, 0.2, 0.3 / 5);
-        const material = new MeshNormalMaterial();
-        let quat = (new Quaternion(
-            target.pose.qx,
-            target.pose.qy,
-            target.pose.qz,
-            target.pose.qw,
-        ))
-        const cube = new Mesh(geometry, material);
-        cube.position.set(target.pose.x, target.pose.y, target.pose.z)
-        cube.rotation.setFromQuaternion(quat);
-        this.cubes.push(cube)
-
-        let arrow = (new ArrowHelper(new Vector3(1, 0, 0).normalize(), new Vector3(0, 0, 0),
-            1, // length
-            0xff0000,
-            0.1,
-            0.1,
-        ));
-        arrow.rotation.setFromQuaternion(quat)
-        arrow.rotateZ(-Math.PI / 2)
-        arrow.position.set(target.pose.x, target.pose.y, target.pose.z)
-        this.cubes.push(arrow);
-
-        arrow = (new ArrowHelper(new Vector3(1, 0, 0).normalize(), new Vector3(0, 0, 0),
-            1, // length
-            0x00ff00,
-            0.1,
-            0.1,
-        ));
-        arrow.rotation.setFromQuaternion(quat)
-        // arrow.rotateX(Math.PI / 2)
-        arrow.position.set(target.pose.x, target.pose.y, target.pose.z)
-        this.cubes.push(arrow);
-        arrow = (new ArrowHelper(new Vector3(1, 0, 0).normalize(), new Vector3(0, 0, 0),
-            1, // length
-            0x0000ff,
-            0.1,
-            0.1,
-        ));
-        arrow.setRotationFromQuaternion(quat)
-        arrow.rotateX(Math.PI / 2)
-        arrow.position.set(target.pose.x, target.pose.y, target.pose.z)
-        this.cubes.push(arrow);
-      }
-      if(this.cubes.length > 0)
-        this.scene.add(...this.cubes);
-    },
-    onWindowResize() {
-      var container = document.getElementById("MapContainer")
-      if(container){
-        this.canvas.width = container.clientWidth * 0.95;
-        this.canvas.height = container.clientWidth * 0.85;
-        this.camera.aspect = this.canvas.width / this.canvas.height;
-        this.camera.updateProjectionMatrix();
-        this.renderer.setSize( this.canvas.width, this.canvas.height );
-      }
-    },
-  },
 
   mounted() {
     const scene = new Scene();
@@ -189,6 +130,71 @@ export default {
     this.drawTargets()
 
     animate();
+  },
+  methods: {
+    drawTargets() {
+      this.scene.remove(...this.cubes)
+      this.cubes = []
+
+      for (const target of this.targets) {
+        const geometry = new BoxGeometry(0.2, 0.2, 0.3 / 5);
+        const material = new MeshNormalMaterial();
+        let quat = (new Quaternion(
+            target.pose.qx,
+            target.pose.qy,
+            target.pose.qz,
+            target.pose.qw,
+        ))
+        const cube = new Mesh(geometry, material);
+        cube.position.set(target.pose.x, target.pose.y, target.pose.z)
+        cube.rotation.setFromQuaternion(quat);
+        this.cubes.push(cube)
+
+        let arrow = (new ArrowHelper(new Vector3(1, 0, 0).normalize(), new Vector3(0, 0, 0),
+            1, // length
+            0xff0000,
+            0.1,
+            0.1,
+        ));
+        arrow.rotation.setFromQuaternion(quat)
+        arrow.rotateZ(-Math.PI / 2)
+        arrow.position.set(target.pose.x, target.pose.y, target.pose.z)
+        this.cubes.push(arrow);
+
+        arrow = (new ArrowHelper(new Vector3(1, 0, 0).normalize(), new Vector3(0, 0, 0),
+            1, // length
+            0x00ff00,
+            0.1,
+            0.1,
+        ));
+        arrow.rotation.setFromQuaternion(quat)
+        // arrow.rotateX(Math.PI / 2)
+        arrow.position.set(target.pose.x, target.pose.y, target.pose.z)
+        this.cubes.push(arrow);
+        arrow = (new ArrowHelper(new Vector3(1, 0, 0).normalize(), new Vector3(0, 0, 0),
+            1, // length
+            0x0000ff,
+            0.1,
+            0.1,
+        ));
+        arrow.setRotationFromQuaternion(quat)
+        arrow.rotateX(Math.PI / 2)
+        arrow.position.set(target.pose.x, target.pose.y, target.pose.z)
+        this.cubes.push(arrow);
+      }
+      if(this.cubes.length > 0)
+        this.scene.add(...this.cubes);
+    },
+    onWindowResize() {
+      var container = document.getElementById("MapContainer")
+      if(container){
+        this.canvas.width = container.clientWidth * 0.95;
+        this.canvas.height = container.clientWidth * 0.85;
+        this.camera.aspect = this.canvas.width / this.canvas.height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize( this.canvas.width, this.canvas.height );
+      }
+    },
   }
 
 

photon-client/src/views/CamerasView.vue

@@ -146,6 +146,24 @@
                             text="Standard Deviation"
                           />
                         </th>
+                        <th class="text-center">
+                          <tooltipped-label
+                            tooltip="Estimated Horizontal FOV, in degrees"
+                            text="Horizontal FOV"
+                          />
+                        </th>
+                        <th class="text-center">
+                          <tooltipped-label
+                            tooltip="Estimated Vertical FOV, in degrees"
+                            text="Vertical FOV"
+                          />
+                        </th>
+                        <th class="text-center">
+                          <tooltipped-label
+                            tooltip="Estimated Diagonal FOV, in degrees"
+                            text="Diagonal FOV"
+                          />
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
@@ -158,6 +176,9 @@
                           {{ isCalibrated(value) ? value.mean.toFixed(2) + "px" : "—" }}
                         </td>
                         <td> {{ isCalibrated(value) ? value.standardDeviation.toFixed(2) + "px" : "—" }} </td>
+                        <td> {{ isCalibrated(value) ? value.horizontalFOV.toFixed(2) + "°" : "—" }} </td>
+                        <td> {{ isCalibrated(value) ? value.verticalFOV.toFixed(2) + "°" : "—" }} </td>
+                        <td> {{ isCalibrated(value) ? value.diagonalFOV.toFixed(2) + "°" : "—" }} </td>
                       </tr>
                     </tbody>
                   </v-simple-table>
@@ -396,6 +417,9 @@ export default {
                         if (calib != null) {
                             it['standardDeviation'] = calib.standardDeviation;
                             it['mean'] = calib.perViewErrors.reduce((a, b) => a + b) / calib.perViewErrors.length;
+                            it['horizontalFOV'] = 2 * Math.atan2(it.width/2,calib.intrinsics[0]) * (180/Math.PI);
+                            it['verticalFOV'] = 2 * Math.atan2(it.height/2,calib.intrinsics[4]) * (180/Math.PI);
+                            it['diagonalFOV'] = 2 * Math.atan2(Math.sqrt(it.width**2 + (it.height/(calib.intrinsics[4]/calib.intrinsics[0]))**2)/2,calib.intrinsics[0]) * (180/Math.PI);
                         }
                         filtered.push(it);
                     }

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

@@ -19,12 +19,12 @@
       @input="handlePipelineData('contourRatio')"
     />
     <CVselect
-        v-model="contourTargetOrientation"
-        name="Target Orientation"
-        tooltip="Used to determine how to calculate target landmarks, as well as aspect ratio"
-        :list="['Portrait', 'Landscape']"
-        @input="handlePipelineData('contourTargetOrientation')"
-        @rollback="e=> rollback('contourTargetOrientation', e)"
+      v-model="contourTargetOrientation"
+      name="Target Orientation"
+      tooltip="Used to determine how to calculate target landmarks, as well as aspect ratio"
+      :list="['Portrait', 'Landscape']"
+      @input="handlePipelineData('contourTargetOrientation')"
+      @rollback="e=> rollback('contourTargetOrientation', e)"
     />
     <CVrangeSlider
       v-if="currentPipelineType() !== 3"

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

@@ -18,7 +18,10 @@
               <th class="text-center">
                 Target
               </th>
-              <th class="text-center" v-if="$store.getters.pipelineType === 4">
+              <th
+                v-if="$store.getters.pipelineType === 4"
+                class="text-center"
+              >
                 Fiducial ID
               </th>
               <template v-if="!$store.getters.currentPipelineSettings.solvePNPEnabled">