Merge pull request #13 from llamerada-jp/disable-xr-ui

disable UI when XR view
llamerada-jp · Feb 3, 2024 · e933b70 · e933b70
2 parents 882fae8 + f0e2b2a
commit e933b70
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 12 deletions.
diff --git a/dist/style.css b/dist/style.css
@@ -1,12 +1,14 @@
 #mainView {
-    height: 100%;
+  height: 100%;
+  width: 100%;
 }
 
 html,
 body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 a#subMenuButton:after {

diff --git a/src/main.ts b/src/main.ts
@@ -226,8 +226,11 @@ function startXR(connectInfo: CM.ConnectInfo): void {
   UI_INFO.show();
 
   UI_XR.init(frontendMpx, position);
-  let menuEl = document.getElementById("menu") as HTMLDivElement;
-  menuEl.classList.remove("d-none");
+  /*
+    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");
+  */
 }
 
 async function terminate(): Promise<void> {

diff --git a/src/ui/init_settings.ts b/src/ui/init_settings.ts
@@ -171,13 +171,17 @@ 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)];
@@ -220,8 +224,16 @@ export function hide(): void {
 }
 
 function updateInputs(): void {
-  let submitButton = document.getElementById(submitButtonID) as HTMLButtonElement;
+  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;
   } else {
@@ -230,8 +242,13 @@ function updateInputs(): void {
 }
 
 function validateInputs(): boolean {
-  let deviceNameInput = document.getElementById(deviceNameInputID) as HTMLInputElement;
+  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;
   }

diff --git a/src/ui/settings.ts b/src/ui/settings.ts
@@ -74,7 +74,7 @@ function loadSettings(): void {
   let viewTypeEl = document.getElementById(viewTypeElID) as HTMLSelectElement;
   switch (localSettings.viewType) {
     case DEF.VIEW_TYPE_LANDSCAPE:
-      viewTypeEl!.innerText = "landscape";
+      viewTypeEl!.innerText = "Landscape";
       break;
 
     case DEF.VIEW_TYPE_XR:

diff --git a/templates/main.html b/templates/main.html
@@ -66,13 +66,15 @@ <h6 class="display-6 my-4">Initial settings</h6>
           </div>
           <div class="col-md-6 col-12">
             <select class="form-select" id="initSettingsViewType">
-              <option value="landscape" selected>landscape</option>
-              <option value="xr">XR</option>
+              <option value="landscape" selected>Landscape</option>
+              <option value="xr">XR (No UI)</option>
             </select>
           </div>
         </div>
         <div class="form-text">
-          View type is used to adjust UI behavior and object size.
+          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.
         </div>
       </li>