enable UI for XR

dist/style.css

@@ -5,8 +5,12 @@
 
 html,
 body {
-  height: 100%;
-  width: 100%;
+  /* 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;
 }

src/main.ts

@@ -28,6 +28,7 @@ import * as UI_MI from "./ui/migrate";
 import * as UI_PL from "./ui/proc_list";
 import * as UI_SE from "./ui/settings";
 import * as UI_XR from "./ui/xr";
+import * as Util from "./ui/util";
 
 declare function ColonioModule(): Promise<any>;
 
@@ -138,6 +139,9 @@ async function connect(): Promise<void> {
     command.disconnect();
   });
 
+  // show loading spinner
+  document.getElementById("loadingModalOpen")!.dispatchEvent(new Event("click"));
+
   try {
     let connectInfo = await command.connect(
       location.protocol + "//" + location.host + "/seed",
@@ -158,30 +162,38 @@ async function connect(): Promise<void> {
     // publish node info
     await command.setPublicity(10.0);
 
-    start(connectInfo);
+    await start(connectInfo);
+
+    // hide loading spinner
+    // The timeout is used because the modal will not close
+    // if the time between showing the modal and closing is too short.
+    setTimeout(() => {
+      Util.closeModal("loadingModalClose");
+    }, 1000);
 
   } catch (error) {
     console.error(error);
     initializeSettings(true);
   }
 }
 
-function start(connectInfo: CM.ConnectInfo): void {
+function start(connectInfo: CM.ConnectInfo): Promise<void> {
   switch (localSettings.viewType) {
     case "landscape":
-      startLandscape(connectInfo);
-      break;
+      return startLandscape(connectInfo);
 
     case "xr":
       startXR(connectInfo);
-      break;
+      return new Promise<void>((resolve) => {
+        resolve();
+      });
 
     default:
       throw new Error("Unknown view type: " + localSettings.viewType);
   }
 }
 
-function startLandscape(connectInfo: CM.ConnectInfo): void {
+function startLandscape(connectInfo: CM.ConnectInfo): Promise<void> {
   UI_AL.init(command);
   UI_MI.init(command);
   UI_PL.init(command, localSettings, connectInfo.nodeID);
@@ -199,16 +211,21 @@ function startLandscape(connectInfo: CM.ConnectInfo): void {
   });
   UI_INFO.init(localSettings, position);
 
-  UI_MAP.init(frontendMpx, position, () => {
-    // show
-    UI_INFO.show();
-    UI_MAP.show();
-    let menuEl = document.getElementById("menu") as HTMLDivElement;
-    menuEl.classList.remove("d-none");
+  return new Promise<void>((resolve) => {
+    UI_MAP.init(frontendMpx, position, () => {
+      // show
+      UI_INFO.show();
+      UI_MAP.show();
+      let menuEl = document.getElementById("menu") as HTMLDivElement;
+      menuEl.classList.remove("d-none");
+      resolve();
+    });
   });
 }
 
 function startXR(connectInfo: CM.ConnectInfo): void {
+  UI_XR.init(frontendMpx, position);
+
   UI_AL.init(command);
   UI_MI.init(command);
   UI_PL.init(command, localSettings, connectInfo.nodeID);
@@ -225,12 +242,8 @@ function startXR(connectInfo: CM.ConnectInfo): void {
   UI_INFO.init(localSettings, position);
   UI_INFO.show();
 
-  UI_XR.init(frontendMpx, position);
-  /*
-    TODO: MDB UI does not display correctly when XR is enabled. It seems that it requires special handling.
-    let menuEl = document.getElementById("menu") as HTMLDivElement;
-    menuEl.classList.remove("d-none");
-  */
+  let menuEl = document.getElementById("menu") as HTMLDivElement;
+  menuEl.classList.remove("d-none");
 }
 
 async function terminate(): Promise<void> {

src/ui/init_settings.ts

@@ -171,17 +171,13 @@ export function init(ls: LS.LocalSettings, submit: () => void): void {
 function initElements(): void {
   let deviceNameGenButton = document.getElementById(deviceNameGenButtonID);
   let deviceNameInput = document.getElementById(deviceNameInputID) as HTMLInputElement;
-  let viewTypeInput = document.getElementById(viewTypeInputID) as HTMLSelectElement;
   let syncGNSSInput = document.getElementById(syncGNSSInputID) as HTMLInputElement;
   let spawnPositionInput = document.getElementById(spawnPositionInputID) as HTMLInputElement;
   let submitButton = document.getElementById(submitButtonID) as HTMLButtonElement;
 
   deviceNameInput?.addEventListener("change", () => {
     updateInputs();
   });
-  viewTypeInput?.addEventListener("change", () => {
-    updateInputs();
-  });
 
   deviceNameGenButton?.addEventListener("click", () => {
     deviceNameInput!.value = DummyNames[Math.floor(Math.random() * DummyNames.length)];
@@ -224,15 +220,6 @@ export function hide(): void {
 }
 
 function updateInputs(): void {
-  let viewTypeInput = document.getElementById(viewTypeInputID) as HTMLSelectElement;
-  let localStoreInput = document.getElementById(localStoreInputID) as HTMLInputElement;
-  if (viewTypeInput!.value === "xr") {
-    localStoreInput!.disabled = true;
-    localStoreInput!.checked = false;
-  } else {
-    localStoreInput!.disabled = false;
-  }
-
   let submitButton = document.getElementById(submitButtonID) as HTMLButtonElement;
   if (validateInputs()) {
     submitButton!.disabled = false;
@@ -242,12 +229,6 @@ function updateInputs(): void {
 }
 
 function validateInputs(): boolean {
-  let viewTypeInput = document.getElementById(viewTypeInputID) as HTMLSelectElement;
-  let localStoreInput = document.getElementById(localStoreInputID) as HTMLInputElement;
-  if (viewTypeInput!.value === "xr" && localStoreInput!.checked) {
-    return false;
-  }
-
   let deviceNameInput = document.getElementById(deviceNameInputID) as HTMLInputElement;
   if (deviceNameInput!.value.length === 0) {
     return false;

src/ui/xr.ts

@@ -26,6 +26,7 @@ let xrView: XrView;
 
 export function init(frontendMpx: CL.MultiPlexer, pos: POS.Position): void {
   xrView = new XrView(pos);
+  document.body.style.overflow = "hidden";
   initHandler(frontendMpx);
 }
 
@@ -54,7 +55,13 @@ class XrView {
     viewEl!.classList.remove("d-none");
 
     this.scene = document.createElement("a-scene") as AFRAME.Scene;
-    this.scene.setAttribute("arjs", "trackingMethod: best; sourceType: webcam;debugUIEnabled: false;");
+    /* Added sourceWidth and sourceHeight parameter 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. */
+    let sourceWidth = window.innerWidth;
+    let sourceHeight = window.innerHeight;
+    this.scene.setAttribute("arjs", `trackingMethod: best; sourceType: webcam; debugUIEnabled: false; sourceWidth: ${sourceWidth}; sourceHeight: ${sourceHeight};`);
     this.scene.setAttribute("embedded", "");
     this.scene.setAttribute("renderer", "logarithmicDepthBuffer: true;");
     this.scene.setAttribute("vr-mode-ui", "enabled: false;");

templates/main.html

@@ -67,14 +67,13 @@ <h6 class="display-6 my-4">Initial settings</h6>
           <div class="col-md-6 col-12">
             <select class="form-select" id="initSettingsViewType">
               <option value="landscape" selected>Landscape</option>
-              <option value="xr">XR (No UI)</option>
+              <option value="xr">XR</option>
             </select>
           </div>
         </div>
         <div class="form-text">
-          Landscape is a look-down view that has a UI and allows you to control the state of the application.
-          XR is a view that uses AR/VR functionality; XR view has no UI implemented, so you must exit the browser to log
-          out.
+          Landscape mode is a view of a map looking down on the surrounding applications. If the device is supported
+          AR/XR, the application is projected onto the real world in XR mode.
         </div>
       </li>
 
@@ -561,7 +560,7 @@ <h6 class="fw-bold nodeName"></h6>
     around</button>
   <div class="modal fade" id="checkSeed" data-mdb-backdrop="static" data-mdb-keyboard="false" tabindex="-1"
     aria-labelledby="checkSeedLabel" aria-hidden="true">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="checkSeedLabel">Please reload your browser</h5>
@@ -576,6 +575,25 @@ <h5 class="modal-title" id="checkSeedLabel">Please reload your browser</h5>
     </div>
   </div>
 
+  <!-- Loading spinner -->
+  <button type="button" class="d-none" id="loadingModalOpen" data-mdb-toggle="modal"
+    data-mdb-target="#loadingModal"></button>
+  <div class="modal fade" id="loadingModal" data-mdb-backdrop="static" data-mdb-keyboard="false" tabindex="-1"
+    aria-hidden="true">
+    <div class="modal-dialog modal-sm modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-body">
+          <div class="d-flex justify-content-center">
+            <div class="spinner-border me-2" role="status"></div>
+            <div class=" align-self-center">Connecting to the network...</div>
+            <button type="button" class="d-none" id="loadingModalClose" data-mdb-dismiss="modal"
+              aria-label="Close">_</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
 
   <div id="mainView" class="d-none">
   </div>