Skip to content

Commit

Permalink
Merge pull request #14 from llamerada-jp/show-ui-xr
Browse files Browse the repository at this point in the history 
enable UI for XR
  • Loading branch information
@llamerada-jp
llamerada-jp committed Feb 4, 2024
2 parents e933b70 + 8968dfd commit aec8340
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 45 deletions.
8 changes: 6 additions & 2 deletions dist/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
49 changes: 31 additions & 18 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>;

Expand Down Expand Up @@ -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",
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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> {
Expand Down
19 changes: 0 additions & 19 deletions src/ui/init_settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)];
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
9 changes: 8 additions & 1 deletion src/ui/xr.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down Expand Up @@ -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;");
Expand Down
28 changes: 23 additions & 5 deletions templates/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit aec8340

Please sign in to comment.