From c6e52138b38ad1fceeb90d88a5ad55614dc0e914 Mon Sep 17 00:00:00 2001 From: Michael Mainguy Date: Sat, 13 Apr 2024 11:34:25 -0500 Subject: [PATCH] changed main menu order and behavior, updated text node handling, refactored logging from console.log. --- index.html | 1 + public/styles.css | 13 ++++++++++++- src/controllers/left.ts | 13 ++++++------- src/controllers/right.ts | 12 ++++++++---- src/diagram/functions/diagramEventHandler.ts | 7 +++++-- src/information/inputTextView.ts | 18 ++++++++++-------- src/menus/clickMenu.ts | 2 +- src/react/webApp.tsx | 4 ++-- src/util/functions/getFrontPosition.ts | 2 +- src/util/functions/groundMeshObserver.ts | 3 ++- src/util/functions/updateTextNode.ts | 17 +++++++++++------ 11 files changed, 59 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index bdb779e..d000dc6 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,7 @@
+
diff --git a/public/styles.css b/public/styles.css index 70b5cab..9c28662 100644 --- a/public/styles.css +++ b/public/styles.css @@ -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 { diff --git a/src/controllers/left.ts b/src/controllers/left.ts index 1fc2fe3..d83bea2 100644 --- a/src/controllers/left.ts +++ b/src/controllers/left.ts @@ -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 diff --git a/src/controllers/right.ts b/src/controllers/right.ts index e83b88b..aedc9ce 100644 --- a/src/controllers/right.ts +++ b/src/controllers/right.ts @@ -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 diff --git a/src/diagram/functions/diagramEventHandler.ts b/src/diagram/functions/diagramEventHandler.ts index 7efc3b9..a3a1d0e 100644 --- a/src/diagram/functions/diagramEventHandler.ts +++ b/src/diagram/functions/diagramEventHandler.ts @@ -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) { diff --git a/src/information/inputTextView.ts b/src/information/inputTextView.ts index aa43cd5..e165343 100644 --- a/src/information/inputTextView.ts +++ b/src/information/inputTextView.ts @@ -9,14 +9,14 @@ export type TextEvent = { id: string; text: string; } - +const logger: Logger = log.getLogger('InputTextView'); export class InputTextView { public readonly onTextObservable: Observable = new Observable(); 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}); diff --git a/src/menus/clickMenu.ts b/src/menus/clickMenu.ts index 581965c..5b693a0 100644 --- a/src/menus/clickMenu.ts +++ b/src/menus/clickMenu.ts @@ -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(); diff --git a/src/react/webApp.tsx b/src/react/webApp.tsx index 20367f2..115ed1d 100644 --- a/src/react/webApp.tsx +++ b/src/react/webApp.tsx @@ -4,9 +4,9 @@ function MainMenu({onClick}) { return ( ) diff --git a/src/util/functions/getFrontPosition.ts b/src/util/functions/getFrontPosition.ts index 06ce276..5e8eaed 100644 --- a/src/util/functions/getFrontPosition.ts +++ b/src/util/functions/getFrontPosition.ts @@ -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); diff --git a/src/util/functions/groundMeshObserver.ts b/src/util/functions/groundMeshObserver.ts index b5bda2b..4f572ea 100644 --- a/src/util/functions/groundMeshObserver.ts +++ b/src/util/functions/groundMeshObserver.ts @@ -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(); diff --git a/src/util/functions/updateTextNode.ts b/src/util/functions/updateTextNode.ts index 0965a2e..6aa2cbc 100644 --- a/src/util/functions/updateTextNode.ts +++ b/src/util/functions/updateTextNode.ts @@ -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; }