Added initial demo config.

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",

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",

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();
+                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();
         });

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);

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 {
+    buildVideo(src: string, size: number, position: Vector3): AbstractMesh {
-        const texture = new VideoTexture("video", url, this.scene, true);
+        const vid = document.createElement("video");
-        const mesh = this.makeObject("video", position, size);
+        vid.setAttribute('autoplay', 'true');
-        mesh.material = new StandardMaterial("video_material", this.scene);
+        vid.setAttribute('playsinline', 'true');
-        (mesh.material as StandardMaterial).diffuseTexture = texture;
+
-        texture.update();
+
+        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:

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;

src/util/appConfigType.ts

@@ -1,12 +1,13 @@
 export type AppConfigType = {
     id?: number,
-    gridSnap: number,
+    currentDiagramId?: string,
-    rotateSnap: number,
+    gridSnap?: number,
-    createSnap: number,
+    rotateSnap?: number,
-    turnSnap: number,
+    createSnap?: number,
-    physicsEnabled: boolean,
+    turnSnap?: number,
-    newRelicKey: string,
+    physicsEnabled?: boolean,
-    newRelicAccount: string,
+    newRelicKey?: string,
-    demoCompleted: boolean,
+    newRelicAccount?: string,
+    demoCompleted?: boolean,
 
 }