diff --git a/scripts/system/interstitialPage.js b/scripts/system/interstitialPage.js index 00d62d7fc6..38521208c7 100644 --- a/scripts/system/interstitialPage.js +++ b/scripts/system/interstitialPage.js @@ -38,7 +38,6 @@ var button = null; var errorConnectingToDomain = false; - var resettingError = false; // Tips have a character limit of 69 var userTips = [ @@ -128,7 +127,7 @@ localPosition: { x: 0.0 , y: -1.6, z: 0.0 }, text: toolTip, textAlpha: 1, - backgroundAlpha: 1, + backgroundAlpha: 0.00393, lineHeight: 0.13, visible: isVisible, ignoreRayIntersection: true, @@ -138,17 +137,47 @@ parentID: anchorOverlay }); - var loadingToTheSpotID = Overlays.addOverlay("image3d", { + var loadingToTheSpotText = Overlays.addOverlay("text3d", { name: "Loading-Destination-Card-Text", - localPosition: { x: 0.0 , y: -1.5, z: -0.3 }, - url: Script.resourcesPath() + "images/interstitialPage/goTo_button.png", + localPosition: { x: 0.0 , y: -1.687, z: -0.3 }, + text: "Go To TheSpot", + textAlpha: 1, + backgroundAlpha: 0.00393, + lineHeight: 0.10, + visible: isVisible, + ignoreRayIntersection: true, + dimensions: {x: 1, y: 0.17}, + drawInFront: true, + grabbable: false, + localOrientation: Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }), + parentID: anchorOverlay + }); + + var loadingToTheSpotID = Overlays.addOverlay("image3d", { + name: "Loading-Destination-Card-GoTo-Image", + localPosition: { x: 0.0 , y: -1.75, z: -0.3 }, + url: Script.resourcesPath() + "images/interstitialPage/button.png", alpha: 1, visible: isVisible, emissive: true, ignoreRayIntersection: false, drawInFront: true, grabbable: false, - localOrientation: Quat.fromVec3Degrees({ x: 0.0, y: 180.0, z: 0.0 }), + localOrientation: Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }), + parentID: anchorOverlay + }); + + var loadingToTheSpotHoverID = Overlays.addOverlay("image3d", { + name: "Loading-Destination-Card-GoTo-Image-Hover", + localPosition: { x: 0.0 , y: -1.75, z: -0.3 }, + url: Script.resourcesPath() + "images/interstitialPage/button_hover.png", + alpha: 1, + visible: false, + emissive: true, + ignoreRayIntersection: false, + drawInFront: true, + grabbable: false, + localOrientation: Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }), parentID: anchorOverlay }); @@ -268,7 +297,7 @@ domainName = name.charAt(0).toUpperCase() + name.slice(1); var doRequest = true; if (name.length === 0 && location.href === "file:///~/serverless/tutorial.json") { - domainName = "Serveless Domain (Tutorial)"; + domainName = "Serverless Domain (Tutorial)"; doRequest = false; } var domainNameLeftMargin = getLeftMargin(domainNameTextID, domainName); @@ -319,8 +348,10 @@ var THE_PLACE = (HifiAbout.buildVersion === "dev") ? "hifi://TheSpot-dev": "hifi://TheSpot"; function clickedOnOverlay(overlayID, event) { - if (loadingToTheSpotID === overlayID) { + if (loadingToTheSpotHoverID === overlayID) { location.handleLookupString(THE_PLACE); + Overlays.editOverlay(loadingToTheSpotHoverID, {visible: false}); + Overlays.editOverlay(loadingToTheSpotID, {visible: true}); } } @@ -353,6 +384,7 @@ renderViewTask.getConfig("LightingModel")["enableDirectionalLight"] = physicsEnabled; renderViewTask.getConfig("LightingModel")["enablePointLight"] = physicsEnabled; Overlays.editOverlay(loadingSphereID, mainSphereProperties); + Overlays.editOverlay(loadingToTheSpotText, properties); Overlays.editOverlay(loadingToTheSpotID, properties); Overlays.editOverlay(domainNameTextID, properties); Overlays.editOverlay(domainDescription, domainTextProperties); @@ -475,13 +507,15 @@ Overlays.mouseReleaseOnOverlay.connect(clickedOnOverlay); Overlays.hoverEnterOverlay.connect(function(overlayID, event) { if (overlayID === loadingToTheSpotID) { - Overlays.editOverlay(loadingToTheSpotID, { color: greyColor }); + Overlays.editOverlay(loadingToTheSpotID, {visible: false}); + Overlays.editOverlay(loadingToTheSpotHoverID, {visible: true}); } }); Overlays.hoverLeaveOverlay.connect(function(overlayID, event) { - if (overlayID === loadingToTheSpotID) { - Overlays.editOverlay(loadingToTheSpotID, { color: whiteColor }); + if (overlayID === loadingToTheSpotHoverID) { + Overlays.editOverlay(loadingToTheSpotHoverID, {visible: false}); + Overlays.editOverlay(loadingToTheSpotID, {visible: true}); } }); @@ -510,9 +544,17 @@ }); } + // set left margin of text. + var loadingTextProperties = { + leftMargin: getLeftMargin(loadingToTheSpotText, "Go To TheSpot") + 0.045 + }; + + Overlays.editOverlay(loadingToTheSpotText, loadingTextProperties); + function cleanup() { Overlays.deleteOverlay(loadingSphereID); Overlays.deleteOverlay(loadingToTheSpotID); + Overlays.deleteOverlay(loadingToTheSpotHoverID); Overlays.deleteOverlay(domainNameTextID); Overlays.deleteOverlay(domainDescription); Overlays.deleteOverlay(domainToolTip); diff --git a/scripts/system/redirectOverlays.js b/scripts/system/redirectOverlays.js index 8dd7d0d26a..49844db5b0 100644 --- a/scripts/system/redirectOverlays.js +++ b/scripts/system/redirectOverlays.js @@ -43,15 +43,15 @@ leftMargin: 0.538373570564886, visible: false, emissive: true, - ignoreRayIntersection: false, + ignoreRayIntersection: true, dimensions: oopsDimensions, grabbable: false, }); - var tryAgainImage = Overlays.addOverlay("image3d", { + var tryAgainImageNeutral = Overlays.addOverlay("image3d", { name: "tryAgainImage", localPosition: {x: -0.6, y: -0.6, z: 0.0}, - url: Script.resourcesPath() + "images/interstitialPage/button_tryAgain.png", + url: Script.resourcesPath() + "images/interstitialPage/button.png", alpha: 1, visible: false, emissive: true, @@ -61,10 +61,10 @@ parentID: redirectOopsText }); - var backImage = Overlays.addOverlay("image3d", { - name: "backImage", - localPosition: {x: 0.6, y: -0.6, z: 0.0}, - url: Script.resourcesPath() + "images/interstitialPage/button_back.png", + var tryAgainImageHover = Overlays.addOverlay("image3d", { + name: "tryAgainImageHover", + localPosition: {x: -0.6, y: -0.6, z: 0.0}, + url: Script.resourcesPath() + "images/interstitialPage/button_hover.png", alpha: 1, visible: false, emissive: true, @@ -74,6 +74,62 @@ parentID: redirectOopsText }); + var tryAgainText = Overlays.addOverlay("text3d", { + name: "tryAgainText", + localPosition: {x: -0.6, y: -0.962, z: 0.0}, + text: "Try Again", + textAlpha: 1, + backgroundAlpha: 0.00393, + lineHeight: 0.08, + visible: false, + emissive: true, + ignoreRayIntersection: true, + grabbable: false, + orientation: Overlays.getProperty(redirectOopsText, "orientation"), + parentID: redirectOopsText + }); + + var backImageNeutral = Overlays.addOverlay("image3d", { + name: "backImage", + localPosition: {x: 0.6, y: -0.6, z: 0.0}, + url: Script.resourcesPath() + "images/interstitialPage/button.png", + alpha: 1, + visible: false, + emissive: true, + ignoreRayIntersection: false, + grabbable: false, + orientation: Overlays.getProperty(redirectOopsText, "orientation"), + parentID: redirectOopsText + }); + + var backImageHover = Overlays.addOverlay("image3d", { + name: "backImageHover", + localPosition: {x: 0.6, y: -0.6, z: 0.0}, + url: Script.resourcesPath() + "images/interstitialPage/button_hover.png", + alpha: 1, + visible: false, + emissive: true, + ignoreRayIntersection: false, + grabbable: false, + orientation: Overlays.getProperty(redirectOopsText, "orientation"), + parentID: redirectOopsText + }); + + var backText = Overlays.addOverlay("text3d", { + name: "backText", + localPosition: {x: 0.6, y: -0.962, z: 0.0}, + text: "Back", + textAlpha: 1, + backgroundAlpha: 0.00393, + lineHeight: 0.08, + visible: false, + emissive: true, + ignoreRayIntersection: true, + grabbable: false, + orientation: Overlays.getProperty(redirectOopsText, "orientation"), + parentID: redirectOopsText + }); + function toggleOverlays(isInErrorState) { if (!isInErrorState) { var properties = { @@ -81,8 +137,10 @@ }; Overlays.editOverlay(redirectOopsText, properties); - Overlays.editOverlay(tryAgainImage, properties); - Overlays.editOverlay(backImage, properties); + Overlays.editOverlay(tryAgainImageNeutral, properties); + Overlays.editOverlay(tryAgainImageHover, properties); + Overlays.editOverlay(backImageNeutral, properties); + Overlays.editOverlay(backImageHover, properties); return; } var oopsText = getOopsText(); @@ -104,9 +162,29 @@ leftMargin: (textOverlayWidth - textWidth) / 2 }; + var tryAgainTextWidth = Overlays.textSize(tryAgainText, "Try Again").width; + var tryAgainImageWidth = Overlays.getProperty(tryAgainImageNeutral, "dimensions").x; + + var tryAgainTextProperties = { + visible: overlaysVisible, + leftMargin: (tryAgainImageWidth - tryAgainTextWidth) / 2 + }; + + var backTextWidth = Overlays.textSize(backText, "Back").width; + var backImageWidth = Overlays.getProperty(backImageNeutral, "dimensions").x; + + var backTextProperties = { + visible: overlaysVisible, + leftMargin: (backImageWidth - backTextWidth) / 2 + }; + Overlays.editOverlay(redirectOopsText, oopsTextProperties); - Overlays.editOverlay(tryAgainImage, properties); - Overlays.editOverlay(backImage, properties); + Overlays.editOverlay(tryAgainImageNeutral, properties); + Overlays.editOverlay(backImageNeutral, properties); + Overlays.editOverlay(tryAgainImageHover, {visible: false}); + Overlays.editOverlay(backImageHover, {visible: false}); + Overlays.editOverlay(tryAgainText, tryAgainTextProperties); + Overlays.editOverlay(backText, backTextProperties); } @@ -115,9 +193,9 @@ // don't allow right-clicks. return; } - if (tryAgainImage === overlayID) { + if (tryAgainImageHover === overlayID) { location.goToLastAddress(); - } else if (backImage === overlayID) { + } else if (backImageHover === overlayID) { location.goBack(); } } @@ -126,24 +204,36 @@ Script.clearInterval(timer); timer = null; Overlays.deleteOverlay(redirectOopsText); - Overlays.deleteOverlay(tryAgainImage); - Overlays.deleteOverlay(backImage); + Overlays.deleteOverlay(tryAgainImageNeutral); + Overlays.deleteOverlay(backImageNeutral); + Overlays.deleteOverlay(tryAgainImageHover); + Overlays.deleteOverlay(backImageHover); + Overlays.deleteOverlay(tryAgainText); + Overlays.deleteOverlay(backText); } toggleOverlays(true); - var whiteColor = {red: 255, green: 255, blue: 255}; - var greyColor = {red: 125, green: 125, blue: 125}; Overlays.mouseReleaseOnOverlay.connect(clickedOnOverlay); Overlays.hoverEnterOverlay.connect(function(overlayID, event) { - if (overlayID === backImage || overlayID === tryAgainImage) { - Overlays.editOverlay(overlayID, { color: greyColor }); + if (overlayID === backImageNeutral) { + Overlays.editOverlay(backImageNeutral, {visible: false}); + Overlays.editOverlay(backImageHover, {visible: true}); + } + if (overlayID === tryAgainImageNeutral) { + Overlays.editOverlay(tryAgainImageNeutral, {visible: false}); + Overlays.editOverlay(tryAgainImageHover, {visible: true}); } }); Overlays.hoverLeaveOverlay.connect(function(overlayID, event) { - if (overlayID === backImage || overlayID === tryAgainImage) { - Overlays.editOverlay(overlayID, { color: whiteColor }); + if (overlayID === backImageHover) { + Overlays.editOverlay(backImageHover, {visible: false}); + Overlays.editOverlay(backImageNeutral, {visible: true}); + } + if (overlayID === tryAgainImageHover) { + Overlays.editOverlay(tryAgainImageHover, {visible: false}); + Overlays.editOverlay(tryAgainImageNeutral, {visible: true}); } });