improving interstitial page

scripts/system/interstitialPage.js

@@ -10,25 +10,30 @@
 //
 
 /* global Script, Controller, Overlays, Quat, MyAvatar, Entities, print, Vec3, AddressManager, Render, Window, Toolbars,
-   Camera, HMD*/
+   Camera, HMD, location, Account*/
 
 (function() {
+    Script.include("/~/system/libraries/Xform.js");
+    var DEBUG = true;
     var MAX_X_SIZE = 5;
     var EPSILON = 0.25;
     var isVisible = false;
     var STABILITY = 3.0;
-    var defaultOffset = -0.5;
     var VOLUME = 0.4;
     var tune = SoundCache.getSound("http://hifi-content.s3.amazonaws.com/alexia/LoadingScreens/crystals_and_voices.wav");
     var sample = null;
     var MAX_LEFT_MARGIN = 1.9;
     var INNER_CIRCLE_WIDTH = 4.7;
     var DESTINATION_CARD_Y_OFFSET = 2;
-    var SYSTEM_TOOL_BAR = "com.highfidelity.interface.toolbar.system";
+    var DEFAULT_Z_OFFSET = 5.45;
-    var MAX_ELAPSED_TIME = 5 * 1000; // time in ms
 
-    var toolbar = Toolbars.getToolbar(SYSTEM_TOOL_BAR);
     var renderViewTask = Render.getConfig("RenderMainView");
+    var request = Script.require('request').request;
+    var BUTTON_PROPERTIES = {
+        text: "Interstitial"
+    };
+    var tablet = null;
+    var button = null;
 
     // Tips have a character limit of 69
     var userTips = [
@@ -49,12 +54,14 @@
         "Tip: Log in to make friends, visit new domains, and save avatars!"
     ];
 
+    var DEFAULT_DIMENSIONS = { x: 20, y: 20, z: 20 };
+
     var loadingSphereID = Overlays.addOverlay("model", {
         name: "Loading-Sphere",
         position: Vec3.sum(Vec3.sum(MyAvatar.position, {x: 0.0, y: -1.0, z: 0.0}), Vec3.multiplyQbyV(MyAvatar.orientation, {x: 0, y: 0.95, z: 0})),
-        orientation: Quat.multiply(Quat.fromVec3Degrees({x: 10, y: 180, z: 0}), MyAvatar.orientation),
+        orientation: Quat.multiply(Quat.fromVec3Degrees({x: 0, y: 180, z: 0}), MyAvatar.orientation),
         url: "http://hifi-content.s3.amazonaws.com/alexia/LoadingScreens/black-sphere.fbx",
-        dimensions: { x: 20, y: 20, z: 20 },
+        dimensions: DEFAULT_DIMENSIONS,
         alpha: 1,
         visible: isVisible,
         ignoreRayIntersection: true,
@@ -63,11 +70,23 @@
         parentID: MyAvatar.SELF_ID
     });
 
+    var anchorOverlay = Overlays.addOverlay("cube", {
+        dimensions: {x: 0.2, y: 0.2, z: 0.2},
+        visible: true,
+        grabbable: false,
+        ignoreRayIntersection: true,
+        localPosition: {x: 0.0, y: getAnchorLocalYOffset(), z: DEFAULT_Z_OFFSET },
+        orientation: Quat.multiply(Quat.fromVec3Degrees({x: 0, y: 180, z: 0}), MyAvatar.orientation),
+        solid: true,
+        drawInFront: true,
+        parentID: MyAvatar.SELF_ID
+    });
 
-    var domainName = "";
+
+    var domainName = "Test";
     var domainNameTextID = Overlays.addOverlay("text3d", {
         name: "Loading-Destination-Card-Text",
-        localPosition: { x: 0.0, y: DESTINATION_CARD_Y_OFFSET + 0.8, z: 5.45 },
+        localPosition: { x: 0.0, y: 0.8, z: 0.0 },
         text: domainName,
         textAlpha: 1,
         backgroundAlpha: 0,
@@ -77,15 +96,15 @@
         drawInFront: true,
         grabbable: false,
         localOrientation: Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }),
-        parentID: loadingSphereID
+        parentID: anchorOverlay
     });
 
