From 7d5ef80b5b2d661e7f3128342f078d133f15494c Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Mon, 11 Dec 2023 10:14:46 -0600
Subject: [PATCH] Updated initial camera position, fixed initial demo.

---
 index.html                               |   2 +-
 public/data.json                         | 668 +++++++++++++++++++++++
 src/controllers/functions/buildRig.ts    |   7 +-
 src/integration/newRelicQuery.ts         | 128 +++++
 src/tutorial/introduction.ts             |  26 +-
 src/util/appConfig.ts                    |   5 +
 src/util/functions/groundMeshObserver.ts |   5 +-
 src/vrApp.ts                             |  16 +-
 8 files changed, 836 insertions(+), 21 deletions(-)
 create mode 100644 public/data.json
 create mode 100644 src/integration/newRelicQuery.ts

diff --git a/index.html b/index.html
index 0c1129d..e3f4442 100644
--- a/index.html
+++ b/index.html
@@ -152,11 +152,11 @@
             <input id="newRelicAccount" type="text" value="">
         </li>
         <li>
-
             <label for="newRelicClient">New Relic Client</label>
             <input id="newRelicClient" type="text" value="">
         </li>
     </ul>
+    <button id="webButton">Save</button>
 
 </div>
 <script>
diff --git a/public/data.json b/public/data.json
new file mode 100644
index 0000000..bb42627
--- /dev/null
+++ b/public/data.json
@@ -0,0 +1,668 @@
+[
+  {
+    "series": [
+      {
+        "name": "Total Numeric(price)",
+        "series": [
+          {
+            "id": "04c9457963f067213705689ff95a1aa1f01822239",
+            "name": "CTR",
+            "columns": [
+              "begin_time",
+              "Total numeric(price)",
+              "end_time"
+            ],
+            "units": [
+              "timestamp",
+              "count",
+              "timestamp"
+            ],
+            "data": [
+              [
+                1700664033000,
+                4676808.549999999,
+                1700750433000
+              ],
+              [
+                1700750433000,
+                7723020.09,
+                1700836833000
+              ],
+              [
+                1700836833000,
+                6262204.39,
+                1700923233000
+              ],
+              [
+                1700923233000,
+                3772184.58,
+                1701009633000
+              ],
+              [
+                1701009633000,
+                4903447.579999999,
+                1701096033000
+              ],
+              [
+                1701096033000,
+                8205618.880000001,
+                1701182433000
+              ],
+              [
+                1701182433000,
+                3702760.1500000004,
+                1701268833000
+              ],
+              [
+                1701268833000,
+                4117192.0100000002,
+                1701355233000
+              ],
+              [
+                1701355233000,
+                4081216.350000001,
+                1701441633000
+              ]
+            ],
+            "presentation": {
+              "y_axis": "Total numeric(price)",
+              "color": "#00b9d9",
+              "x_axis": "begin_time",
+              "display": "line",
+              "name": "CTR",
+              "tooltip_template": "{{Total numeric(price)}} from {{begin_time}} to {{end_time}}",
+              "x_display_order": [
+                "begin_time"
+              ],
+              "y_display_order": [
+                "Total numeric(price)"
+              ]
+            },
+            "metadata": {
+              "unknown_group": false,
+              "total_result": false,
+              "function": "sum",
+              "alias": "",
+              "attribute": "numeric(price)",
+              "type": "Log_CCV2",
+              "facet": {
+                "label": "'CTR'",
+                "expression": "`regexcapture`(`message`, r'.*BannerId:(?P<banner>\\S+).*')"
+              }
+            }
+          },
+          {
+            "id": "06c651696bed66d97625f2673be90695d04328b8d",
+            "name": "SC",
+            "columns": [
+              "begin_time",
+              "Total numeric(price)",
+              "end_time"
+            ],
+            "units": [
+              "timestamp",
+              "count",
+              "timestamp"
+            ],
+            "data": [
+              [
+                1700664033000,
+                2588610.670000001,
+                1700750433000
+              ],
+              [
+                1700750433000,
+                3864433.64,
+                1700836833000
+              ],
+              [
+                1700836833000,
+                4958889.069999999,
+                1700923233000
+              ],
+              [
+                1700923233000,
+                3083910.9099999997,
+                1701009633000
+              ],
+              [
+                1701009633000,
+                3698118.42,
+                1701096033000
+              ],
+              [
+                1701096033000,
+                4800171.459999998,
+                1701182433000
+              ],
+              [
+                1701182433000,
+                2453778.76,
+                1701268833000
+              ],
+              [
+                1701268833000,
+                2477775.4499999993,
+                1701355233000
+              ],
+              [
+                1701355233000,
+                998172.8500000003,
+                1701441633000
+              ]
+            ],
+            "presentation": {
+              "y_axis": "Total numeric(price)",
+              "color": "#f0ca4d",
+              "x_axis": "begin_time",
+              "display": "line",
+              "name": "SC",
+              "tooltip_template": "{{Total numeric(price)}} from {{begin_time}} to {{end_time}}",
+              "x_display_order": [
+                "begin_time"
+              ],
+              "y_display_order": [
+                "Total numeric(price)"
+              ]
+            },
+            "metadata": {
+              "unknown_group": false,
+              "total_result": false,
+              "function": "sum",
+              "alias": "",
+              "attribute": "numeric(price)",
+              "type": "Log_CCV2",
+              "facet": {
+                "label": "'SC'",
+                "expression": "`regexcapture`(`message`, r'.*BannerId:(?P<banner>\\S+).*')"
+              }
+            }
+          },
+          {
+            "id": "0043f2ddf69955ec2012fb9964380b4fb3696eaed",
+            "name": "MKS",
+            "columns": [
+              "begin_time",
+              "Total numeric(price)",
+              "end_time"
+            ],
+            "units": [
+              "timestamp",
+              "count",
+              "timestamp"
+            ],
+            "data": [
+              [
+                1700664033000,
+                1387502.0800000005,
+                1700750433000
+              ],
+              [
+                1700750433000,
+                2033349.0000000005,
+                1700836833000
+              ],
+              [
+                1700836833000,
+                2316991.13,
+                1700923233000
+              ],
+              [
+                1700923233000,
+                1670253.9000000001,
+                1701009633000
+              ],
+              [
+                1701009633000,
+                1811092.6699999997,
+                1701096033000
+              ],
+              [
+                1701096033000,
+                2308590.9699999997,
+                1701182433000
+              ],
+              [
+                1701182433000,
+                1335727.1400000006,
+                1701268833000
+              ],
+              [
+                1701268833000,
+                1454412.4800000004,
+                1701355233000
+              ],
+              [
+                1701355233000,
+                489153.62000000005,
+                1701441633000
+              ]
+            ],
+            "presentation": {
+              "y_axis": "Total numeric(price)",
+              "color": "#f06c53",
+              "x_axis": "begin_time",
+              "display": "line",
+              "name": "MKS",
+              "tooltip_template": "{{Total numeric(price)}} from {{begin_time}} to {{end_time}}",
+              "x_display_order": [
+                "begin_time"
+              ],
+              "y_display_order": [
+                "Total numeric(price)"
+              ]
+            },
+            "metadata": {
+              "unknown_group": false,
+              "total_result": false,
+              "function": "sum",
+              "alias": "",
+              "attribute": "numeric(price)",
+              "type": "Log_CCV2",
+              "facet": {
+                "label": "'MKS'",
+                "expression": "`regexcapture`(`message`, r'.*BannerId:(?P<banner>\\S+).*')"
+              }
+            }
+          },
+          {
+            "id": "0e55cb43fdad3bb592f03a06239b286b27f631e20",
+            "name": "LEQ",
+            "columns": [
+              "begin_time",
+              "Total numeric(price)",
+              "end_time"
+            ],
+            "units": [
+              "timestamp",
+              "count",
+              "timestamp"
+            ],
+            "data": [
+              [
+                1700664033000,
+                119854.05999999994,
+                1700750433000
+              ],
+              [
+                1700750433000,
+                150485.83,
+                1700836833000
+              ],
+              [
+                1700836833000,
+                167186.66999999998,
+                1700923233000
+              ],
+              [
+                1700923233000,
+                132224.41999999998,
+                1701009633000
+              ],
+              [
+                1701009633000,
+                163320.71,
+                1701096033000
+              ],
+              [
+                1701096033000,
+                181005.11000000004,
+                1701182433000
+              ],
+              [
+                1701182433000,
+                109123.26999999996,
+                1701268833000
+              ],
+              [
+                1701268833000,
+                128689.60000000003,
+                1701355233000
+              ],
+              [
+                1701355233000,
+                39533.739999999976,
+                1701441633000
+              ]
+            ],
+            "presentation": {
+              "y_axis": "Total numeric(price)",
+              "color": "#98cb65",
+              "x_axis": "begin_time",
+              "display": "line",
+              "name": "LEQ",
+              "tooltip_template": "{{Total numeric(price)}} from {{begin_time}} to {{end_time}}",
+              "x_display_order": [
+                "begin_time"
+              ],
+              "y_display_order": [
+                "Total numeric(price)"
+              ]
+            },
+            "metadata": {
+              "unknown_group": false,
+              "total_result": false,
+              "function": "sum",
+              "alias": "",
+              "attribute": "numeric(price)",
+              "type": "Log_CCV2",
+              "facet": {
+                "label": "'LEQ'",
+                "expression": "`regexcapture`(`message`, r'.*BannerId:(?P<banner>\\S+).*')"
+              }
+            }
+          },
+          {
+            "id": "07f9d06664925804a7c184e6c036e1e52315e8091",
+            "name": "ATM",
+            "columns": [
+              "begin_time",
+              "Total numeric(price)",
+              "end_time"
+            ],
+            "units": [
+              "timestamp",
+              "count",
+              "timestamp"
+            ],
+            "data": [
+              [
+                1700664033000,
+                64957.82999999999,
+                1700750433000
+              ],
+              [
+                1700750433000,
+                99035.64999999998,
+                1700836833000
+              ],
+              [
+                1700836833000,
+                123557.49999999996,
+                1700923233000
+              ],
+              [
+                1700923233000,
+                90598.46999999996,
+                1701009633000
+              ],
+              [
+                1701009633000,
+                106364.25999999998,
+                1701096033000
+              ],
+              [
+                1701096033000,
+                141777.25999999995,
+                1701182433000
+              ],
+              [
+                1701182433000,
+                74628.67999999998,
+                1701268833000
+              ],
+              [
+                1701268833000,
+                71244.18,
+                1701355233000
+              ],
+              [
+                1701355233000,
+                15901.249999999996,
+                1701441633000
+              ]
+            ],
+            "presentation": {
+              "y_axis": "Total numeric(price)",
+              "color": "#9b61a7",
+              "x_axis": "begin_time",
+              "display": "line",
+              "name": "ATM",
+              "tooltip_template": "{{Total numeric(price)}} from {{begin_time}} to {{end_time}}",
+              "x_display_order": [
+                "begin_time"
+              ],
+              "y_display_order": [
+                "Total numeric(price)"
+              ]
+            },
+            "metadata": {
+              "unknown_group": false,
+              "total_result": false,
+              "function": "sum",
+              "alias": "",
+              "attribute": "numeric(price)",
+              "type": "Log_CCV2",
+              "facet": {
+                "label": "'ATM'",
+                "expression": "`regexcapture`(`message`, r'.*BannerId:(?P<banner>\\S+).*')"
+              }
+            }
+          },
+          {
+            "id": "0d86544f75148d36eb06a18f69e878a2870ac0087",
+            "name": "PTY",
+            "columns": [
+              "begin_time",
+              "Total numeric(price)",
+              "end_time"
+            ],
+            "units": [
+              "timestamp",
+              "count",
+              "timestamp"
+            ],
+            "data": [
+              [
+                1700664033000,
+                14202.94,
+                1700750433000
+              ],
+              [
+                1700750433000,
+                16589.829999999998,
+                1700836833000
+              ],
+              [
+                1700836833000,
+                14595.310000000001,
+                1700923233000
+              ],
+              [
+                1700923233000,
+                8760.19,
+                1701009633000
+              ],
+              [
+                1701009633000,
+                9123.740000000002,
+                1701096033000
+              ],
+              [
+                1701096033000,
+                14973.260000000002,
+                1701182433000
+              ],
+              [
+                1701182433000,
+                14041.58,
+                1701268833000
+              ],
+              [
+                1701268833000,
+                16656.37,
+                1701355233000
+              ],
+              [
+                1701355233000,
+                16985.59,
+                1701441633000
+              ]
+            ],
+            "presentation": {
+              "y_axis": "Total numeric(price)",
+              "color": "#1e51ad",
+              "x_axis": "begin_time",
+              "display": "line",
+              "name": "PTY",
+              "tooltip_template": "{{Total numeric(price)}} from {{begin_time}} to {{end_time}}",
+              "x_display_order": [
+                "begin_time"
+              ],
+              "y_display_order": [
+                "Total numeric(price)"
+              ]
+            },
+            "metadata": {
+              "unknown_group": false,
+              "total_result": false,
+              "function": "sum",
+              "alias": "",
+              "attribute": "numeric(price)",
+              "type": "Log_CCV2",
+              "facet": {
+                "label": "'PTY'",
+                "expression": "`regexcapture`(`message`, r'.*BannerId:(?P<banner>\\S+).*')"
+              }
+            }
+          },
+          {
+            "id": "0728ad08286766d72dcedbdd0ceedbcc450ff1d12",
+            "name": "TRIANGLE",
+            "columns": [
+              "begin_time",
+              "Total numeric(price)",
+              "end_time"
+            ],
+            "units": [
+              "timestamp",
+              "count",
+              "timestamp"
+            ],
+            "data": [
+              [
+                1700664033000,
+                16020.0,
+                1700750433000
+              ],
+              [
+                1700750433000,
+                18512.0,
+                1700836833000
+              ],
+              [
+                1700836833000,
+                12816.0,
+                1700923233000
+              ],
+              [
+                1700923233000,
+                8099.0,
+                1701009633000
+              ],
+              [
+                1701009633000,
+                7921.0,
+                1701096033000
+              ],
+              [
+                1701096033000,
+                7921.0,
+                1701182433000
+              ],
+              [
+                1701182433000,
+                4895.0,
+                1701268833000
+              ],
+              [
+                1701268833000,
+                7476.0,
+                1701355233000
+              ],
+              [
+                1701355233000,
+                7387.0,
+                1701441633000
+              ]
+            ],
+            "presentation": {
+              "y_axis": "Total numeric(price)",
+              "color": "#562d1e",
+              "x_axis": "begin_time",
+              "display": "line",
+              "name": "TRIANGLE",
+              "tooltip_template": "{{Total numeric(price)}} from {{begin_time}} to {{end_time}}",
+              "x_display_order": [
+                "begin_time"
+              ],
+              "y_display_order": [
+                "Total numeric(price)"
+              ]
+            },
+            "metadata": {
+              "unknown_group": false,
+              "total_result": false,
+              "function": "sum",
+              "alias": "",
+              "attribute": "numeric(price)",
+              "type": "Log_CCV2",
+              "facet": {
+                "label": "'TRIANGLE'",
+                "expression": "`regexcapture`(`message`, r'.*BannerId:(?P<banner>\\S+).*')"
+              }
+            }
+          }
+        ]
+      }
+    ],
+    "events": [],
+    "metadata": {
+      "version": 3,
+      "since": "Since 9 days ago",
+      "sinceTime": 1700664033333,
+      "beginTime": 1700664033333,
+      "endTime": 1701441633333,
+      "facets": [
+        "banner"
+      ],
+      "performanceStats": {
+        "inspectedCount": 2172129338,
+        "responseTime": 22604,
+        "exceedsRetentionWindow": false
+      },
+      "nrqlQuery": "SELECT sum(numeric(capture(message, r'.*TotalPriceExcludingTax:(?P<price>\\S+).*'))) FROM Log_CCV2 WHERE message like '%CTFS Payment Response%' Since 9 days ago timeseries 1 day facet capture(message, r'.*BannerId:(?P<banner>\\S+).*')",
+      "refresh_interval": 86400000,
+      "time_zone_offsets": [
+        {
+          "begin_time": 1700642433333,
+          "zone_id": "America/Chicago",
+          "offset": -21600000
+        }
+      ],
+      "account_name": "",
+      "rawUntil": "NOW",
+      "rawSince": "9 DAYS AGO",
+      "offset": 0,
+      "rawBeginTime": "2023-11-22T14:40:33Z",
+      "openEnded": true,
+      "facetExpression": "`regexcapture`(`message`, r'.*BannerId:(?P<banner>\\S+).*')",
+      "eventType": "Log_CCV2",
+      "eventTypes": [
+        "Log_CCV2"
+      ],
+      "routerGuid": "378e5d27-d02a-e980-a421-838bf14786aa",
+      "bucketSizeMillis": 86400000,
+      "rawCompareWith": "",
+      "limit": 10,
+      "guid": "378e5d27-d02a-e980-a421-838bf14786aa",
+      "rawEndTime": "2023-12-01T14:40:33Z",
+      "accounts": [
+        1679802
+      ]
+    },
+    "account_ids": [
+      1679802
+    ]
+  }
+]
\ No newline at end of file
diff --git a/src/controllers/functions/buildRig.ts b/src/controllers/functions/buildRig.ts
index ce2ba16..e9f45fa 100644
--- a/src/controllers/functions/buildRig.ts
+++ b/src/controllers/functions/buildRig.ts
@@ -13,18 +13,23 @@ import {buildStandardMaterial} from "../../materials/functions/buildStandardMate
 
 export function buildRig(scene: Scene, appConfig: AppConfig): Mesh {
     const rigMesh = MeshBuilder.CreateCylinder("platform", {diameter: .5, height: 1.6}, scene);
+
     const cameratransform = new TransformNode("cameraTransform", scene);
     cameratransform.parent = rigMesh;
     cameratransform.position = new Vector3(0, -.8, 0);
     for (const cam of scene.cameras) {
         cam.parent = cameratransform;
+        console.log(cam.absoluteRotation);
     }
 
+
     scene.onActiveCameraChanged.add((s) => {
+        cameratransform.rotation.set(0, Math.PI, 0);
         s.activeCamera.parent = cameratransform;
     });
     rigMesh.material = buildStandardMaterial("rigMaterial", scene, "#2222ff");
-    rigMesh.setAbsolutePosition(new Vector3(0, .01, -3));
+    rigMesh.setAbsolutePosition(new Vector3(0, .01, 3));
+    rigMesh.lookAt(new Vector3(0, 0.01, 0));
     rigMesh.visibility = 0;
     const rigAggregate =
         new PhysicsAggregate(
diff --git a/src/integration/newRelicQuery.ts b/src/integration/newRelicQuery.ts
new file mode 100644
index 0000000..1ea4443
--- /dev/null
+++ b/src/integration/newRelicQuery.ts
@@ -0,0 +1,128 @@
+import {Color3, Material, Mesh, MeshBuilder, Scene, StandardMaterial, TransformNode, Vector3} from "@babylonjs/core";
+import axios from "axios";
+import {AdvancedDynamicTexture, TextBlock} from "@babylonjs/gui";
+
+export class NewRelicQuery {
+    private readonly scene: Scene;
+    private data: { name: string, point: Vector3 }[] = [];
+    private baseTransform: TransformNode;
+    private seriesNumber = 0;
+    private maxY = 0;
+    private minY = 0;
+    private maxZ = 0;
+    private minZ = 0;
+
+    constructor(scene: Scene) {
+        this.scene = scene;
+        this.baseTransform = new TransformNode("graphBase", this.scene);
+    }
+
+    public async getSales() {
+        const data = await axios.get('/data.json')
+        const series = data.data[0].series[0].series;
+        for (const s of series) {
+            this.buildSeries(s);
+        }
+        this.buildModel();
+        console.log(this.data.length);
+    }
+
+    //private materials: Material[];
+    private buildSeries(series) {
+        const name = series.name;
+        const material = new StandardMaterial(name + 'Material', this.scene);
+        material.diffuseColor = new Color3(Math.random(), Math.random(), Math.random());
+        //material.ambientColor = new Color3(0, 0, 0);
+        material.specularColor = new Color3(1, 1, 1);
+        material.alpha = .9;
+
+
+        //this.materials.push(material);
+        const data = series.data;
+        for (const point in data) {
+            this.buildPoint(name, data[point]);
+
+        }
+        this.buildTextLabel(name, new Vector3(this.seriesNumber, .25, -.25));
+        this.seriesNumber++;
+
+    }
+
+    private buildTextLabel(text: string, position: Vector3) {
+
+        const plane = MeshBuilder.CreatePlane("plane", {width: .5, height: .25}, this.scene);
+        plane.billboardMode = Mesh.BILLBOARDMODE_ALL;
+        const advancedTexture = AdvancedDynamicTexture.CreateForMesh(plane, 1024, 512, false);
+        var text1 = new TextBlock();
+        text1.text = text;
+        advancedTexture.background = "#000000";
+        text1.color = "white";
+        text1.fontSize = 128;
+        advancedTexture.addControl(text1);
+        plane.position.set(position.x, position.y, position.z);
+    }
+
+    private buildNumericLabel(number: number, position: Vector3) {
+        const rounded = Math.round(number);
+        let shortNumber: string = '???';
+        if (Math.log10(rounded) < 3) {
+            shortNumber = rounded.toString();
+        }
+        if (Math.log10(rounded) >= 3 && Math.log10(rounded) < 6) {
+            shortNumber = (Math.round(rounded / 100) / 10).toString() + 'K';
+        }
+        if (Math.log10(rounded) >= 6) {
+            shortNumber = (Math.round(rounded / 100000) / 10).toString() + 'M';
+        }
+        this.buildTextLabel(shortNumber, position);
+    }
+
+    private buildModel() {
+        const zScale = 20 / (this.maxZ - this.minZ);
+        const yScale = 20 / (this.maxY - this.minY);
+        for (const point of this.data) {
+            const z = (point.point.z - this.minZ) * zScale;
+            const y = (point.point.y - this.minY) * yScale;
+            //const baseMesh = (this.scene.getMeshByName(point.name+ 'Mesh') as Mesh);
+            const bar = MeshBuilder.CreateBox(name + 'Mesh', {width: 1, height: 1, depth: 1}, this.scene);
+            bar.material = this.scene.getMaterialByName(point.name + 'Material');
+
+            //const bar = new InstancedMesh(point.name + point.point.z, baseMesh);
+            bar.scaling.x = .5;
+            bar.scaling.y = y;
+            bar.scaling.z = .5;
+            /*MeshBuilder.CreateBox(point.name + point.point.z, {width: .5,
+            height: y, depth: .5}, this.scene);
+*/
+            bar.position.set(point.point.x, y / 2, z);
+            this.buildNumericLabel(point.point.y, new Vector3(point.point.x, y, z));
+            const base = MeshBuilder.CreatePlane('base', {width: 20, height: 20}, this.scene);
+            const material = new StandardMaterial("baseMaterial", this.scene);
+            material.diffuseColor = new Color3(0, 1, 0);
+            base.material = material;
+            base.position.set(10, .001, 10);
+            base.parent = this.baseTransform;
+            base.rotation.x = Math.PI / 2;
+            bar.parent = this.baseTransform;
+
+            // bar.material = this.scene.getMaterialByName(point.name+'Material');
+        }
+
+    }
+
+    private buildPoint(name, point) {
+        if (point[1] > this.maxY) {
+            this.maxY = point[1];
+        }
+        if (this.minY === 0 || point[1] < this.minY) {
+            this.minY = point[1];
+        }
+        if (point[0] > this.maxZ) {
+            this.maxZ = point[0];
+        }
+        if (this.minZ === 0 || point[0] < this.minZ) {
+            this.minZ = point[0];
+        }
+        this.data.push({name: name, point: new Vector3(this.seriesNumber, point[1], point[0])});
+    }
+}
\ No newline at end of file
diff --git a/src/tutorial/introduction.ts b/src/tutorial/introduction.ts
index d49a200..164c924 100644
--- a/src/tutorial/introduction.ts
+++ b/src/tutorial/introduction.ts
@@ -49,7 +49,9 @@ export class Introduction {
 
     public start() {
         this.scene.physicsEnabled = true;
+        this.manager.controlScaling = .5;
         this.advance = new Button3D("advance");
+
         const text = new TextBlock("advance", "Click Me");
         text.fontSize = "48px";
         text.color = "#ffffff";
@@ -61,11 +63,11 @@ export class Introduction {
         }, -1, false, this, false);
         this.manager.addControl(this.advance);
         this.advance.isVisible = false;
-        this.advance.position.y = .5;
-        this.advance.position.x = -2;
-        this.advance.position.z = -1;
+
         this.scene.onReadyObservable.add(() => {
             this.advance.isVisible = true;
+            this.advance.node.position = new Vector3(0, .2, -1);
+            this.advance.node.rotation = new Vector3(0, Math.PI, 0);
         });
     }
 
@@ -155,28 +157,28 @@ export class Introduction {
         this.current.forEach((mesh) => {
             const pos = mesh.physicsBody.transformNode.absolutePosition.clone();
             pos.x = pos.x - .1;
-            mesh.physicsBody.applyImpulse(new Vector3(0, 8, 12), pos);
+            mesh.physicsBody.applyImpulse(new Vector3(0, 10, -12), pos);
         });
 
         switch (this.step) {
             case 0:
-                this.items.push(this.buildText("Welcome To", 3, 1024, new Vector3(0, 15, 5)));
-                this.items.push(this.buildText("Deep Diagram", 5, 1024, new Vector3(0, 10, 5)));
+                this.items.push(this.buildText("Welcome To", 3, 1024, new Vector3(0, 15, -4)));
+                this.items.push(this.buildText("Deep Diagram", 5, 1024, new Vector3(0, 10, -4)));
                 this.current = this.items.slice(-2);
                 break;
             case 1:
-                this.items.push(this.buildText("Let us show you", 3, 1024, new Vector3(-1.6, 16, 5)));
-                this.items.push(this.buildText("what you can build", 4, 1200, new Vector3(2, 12, 5)));
+                this.items.push(this.buildText("Let us show you", 3, 1024, new Vector3(2, 16, -5)));
+                this.items.push(this.buildText("what you can build", 4, 1200, new Vector3(-1.6, 12, -5)));
                 this.current = this.items.slice(-2);
                 break;
             case 2:
-                this.items.push(this.buildText("A quick video", 5, 1024, new Vector3(0, 15, 5)));
+                this.items.push(this.buildText("A quick video", 5, 1024, new Vector3(0, 15, -5)));
                 this.current = this.items.slice(-1);
                 break;
             case 3:
 
                 const src = 'https://customer-l4pyjzbav11fzy04.cloudflarestream.com/8b906146c75bb5d81e03d199707ed0e9/manifest/video.m3u8'
-                this.items.push(this.buildVideo(src, 7, new Vector3(0, 15, 6)));
+                this.items.push(this.buildVideo(src, 7, new Vector3(0, 15, -6)));
                 this.current = this.items.slice(-1);
                 break;
             case 4:
@@ -186,9 +188,7 @@ export class Introduction {
                 });
                 this.advance.dispose();
                 this.manager.dispose();
-                const config = this.config.current;
-                config.demoCompleted = true;
-                this.config.current = config;
+                this.config.setDemoCompleted(true);
                 this.items = [];
                 if (this.videoElement) {
                     this.videoElement.pause();
diff --git a/src/util/appConfig.ts b/src/util/appConfig.ts
index 2d10cbc..ae2c0a8 100644
--- a/src/util/appConfig.ts
+++ b/src/util/appConfig.ts
@@ -73,4 +73,9 @@ export class AppConfig {
         this.onConfigChangedObservable.notifyObservers(this._currentConfig, 2);
 
     }
+
+    public setDemoCompleted(demoCompleted: boolean) {
+        this._currentConfig.demoCompleted = demoCompleted;
+        this.onConfigChangedObservable.notifyObservers(this._currentConfig, 2);
+    }
 }
\ No newline at end of file
diff --git a/src/util/functions/groundMeshObserver.ts b/src/util/functions/groundMeshObserver.ts
index 2e281d6..f841321 100644
--- a/src/util/functions/groundMeshObserver.ts
+++ b/src/util/functions/groundMeshObserver.ts
@@ -1,4 +1,4 @@
-import {Vector3, WebXRDefaultExperience, WebXRState} from "@babylonjs/core";
+import {WebXRDefaultExperience, WebXRState} from "@babylonjs/core";
 import log from "loglevel";
 import {WebController} from "../../controllers/webController";
 
@@ -30,7 +30,8 @@ export async function groundMeshObserver(ground, scene, diagramManager, controll
     xr.baseExperience.onStateChangedObservable.add((state) => {
         if (state == WebXRState.IN_XR) {
             scene.audioEnabled = true;
-            xr.baseExperience.camera.position = new Vector3(0, 1.6, 0);
+            //xr.baseExperience.camera.position = new Vector3(0, 1.6, 0);
+            //xr.baseExperience.camera.setTarget(new Vector3(0, 1.6, 3));
             window.addEventListener(('pa-button-state-change'), (event: any) => {
                 if (event.detail) {
                     log.debug('App', event.detail);
diff --git a/src/vrApp.ts b/src/vrApp.ts
index fbc14e4..2074841 100644
--- a/src/vrApp.ts
+++ b/src/vrApp.ts
@@ -12,6 +12,7 @@ import {PouchdbPersistenceManager} from "./integration/pouchdbPersistenceManager
 import {addSceneInspector} from "./util/functions/sceneInspctor";
 import {groundMeshObserver} from "./util/functions/groundMeshObserver";
 import {MainMenu} from "./menus/mainMenu";
+import {Introduction} from "./tutorial/introduction";
 
 export class VrApp {
     private scene: Scene;
@@ -50,6 +51,9 @@ export class VrApp {
         const db = new PouchdbPersistenceManager();
         db.setDiagramManager(diagramManager);
         db.configObserver.add((newConfig) => {
+            if (!newConfig.demoCompleted) {
+                const demo = new Introduction(scene, config);
+            }
             config.onConfigChangedObservable.notifyObservers(newConfig, 1);
         });
         config.onConfigChangedObservable.add((newConfig) => {
@@ -60,10 +64,10 @@ export class VrApp {
         await db.initialize();
 
         const environment = new CustomEnvironment(scene, "default", config);
-        const camera: FreeCamera = new FreeCamera("Camera",
-            new Vector3(0, 1.6, 3), scene);
-        camera.setTarget(new Vector3(0, 1.6, 0));
-
+        const camera: FreeCamera = new FreeCamera("Main Camera",
+            new Vector3(0, 1.6, 0), scene);
+        //camera.setTarget(new Vector3(0, 1.6, -3));
+        scene.setActiveCameraByName("Main Camera");
         environment.groundMeshObservable.add((ground) => {
             groundMeshObserver(ground, scene, diagramManager, controllers, spinner);
         }, -1, false, this);
@@ -99,6 +103,10 @@ export class VrApp {
          */
         addSceneInspector(scene);
         const mainMenu = new MainMenu(scene);
+        //const zero = MeshBuilder.CreateSphere('target', {diameter: 1.6}, scene);
+        // zero.position = new Vector3(0, .8, 0);
+        //const newRelic = new NewRelicQuery(scene);
+        //newRelic.getSales();
         this.logger.info('keydown event listener added, use Ctrl+Shift+Alt+I to toggle debug layer');
         this.engine.runRenderLoop(() => {
             this.scene.render();