Merge pull request #15 from llamerada-jp/show-ui-xr-2

fix xr ui for real phones

dist/style.css

@@ -1,20 +1,33 @@
-#mainView {
+html {
   height: 100%;
   width: 100%;
 }
 
-html,
 body {
   /* Added 'important' flag to suppress body size rewriting by AR.js.
    * This change makes the MDB UI display correctly, but the size of
    * the video element has changed from the original AR.js created.
    * Therefore, the size of the AR space may not be correct. */
   height: 100%!important;
   width: 100%!important;
-  margin: 0;
-  padding: 0;
+  margin: 0!important;
+  padding: 0!important;
+  position: absolute;
+}
+
+#mainView {
+  height: 100%;
+  width: 100%;
 }
 
 a#subMenuButton:after {
   content: none;
-}
+}
+
+.navbar,
+.modal,
+.modal-backdrop,
+#deviceInfo {
+  padding: 0!important;
+  position: absolute;
+}

src/ui/xr.ts

@@ -59,9 +59,9 @@ class XrView {
      * This change makes the MDB UI display correctly, but the size of the video element has
      * changed from the original AR.js created.
      * Therefore, the size of the AR space may not be correct. */
-    let sourceWidth = window.innerWidth;
-    let sourceHeight = window.innerHeight;
-    this.scene.setAttribute("arjs", `trackingMethod: best; sourceType: webcam; debugUIEnabled: false; sourceWidth: ${sourceWidth}; sourceHeight: ${sourceHeight};`);
+    let innerWidth = window.innerWidth;
+    let innerHeight = window.innerHeight;
+    this.scene.setAttribute("arjs", `trackingMethod: best; sourceType: webcam; debugUIEnabled: false; displayWidth: ${innerWidth}; displayHeight: ${innerHeight}; sourceWidth: ${innerWidth}; sourceHeight: ${innerHeight};`);
     this.scene.setAttribute("embedded", "");
     this.scene.setAttribute("renderer", "logarithmicDepthBuffer: true;");
     this.scene.setAttribute("vr-mode-ui", "enabled: false;");

templates/main.html

@@ -535,26 +535,6 @@ <h6 class="fw-bold nodeName"></h6>
     </div>
   </div>
 
-  <!-- show node information on top left of the screen -->
-  <div id="deviceInfo" class="position-absolute fixed-top d-none">
-    <div class="container-fluid d-flex flex-row justify-content-end">
-      <div class="d-flex flex-column">
-        <div>
-          <i class="bi-person-circle me-1"></i>
-          <span id="deviceInfoAccount"></span>
-        </div>
-        <div>
-          <i class="bi-laptop me-1"></i>
-          <span id="deviceInfoDeviceName"></span>
-        </div>
-        <div>
-          <i class="bi-pin-map me-1"></i>
-          <span id="deviceInfoPosition"></span>
-        </div>
-      </div>
-    </div>
-  </div>
-
   <!-- Modal to let page reload for user -->
   <button type="button" class="d-none" id="checkSeedButton" data-mdb-toggle="modal" data-mdb-target="#checkSeed">work
     around</button>
@@ -594,6 +574,25 @@ <h5 class="modal-title" id="checkSeedLabel">Please reload your browser</h5>
     </div>
   </div>
 
+  <!-- show node information on top left of the screen -->
+  <div id="deviceInfo" class="fixed-top d-none">
+    <div class="container-fluid d-flex flex-row justify-content-end">
+      <div class="d-flex flex-column">
+        <div>
+          <i class="bi-person-circle me-1"></i>
+          <span id="deviceInfoAccount"></span>
+        </div>
+        <div>
+          <i class="bi-laptop me-1"></i>
+          <span id="deviceInfoDeviceName"></span>
+        </div>
+        <div>
+          <i class="bi-pin-map me-1"></i>
+          <span id="deviceInfoPosition"></span>
+        </div>
+      </div>
+    </div>
+  </div>
 
   <div id="mainView" class="d-none">
   </div>