-    var hostName = "";
+    var domainText = "";
 
-    var domainHostname = Overlays.addOverlay("text3d", {
+    var domainDescription = Overlays.addOverlay("text3d", {
         name: "Loading-Hostname",
-        localPosition: { x: 0.0, y: DESTINATION_CARD_Y_OFFSET + 0.32, z: 5.45 },
+        localPosition: { x: 0.0, y: 0.32, z: 0.0 },
-        text: hostName,
+        text: domainText,
         textAlpha: 1,
         backgroundAlpha: 0,
         lineHeight: 0.13,
@@ -94,14 +113,14 @@
         drawInFront: true,
         grabbable: false,
         localOrientation: Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }),
-        parentID: loadingSphereID
+        parentID: anchorOverlay
     });
 
     var toolTip = "";
 
     var domainToolTip = Overlays.addOverlay("text3d", {
         name: "Loading-Tooltip",
-        localPosition: { x: 0.0 , y: DESTINATION_CARD_Y_OFFSET - 1.6, z: 5.45 },
+        localPosition: { x: 0.0 , y: -1.6, z: 0.0 },
         text: toolTip,
         textAlpha: 1,
         backgroundAlpha: 0,
@@ -111,12 +130,12 @@
         drawInFront: true,
         grabbable: false,
         localOrientation: Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }),
-        parentID: loadingSphereID
+        parentID: anchorOverlay
     });
 
     var loadingToTheSpotID = Overlays.addOverlay("image3d", {
         name: "Loading-Destination-Card-Text",
-        localPosition: { x: 0.0 , y: DESTINATION_CARD_Y_OFFSET - 1.8, z: 5.45 },
+        localPosition: { x: 0.0 , y: -1.8, z: 0.0 },
         url: "http://hifi-content.s3.amazonaws.com/alexia/LoadingScreens/goTo_button.png",
         alpha: 1,
         dimensions: { x: 1.2, y: 0.6},
@@ -126,12 +145,12 @@
         drawInFront: true,
         grabbable: false,
         localOrientation: Quat.fromVec3Degrees({ x: 0.0, y: 180.0, z: 0.0 }),
-        parentID: loadingSphereID
+        parentID: anchorOverlay
     });
 
     var loadingBarPlacard = Overlays.addOverlay("image3d", {
         name: "Loading-Bar-Placard",
-        localPosition: { x: 0.0 , y: DESTINATION_CARD_Y_OFFSET - 0.99, z: 5.52 },
+        localPosition: { x: 0.0 , y: -0.99, z: 0.07 },
         url: "http://hifi-content.s3.amazonaws.com/alexia/LoadingScreens/loadingBar_placard.png",
         alpha: 1,
         dimensions: { x: 4, y: 2.8},
@@ -141,12 +160,12 @@
         drawInFront: true,
         grabbable: false,
         localOrientation: Quat.fromVec3Degrees({ x: 0.0, y: 180.0, z: 0.0 }),
-        parentID: loadingSphereID
+        parentID: anchorOverlay
     });
 
     var loadingBarProgress = Overlays.addOverlay("image3d", {
         name: "Loading-Bar-Progress",
-        localPosition: { x: 0.0 , y: DESTINATION_CARD_Y_OFFSET - 0.99, z: 5.45 },
+        localPosition: { x: 0.0 , y: -0.99, z: 0.0 },
         url: "http://hifi-content.s3.amazonaws.com/alexia/LoadingScreens/loadingBar_progress.png",
         alpha: 1,
         dimensions: { x: 4, y: 2.8},
@@ -156,7 +175,7 @@
         drawInFront: true,
         grabbable: false,
         localOrientation: Quat.fromVec3Degrees({ x: 0.0, y: 180.0, z: 0.0 }),
-        parentID: loadingSphereID
+        parentID: anchorOverlay
     });
 
     var TARGET_UPDATE_HZ = 60; // 50hz good enough, but we're using update
@@ -169,6 +188,16 @@
     var target = 0;
 
 
