From 7796a23ad9fcc598e25859aac2bb24139b95b0e8 Mon Sep 17 00:00:00 2001 From: Michael Mainguy Date: Sat, 19 Aug 2023 15:45:19 -0500 Subject: [PATCH] Added initial demo config. --- package-lock.json | 6 +++ package.json | 1 + src/app.ts | 17 ++++--- src/integration/indexdbPersistenceManager.ts | 14 ++++++ src/tutorial/introduction.ts | 47 +++++++++++++++----- src/util/appConfig.ts | 27 +++++++---- src/util/appConfigType.ts | 17 +++---- 7 files changed, 97 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index f69728e..519a27b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "dexie": "^3.2.4", "dexie-observable": "^4.0.1-beta.13", "earcut": "^2.2.4", + "hls.js": "^1.1.4", "loglevel": "^1.8.1", "mxgraph": "^4.2.2", "niceware": "^4.0.0", @@ -2265,6 +2266,11 @@ "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-3.1.2.tgz", "integrity": "sha512-tWCK4biJ6hcLqTviLXVR9DTRfYGQMXEIUj3gwJ2rZ5wO/at3XtkI4g8mCvFdUF9l1KMBNCfmNAdnahm1cgavQA==" }, + "node_modules/hls.js": { + "version": "1.4.10", + "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.4.10.tgz", + "integrity": "sha512-wAVSj4Fm2MqOHy5+BlYnlKxXvJlv5IuZHjlzHu18QmjRzSDFQiUDWdHs5+NsFMQrgKEBwuWDcyvaMC9dUzJ5Uw==" + }, "node_modules/hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", diff --git a/package.json b/package.json index abdad3d..908409e 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "dexie": "^3.2.4", "dexie-observable": "^4.0.1-beta.13", "earcut": "^2.2.4", + "hls.js": "^1.1.4", "loglevel": "^1.8.1", "mxgraph": "^4.2.2", "niceware": "^4.0.0", diff --git a/src/app.ts b/src/app.ts index 288d812..8ff035c 100644 --- a/src/app.ts +++ b/src/app.ts @@ -51,6 +51,7 @@ export class App { } async initialize(canvas) { + const config = AppConfig.config; const logger = log.getLogger('App'); const engine = new Engine(canvas, true); @@ -101,9 +102,14 @@ export class App { const persistenceManager = new module.IndexdbPersistenceManager("diagram"); diagramManager.setPersistenceManager(persistenceManager); AppConfig.config.setPersistenceManager(persistenceManager); - persistenceManager.initialize(); - const intro = new Introduction(scene); - intro.start(); + persistenceManager.initialize().then(() => { + if (!AppConfig.config?.demoCompleted) { + const intro = new Introduction(scene); + intro.start(); + } + }); + + //const newRelicData = new NewRelicData(persistenceManager, scene); }); @@ -141,10 +147,10 @@ export class App { */ window.addEventListener("keydown", (ev) => { if (ev.key == "z") { - voiceManager.startRecording(); + //voiceManager.startRecording(); } if (ev.key == "x") { - voiceManager.stopRecording(); + //voiceManager.stopRecording(); } if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.keyCode === 73) { import("@babylonjs/core/Debug/debugLayer").then(() => { @@ -162,6 +168,7 @@ export class App { logger.info('keydown event listener added, use Ctrl+Shift+Alt+I to toggle debug layer'); + engine.runRenderLoop(() => { scene.render(); }); diff --git a/src/integration/indexdbPersistenceManager.ts b/src/integration/indexdbPersistenceManager.ts index 5110393..ab5c5fa 100644 --- a/src/integration/indexdbPersistenceManager.ts +++ b/src/integration/indexdbPersistenceManager.ts @@ -102,6 +102,7 @@ export class IndexdbPersistenceManager implements IPersistenceManager { if (config) { this.logger.debug('initialize config', config); this.configObserver.notifyObservers(config); + if (config.currentDiagramId) { this.logger.debug('initialize currentDiagramId', config.currentDiagramId); const currentDiagram = await this.db['diagramlisting'].get(config.currentDiagramId); @@ -114,6 +115,19 @@ export class IndexdbPersistenceManager implements IPersistenceManager { } else { this.logger.warn('no currentDiagramId, using default'); } + } else { + + this.configObserver.notifyObservers( + { + id: 1, + demoCompleted: false, + gridSnap: 1, + rotateSnap: 0, + createSnap: 0, + turnSnap: 0, + currentDiagramId: null + } + ); } this.getFilteredEntities().each((e) => { e.position = this.xyztovec(e.position); diff --git a/src/tutorial/introduction.ts b/src/tutorial/introduction.ts index 06fe6b2..da485f1 100644 --- a/src/tutorial/introduction.ts +++ b/src/tutorial/introduction.ts @@ -1,5 +1,6 @@ import { AbstractMesh, + Color3, DynamicTexture, MeshBuilder, PhysicsAggregate, @@ -13,6 +14,7 @@ import { import {Button3D, GUI3DManager, TextBlock} from "@babylonjs/gui"; import {DiaSounds} from "../util/diaSounds"; import {AppConfig} from "../util/appConfig"; +import Hls from "hls.js"; export class Introduction { @@ -51,19 +53,42 @@ export class Introduction { }); } - buildVideo(url: string, size: number, position: Vector3): AbstractMesh { - const texture = new VideoTexture("video", url, this.scene, true); - const mesh = this.makeObject("video", position, size); - mesh.material = new StandardMaterial("video_material", this.scene); - (mesh.material as StandardMaterial).diffuseTexture = texture; - texture.update(); + buildVideo(src: string, size: number, position: Vector3): AbstractMesh { + const vid = document.createElement("video"); + vid.setAttribute('autoplay', 'true'); + vid.setAttribute('playsinline', 'true'); + + + vid.setAttribute('src', src); + const texture = new VideoTexture("video", vid, this.scene, true); + + const mesh = this.makeObject("video", position, size, 16 / 9); + const material = new StandardMaterial("video_material", this.scene); + + material.diffuseTexture = texture; + material.diffuseColor = new Color3(1, 1, 1); + material.emissiveColor = new Color3(1, 1, 1); + mesh.material = material; + if (Hls.isSupported()) { + const hls = new Hls(); + hls.loadSource(src); + hls.attachMedia(vid); + hls.on(Hls.Events.MANIFEST_PARSED, function () { + vid.play(); + }); + } else if (vid.canPlayType('application/vnd.apple.mpegurl')) { + vid.src = src; + vid.addEventListener('loadedmetadata', function () { + vid.play(); + }); + } return mesh; } - makeObject(text: string, position: Vector3, size: number): AbstractMesh { + makeObject(text: string, position: Vector3, size: number, ratio: number = 2): AbstractMesh { const welcome = MeshBuilder.CreateTiledBox(text + "_box", {width: 1, height: 1, depth: 1}, this.scene); welcome.position = position; - welcome.scaling = new Vector3(size, size / 2, size); + welcome.scaling = new Vector3(size, size / ratio, size); const aggregate = new PhysicsAggregate(welcome, PhysicsShapeType.BOX, { friction: 1, @@ -88,7 +113,7 @@ export class Introduction { }, this.scene, true); texture.drawText(text, null, null, "bold 128px Arial", "white", "#00f", true, true); mesh.material = new StandardMaterial(text + "_material", this.scene); - mesh.material.alpha = .9; + mesh.material.alpha = 1; (mesh.material as StandardMaterial).diffuseTexture = texture; texture.update(); return mesh; @@ -117,7 +142,9 @@ export class Introduction { this.current = this.items.slice(-1); break; case 3: - this.items.push(this.buildVideo("A quick video", 5, new Vector3(0, 8, 5))); + + const src = 'https://customer-l4pyjzbav11fzy04.cloudflarestream.com/8b906146c75bb5d81e03d199707ed0e9/manifest/video.m3u8' + this.items.push(this.buildVideo(src, 7, new Vector3(0, 15, 6))); this.current = this.items.slice(-1); break; case 4: diff --git a/src/util/appConfig.ts b/src/util/appConfig.ts index 057782b..dc311a6 100644 --- a/src/util/appConfig.ts +++ b/src/util/appConfig.ts @@ -50,11 +50,11 @@ export class AppConfig { {value: 90, label: "90 Degrees"}]; public get currentGridSnap(): SnapValue { - return this.gridSnapArray[this.gridSnap]; + return this.gridSnapArray[this.gridSnap || 0]; } public get demoCompleted(): boolean { - return this._demoCompleted; + return this._demoCompleted || false; } public set demoCompleted(val: boolean) { @@ -79,7 +79,7 @@ export class AppConfig { } public get physicsEnabled(): boolean { - return this._physicsEnabled; + return this._physicsEnabled || false; } public set phsyicsEnabled(val: boolean) { @@ -97,19 +97,19 @@ export class AppConfig { } public get currentRotateSnap(): SnapValue { - return this.rotateSnapArray[this.rotateSnap]; + return this.rotateSnapArray[this.rotateSnap || 0]; } public get currentCreateSnap(): SnapValue { - return this.createSnapArray[this.createSnap]; + return this.createSnapArray[this.createSnap || 0]; } public get currentTurnSnap(): SnapValue { - return this.turnSnapArray[this._turnSnap]; + return this.turnSnapArray[this._turnSnap || 0]; } public get currentGridSnapIndex(): number { - return this.gridSnap; + return this.gridSnap || 0; } public set currentTurnSnapIndex(val: number) { @@ -123,7 +123,7 @@ export class AppConfig { } public get currentCreateSnapIndex(): number { - return this.createSnap; + return this.createSnap || 0; } public set currentCreateSnapIndex(val: number) { @@ -136,7 +136,7 @@ export class AppConfig { } public get currentRotateSnapIndex(): number { - return this.rotateSnap; + return this.rotateSnap || 0; } public set currentRotateSnapIndex(val: number) { @@ -218,6 +218,9 @@ export class AppConfig { this._physicsEnabled = config.physicsEnabled; this.logger.debug("Physics enabled changed to " + this._physicsEnabled); } + if (config.demoCompleted) { + this._demoCompleted = config.demoCompleted; + } if (config.createSnap != this.currentCreateSnap.value || config.gridSnap != this.currentGridSnap.value || config.rotateSnap != this.currentRotateSnap.value) { @@ -227,7 +230,13 @@ export class AppConfig { this._turnSnap = 0; } this.rotateSnap = this.rotateSnapArray.findIndex((snap) => snap.value == config.rotateSnap); + if (!this.rotateSnap || this.rotateSnap == -1) { + this.rotateSnap = 0; + } this.createSnap = this.createSnapArray.findIndex((snap) => snap.value == config.createSnap); + if (!this.createSnap || this.createSnap == -1) { + this.createSnap = 0; + } const gridSnap = this.gridSnapArray.findIndex((snap) => snap.value == config.gridSnap); if (gridSnap == -1) { this.gridSnap = this.defaultGridSnapIndex; diff --git a/src/util/appConfigType.ts b/src/util/appConfigType.ts index 0d630bd..3b12210 100644 --- a/src/util/appConfigType.ts +++ b/src/util/appConfigType.ts @@ -1,12 +1,13 @@ export type AppConfigType = { id?: number, - gridSnap: number, - rotateSnap: number, - createSnap: number, - turnSnap: number, - physicsEnabled: boolean, - newRelicKey: string, - newRelicAccount: string, - demoCompleted: boolean, + currentDiagramId?: string, + gridSnap?: number, + rotateSnap?: number, + createSnap?: number, + turnSnap?: number, + physicsEnabled?: boolean, + newRelicKey?: string, + newRelicAccount?: string, + demoCompleted?: boolean, } \ No newline at end of file