// // progress.js // examples // // Created by David Rowe on 29 Jan 2015. // Copyright 2015 High Fidelity, Inc. // // This script displays a progress download indicator when downloads are in progress. // // Distributed under the Apache License, Version 2.0. // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // (function () { var progress = 100, // % alpha = 0.0, alphaDelta = 0.0, // > 0 if fading in; < 0 if fading out ALPHA_DELTA_IN = 0.15, ALPHA_DELTA_OUT = -0.02, fadeTimer = null, FADE_INTERVAL = 30, // ms between changes in alpha fadeWaitTimer = null, FADE_OUT_WAIT = 1000, // Wait before starting to fade out after progress 100% visible = false, BAR_COLOR = { red: 0, green: 128, blue: 0 }, BAR_WIDTH = 320, // Nominal dimension of SVG in pixels BAR_HEIGHT = 20, BAR_URL = "http://ctrlaltstudio.com/hifi/progress-bar.svg", BACKGROUND_WIDTH = 360, BACKGROUND_HEIGHT = 60, BACKGROUND_URL = "http://ctrlaltstudio.com/hifi/progress-bar-background.svg", SCALE_2D = 0.5, // Scale the SVGs for 2D display background2D = {}, bar2D = {}, windowWidth = 0, windowHeight = 0; function fade() { alpha = alpha + alphaDelta; if (alpha < 0) { alpha = 0; } if (alpha > 1) { alpha = 1; } if (alpha === 0 || alpha === 1) { // Finished fading in or out alphaDelta = 0; Script.clearInterval(fadeTimer); } if (alpha === 0) { // Finished fading out visible = false; } Overlays.editOverlay(background2D.overlay, { alpha: alpha, visible: visible }); Overlays.editOverlay(bar2D.overlay, { alpha: alpha, visible: visible }); } function onDownloadInfoChanged(info) { var i; // Calculate progress if (info.downloading.length + info.pending === 0) { progress = 100; } else { progress = 0; for (i = 0; i < info.downloading.length; i += 1) { progress += info.downloading[i]; } progress = progress / (info.downloading.length + info.pending); } // Update state if (!visible) { // Not visible because no recent downloads if (progress < 100) { // Have started downloading so fade in visible = true; alphaDelta = ALPHA_DELTA_IN; fadeTimer = Script.setInterval(fade, FADE_INTERVAL); } } else if (alphaDelta !== 0.0) { // Fading in or out if (alphaDelta > 0) { if (progress === 100) { // Was donloading but now have finished so fade out alphaDelta = ALPHA_DELTA_OUT; } } else { if (progress < 100) { // Was finished downloading but have resumed so fade in alphaDelta = ALPHA_DELTA_IN; } } } else { // Fully visible because downloading or recently so if (fadeWaitTimer === null) { if (progress === 100) { // Was downloading but have finished so fade out soon fadeWaitTimer = Script.setTimeout(function () { alphaDelta = ALPHA_DELTA_OUT; fadeTimer = Script.setInterval(fade, FADE_INTERVAL); fadeWaitTimer = null; }, FADE_OUT_WAIT); } } else { if (progress < 100) { // Was finished and waiting to fade out but have resumed downloading so don't fade out Script.clearInterval(fadeWaitTimer); fadeWaitTimer = null; } } } // Update progress bar if (visible) { Overlays.editOverlay(bar2D.overlay, { width: progress / 100 * bar2D.width }); } } function update() { var viewport; viewport = Controller.getViewportDimensions(); if (viewport.x !== windowWidth || viewport.y !== windowHeight) { windowWidth = viewport.x; windowHeight = viewport.y; Overlays.editOverlay(background2D.overlay, { x: windowWidth / 2 - background2D.width / 2, y: windowHeight - background2D.height - bar2D.height }); Overlays.editOverlay(bar2D.overlay, { x: windowWidth / 2 - bar2D.width / 2, y: windowHeight - background2D.height - bar2D.height + (background2D.height - bar2D.height) / 2 }); } } function setUp() { background2D.width = SCALE_2D * BACKGROUND_WIDTH; background2D.height = SCALE_2D * BACKGROUND_HEIGHT; background2D.overlay = Overlays.addOverlay("image", { width: background2D.width, height: background2D.height, imageURL: BACKGROUND_URL, visible: false, alpha: 0.0 }); bar2D.width = SCALE_2D * BAR_WIDTH; bar2D.height = SCALE_2D * BAR_HEIGHT; bar2D.overlay = Overlays.addOverlay("image", { width: bar2D.width, height: bar2D.height, imageURL: BAR_URL, color: BAR_COLOR, visible: false, alpha: 0.0 }); } function tearDown() { Overlays.deleteOverlay(background2D.overlay); Overlays.deleteOverlay(bar2D.overlay); } setUp(); GlobalServices.downloadInfoChanged.connect(onDownloadInfoChanged); GlobalServices.updateDownloadInfo(); Script.update.connect(update); Script.scriptEnding.connect(tearDown); }());