wip transfer from glitch

index.html

@@ -73,6 +73,48 @@
     </button>
   </div>
 
+  <!-- viewer AR mode start -->
+  <div id="ar-overlay" draggable="false" style="visibility: hidden">
+    <span id="greeting">3DStreet AR Viewer</span>
+    <button id="exit-ar">EXIT AR MODE</button>
+    <span style="display: block">
+      <p>Absolute Compass: <span id="compass">x</span></p>
+      <span>Compass Updates</span>
+      <button id="pause" onclick="window.pauseCompass = true;">
+        STOP
+      </button>
+      <button id="unpause" onclick="window.pauseCompass = false;">
+        START
+      </button>
+    </span>
+    <span style="display: block">
+      <span>Scene Y Rotation</span>
+      <button id="decreaseRotationY" onclick="modifyRotationY(-1);">
+        -1º Yaw
+      </button>
+      <button id="decreaseRotationY" onclick="modifyRotationY(-10);">
+        -10º Yaw
+      </button>
+      <button id="increaseRotationY" onclick="modifyRotationY(1);">
+        +1º Yaw
+      </button>
+      <button id="increaseRotationY" onclick="modifyRotationY(1);">
+        +10º Yaw
+      </button>
+    </span>
+    <span style="display: block">
+      <span>Scene Y Position</span>
+      <button id="decreasePositionY" onclick="modifyPositionY(-0.1);">
+        -10cm Y
+      </button>
+      <button id="increasePositionY" onclick="modifyPositionY(0.1);">
+        +10cm Y
+      </button>
+    </span>
+  </div>
+
+  <div id="play-button" onclick="compassPermission();" class="play-button"></div>
+
   <!-- <div class="right-fixed">
     <ul class="right-menu">
       <li onclick="buttonScreenshotTock()"> <a class="camera" href="#"> <span> Capture image as PNG </span> <img
@@ -171,6 +213,108 @@
     }
   });
 </script>
-<!-- <script src="./dist/3dstreet-editor.js"></script> -->
+<script>
+  function compassPermission() {
+    document.getElementById("ar-overlay").style.visibility = "visible";
+
+    window.initialHeading = 0;
+    window.pauseCompass = false;
+
+    window.modifyRotationY = function (deltaDegrees) {
+      const currentDegrees = document
+        .getElementById("street-container")
+        .getAttribute("rotation").y;
+      const newDegrees = currentDegrees + deltaDegrees;
+      document
+        .getElementById("street-container")
+        .setAttribute("rotation", "y", newDegrees);
+    };
+
+    window.modifyPositionY = function (deltaY) {
+      const currentY = document
+        .getElementById("street-container")
+        .getAttribute("position").y;
+      const newY = currentY + deltaY;
+      document
+        .getElementById("street-container")
+        .setAttribute("position", "y", newY);
+    };
+
+    // compassHeading sould be a value between [0, 360] where 0 is north
+    // (this is absolute relative to the device owner, completely separate from immersive session coordinates)
+    function compassCallback(compassHeading) {
+      if (window.initialHeading === 0) {
+        window.initialHeading =
+          AFRAME.scenes[0].camera.el.getAttribute("rotation").y;
+      }
+
+      let alphaHeading =
+        AFRAME.scenes[0].camera.el.getAttribute("rotation").y -
+        window.initialHeading;
+      let deltaHeading = compassHeading + alphaHeading;
+
+      document.getElementById("compass").textContent =
+        "compassHeading: " + compassHeading.toFixed(2) + "º ";
+
+      if (!window.pauseCompass) {
+        document
+          .getElementById("street-container")
+          .setAttribute("rotation", "0 " + deltaHeading + " 0");
+      }
+    }
+
+    startCompassListener(compassCallback);
+
+    function startCompassListener(callback) {
+      if (!window["DeviceOrientationEvent"]) {
+        console.warn("DeviceOrientation API not available");
+        return;
+      }
+      let absoluteListener = (e) => {
+        if (
+          !e.absolute ||
+          e.alpha == null ||
+          e.beta == null ||
+          e.gamma == null
+        )
+          return;
+        let compass = -(e.alpha + (e.beta * e.gamma) / 90);
+        compass -= Math.floor(compass / 360) * 360; // Wrap into range [0,360].
+        window.removeEventListener("deviceorientation", webkitListener);
+        callback(compass);
+      };
+      let webkitListener = (e) => {
+        let compass = e.webkitCompassHeading;
+        if (compass != null && !isNaN(compass)) {
+          callback(compass);
+          window.removeEventListener(
+            "deviceorientationabsolute",
+            absoluteListener
+          );
+        }
+      };
+
+      function addListeners() {
+        // Add both listeners, and if either succeeds then remove the other one.
+        window.addEventListener(
+          "deviceorientationabsolute",
+          absoluteListener
+        );
+        window.addEventListener("deviceorientation", webkitListener);
+      }
+
+      if (
+        typeof DeviceOrientationEvent["requestPermission"] === "function"
+      ) {
+        DeviceOrientationEvent["requestPermission"]().then((response) => {
+          if (response == "granted") {
+            addListeners();
+          } else
+            console.warn("Permission for DeviceMotionEvent not granted");
+        });
+      } else addListeners();
+    }
+  }
+</script>
 
 </html>

src/viewer-styles.css

@@ -1,6 +1,34 @@
 @import url("notyf.min.css");
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500');
 
+.play-button {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 18vh;
+	height: 18vh;
+	background-color: #000000;
+	border-radius: 50%;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+}
+
+.play-button::before {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-40%, -50%);
+	border-style: solid;
+	border-width: 5vh 0 5vh 8vh;
+	border-color: transparent transparent transparent #aaaaaa;
+}
+
+.play-button:hover {
+	background-color: #333333;
+}
+
 html {
 	font-family: 'Lato', sans-serif;
 }