overte/examples/progress.js

//
//  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 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.
        DISPLAY_PROGRESS_MINOR_INCREMENT = 0.1,     // % amount to increment display value each update when 0% raw progress.
        DISPLAY_PROGRESS_MAJOR_INCREMENT = 5,       // % maximum amount to increment display value when >0% raw progress.
        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_WIDTH = 480,                            // Dimension of SVG in pixels of visible portion (half) of the bar.
        BAR_HEIGHT = 30,
        BAR_URL = "http://hifi-public.s3.amazonaws.com/images/progress-bar.svg",
        BACKGROUND_WIDTH = 540,
        BACKGROUND_HEIGHT = 90,
        BACKGROUND_URL = "http://hifi-public.s3.amazonaws.com/images/progress-bar-background.svg",
        isOnHMD = 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_YAW = 0.0,                      // Degrees relative to notifications direction.
        PROGRESS_3D_PITCH = -60.0,                  // Degrees from vertical.
        SCALE_3D = 0.0011,                          // 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 = 0.7;

    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;
        }

        if (isOnHMD) {
            Overlays.editOverlay(background3D.overlay, {
                backgroundAlpha: alpha * BACKGROUND_3D_ALPHA,
                visible: visible
            });
        } else {
            Overlays.editOverlay(background2D.overlay, {
                alpha: alpha,
                visible: visible
            });
        }
        Overlays.editOverlay(isOnHMD ? bar3D.overlay : bar2D.overlay, {
            alpha: alpha,
            visible: visible
        });
    }

    function onDownloadInfoChanged(info) {
        var i;

        // Update raw progress value
        if (info.downloading.length + info.pending === 0) {
            rawProgress = 100;
        } else {
            rawProgress = 0;
            for (i = 0; i < info.downloading.length; i += 1) {
                rawProgress += info.downloading[i];
            }
            rawProgress = rawProgress / (info.downloading.length + info.pending);
        }
    }

    function createOverlays() {
        if (isOnHMD) {

            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: BAR_WIDTH, y: 0, width: BAR_WIDTH, 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: BAR_WIDTH, 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);
    }

    function update() {
        var viewport,
            eyePosition,
            avatarOrientation;

        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.

        // Update state
        if (!visible) {  // Not visible because no recent downloads
            if (displayProgress < 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 (displayProgress === 100) {  // Was downloading but now have finished so fade out
                    alphaDelta = ALPHA_DELTA_OUT;
                }
            } else {
                if (displayProgress < 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 (displayProgress === 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 (displayProgress < 100) {  // Was finished and waiting to fade out but have resumed so don't fade out
                    Script.clearInterval(fadeWaitTimer);
                    fadeWaitTimer = null;
                }
            }
        }

        if (visible) {

            // Update progress bar
            Overlays.editOverlay(isOnHMD ? bar3D.overlay : bar2D.overlay, {
                visible: visible,
                subImage: { x: BAR_WIDTH * (1 - displayProgress / 100), y: 0, width: BAR_WIDTH, height: BAR_HEIGHT }
            });

            // Update position
            if (isOnHMD) {
                // Update 3D overlays to maintain positions relative to avatar
                eyePosition = MyAvatar.getDefaultEyePosition();
                avatarOrientation = MyAvatar.orientation;

                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) {
                    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;
        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();
    }

    function tearDown() {
        deleteOverlays();
    }

    setUp();
    GlobalServices.downloadInfoChanged.connect(onDownloadInfoChanged);
    GlobalServices.updateDownloadInfo();
    Script.update.connect(update);
    Script.scriptEnding.connect(tearDown);
}());