+    function getAnchorLocalYOffset() {
+        var loadingSpherePosition = Overlays.getProperty(loadingSphereID, "position");
+        var loadingSphereOrientation = Overlays.getProperty(loadingSphereID, "rotation");
+        var overlayXform = new Xform(loadingSphereOrientation, loadingSpherePosition);
+        var worldToOverlayXform = overlayXform.inv();
+        var headPosition = MyAvatar.getHeadPosition();
+        var headPositionInOverlaySpace = worldToOverlayXform.xformPoint(headPosition);
+        return headPositionInOverlaySpace.y;
+    }
+
     function getLeftMargin(overlayID, text) {
         var textSize = Overlays.textSize(overlayID, text);
         var sizeDifference = ((INNER_CIRCLE_WIDTH - textSize.width) / 2);
@@ -176,7 +205,6 @@
         return leftMargin;
     }
 
-
     function resetValues() {
     }
 
@@ -186,13 +214,28 @@
 
     function startInterstitialPage() {
         if (timer === null) {
+            print("----------> starting <----------");
             updateOverlays(Window.isPhysicsEnabled());
+            startAudio();
             target = 0;
             currentProgress = 0.1;
             timer = Script.setTimeout(update, BASIC_TIMER_INTERVAL_MS);
         }
     }
 
+    function startAudio() {
+        sample = Audio.playSound(tune, {
+            localOnly: true,
+            position: MyAvatar.getHeadPosition(),
+            volume: VOLUME
+        });
+    }
+
+    function endAudio() {
+        sample.stop();
+        sample = null;
+    }
+
     function domainChanged(domain) {
         print("domain changed: " + domain);
         if (domain !== currentDomain) {
@@ -205,11 +248,23 @@
                 leftMargin: domainNameLeftMargin
             };
 
-            /*var hostLeftMargin = getLeftMargin(domainHostname, text);
+            var url = Account.metaverseServerURL + '/api/v1/places/' + domain;
-            var hostnameProperties = {
+            request({
-                text: BY,
+                uri: url
-                leftMargin: hostLeftMargin
+            }, function(error, data) {
-            };*/
+                if (data.status === "success") {
+                    print("-----------> settings domain description <----------");
+                    var domainInfo = data.data;
+                    var domainDescriptionText = domainInfo.place.description;
+                    print("domainText: " + domainDescriptionText);
+                    var leftMargin = getLeftMargin(domainDescription, domainDescriptionText);
+                    var domainDescriptionProperties = {
+                        text: domainDescriptionText,
+                        leftMargin: leftMargin
+                    };
+                    Overlays.editOverlay(domainDescription, domainDescriptionProperties);
+                }
+            });
 
             var randomIndex = Math.floor(Math.random() * userTips.length);
             var tip = userTips[randomIndex];
@@ -220,7 +275,6 @@
             };
 
             Overlays.editOverlay(domainNameTextID, textProperties);
-           //  Overlays.editOverlay(domainHostname, hostnameProperties);
             Overlays.editOverlay(domainToolTip, toolTipProperties);
 
 
@@ -233,7 +287,6 @@
     function clickedOnOverlay(overlayID, event) {
         print(overlayID + " other: " + loadingToTheSpotID);
         if (loadingToTheSpotID === overlayID) {
-            print("-------> heading to theb spot <--------");
             location.handleLookupString(THE_PLACE);
         }
     }
@@ -249,18 +302,70 @@
             visible: !physicsEnabled
         };
 
+        var domainTextProperties = {
+            text: domainText,
+            visible: !physicsEnabled
+        };
+
         // Menu.setIsOptionChecked("Show Overlays", physicsEnabled);
 
+        if (!HMD.active) {
+            MyAvatar.headOrientation = Quat.multiply(Quat.cancelOutRollAndPitch(MyAvatar.headOrientation), Quat.fromPitchYawRollDegrees(-3.0, 0, 0));
+        }
+
         renderViewTask.getConfig("LightingModel")["enableAmbientLight"] = physicsEnabled;
         renderViewTask.getConfig("LightingModel")["enableDirectionalLight"] = physicsEnabled;
         renderViewTask.getConfig("LightingModel")["enablePointLight"] = physicsEnabled;
         Overlays.editOverlay(loadingSphereID, mainSphereProperties);
         Overlays.editOverlay(loadingToTheSpotID, properties);
         Overlays.editOverlay(domainNameTextID, properties);
