From c1b86fe3d2309d9f344520001f9360d0ef6fa49a Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Thu, 28 Jul 2016 16:16:11 -0700 Subject: [PATCH 01/11] Update progress.js to only track total number of downloads --- scripts/system/progress.js | 78 +++++++++++++++++++++++++++++--------- 1 file changed, 61 insertions(+), 17 deletions(-) diff --git a/scripts/system/progress.js b/scripts/system/progress.js index c6537eef52..a072378dd6 100644 --- a/scripts/system/progress.js +++ b/scripts/system/progress.js @@ -39,6 +39,7 @@ background2D = {}, bar2D = {}, SCALE_2D = 0.35, // Scale the SVGs for 2D display. + //SCALE_2D = 1.0, // Scale the SVGs for 2D display. background3D = {}, bar3D = {}, PROGRESS_3D_DIRECTION = 0.0, // Degrees from avatar orientation. @@ -96,19 +97,41 @@ }); } + var maxSeen = 0; + var bestRawProgress = 0; + var wasActive = false; function onDownloadInfoChanged(info) { var i; // Update raw progress value if (info.downloading.length + info.pending === 0) { + wasActive = false; rawProgress = 100; + bestRawProgress = 100; } else { - rawProgress = 0; - for (i = 0; i < info.downloading.length; i += 1) { - rawProgress += info.downloading[i]; + var count = info.downloading.length + info.pending; + if (!wasActive) { + wasActive = true; + if (count > maxSeen) { + maxSeen = count; + } + bestRawProgress = 0; + } + //for (i = 0; i < info.downloading.length; i += 1) { + //rawProgress += info.downloading[i]; + //} + //rawProgress = rawProgress / (info.downloading.length + info.pending); + rawProgress = ((maxSeen - count) / maxSeen) * 100; + //rawProgress += 1; + //if (rawProgress > 90) { + //rawProgress = 20 + //} + + if (rawProgress > bestRawProgress) { + bestRawProgress = rawProgress; } - rawProgress = rawProgress / (info.downloading.length + info.pending); } + //print(rawProgress, bestRawProgress, maxSeen); } function createOverlays() { @@ -126,9 +149,9 @@ bar3D.overlay = Overlays.addOverlay("image3d", { url: BAR_URL, subImage: { - x: BAR_WIDTH, + x: 0, y: 0, - width: BAR_WIDTH, + width: 480, height: BAR_HEIGHT }, scale: SCALE_3D * BAR_WIDTH, @@ -150,7 +173,7 @@ bar2D.overlay = Overlays.addOverlay("image", { imageURL: BAR_URL, subImage: { - x: BAR_WIDTH, + x: 0, y: 0, width: BAR_WIDTH, height: BAR_HEIGHT @@ -168,16 +191,30 @@ Overlays.deleteOverlay(isOnHMD ? bar3D.overlay : bar2D.overlay); } + var b = 0; function update() { + /* + maxSeen = 100; + b++; + rawProgress = b; + if (rawProgress == 100) { + b = 0 + } + bestRawProgress = rawProgress; + print(rawProgress, bestRawProgress); + */ + + //print(rawProgress, bestRawProgress, maxSeen); var viewport, eyePosition, avatarOrientation; - if (isOnHMD !== HMD.active) { - deleteOverlays(); - isOnHMD = !isOnHMD; - createOverlays(); - } + hmdActive = HMD.active; + //if (isOnHMD !== HMD.active) { + //deleteOverlays(); + //isOnHMD = !isOnHMD; + //createOverlays(); + //} // Calculate progress value to display if (rawProgress === 0 && displayProgress <= DISPLAY_PROGRESS_MINOR_MAXIMUM) { @@ -187,6 +224,7 @@ } else if (rawProgress > displayProgress) { displayProgress = Math.min(rawProgress, displayProgress + DISPLAY_PROGRESS_MAJOR_INCREMENT); } // else (rawProgress === displayProgress); do nothing. + displayProgress = bestRawProgress; // Update state if (!visible) { // Not visible because no recent downloads @@ -232,7 +270,7 @@ y: 0, width: BAR_WIDTH, height: BAR_HEIGHT - } + }, }); // Update position @@ -258,20 +296,25 @@ windowWidth = viewport.x; windowHeight = viewport.y; + var yOffset = hmdActive ? -300 : 0; + Overlays.editOverlay(background2D.overlay, { x: windowWidth / 2 - background2D.width / 2, - y: windowHeight - background2D.height - bar2D.height + y: windowHeight - background2D.height - bar2D.height + yOffset }); Overlays.editOverlay(bar2D.overlay, { x: windowWidth / 2 - bar2D.width / 2, - y: windowHeight - background2D.height - bar2D.height + (background2D.height - bar2D.height) / 2 + y: windowHeight - background2D.height - bar2D.height + (background2D.height - bar2D.height) / 2 + yOffset }); } } } } + function setProgressBar(progress) { + } + function setUp() { background2D.width = SCALE_2D * BACKGROUND_WIDTH; background2D.height = SCALE_2D * BACKGROUND_HEIGHT; @@ -302,6 +345,7 @@ setUp(); GlobalServices.downloadInfoChanged.connect(onDownloadInfoChanged); GlobalServices.updateDownloadInfo(); - Script.update.connect(update); + //Script.update.connect(update); + Script.setInterval(update, 16); Script.scriptEnding.connect(tearDown); -}()); \ No newline at end of file +}()); From 873e7b63dfe7366e487111695523d31a5b1b9a36 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Thu, 28 Jul 2016 16:26:12 -0700 Subject: [PATCH 02/11] Update progress-bar.svg --- scripts/system/assets/images/progress-bar.svg | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/system/assets/images/progress-bar.svg b/scripts/system/assets/images/progress-bar.svg index 0df6f98686..bd35b4ce53 100644 --- a/scripts/system/assets/images/progress-bar.svg +++ b/scripts/system/assets/images/progress-bar.svg @@ -1,7 +1,7 @@ - - + viewBox="0 0 960 30" enable-background="new -159 536 960 30" xml:space="preserve"> + + From a786224297f229728af9c2dbce03ccce7b352885 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Thu, 28 Jul 2016 16:55:45 -0700 Subject: [PATCH 03/11] Add easing back to progress.js --- scripts/system/progress.js | 58 ++++++++++++++++++++++++++------------ 1 file changed, 40 insertions(+), 18 deletions(-) diff --git a/scripts/system/progress.js b/scripts/system/progress.js index a072378dd6..dcd52bce98 100644 --- a/scripts/system/progress.js +++ b/scripts/system/progress.js @@ -100,9 +100,11 @@ var maxSeen = 0; var bestRawProgress = 0; var wasActive = false; + var cooldown = 1000; function onDownloadInfoChanged(info) { var i; + print("PROGRESS: DOwnload info changed ", info.downloading.length, info.pending, maxSeen); // Update raw progress value if (info.downloading.length + info.pending === 0) { wasActive = false; @@ -112,26 +114,33 @@ var count = info.downloading.length + info.pending; if (!wasActive) { wasActive = true; - if (count > maxSeen) { - maxSeen = count; - } + maxSeen = count; bestRawProgress = 0; + rawProgress = 0; + cooldown = 2000; + displayProgress = 0; } - //for (i = 0; i < info.downloading.length; i += 1) { - //rawProgress += info.downloading[i]; - //} - //rawProgress = rawProgress / (info.downloading.length + info.pending); - rawProgress = ((maxSeen - count) / maxSeen) * 100; - //rawProgress += 1; - //if (rawProgress > 90) { - //rawProgress = 20 - //} + if (count > maxSeen) { + maxSeen = count; + } + if (cooldown < 0) { + print("PROGRESS: OUT OF COOLDOWN"); + //for (i = 0; i < info.downloading.length; i += 1) { + //rawProgress += info.downloading[i]; + //} + //rawProgress = rawProgress / (info.downloading.length + info.pending); + rawProgress = ((maxSeen - count) / maxSeen) * 100; + //rawProgress += 1; + //if (rawProgress > 90) { + //rawProgress = 20 + //} - if (rawProgress > bestRawProgress) { - bestRawProgress = rawProgress; + if (rawProgress > bestRawProgress) { + bestRawProgress = rawProgress; + } } } - //print(rawProgress, bestRawProgress, maxSeen); + print("PROGRESS:", rawProgress, bestRawProgress, maxSeen); } function createOverlays() { @@ -193,6 +202,7 @@ var b = 0; function update() { + cooldown -= 16; /* maxSeen = 100; b++; @@ -216,6 +226,7 @@ //createOverlays(); //} + /* // Calculate progress value to display if (rawProgress === 0 && displayProgress <= DISPLAY_PROGRESS_MINOR_MAXIMUM) { displayProgress = Math.min(displayProgress + DISPLAY_PROGRESS_MINOR_INCREMENT, DISPLAY_PROGRESS_MINOR_MAXIMUM); @@ -224,7 +235,18 @@ } else if (rawProgress > displayProgress) { displayProgress = Math.min(rawProgress, displayProgress + DISPLAY_PROGRESS_MAJOR_INCREMENT); } // else (rawProgress === displayProgress); do nothing. - displayProgress = bestRawProgress; + //displayProgress = bestRawProgress; + //*/ + if (displayProgress < rawProgress) { + var diff = rawProgress - displayProgress; + if (diff < 0.1) { + displayProgress = rawProgress; + } else { + displayProgress += diff * 0.2; + } + } + print('PROGRESS:', displayProgress); + // Update state if (!visible) { // Not visible because no recent downloads @@ -235,7 +257,7 @@ } } else if (alphaDelta !== 0.0) { // Fading in or out if (alphaDelta > 0) { - if (displayProgress === 100) { // Was downloading but now have finished so fade out + if (rawProgress === 100) { // Was downloading but now have finished so fade out alphaDelta = ALPHA_DELTA_OUT; } } else { @@ -245,7 +267,7 @@ } } else { // Fully visible because downloading or recently so if (fadeWaitTimer === null) { - if (displayProgress === 100) { // Was downloading but have finished so fade out soon + if (rawProgress === 100) { // Was downloading but have finished so fade out soon fadeWaitTimer = Script.setTimeout(function() { alphaDelta = ALPHA_DELTA_OUT; fadeTimer = Script.setInterval(fade, FADE_INTERVAL); From 58932a6806f726b2337c94166d80b567d3d7f208 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Thu, 28 Jul 2016 17:13:05 -0700 Subject: [PATCH 04/11] Add reset of progress bar when domain changes --- scripts/system/progress.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/scripts/system/progress.js b/scripts/system/progress.js index dcd52bce98..660dfc4b98 100644 --- a/scripts/system/progress.js +++ b/scripts/system/progress.js @@ -96,6 +96,15 @@ visible: visible }); } + function resetProgress() { + wasActive = true; + bestRawProgress = 0; + rawProgress = 0; + cooldown = 1000; + displayProgress = 0; + } + + Window.domainChanged.connect(resetProgress); var maxSeen = 0; var bestRawProgress = 0; @@ -113,12 +122,8 @@ } else { var count = info.downloading.length + info.pending; if (!wasActive) { - wasActive = true; + resetProgress(); maxSeen = count; - bestRawProgress = 0; - rawProgress = 0; - cooldown = 2000; - displayProgress = 0; } if (count > maxSeen) { maxSeen = count; @@ -242,7 +247,7 @@ if (diff < 0.1) { displayProgress = rawProgress; } else { - displayProgress += diff * 0.2; + displayProgress += diff * 0.1; } } print('PROGRESS:', displayProgress); From 91f847a7f0aa8561a63119bb612d6b9c4e2e34b7 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Thu, 28 Jul 2016 17:24:35 -0700 Subject: [PATCH 05/11] Update progress bar image --- scripts/system/assets/images/progress-bar.svg | 9 +++++++-- scripts/system/progress.js | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/scripts/system/assets/images/progress-bar.svg b/scripts/system/assets/images/progress-bar.svg index bd35b4ce53..360aa3f1a9 100644 --- a/scripts/system/assets/images/progress-bar.svg +++ b/scripts/system/assets/images/progress-bar.svg @@ -1,7 +1,12 @@ - - + + + + + + + diff --git a/scripts/system/progress.js b/scripts/system/progress.js index 660dfc4b98..fc813ada88 100644 --- a/scripts/system/progress.js +++ b/scripts/system/progress.js @@ -250,7 +250,7 @@ displayProgress += diff * 0.1; } } - print('PROGRESS:', displayProgress); + //print('PROGRESS:', displayProgress); // Update state From 6279b96223aaa24d90f994b39f001e669c0c9b22 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Fri, 29 Jul 2016 10:11:12 -0700 Subject: [PATCH 06/11] Add minor tweaks to progress.js --- scripts/system/progress.js | 60 ++++++++++---------------------------- 1 file changed, 15 insertions(+), 45 deletions(-) diff --git a/scripts/system/progress.js b/scripts/system/progress.js index fc813ada88..0628974043 100644 --- a/scripts/system/progress.js +++ b/scripts/system/progress.js @@ -28,10 +28,10 @@ FADE_OUT_WAIT = 1000, // Wait before starting to fade out after progress 100%. visible = false, BAR_WIDTH = 480, // Dimension of SVG in pixels of visible portion (half) of the bar. - BAR_HEIGHT = 30, + BAR_HEIGHT = 10, BAR_URL = Script.resolvePath("assets/images/progress-bar.svg"), - BACKGROUND_WIDTH = 540, - BACKGROUND_HEIGHT = 90, + BACKGROUND_WIDTH = 520, + BACKGROUND_HEIGHT = 50, BACKGROUND_URL = Script.resolvePath("assets/images/progress-bar-background.svg"), isOnHMD = false, windowWidth = 0, @@ -45,8 +45,9 @@ PROGRESS_3D_DIRECTION = 0.0, // Degrees from avatar orientation. PROGRESS_3D_DISTANCE = 0.602, // Horizontal distance from avatar position. PROGRESS_3D_ELEVATION = -0.8, // Height of top middle of top notification relative to avatar eyes. + PROGRESS_3D_ELEVATION = -0.0, // Height of top middle of top notification relative to avatar eyes. PROGRESS_3D_YAW = 0.0, // Degrees relative to notifications direction. - PROGRESS_3D_PITCH = -60.0, // Degrees from vertical. + PROGRESS_3D_PITCH = -0.0, // Degrees from vertical. SCALE_3D = 0.0011, // Scale the bar SVG for 3D display. BACKGROUND_3D_SIZE = { x: 0.76, @@ -57,7 +58,7 @@ green: 2, blue: 2 }, - BACKGROUND_3D_ALPHA = 0.7; + BACKGROUND_3D_ALPHA = 1.0; function fade() { @@ -119,6 +120,7 @@ wasActive = false; rawProgress = 100; bestRawProgress = 100; + cooldown = 0; } else { var count = info.downloading.length + info.pending; if (!wasActive) { @@ -128,17 +130,8 @@ if (count > maxSeen) { maxSeen = count; } - if (cooldown < 0) { - print("PROGRESS: OUT OF COOLDOWN"); - //for (i = 0; i < info.downloading.length; i += 1) { - //rawProgress += info.downloading[i]; - //} - //rawProgress = rawProgress / (info.downloading.length + info.pending); + if (cooldown <= 0) { rawProgress = ((maxSeen - count) / maxSeen) * 100; - //rawProgress += 1; - //if (rawProgress > 90) { - //rawProgress = 20 - //} if (rawProgress > bestRawProgress) { bestRawProgress = rawProgress; @@ -208,46 +201,23 @@ var b = 0; function update() { cooldown -= 16; - /* - maxSeen = 100; - b++; - rawProgress = b; - if (rawProgress == 100) { - b = 0 - } - bestRawProgress = rawProgress; - print(rawProgress, bestRawProgress); - */ - - //print(rawProgress, bestRawProgress, maxSeen); var viewport, eyePosition, avatarOrientation; hmdActive = HMD.active; - //if (isOnHMD !== HMD.active) { - //deleteOverlays(); - //isOnHMD = !isOnHMD; - //createOverlays(); - //} + // if (isOnHMD !== HMD.active) { + // deleteOverlays(); + // isOnHMD = !isOnHMD; + // createOverlays(); + // } - /* - // Calculate progress value to display - if (rawProgress === 0 && displayProgress <= DISPLAY_PROGRESS_MINOR_MAXIMUM) { - displayProgress = Math.min(displayProgress + DISPLAY_PROGRESS_MINOR_INCREMENT, DISPLAY_PROGRESS_MINOR_MAXIMUM); - } else if (rawProgress < displayProgress) { - displayProgress = rawProgress; - } else if (rawProgress > displayProgress) { - displayProgress = Math.min(rawProgress, displayProgress + DISPLAY_PROGRESS_MAJOR_INCREMENT); - } // else (rawProgress === displayProgress); do nothing. - //displayProgress = bestRawProgress; - //*/ if (displayProgress < rawProgress) { var diff = rawProgress - displayProgress; if (diff < 0.1) { displayProgress = rawProgress; } else { - displayProgress += diff * 0.1; + displayProgress += diff * 0.05; } } //print('PROGRESS:', displayProgress); @@ -323,7 +293,7 @@ windowWidth = viewport.x; windowHeight = viewport.y; - var yOffset = hmdActive ? -300 : 0; + var yOffset = hmdActive ? -300 : -10; Overlays.editOverlay(background2D.overlay, { x: windowWidth / 2 - background2D.width / 2, From 9f6da23b15b7d9d14ce24dd7353383c34a38665e Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Fri, 29 Jul 2016 10:11:28 -0700 Subject: [PATCH 07/11] Update progress bar images --- scripts/system/assets/images/progress-bar-background.svg | 4 ++-- scripts/system/assets/images/progress-bar.svg | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/scripts/system/assets/images/progress-bar-background.svg b/scripts/system/assets/images/progress-bar-background.svg index 732acd05ad..0499edfa16 100644 --- a/scripts/system/assets/images/progress-bar-background.svg +++ b/scripts/system/assets/images/progress-bar-background.svg @@ -1,5 +1,5 @@  - - + + diff --git a/scripts/system/assets/images/progress-bar.svg b/scripts/system/assets/images/progress-bar.svg index 360aa3f1a9..e24a2cbff4 100644 --- a/scripts/system/assets/images/progress-bar.svg +++ b/scripts/system/assets/images/progress-bar.svg @@ -1,12 +1,12 @@ + viewBox="0 0 960 10" enable-background="new -159 536 960 30" xml:space="preserve"> - - + + From 5d50389e29adaead7dc9428ddab62af704d9d9d6 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Fri, 29 Jul 2016 17:17:59 -0700 Subject: [PATCH 08/11] Make updates to the hmd progress bar --- .../assets/images/progress-bar-background.svg | 2 +- scripts/system/progress.js | 242 +++++++++++------- 2 files changed, 152 insertions(+), 92 deletions(-) diff --git a/scripts/system/assets/images/progress-bar-background.svg b/scripts/system/assets/images/progress-bar-background.svg index 0499edfa16..a8b4e1aab5 100644 --- a/scripts/system/assets/images/progress-bar-background.svg +++ b/scripts/system/assets/images/progress-bar-background.svg @@ -1,5 +1,5 @@  - + diff --git a/scripts/system/progress.js b/scripts/system/progress.js index 0628974043..faf8d1bd38 100644 --- a/scripts/system/progress.js +++ b/scripts/system/progress.js @@ -33,7 +33,7 @@ BACKGROUND_WIDTH = 520, BACKGROUND_HEIGHT = 50, BACKGROUND_URL = Script.resolvePath("assets/images/progress-bar-background.svg"), - isOnHMD = false, + use3DOverlay = false, windowWidth = 0, windowHeight = 0, background2D = {}, @@ -45,10 +45,10 @@ PROGRESS_3D_DIRECTION = 0.0, // Degrees from avatar orientation. PROGRESS_3D_DISTANCE = 0.602, // Horizontal distance from avatar position. PROGRESS_3D_ELEVATION = -0.8, // Height of top middle of top notification relative to avatar eyes. - PROGRESS_3D_ELEVATION = -0.0, // Height of top middle of top notification relative to avatar eyes. + PROGRESS_3D_ELEVATION = -0.2, // Height of top middle of top notification relative to avatar eyes. PROGRESS_3D_YAW = 0.0, // Degrees relative to notifications direction. PROGRESS_3D_PITCH = -0.0, // Degrees from vertical. - SCALE_3D = 0.0011, // Scale the bar SVG for 3D display. + SCALE_3D = 0.0004, // Scale the bar SVG for 3D display. BACKGROUND_3D_SIZE = { x: 0.76, y: 0.08 @@ -66,9 +66,7 @@ if (alpha < 0) { alpha = 0; - } - - if (alpha > 1) { + } else if (alpha > 1) { alpha = 1; } @@ -81,9 +79,9 @@ visible = false; } - if (isOnHMD) { + if (use3DOverlay) { Overlays.editOverlay(background3D.overlay, { - backgroundAlpha: alpha * BACKGROUND_3D_ALPHA, + alpha: alpha, visible: visible }); } else { @@ -92,7 +90,7 @@ visible: visible }); } - Overlays.editOverlay(isOnHMD ? bar3D.overlay : bar2D.overlay, { + Overlays.editOverlay(use3DOverlay ? bar3D.overlay : bar2D.overlay, { alpha: alpha, visible: visible }); @@ -105,7 +103,12 @@ displayProgress = 0; } - Window.domainChanged.connect(resetProgress); + Window.domainChanged.connect(function() { + hasShownOnThisDomain = false; + resetProgress(); + }); + + var hasShownOnThisDomain = false; var maxSeen = 0; var bestRawProgress = 0; @@ -114,7 +117,7 @@ function onDownloadInfoChanged(info) { var i; - print("PROGRESS: DOwnload info changed ", info.downloading.length, info.pending, maxSeen); + print("PROGRESS: Download info changed ", info.downloading.length, info.pending, maxSeen); // Update raw progress value if (info.downloading.length + info.pending === 0) { wasActive = false; @@ -142,79 +145,87 @@ } function createOverlays() { - if (isOnHMD) { + background3D.overlay = Overlays.addOverlay("image3d", { + url: BACKGROUND_URL, + subImage: { + x: 0, + y: 0, + width: BACKGROUND_WIDTH, + height: BACKGROUND_HEIGHT + }, + scale: SCALE_3D * BACKGROUND_WIDTH, + isFacingAvatar: false, + visible: false, + alpha: 1.0, + ignoreRayIntersection: true, + emissive: true, + isFacingAvatar: true, + drawInFront: true + }); + bar3D.overlay = Overlays.addOverlay("image3d", { + url: BAR_URL, + subImage: { + x: 0, + y: 0, + width: BAR_WIDTH, + height: BAR_HEIGHT + }, + scale: SCALE_3D * BAR_WIDTH, + isFacingAvatar: false, + visible: false, + alpha: 1.0, + ignoreRayIntersection: true, + emissive: true, + isFacingAvatar: true, + drawInFront: true + }); - background3D.overlay = Overlays.addOverlay("rectangle3d", { - size: BACKGROUND_3D_SIZE, - color: BACKGROUND_3D_COLOR, - alpha: BACKGROUND_3D_ALPHA, - solid: true, - isFacingAvatar: false, - visible: false, - ignoreRayIntersection: true - }); - bar3D.overlay = Overlays.addOverlay("image3d", { - url: BAR_URL, - subImage: { - x: 0, - y: 0, - width: 480, - height: BAR_HEIGHT - }, - scale: SCALE_3D * BAR_WIDTH, - isFacingAvatar: false, - visible: false, - alpha: 0.0, - ignoreRayIntersection: true - }); - - } else { - - background2D.overlay = Overlays.addOverlay("image", { - imageURL: BACKGROUND_URL, - width: background2D.width, - height: background2D.height, - visible: false, - alpha: 0.0 - }); - bar2D.overlay = Overlays.addOverlay("image", { - imageURL: BAR_URL, - subImage: { - x: 0, - y: 0, - width: BAR_WIDTH, - height: BAR_HEIGHT - }, - width: bar2D.width, - height: bar2D.height, - visible: false, - alpha: 0.0 - }); - } + background2D.overlay = Overlays.addOverlay("image", { + imageURL: BACKGROUND_URL, + width: background2D.width, + height: background2D.height, + visible: false, + alpha: 0.0 + }); + bar2D.overlay = Overlays.addOverlay("image", { + imageURL: BAR_URL, + subImage: { + x: 0, + y: 0, + width: BAR_WIDTH, + height: BAR_HEIGHT + }, + width: bar2D.width, + height: bar2D.height, + visible: false, + alpha: 0.0 + }); } function deleteOverlays() { - Overlays.deleteOverlay(isOnHMD ? background3D.overlay : background2D.overlay); - Overlays.deleteOverlay(isOnHMD ? bar3D.overlay : bar2D.overlay); + Overlays.deleteOverlay(background3D.overlay); + Overlays.deleteOverlay(bar3D.overlay); + + Overlays.deleteOverlay(background2D.overlay); + Overlays.deleteOverlay(bar2D.overlay); } var b = 0; + var worldOverlayOn = false; + var currentOrientation = null; function update() { - cooldown -= 16; + cooldown -= 30; var viewport, eyePosition, avatarOrientation; - hmdActive = HMD.active; - // if (isOnHMD !== HMD.active) { - // deleteOverlays(); - // isOnHMD = !isOnHMD; - // createOverlays(); - // } + if (use3DOverlay !== worldOverlayOn) { + use3DOverlay = !use3DOverlay; + } if (displayProgress < rawProgress) { var diff = rawProgress - displayProgress; - if (diff < 0.1) { + if (diff < 0.5) { displayProgress = rawProgress; } else { displayProgress += diff * 0.05; @@ -222,7 +233,6 @@ } //print('PROGRESS:', displayProgress); - // Update state if (!visible) { // Not visible because no recent downloads if (displayProgress < 100) { // Have started downloading so fade in @@ -257,11 +267,19 @@ } } + if (use3DOverlay) { + Overlays.editOverlay(background2D.overlay, { visible: false }); + Overlays.editOverlay(bar2D.overlay, { visible: false }); + } else { + Overlays.editOverlay(background3D.overlay, { visible: false }); + Overlays.editOverlay(bar3D.overlay, { visible: false }); + } + if (visible) { // Update progress bar - Overlays.editOverlay(isOnHMD ? bar3D.overlay : bar2D.overlay, { - visible: visible, + Overlays.editOverlay(use3DOverlay ? bar3D.overlay : bar2D.overlay, { + visible: true, subImage: { x: BAR_WIDTH * (1 - displayProgress / 100), y: 0, @@ -270,19 +288,27 @@ }, }); + Overlays.editOverlay(use3DOverlay ? background3D.overlay : background2D.overlay, { + visible: true, + }); + // Update position - if (isOnHMD) { + if (use3DOverlay) { + print("HERE"); // Update 3D overlays to maintain positions relative to avatar eyePosition = MyAvatar.getDefaultEyePosition(); - avatarOrientation = MyAvatar.orientation; + avatarOrientation = Camera.orientation; + + currentOrientation = Quat.slerp(currentOrientation, avatarOrientation, 0.10); + avatarOrientation = currentOrientation; Overlays.editOverlay(background3D.overlay, { position: Vec3.sum(eyePosition, Vec3.multiplyQbyV(avatarOrientation, background3D.offset)), - rotation: Quat.multiply(avatarOrientation, background3D.orientation) + //rotation: Quat.multiply(avatarOrientation, background3D.orientation) }); Overlays.editOverlay(bar3D.overlay, { position: Vec3.sum(eyePosition, Vec3.multiplyQbyV(avatarOrientation, bar3D.offset)), - rotation: Quat.multiply(avatarOrientation, bar3D.orientation) + //rotation: Quat.multiply(avatarOrientation, bar3D.orientation) }); } else { @@ -290,25 +316,44 @@ viewport = Controller.getViewportDimensions(); if (viewport.x !== windowWidth || viewport.y !== windowHeight) { - windowWidth = viewport.x; - windowHeight = viewport.y; - - var yOffset = hmdActive ? -300 : -10; - - Overlays.editOverlay(background2D.overlay, { - x: windowWidth / 2 - background2D.width / 2, - y: windowHeight - background2D.height - bar2D.height + yOffset - }); - - Overlays.editOverlay(bar2D.overlay, { - x: windowWidth / 2 - bar2D.width / 2, - y: windowHeight - background2D.height - bar2D.height + (background2D.height - bar2D.height) / 2 + yOffset - }); + updateProgressBarLocation(); } } } } + function updateProgressBarLocation() { + viewport = Controller.getViewportDimensions(); + windowWidth = viewport.x; + windowHeight = viewport.y; + + var yOffset = HMD.active ? -300 : -10; + yOffset += yAdjust; + // if (hmdActive) { + // if (true) { //hasShownOnThisDomain) { + // yOffset = -100; + // SCALE_2D = 1.0/3; + // } else { + // yOffset = -300; + // SCALE_2D = 2.0/3; + // } + // } + background2D.width = SCALE_2D * BACKGROUND_WIDTH; + background2D.height = SCALE_2D * BACKGROUND_HEIGHT; + bar2D.width = SCALE_2D * BAR_WIDTH; + bar2D.height = SCALE_2D * BAR_HEIGHT; + + Overlays.editOverlay(background2D.overlay, { + x: windowWidth / 2 - background2D.width / 2, + y: windowHeight - background2D.height - bar2D.height + yOffset + }); + + Overlays.editOverlay(bar2D.overlay, { + x: windowWidth / 2 - bar2D.width / 2, + y: windowHeight - background2D.height - bar2D.height + (background2D.height - bar2D.height) / 2 + yOffset + }); + } + function setProgressBar(progress) { } @@ -339,10 +384,25 @@ deleteOverlays(); } + var yAdjust = 0; + function keyPress(event) { + print("Key event: ", event.text); + if (event.text == '.') { + yAdjust -= 10; + updateProgressBarLocation(); + } else if (event.text == ',') { + yAdjust += 10; + updateProgressBarLocation(); + } else if (event.text == 'SPACE') { + worldOverlayOn = !worldOverlayOn; + } + } + setUp(); GlobalServices.downloadInfoChanged.connect(onDownloadInfoChanged); GlobalServices.updateDownloadInfo(); //Script.update.connect(update); - Script.setInterval(update, 16); + Script.setInterval(update, 1000/60); Script.scriptEnding.connect(tearDown); + Controller.keyPressEvent.connect(keyPress); }()); From 79a243b1713859ee973262e00a3d4b56ae0ec8f7 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Tue, 2 Aug 2016 16:19:38 -0700 Subject: [PATCH 09/11] Clean up progress.js --- scripts/system/progress.js | 79 ++++++++++++++++---------------------- 1 file changed, 34 insertions(+), 45 deletions(-) diff --git a/scripts/system/progress.js b/scripts/system/progress.js index faf8d1bd38..821fc872b7 100644 --- a/scripts/system/progress.js +++ b/scripts/system/progress.js @@ -13,6 +13,11 @@ (function() { + function debug() { + return; + print.apply(null, arguments); + } + var rawProgress = 100, // % raw value. displayProgress = 100, // % smoothed value to display. DISPLAY_PROGRESS_MINOR_MAXIMUM = 8, // % displayed progress bar goes up to while 0% raw progress. @@ -39,7 +44,6 @@ background2D = {}, bar2D = {}, SCALE_2D = 0.35, // Scale the SVGs for 2D display. - //SCALE_2D = 1.0, // Scale the SVGs for 2D display. background3D = {}, bar3D = {}, PROGRESS_3D_DIRECTION = 0.0, // Degrees from avatar orientation. @@ -96,44 +100,58 @@ }); } function resetProgress() { - wasActive = true; + isDownloading = true; bestRawProgress = 0; rawProgress = 0; - cooldown = 1000; + initialDelayCooldown = INITIAL_DELAY_COOLDOWN_TIME; displayProgress = 0; } Window.domainChanged.connect(function() { - hasShownOnThisDomain = false; resetProgress(); }); - var hasShownOnThisDomain = false; - + // Max seen since downloads started. This is reset when all downloads have completed. var maxSeen = 0; + + // Progress is defined as: (pending_downloads + active_downloads) / max_seen + // We keep track of both the current progress (rawProgress) and the + // best progress we've seen (bestRawProgress). As you are downloading, you may + // encounter new assets that require downloads, increasing the number of + // pending downloads and thus decreasing your overall progress. var bestRawProgress = 0; - var wasActive = false; - var cooldown = 1000; + + // True if we have known active downloads + var isDownloading = false; + + // Entities are streamed to users, so you don't receive them all at once; instead, you + // receive them over a period of time. In many cases we end up in a situation where + // + // The initial delay cooldown keeps us from tracking progress before the allotted time + // has passed. + var INITIAL_DELAY_COOLDOWN_TIME = 1000; + var initialDelayCooldown = 0; function onDownloadInfoChanged(info) { var i; - print("PROGRESS: Download info changed ", info.downloading.length, info.pending, maxSeen); + debug("PROGRESS: Download info changed ", info.downloading.length, info.pending, maxSeen); + // Update raw progress value if (info.downloading.length + info.pending === 0) { - wasActive = false; + isDownloading = false; rawProgress = 100; bestRawProgress = 100; - cooldown = 0; + initialDelayCooldown = INITIAL_DELAY_COOLDOWN_TIME; } else { var count = info.downloading.length + info.pending; - if (!wasActive) { + if (!isDownloading) { resetProgress(); maxSeen = count; } if (count > maxSeen) { maxSeen = count; } - if (cooldown <= 0) { + if (initialDelayCooldown <= 0) { rawProgress = ((maxSeen - count) / maxSeen) * 100; if (rawProgress > bestRawProgress) { @@ -141,7 +159,7 @@ } } } - print("PROGRESS:", rawProgress, bestRawProgress, maxSeen); + debug("PROGRESS:", rawProgress, bestRawProgress, maxSeen); } function createOverlays() { @@ -214,7 +232,7 @@ var worldOverlayOn = false; var currentOrientation = null; function update() { - cooldown -= 30; + initialDelayCooldown -= 30; var viewport, eyePosition, avatarOrientation; @@ -231,7 +249,6 @@ displayProgress += diff * 0.05; } } - //print('PROGRESS:', displayProgress); // Update state if (!visible) { // Not visible because no recent downloads @@ -328,16 +345,7 @@ windowHeight = viewport.y; var yOffset = HMD.active ? -300 : -10; - yOffset += yAdjust; - // if (hmdActive) { - // if (true) { //hasShownOnThisDomain) { - // yOffset = -100; - // SCALE_2D = 1.0/3; - // } else { - // yOffset = -300; - // SCALE_2D = 2.0/3; - // } - // } + background2D.width = SCALE_2D * BACKGROUND_WIDTH; background2D.height = SCALE_2D * BACKGROUND_HEIGHT; bar2D.width = SCALE_2D * BAR_WIDTH; @@ -354,9 +362,6 @@ }); } - function setProgressBar(progress) { - } - function setUp() { background2D.width = SCALE_2D * BACKGROUND_WIDTH; background2D.height = SCALE_2D * BACKGROUND_HEIGHT; @@ -384,25 +389,9 @@ deleteOverlays(); } - var yAdjust = 0; - function keyPress(event) { - print("Key event: ", event.text); - if (event.text == '.') { - yAdjust -= 10; - updateProgressBarLocation(); - } else if (event.text == ',') { - yAdjust += 10; - updateProgressBarLocation(); - } else if (event.text == 'SPACE') { - worldOverlayOn = !worldOverlayOn; - } - } - setUp(); GlobalServices.downloadInfoChanged.connect(onDownloadInfoChanged); GlobalServices.updateDownloadInfo(); - //Script.update.connect(update); Script.setInterval(update, 1000/60); Script.scriptEnding.connect(tearDown); - Controller.keyPressEvent.connect(keyPress); }()); From 1f2e34d59b85c3a265f7955401c112f396914888 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Tue, 2 Aug 2016 16:29:40 -0700 Subject: [PATCH 10/11] Remove 3d overlay from progress.js --- scripts/system/progress.js | 155 +++++-------------------------------- 1 file changed, 21 insertions(+), 134 deletions(-) diff --git a/scripts/system/progress.js b/scripts/system/progress.js index 821fc872b7..67ef1e203c 100644 --- a/scripts/system/progress.js +++ b/scripts/system/progress.js @@ -38,31 +38,11 @@ BACKGROUND_WIDTH = 520, BACKGROUND_HEIGHT = 50, BACKGROUND_URL = Script.resolvePath("assets/images/progress-bar-background.svg"), - use3DOverlay = false, windowWidth = 0, windowHeight = 0, background2D = {}, bar2D = {}, - SCALE_2D = 0.35, // Scale the SVGs for 2D display. - background3D = {}, - bar3D = {}, - PROGRESS_3D_DIRECTION = 0.0, // Degrees from avatar orientation. - PROGRESS_3D_DISTANCE = 0.602, // Horizontal distance from avatar position. - PROGRESS_3D_ELEVATION = -0.8, // Height of top middle of top notification relative to avatar eyes. - PROGRESS_3D_ELEVATION = -0.2, // Height of top middle of top notification relative to avatar eyes. - PROGRESS_3D_YAW = 0.0, // Degrees relative to notifications direction. - PROGRESS_3D_PITCH = -0.0, // Degrees from vertical. - SCALE_3D = 0.0004, // Scale the bar SVG for 3D display. - BACKGROUND_3D_SIZE = { - x: 0.76, - y: 0.08 - }, // Match up with the 3D background with those of notifications.js notices. - BACKGROUND_3D_COLOR = { - red: 2, - green: 2, - blue: 2 - }, - BACKGROUND_3D_ALPHA = 1.0; + SCALE_2D = 0.35; // Scale the SVGs for 2D display. function fade() { @@ -83,32 +63,21 @@ visible = false; } - if (use3DOverlay) { - Overlays.editOverlay(background3D.overlay, { - alpha: alpha, - visible: visible - }); - } else { - Overlays.editOverlay(background2D.overlay, { - alpha: alpha, - visible: visible - }); - } - Overlays.editOverlay(use3DOverlay ? bar3D.overlay : bar2D.overlay, { + Overlays.editOverlay(background2D.overlay, { + alpha: alpha, + visible: visible + }); + Overlays.editOverlay(bar2D.overlay, { alpha: alpha, visible: visible }); } - function resetProgress() { - isDownloading = true; - bestRawProgress = 0; - rawProgress = 0; - initialDelayCooldown = INITIAL_DELAY_COOLDOWN_TIME; - displayProgress = 0; - } Window.domainChanged.connect(function() { - resetProgress(); + isDownloading = false; + bestRawProgress = 100; + rawProgress = 100; + displayProgress = 100; }); // Max seen since downloads started. This is reset when all downloads have completed. @@ -145,7 +114,11 @@ } else { var count = info.downloading.length + info.pending; if (!isDownloading) { - resetProgress(); + isDownloading = true; + bestRawProgress = 0; + rawProgress = 0; + initialDelayCooldown = INITIAL_DELAY_COOLDOWN_TIME; + displayProgress = 0; maxSeen = count; } if (count > maxSeen) { @@ -163,41 +136,6 @@ } function createOverlays() { - background3D.overlay = Overlays.addOverlay("image3d", { - url: BACKGROUND_URL, - subImage: { - x: 0, - y: 0, - width: BACKGROUND_WIDTH, - height: BACKGROUND_HEIGHT - }, - scale: SCALE_3D * BACKGROUND_WIDTH, - isFacingAvatar: false, - visible: false, - alpha: 1.0, - ignoreRayIntersection: true, - emissive: true, - isFacingAvatar: true, - drawInFront: true - }); - bar3D.overlay = Overlays.addOverlay("image3d", { - url: BAR_URL, - subImage: { - x: 0, - y: 0, - width: BAR_WIDTH, - height: BAR_HEIGHT - }, - scale: SCALE_3D * BAR_WIDTH, - isFacingAvatar: false, - visible: false, - alpha: 1.0, - ignoreRayIntersection: true, - emissive: true, - isFacingAvatar: true, - drawInFront: true - }); - background2D.overlay = Overlays.addOverlay("image", { imageURL: BACKGROUND_URL, width: background2D.width, @@ -221,15 +159,11 @@ } function deleteOverlays() { - Overlays.deleteOverlay(background3D.overlay); - Overlays.deleteOverlay(bar3D.overlay); - Overlays.deleteOverlay(background2D.overlay); Overlays.deleteOverlay(bar2D.overlay); } var b = 0; - var worldOverlayOn = false; var currentOrientation = null; function update() { initialDelayCooldown -= 30; @@ -237,10 +171,6 @@ eyePosition, avatarOrientation; - if (use3DOverlay !== worldOverlayOn) { - use3DOverlay = !use3DOverlay; - } - if (displayProgress < rawProgress) { var diff = rawProgress - displayProgress; if (diff < 0.5) { @@ -284,18 +214,10 @@ } } - if (use3DOverlay) { - Overlays.editOverlay(background2D.overlay, { visible: false }); - Overlays.editOverlay(bar2D.overlay, { visible: false }); - } else { - Overlays.editOverlay(background3D.overlay, { visible: false }); - Overlays.editOverlay(bar3D.overlay, { visible: false }); - } - if (visible) { // Update progress bar - Overlays.editOverlay(use3DOverlay ? bar3D.overlay : bar2D.overlay, { + Overlays.editOverlay(bar2D.overlay, { visible: true, subImage: { x: BAR_WIDTH * (1 - displayProgress / 100), @@ -305,36 +227,15 @@ }, }); - Overlays.editOverlay(use3DOverlay ? background3D.overlay : background2D.overlay, { + Overlays.editOverlay(background2D.overlay, { visible: true, }); - // Update position - if (use3DOverlay) { - print("HERE"); - // Update 3D overlays to maintain positions relative to avatar - eyePosition = MyAvatar.getDefaultEyePosition(); - avatarOrientation = Camera.orientation; + // Update 2D overlays to maintain positions at bottom middle of window + viewport = Controller.getViewportDimensions(); - currentOrientation = Quat.slerp(currentOrientation, avatarOrientation, 0.10); - avatarOrientation = currentOrientation; - - Overlays.editOverlay(background3D.overlay, { - position: Vec3.sum(eyePosition, Vec3.multiplyQbyV(avatarOrientation, background3D.offset)), - //rotation: Quat.multiply(avatarOrientation, background3D.orientation) - }); - Overlays.editOverlay(bar3D.overlay, { - position: Vec3.sum(eyePosition, Vec3.multiplyQbyV(avatarOrientation, bar3D.offset)), - //rotation: Quat.multiply(avatarOrientation, bar3D.orientation) - }); - - } else { - // Update 2D overlays to maintain positions at bottom middle of window - viewport = Controller.getViewportDimensions(); - - if (viewport.x !== windowWidth || viewport.y !== windowHeight) { - updateProgressBarLocation(); - } + if (viewport.x !== windowWidth || viewport.y !== windowHeight) { + updateProgressBarLocation(); } } } @@ -368,20 +269,6 @@ bar2D.width = SCALE_2D * BAR_WIDTH; bar2D.height = SCALE_2D * BAR_HEIGHT; - background3D.offset = Vec3.multiplyQbyV(Quat.fromPitchYawRollDegrees(0, PROGRESS_3D_DIRECTION, 0), { - x: 0, - y: 0, - z: -PROGRESS_3D_DISTANCE - }); - background3D.offset.y += PROGRESS_3D_ELEVATION; - background3D.orientation = Quat.fromPitchYawRollDegrees(PROGRESS_3D_PITCH, PROGRESS_3D_DIRECTION + PROGRESS_3D_YAW, 0); - bar3D.offset = Vec3.sum(background3D.offset, { - x: 0, - y: 0, - z: 0.001 - }); // Just in front of background - bar3D.orientation = background3D.orientation; - createOverlays(); } From adbd9ff85428bc99fcb28cc8db6bf190b0f0eb4e Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Tue, 2 Aug 2016 16:34:57 -0700 Subject: [PATCH 11/11] Add constants for progress bar offset --- scripts/system/progress.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/scripts/system/progress.js b/scripts/system/progress.js index 67ef1e203c..7c1c475e99 100644 --- a/scripts/system/progress.js +++ b/scripts/system/progress.js @@ -34,6 +34,8 @@ visible = false, BAR_WIDTH = 480, // Dimension of SVG in pixels of visible portion (half) of the bar. BAR_HEIGHT = 10, + BAR_Y_OFFSET_2D = -10, // Offset of progress bar while in desktop mode + BAR_Y_OFFSET_HMD = -300, // Offset of progress bar while in HMD BAR_URL = Script.resolvePath("assets/images/progress-bar.svg"), BACKGROUND_WIDTH = 520, BACKGROUND_HEIGHT = 50, @@ -245,7 +247,7 @@ windowWidth = viewport.x; windowHeight = viewport.y; - var yOffset = HMD.active ? -300 : -10; + var yOffset = HMD.active ? BAR_Y_OFFSET_HMD : BAR_Y_OFFSET_2D; background2D.width = SCALE_2D * BACKGROUND_WIDTH; background2D.height = SCALE_2D * BACKGROUND_HEIGHT;