feat: Add pose stats display to arena-camera

Enable from same Toggle Stats as AFRAME stats
Resolves #213

index.html

@@ -195,6 +195,7 @@ <h3><img alt="CONIX Logo" class="title-logo" src="static/images/xr-logo-v7.png"/
     <div id="error-block" class="error-block"></div>
 </div>
 <span class="echo-name" id="echo-name"></span>
+<span class="pose-stats" id="pose-stats"></span>
 <video autoplay="1" crossorigin="anonymous" id="cornerVideo" muted="true" playsinline="1" volume="0"></video>
 
 <!-- login auth check with calls to mqtt connect placed in an `onauth` event listener -->

src/components/arena-camera.js

@@ -33,6 +33,7 @@ AFRAME.registerComponent('arena-camera', {
         position: {type: 'vec3', default: new THREE.Vector3()},
         vioRotation: {type: 'vec4', default: new THREE.Quaternion()},
         vioPosition: {type: 'vec3', default: new THREE.Vector3()},
+        showStats: {type: 'boolean', default: false},
     },
     /**
      * Send initial camera create message; Setup heartbeat timer
@@ -73,6 +74,10 @@ AFRAME.registerComponent('arena-camera', {
                 }, 1000);
             }
         });
+
+        if (this.data.showStats) {
+            document.getElementById('pose-stats').style.display = 'block';
+        }
     },
     /**
      * Publish user camera pose
@@ -162,6 +167,9 @@ AFRAME.registerComponent('arena-camera', {
      */
     update(oldData) {
         const data = this.data;
+        if (oldData.showStats !== data.showStats) {
+            document.getElementById('pose-stats').style.display = (data.showStats) ? 'block' : 'none';
+        }
     },
     /**
      * Every tick, update rotation and position of the camera
@@ -211,6 +219,10 @@ AFRAME.registerComponent('arena-camera', {
                 this.frustMatrix.multiplyMatrices(cam.projectionMatrix, cam.matrixWorldInverse),
             );
             this.publishPose();
+            if (this.data.showStats) {
+                document.getElementById('pose-stats').textContent =
+                    `Position: ${positionCoords}\r\nRotation: ${rotationCoords}`;
+            }
         }
         if (data.vioEnabled) this.publishVio(); // publish vio on every tick (if enabled)
         this.lastPose = newPose;

src/icons/index.js

@@ -410,6 +410,9 @@ export class SideMenu {
             const sceneEl = document.querySelector('a-scene');
             const statsEl = sceneEl.getAttribute('stats');
             sceneEl.setAttribute('stats', !statsEl);
+            const cam = document.getElementById('my-camera');
+            const showStats = cam.getAttribute('arena-camera').showStats;
+            cam.setAttribute('arena-camera', {showStats: !showStats});
         };
         formDiv.appendChild(stats);
 

src/icons/style.css

@@ -109,6 +109,22 @@
     color: #fff;
 }
 
+/* Pose data of camera */
+.pose-stats {
+    position: absolute;
+    display: none;
+    padding: 7px;
+    top: 285px;
+    left: 25px;
+    border-radius: 10px;
+    z-index: 10000; /* layered over video*/
+    font-size: small;
+    background-color: #333;
+    color: #fafafa;
+    white-space: pre;
+    opacity: .85;
+}
+
 /* Health-check system */
 .error-icon {
     position: absolute;