-        Overlays.editOverlay(domainHostname, properties);
+        Overlays.editOverlay(domainDescription, domainTextProperties);
         Overlays.editOverlay(domainToolTip, properties);
         Overlays.editOverlay(loadingBarPlacard, properties);
         Overlays.editOverlay(loadingBarProgress, properties);
+
+        Camera.mode = "first person";
+    }
+
+
+    function scaleInterstitialPage(sensorToWorldScale) {
+        var yOffset = getAnchorLocalYOffset();
+        var localPosition = {
+            x: 0.0,
+            y: yOffset,
+            z: 5.45
+        };
+
+        Overlays.editOverlay(anchorOverlay, { localPosition: localPosition });
+    }
+
+    var progress = 0;
+    function updateProgress() {
+        print("updateProgress");
+        var thisInterval = Date.now();
+        var deltaTime = (thisInterval - lastInterval);
+        lastInterval = thisInterval;
+        timeElapsed += deltaTime;
+
+        progress += MAX_X_SIZE * (deltaTime / 1000);
+        print(progress);
+        var properties = {
+            localPosition: { x: -(progress / 1.98) + 2, y: -0.99, z: 0.0 },
+            dimensions: {
+                x: progress,
+                y: 2.8
+            }
+        };
+
+        if (progress > MAX_X_SIZE) {
+            progress = 0;
+        }
+
+        Overlays.editOverlay(loadingBarProgress, properties);
+
+        if (!toggle) {
+            Script.setTimeout(updateProgress, BASIC_TIMER_INTERVAL_MS);
+        }
     }
 
     function update() {
@@ -292,7 +397,7 @@
         }
         currentProgress = lerp(currentProgress, target, 0.2);
         var properties = {
-            localPosition: { x: -(currentProgress / 2) + 2, y: DESTINATION_CARD_Y_OFFSET - 0.99, z: 5.45 },
+            localPosition: { x: -(currentProgress / 2) + 2, y: 0.99, z: 5.45 },
             dimensions: {
                 x: currentProgress,
                 y: 2.8
@@ -301,7 +406,9 @@
 
         Overlays.editOverlay(loadingBarProgress, properties);
         if (physicsEnabled && (currentProgress >= (MAX_X_SIZE - EPSILON))) {
+            print("----------> ending <--------");
             updateOverlays(physicsEnabled);
+            endAudio();
             timer = null;
             return;
         }
@@ -311,17 +418,39 @@
     Overlays.mouseReleaseOnOverlay.connect(clickedOnOverlay);
     location.hostChanged.connect(domainChanged);
     location.lookupResultsFinished.connect(function() {
-        print("connected: " + location.isConnected());
+        print("connected: " + location.isConnected);
     });
 
+    MyAvatar.sensorToWorldScaleChanged.connect(scaleInterstitialPage);
+
+    var toggle = true;
+    if (DEBUG) {
+        tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+        button = tablet.addButton(BUTTON_PROPERTIES);
+
+        button.clicked.connect(function() {
+            toggle = !toggle;
+            updateOverlays(toggle);
+
+            if (!toggle) {
+                Script.setTimeout(updateProgress, BASIC_TIMER_INTERVAL_MS);
+            }
+        });
+    }
+
     function cleanup() {
         Overlays.deleteOverlay(loadingSphereID);
         Overlays.deleteOverlay(loadingToTheSpotID);
         Overlays.deleteOverlay(domainNameTextID);
-        Overlays.deleteOverlay(domainHostname);
+        Overlays.deleteOverlay(domainDescription);
         Overlays.deleteOverlay(domainToolTip);
         Overlays.deleteOverlay(loadingBarPlacard);
         Overlays.deleteOverlay(loadingBarProgress);
+        Overlays.deleteOverlay(anchorOverlay);
+
+        if (DEBUG) {
+            tablet.removeButton(button);
+        }
     }
 
     Script.scriptEnding.connect(cleanup);