mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed main menu order and behavior, updated text node handling, refactored logging from console.log.

Browse Source
This commit is contained in:
Michael Mainguy 2024-04-13 11:34:25 -05:00
parent 159e687c19
commit c6e52138b3
11 changed files with 59 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -42,6 +42,7 @@
</script>
<div class="webApp" id="webApp">
</div>
<script src="/src/webApp.ts" type="module"></script>
<script src="/src/vrApp.ts" type="module"></script>

13
public/styles.css
View File

@ -178,7 +178,18 @@ h1 {
}
#enterXR {
display: none;
}
#enterXR.inactive a {
background-color: #222222;
color: #555555;
border-color: #222222;
cursor: not-allowed;
}
#enterXR.inactive {
}
#loadingGrid {

13
src/controllers/left.ts
View File

@ -13,7 +13,7 @@ import log from "loglevel";
import {DiagramManager} from "../diagram/diagramManager";
import {RoundButton} from "../objects/roundButton";
const logger = log.getLogger('Left');
export class Left extends Base {
constructor(controller:
WebXRInputSource, scene: Scene, xr: WebXRDefaultExperience, diagramManager: DiagramManager, controllers: Controllers) {
@ -22,7 +22,7 @@ export class Left extends Base {
if (init.components['xr-standard-thumbstick']) {
init.components['xr-standard-thumbstick']
.onAxisValueChangedObservable.add((value) => {
log.trace('Left', `thumbstick moved ${value.x}, ${value.y}`);
logger.trace(`thumbstick moved ${value.x}, ${value.y}`);
if (!this.controllers.movable) {
this.moveRig(value);
} else {
@ -41,13 +41,10 @@ export class Left extends Base {
this.initYButton(init.components['y-button']);
const buttonhome = new TransformNode('buttons', scene)
//const xbutton = new Button(buttonhome, 'X', 'open edit menu', new Vector2(0,0));
//const ybutton = new Button(buttonhome, 'Y', 'open edit menu', new Vector2(.4,0));
this.initTrigger(init.components['xr-standard-trigger']);
init.components['xr-standard-thumbstick'].onButtonStateChangedObservable.add((value) => {
if (value.pressed) {
log.trace('Left', 'thumbstick changed');
logger.trace('Left', 'thumbstick changed');
this.controllers.controllerObserver.notifyObservers({
type: ControllerEventType.DECREASE_VELOCITY,
value: value.value
@ -64,6 +61,7 @@ export class Left extends Base {
trigger
.onButtonStateChangedObservable
.add((button) => {
logger.trace('trigger pressed');
this.controllers.controllerObserver.notifyObservers({
type: ControllerEventType.TRIGGER,
value: button.value,
@ -75,9 +73,9 @@ export class Left extends Base {
private initXButton(xbutton: WebXRControllerComponent) {
if (xbutton) {
xbutton.onButtonStateChangedObservable.add((button) => {
if (button.pressed) {
logger.trace('X button pressed');
this.controllers.controllerObserver.notifyObservers({
type: ControllerEventType.X_BUTTON,
value: button.value
@ -91,6 +89,7 @@ export class Left extends Base {
if (ybutton) {
ybutton.onButtonStateChangedObservable.add((button) => {
if (button.pressed) {
logger.trace('Y button pressed');
this.controllers.controllerObserver.notifyObservers({
type: ControllerEventType.Y_BUTTON,
value: button.value

12
src/controllers/right.ts
View File

@ -9,10 +9,12 @@ import {
WebXRInputSource
} from "@babylonjs/core";
import {ControllerEventType, Controllers} from "./controllers";
import log from "loglevel";
import {DiagramManager} from "../diagram/diagramManager";
import {RoundButton} from "../objects/roundButton";
import log from "loglevel";
const logger = log.getLogger("Right");
export class Right extends Base {
private startPosition: Vector3 = null;
@ -21,6 +23,7 @@ export class Right extends Base {
if (bbutton) {
bbutton.onButtonStateChangedObservable.add((button) => {
if (button.pressed) {
logger.debug('B Button Pressed');
this.controllers.controllerObserver.notifyObservers({
type: ControllerEventType.B_BUTTON,
value: button.value
@ -62,6 +65,7 @@ export class Right extends Base {
trigger
.onButtonStateChangedObservable
.add((button) => {
logger.debug("right trigger pressed");
this.controllers.controllerObserver.notifyObservers({
type: ControllerEventType.TRIGGER,
value: button.value,
@ -75,7 +79,7 @@ export class Right extends Base {
if (abutton) {
abutton.onButtonStateChangedObservable.add((value) => {
if (value.pressed) {
log.getLogger("right").debug("a-button pressed");
logger.debug('A button pressed');
this.controllers.controllerObserver.notifyObservers({type: ControllerEventType.MENU});
}
});
@ -85,12 +89,12 @@ export class Right extends Base {
private initThumbstick(thumbstick: WebXRControllerComponent) {
if (thumbstick) {
thumbstick.onAxisValueChangedObservable.add((value) => {
log.trace('Right', `thumbstick moved ${value.x}, ${value.y}`);
logger.trace(`thumbstick moved ${value.x}, ${value.y}`);
this.moveRig(value);
});
thumbstick.onButtonStateChangedObservable.add((value) => {
if (value.pressed) {
log.trace('Right', `thumbstick changed ${value.value}`);
logger.trace('Right', `thumbstick changed ${value.value}`);
this.controllers.controllerObserver.notifyObservers({
type: ControllerEventType.INCREASE_VELOCITY,
value: value.value

7
src/diagram/functions/diagramEventHandler.ts
View File

@ -36,8 +36,11 @@ export function diagramEventHandler(event: DiagramEvent,
}
}
}
if (isDiagramEntity(mesh) && (mesh.metadata.template.indexOf('#') > -1)) {
updateTextNode(mesh, entity.text);
}
switch (event.type) {
case DiagramEventType.RESET:
scene.getNodes().forEach((node) => {
if (node?.metadata?.template && !node?.metadata?.tool) {
@ -66,7 +69,7 @@ export function diagramEventHandler(event: DiagramEvent,
if (physicsEnabled) {
applyPhysics(sounds, mesh, scene);
}
updateTextNode(mesh, entity.text);
break;
case DiagramEventType.REMOVE:
if (mesh) {

18
src/information/inputTextView.ts
View File

@ -9,14 +9,14 @@ export type TextEvent = {
id: string;
text: string;
}
const logger: Logger = log.getLogger('InputTextView');
export class InputTextView {
public readonly onTextObservable: Observable<TextEvent> = new Observable<TextEvent>();
private readonly scene: Scene;
private readonly inputMesh: AbstractMesh;
private sounds: DiaSounds;
private readonly controllers: Controllers;
private readonly logger: Logger = log.getLogger('InputTextView');
private readonly handle: Handle;
private inputText: InputText;
private diagramMesh: AbstractMesh;
@ -33,13 +33,15 @@ export class InputTextView {
public show(mesh: AbstractMesh) {
this.handle.mesh.setEnabled(true);
if (mesh.metadata?.label) {
this.inputText.text = mesh.metadata?.label;
if (mesh.metadata?.text) {
this.inputText.text = mesh.metadata?.text;
} else {
this.inputText.text = "";
}
this.diagramMesh = mesh;
this.keyboard.isVisible = true;
this.inputText.focus();
console.log(mesh.metadata);
logger.debug(mesh.metadata);
}
public createKeyboard() {
@ -56,7 +58,7 @@ export class InputTextView {
if (!platform) {
this.scene.onNewMeshAddedObservable.add((mesh) => {
if (mesh.id == 'platform') {
this.logger.debug("platform added");
logger.debug("platform added");
handle.mesh.parent = mesh;
if (!handle.idStored) {
handle.mesh.position = position;
@ -102,7 +104,7 @@ export class InputTextView {
keyboard.isEnabled = true;
keyboard.children.forEach((key) => {
key.onPointerEnterObservable.add((eventData, eventState) => {
this.logger.debug(eventData);
logger.debug(eventData);
const gripId = eventState?.userInfo?.pickInfo?.gripTransform?.id;
if (gripId) {
this.controllers.controllerObserver.notifyObservers({
@ -120,7 +122,7 @@ export class InputTextView {
keyboard.onKeyPressObservable.add((key) => {
if (key === '↵') {
if (this.inputText.text && this.inputText.text.length > 0) {
this.logger.error(this.inputText.text);
logger.error(this.inputText.text);
this.onTextObservable.notifyObservers({id: this.diagramMesh.id, text: this.inputText.text});
} else {
this.onTextObservable.notifyObservers({id: this.diagramMesh.id, text: null});

2
src/menus/clickMenu.ts
View File

@ -24,7 +24,7 @@ export class ClickMenu {
const transform = new TransformNode("transform", scene);
transform.position = entity.absolutePosition.clone();
transform.position.y += entity.scaling.y;
transform.position.y = entity.getBoundingInfo().boundingBox.maximumWorld.y + .1;
const panel = new PlanePanel();

4
src/react/webApp.tsx
View File

@ -4,9 +4,9 @@ function MainMenu({onClick}) {
return (
<div className="overlay mini" id="main">
<img height="120" src="/assets/ddd.svg" width="320"/>
<div id="diagrams"><a href="#" id="diagramsLink" onClick={onClick}>Diagrams</a></div>
<div id="enterXR"><a href="#" id="enterVRLink">Enter VR</a></div>
<div id="enterXR" className="inactive"><a href="#" id="enterVRLink">Enter VR</a></div>
<QuestLink/>
<div id="diagrams"><a href="#" id="diagramsLink" onClick={onClick}>Diagrams</a></div>
<div id="download"><a href="#" id="downloadLink">Download Model</a></div>
</div>
)

2
src/util/functions/getFrontPosition.ts
View File

@ -1,6 +1,6 @@
import {MeshBuilder, Scene, Vector3} from "@babylonjs/core";
const debug = true;
const debug = false;
export function getFrontPosition(distance: number, scene: Scene): Vector3 {
const offset = new Vector3(0, 0, distance);
//offset.applyRotationQuaternionInPlace(scene.activeCamera.absoluteRotation);

3
src/util/functions/groundMeshObserver.ts
View File

@ -31,7 +31,8 @@ export async function groundMeshObserver(ground, scene, diagramManager, controll
if (enterButton) {
const vrSupported = await xr.baseExperience.sessionManager.isSessionSupportedAsync('immersive-vr');
if (vrSupported) {
enterButton.style.display = "block";
//enterButton.style.display = "block";
enterButton.classList.remove('inactive');
enterButton.addEventListener('click', (evt) => {
evt.preventDefault();
//const voice = new VoiceRecognizer();

17
src/util/functions/updateTextNode.ts
View File

@ -58,17 +58,22 @@ export function updateTextNode(mesh: AbstractMesh, text: string) {
function createPlane(mat: Material, mesh: AbstractMesh, text: string, planeWidth: number, height: number): AbstractMesh {
const plane = MeshBuilder.CreatePlane("text" + text, {width: planeWidth, height: height}, mesh.getScene());
plane.material = mat;
//plane.billboardMode = Mesh.BILLBOARDMODE_ALL;
plane.metadata = {exportable: true, label: true};
const yOffset = mesh.getBoundingInfo().boundingSphere.maximum.y;
plane.parent = mesh;
plane.scaling.y = (1 / mesh.scaling.y);
plane.scaling.x = (1 / mesh.scaling.x);
plane.scaling.z = (1 / mesh.scaling.z);
plane.position.y = yOffset + (height * plane.scaling.y);
plane.material = mat;
//plane.billboardMode = Mesh.BILLBOARDMODE_ALL;
plane.metadata = {exportable: true, label: true};
if (mesh.metadata?.template == "#connection-template") {
plane.billboardMode = AbstractMesh.BILLBOARDMODE_Y;
plane.position.y = mesh.absolutePosition.y + .1;
} else {
plane.position.y = yOffset + (height * plane.scaling.y);
}
return plane;
}