From 4befab11511fcb7b2b8679768459e72128769892 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 28 Oct 2016 11:34:00 +1300
Subject: [PATCH 1/7] JSLint progress bar code

---
 scripts/system/progress.js | 117 +++++++++++++++++--------------------
 1 file changed, 55 insertions(+), 62 deletions(-)

diff --git a/scripts/system/progress.js b/scripts/system/progress.js
index d7f6713c69..b93cdb9218 100644
--- a/scripts/system/progress.js
+++ b/scripts/system/progress.js
@@ -13,18 +13,14 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
-(function() { // BEGIN LOCAL_SCOPE
+(function () { // BEGIN LOCAL_SCOPE
 
     function debug() {
-        return;
-        print.apply(null, arguments);
+        //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.
-        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,
@@ -46,7 +42,28 @@
         windowHeight = 0,
         background2D = {},
         bar2D = {},
-        SCALE_2D = 0.35; // Scale the SVGs for 2D display.
+        SCALE_2D = 0.35, // Scale the SVGs for 2D display.
+
+        // Max seen since downloads started. This is reset when all downloads have completed.
+        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.
+        bestRawProgress = 0,
+
+        // True if we have known active downloads
+        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.
+        INITIAL_DELAY_COOLDOWN_TIME = 1000,
+        initialDelayCooldown = 0;
 
     function fade() {
 
@@ -77,35 +94,14 @@
         });
     }
 
-    Window.domainChanged.connect(function() {
+    Window.domainChanged.connect(function () {
         isDownloading = false;
         bestRawProgress = 100;
         rawProgress = 100;
         displayProgress = 100;
     });
 
-    // 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;
-
-    // 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;
 
         debug("PROGRESS: Download info changed ", info.downloading.length, info.pending, maxSeen);
 
@@ -167,16 +163,36 @@
         Overlays.deleteOverlay(bar2D.overlay);
     }
 
-    var b = 0;
-    var currentOrientation = null;
+    function updateProgressBarLocation() {
+        var viewport = Controller.getViewportDimensions(),
+            yOffset;
+        windowWidth = viewport.x;
+        windowHeight = viewport.y;
+
+        yOffset = HMD.active ? BAR_Y_OFFSET_HMD : BAR_Y_OFFSET_2D;
+
+        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 update() {
         initialDelayCooldown -= 30;
-        var viewport,
-            eyePosition,
-            avatarOrientation;
+        var viewport, diff;
 
         if (displayProgress < rawProgress) {
-            var diff = rawProgress - displayProgress;
+            diff = rawProgress - displayProgress;
             if (diff < 0.5) {
                 displayProgress = rawProgress;
             } else {
@@ -204,7 +220,7 @@
         } else { // Fully visible because downloading or recently so
             if (fadeWaitTimer === null) {
                 if (rawProgress === 100) { // Was downloading but have finished so fade out soon
-                    fadeWaitTimer = Script.setTimeout(function() {
+                    fadeWaitTimer = Script.setTimeout(function () {
                         alphaDelta = ALPHA_DELTA_OUT;
                         fadeTimer = Script.setInterval(fade, FADE_INTERVAL);
                         fadeWaitTimer = null;
@@ -228,11 +244,11 @@
                     y: 0,
                     width: BAR_WIDTH,
                     height: BAR_HEIGHT
-                },
+                }
             });
 
             Overlays.editOverlay(background2D.overlay, {
-                visible: true,
+                visible: true
             });
 
             // Update 2D overlays to maintain positions at bottom middle of window
@@ -244,29 +260,6 @@
         }
     }
 
-    function updateProgressBarLocation() {
-        var viewport = Controller.getViewportDimensions();
-        windowWidth = viewport.x;
-        windowHeight = viewport.y;
-
-        var yOffset = HMD.active ? BAR_Y_OFFSET_HMD : BAR_Y_OFFSET_2D;
-
-        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 setUp() {
         background2D.width = SCALE_2D * BACKGROUND_WIDTH;
         background2D.height = SCALE_2D * BACKGROUND_HEIGHT;
@@ -283,7 +276,7 @@
     setUp();
     GlobalServices.downloadInfoChanged.connect(onDownloadInfoChanged);
     GlobalServices.updateDownloadInfo();
-    Script.setInterval(update, 1000/60);
+    Script.setInterval(update, 1000 / 60);
     Script.scriptEnding.connect(tearDown);
 
 }()); // END LOCAL_SCOPE

From 082414298796b9f9a996dbc91f98c1fa8ccda747 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 28 Oct 2016 14:12:24 +1300
Subject: [PATCH 2/7] Add "loading" text

---
 .../assets/images/progress-bar-text.svg       | 103 ++++++++++++++++++
 scripts/system/progress.js                    |  75 +++++++++++--
 2 files changed, 167 insertions(+), 11 deletions(-)
 create mode 100644 scripts/system/assets/images/progress-bar-text.svg

diff --git a/scripts/system/assets/images/progress-bar-text.svg b/scripts/system/assets/images/progress-bar-text.svg
new file mode 100644
index 0000000000..05ebb3f637
--- /dev/null
+++ b/scripts/system/assets/images/progress-bar-text.svg
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 256 32" style="enable-background:new 0 0 256 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#383838;stroke:#1E1E1E;stroke-width:0.5;stroke-miterlimit:10;}
+	.st1{fill:#FFFFFF;stroke:#BABABA;stroke-width:0.25;stroke-miterlimit:10;}
+</style>
+<g>
+	<path class="st0" d="M5.5,8v14.8h7.8l-0.3,2H3.2V8H5.5z"/>
+	<path class="st0" d="M16.7,15.3c0-1.2,0.1-2.2,0.3-3.2c0.2-0.9,0.5-1.8,1.1-2.4c0.5-0.7,1.2-1.2,2-1.6c0.8-0.4,1.9-0.5,3.2-0.5
+		c1.3,0,2.4,0.2,3.2,0.5c0.8,0.4,1.5,0.9,2,1.5c0.5,0.7,0.8,1.5,1,2.4c0.2,1,0.3,2,0.3,3.2v2.1c0,1.2-0.1,2.2-0.3,3.2
+		c-0.2,0.9-0.5,1.8-1.1,2.4c-0.5,0.7-1.2,1.2-2,1.6c-0.8,0.4-1.9,0.5-3.2,0.5c-1.3,0-2.4-0.2-3.2-0.5c-0.9-0.4-1.5-0.9-2-1.5
+		c-0.5-0.7-0.8-1.5-1-2.4c-0.2-1-0.3-2-0.3-3.2V15.3z M27.4,15.3c0-1.2-0.1-2.1-0.2-2.9c-0.2-0.7-0.4-1.3-0.8-1.7
+		c-0.3-0.4-0.8-0.7-1.3-0.9c-0.5-0.2-1.1-0.2-1.8-0.2S22,9.7,21.5,9.8c-0.5,0.2-1,0.5-1.3,0.9c-0.3,0.4-0.6,1-0.8,1.8
+		c-0.2,0.7-0.3,1.7-0.3,2.8v2.1c0,1.2,0.1,2.1,0.2,2.9s0.4,1.3,0.8,1.7c0.3,0.4,0.8,0.7,1.3,0.9c0.5,0.2,1.1,0.2,1.8,0.2
+		s1.3-0.1,1.8-0.2c0.5-0.2,1-0.5,1.3-0.9c0.3-0.4,0.6-1,0.8-1.7c0.2-0.7,0.3-1.7,0.3-2.9V15.3z"/>
+	<path class="st0" d="M43.6,20h-6.4l-1.6,4.7h-2.4L39.1,8h2.6l5.9,16.8h-2.5L43.6,20z M37.8,18.1H43l-2.6-7.8L37.8,18.1z"/>
+	<path class="st0" d="M52,8h5.5c1.4,0,2.5,0.2,3.4,0.6c0.9,0.4,1.6,0.9,2.2,1.6c0.5,0.7,0.9,1.4,1.1,2.4c0.2,0.9,0.3,1.9,0.3,3v1.9
+		c0,1.1-0.1,2.1-0.3,3c-0.2,0.9-0.6,1.7-1.2,2.4c-0.6,0.7-1.3,1.2-2.2,1.5c-0.9,0.4-2,0.5-3.4,0.5H52V8z M54.4,22.8h3
+		c0.8,0,1.5-0.1,2.1-0.3c0.6-0.2,1.1-0.5,1.5-0.9c0.4-0.4,0.7-1,0.9-1.7c0.2-0.7,0.3-1.6,0.3-2.7v-1.6c0-1.1-0.1-2-0.3-2.7
+		c-0.2-0.7-0.5-1.3-0.9-1.7c-0.4-0.4-0.9-0.8-1.5-0.9c-0.6-0.2-1.3-0.3-2.1-0.3h-3V22.8z"/>
+	<path class="st0" d="M72.3,24.8h-2.4V8h2.4V24.8z"/>
+	<path class="st0" d="M80.2,8l7.9,13V8h2.2v16.8h-2.1l-7.9-13v13H78V8H80.2z"/>
+	<path class="st0" d="M103.3,9.7c-1,0-1.8,0.1-2.4,0.3s-1.2,0.5-1.6,0.9c-0.4,0.4-0.7,1.1-0.9,1.8c-0.2,0.8-0.3,1.7-0.3,2.9v1.6
+		c0,1.2,0.1,2.1,0.3,2.9c0.2,0.7,0.5,1.3,0.8,1.8c0.4,0.4,0.9,0.7,1.5,0.9c0.6,0.2,1.4,0.3,2.3,0.3c0.8,0,1.5-0.1,2.2-0.2v-5.2h-2.8
+		l0.3-1.9h4.8v8.6c-0.3,0.1-0.6,0.2-1,0.3s-0.8,0.2-1.2,0.2c-0.4,0.1-0.8,0.1-1.3,0.1c-0.4,0-0.8,0-1.2,0c-1.5,0-2.7-0.2-3.6-0.6
+		c-0.9-0.4-1.6-0.9-2.1-1.6c-0.5-0.7-0.9-1.5-1-2.4c-0.2-0.9-0.3-2-0.3-3.1v-1.7c0-1.2,0.1-2.3,0.3-3.2c0.2-1,0.6-1.8,1.2-2.5
+		c0.6-0.7,1.3-1.2,2.3-1.6c1-0.4,2.2-0.6,3.7-0.6c0.7,0,1.5,0.1,2.2,0.2c0.7,0.1,1.3,0.3,1.7,0.4l-0.4,1.8c-0.4-0.1-0.9-0.2-1.5-0.3
+		C104.5,9.8,103.9,9.7,103.3,9.7z"/>
+	<path class="st0" d="M127.1,25c-1.4,0-2.6-0.2-3.5-0.5c-0.9-0.3-1.6-0.8-2.1-1.5c-0.5-0.6-0.9-1.4-1.1-2.4c-0.2-1-0.3-2.1-0.3-3.3
+		v-1.7c0-1.2,0.1-2.3,0.3-3.3c0.2-1,0.6-1.8,1.2-2.5c0.6-0.7,1.3-1.2,2.2-1.5c0.9-0.4,2.1-0.5,3.5-0.5c0.7,0,1.4,0.1,2,0.2
+		c0.6,0.1,1.1,0.2,1.5,0.4l-0.4,1.8c-0.4-0.1-0.8-0.2-1.3-0.3c-0.5-0.1-1-0.1-1.5-0.1c-0.9,0-1.7,0.1-2.3,0.3
+		c-0.6,0.2-1.1,0.5-1.5,0.9c-0.4,0.4-0.7,1.1-0.9,1.8c-0.2,0.8-0.3,1.7-0.3,2.9v1.6c0,1.2,0.1,2.1,0.2,2.9c0.2,0.7,0.4,1.3,0.8,1.8
+		c0.4,0.4,0.9,0.7,1.5,0.9c0.6,0.2,1.4,0.3,2.4,0.3c0.5,0,1,0,1.6-0.1c0.6-0.1,1.1-0.1,1.6-0.2l-0.4,1.9c-0.5,0.1-1,0.2-1.6,0.3
+		C128.1,25,127.6,25,127.1,25z"/>
+	<path class="st0" d="M134.6,15.3c0-1.2,0.1-2.2,0.3-3.2c0.2-0.9,0.5-1.8,1.1-2.4c0.5-0.7,1.2-1.2,2-1.6c0.8-0.4,1.9-0.5,3.2-0.5
+		c1.3,0,2.4,0.2,3.2,0.5c0.8,0.4,1.5,0.9,2,1.5c0.5,0.7,0.8,1.5,1,2.4c0.2,1,0.3,2,0.3,3.2v2.1c0,1.2-0.1,2.2-0.3,3.2
+		c-0.2,0.9-0.5,1.8-1.1,2.4c-0.5,0.7-1.2,1.2-2,1.6c-0.8,0.4-1.9,0.5-3.2,0.5c-1.3,0-2.4-0.2-3.2-0.5c-0.9-0.4-1.5-0.9-2-1.5
+		c-0.5-0.7-0.8-1.5-1-2.4c-0.2-1-0.3-2-0.3-3.2V15.3z M145.3,15.3c0-1.2-0.1-2.1-0.2-2.9c-0.2-0.7-0.4-1.3-0.8-1.7
+		c-0.3-0.4-0.8-0.7-1.3-0.9c-0.5-0.2-1.1-0.2-1.8-0.2s-1.3,0.1-1.8,0.2c-0.5,0.2-1,0.5-1.3,0.9c-0.3,0.4-0.6,1-0.8,1.8
+		c-0.2,0.7-0.3,1.7-0.3,2.8v2.1c0,1.2,0.1,2.1,0.2,2.9c0.2,0.7,0.4,1.3,0.8,1.7c0.3,0.4,0.8,0.7,1.3,0.9c0.5,0.2,1.1,0.2,1.8,0.2
+		s1.3-0.1,1.8-0.2c0.5-0.2,1-0.5,1.3-0.9c0.3-0.4,0.6-1,0.8-1.7c0.2-0.7,0.3-1.7,0.3-2.9V15.3z"/>
+	<path class="st0" d="M155.2,8l7.9,13V8h2.2v16.8h-2.1l-7.9-13v13h-2.2V8H155.2z"/>
+	<path class="st0" d="M182.8,8l-0.3,2h-5.2v14.8H175V9.9h-5.4l0.3-2H182.8z"/>
+	<path class="st0" d="M197.6,8l-0.3,1.9h-7.9v5.3h7.4l-0.3,1.9h-7.1v5.7h8.2l-0.3,1.9H187V8H197.6z"/>
+	<path class="st0" d="M204.7,8l7.9,13V8h2.2v16.8h-2.1l-7.9-13v13h-2.2V8H204.7z"/>
+	<path class="st0" d="M232.3,8l-0.3,2h-5.2v14.8h-2.3V9.9h-5.4l0.3-2H232.3z"/>
+	<path class="st0" d="M235.2,24.9c-0.5,0-0.9-0.1-1.1-0.4c-0.2-0.3-0.4-0.6-0.4-1.1c0-0.5,0.1-0.8,0.4-1.1c0.2-0.3,0.6-0.4,1.1-0.4
+		c0.5,0,0.9,0.1,1.1,0.4c0.2,0.3,0.4,0.6,0.4,1.1c0,0.5-0.1,0.8-0.4,1.1C236.1,24.8,235.7,24.9,235.2,24.9z"/>
+	<path class="st0" d="M243.3,24.9c-0.5,0-0.9-0.1-1.1-0.4c-0.2-0.3-0.4-0.6-0.4-1.1c0-0.5,0.1-0.8,0.4-1.1c0.2-0.3,0.6-0.4,1.1-0.4
+		s0.9,0.1,1.1,0.4c0.2,0.3,0.4,0.6,0.4,1.1c0,0.5-0.1,0.8-0.4,1.1C244.2,24.8,243.8,24.9,243.3,24.9z"/>
+	<path class="st0" d="M251.3,24.9c-0.5,0-0.9-0.1-1.1-0.4c-0.2-0.3-0.4-0.6-0.4-1.1c0-0.5,0.1-0.8,0.4-1.1c0.2-0.3,0.6-0.4,1.1-0.4
+		s0.9,0.1,1.1,0.4c0.2,0.3,0.4,0.6,0.4,1.1c0,0.5-0.1,0.8-0.4,1.1C252.2,24.8,251.8,24.9,251.3,24.9z"/>
+</g>
+<g>
+	<path class="st1" d="M6.6,6.8v14.8h7.8l-0.3,2H4.3V6.8H6.6z"/>
+	<path class="st1" d="M17.8,14.2c0-1.2,0.1-2.2,0.3-3.2c0.2-0.9,0.5-1.8,1.1-2.4c0.5-0.7,1.2-1.2,2-1.6c0.8-0.4,1.9-0.5,3.2-0.5
+		c1.3,0,2.4,0.2,3.2,0.5c0.8,0.4,1.5,0.9,2,1.5c0.5,0.7,0.8,1.5,1,2.4c0.2,1,0.3,2,0.3,3.2v2.1c0,1.2-0.1,2.2-0.3,3.2
+		c-0.2,0.9-0.5,1.8-1.1,2.4c-0.5,0.7-1.2,1.2-2,1.6S25.7,24,24.4,24c-1.3,0-2.4-0.2-3.2-0.5c-0.9-0.4-1.5-0.9-2-1.5
+		c-0.5-0.7-0.8-1.5-1-2.4c-0.2-1-0.3-2-0.3-3.2V14.2z M28.6,14.2c0-1.2-0.1-2.1-0.2-2.9c-0.2-0.7-0.4-1.3-0.8-1.7
+		c-0.3-0.4-0.8-0.7-1.3-0.9c-0.5-0.2-1.1-0.2-1.8-0.2c-0.7,0-1.3,0.1-1.8,0.2c-0.5,0.2-1,0.5-1.3,0.9c-0.3,0.4-0.6,1-0.8,1.8
+		c-0.2,0.7-0.3,1.7-0.3,2.8v2.1c0,1.2,0.1,2.1,0.2,2.9c0.2,0.7,0.4,1.3,0.8,1.7c0.3,0.4,0.8,0.7,1.3,0.9c0.5,0.2,1.1,0.2,1.8,0.2
+		c0.7,0,1.3-0.1,1.8-0.2c0.5-0.2,1-0.5,1.3-0.9c0.3-0.4,0.6-1,0.8-1.7c0.2-0.7,0.3-1.7,0.3-2.9V14.2z"/>
+	<path class="st1" d="M44.8,18.9h-6.4l-1.6,4.7h-2.4l5.9-16.8h2.6l5.9,16.8h-2.5L44.8,18.9z M38.9,17h5.2l-2.6-7.8L38.9,17z"/>
+	<path class="st1" d="M53.1,6.8h5.5c1.4,0,2.5,0.2,3.4,0.6C63,7.8,63.7,8.3,64.3,9c0.5,0.7,0.9,1.4,1.1,2.4c0.2,0.9,0.3,1.9,0.3,3
+		v1.9c0,1.1-0.1,2.1-0.3,3c-0.2,0.9-0.6,1.7-1.2,2.4c-0.6,0.7-1.3,1.2-2.2,1.5c-0.9,0.4-2,0.5-3.4,0.5h-5.5V6.8z M55.5,21.7h3
+		c0.8,0,1.5-0.1,2.1-0.3c0.6-0.2,1.1-0.5,1.5-0.9c0.4-0.4,0.7-1,0.9-1.7c0.2-0.7,0.3-1.6,0.3-2.7v-1.6c0-1.1-0.1-2-0.3-2.7
+		c-0.2-0.7-0.5-1.3-0.9-1.7c-0.4-0.4-0.9-0.8-1.5-0.9c-0.6-0.2-1.3-0.3-2.1-0.3h-3V21.7z"/>
+	<path class="st1" d="M73.4,23.6h-2.4V6.8h2.4V23.6z"/>
+	<path class="st1" d="M81.3,6.8l7.9,13v-13h2.2v16.8h-2.1l-7.9-13v13h-2.2V6.8H81.3z"/>
+	<path class="st1" d="M104.4,8.6c-1,0-1.8,0.1-2.4,0.3c-0.7,0.2-1.2,0.5-1.6,0.9c-0.4,0.4-0.7,1.1-0.9,1.8c-0.2,0.8-0.3,1.7-0.3,2.9
+		v1.6c0,1.2,0.1,2.1,0.3,2.9c0.2,0.7,0.5,1.3,0.8,1.8c0.4,0.4,0.9,0.7,1.5,0.9c0.6,0.2,1.4,0.3,2.3,0.3c0.8,0,1.5-0.1,2.2-0.2v-5.2
+		h-2.8l0.3-1.9h4.8v8.6c-0.3,0.1-0.6,0.2-1,0.3c-0.4,0.1-0.8,0.2-1.2,0.2s-0.8,0.1-1.3,0.1c-0.4,0-0.8,0-1.2,0
+		c-1.5,0-2.7-0.2-3.6-0.6c-0.9-0.4-1.6-0.9-2.1-1.6c-0.5-0.7-0.9-1.5-1-2.4c-0.2-0.9-0.3-2-0.3-3.1v-1.7c0-1.2,0.1-2.3,0.3-3.2
+		c0.2-1,0.6-1.8,1.2-2.5c0.6-0.7,1.3-1.2,2.3-1.6c1-0.4,2.2-0.6,3.7-0.6c0.7,0,1.5,0.1,2.2,0.2c0.7,0.1,1.3,0.3,1.7,0.4l-0.4,1.8
+		c-0.4-0.1-0.9-0.2-1.5-0.3C105.7,8.6,105.1,8.6,104.4,8.6z"/>
+	<path class="st1" d="M128.2,23.9c-1.4,0-2.6-0.2-3.5-0.5c-0.9-0.3-1.6-0.8-2.1-1.5c-0.5-0.6-0.9-1.4-1.1-2.4
+		c-0.2-1-0.3-2.1-0.3-3.3v-1.7c0-1.2,0.1-2.3,0.3-3.3c0.2-1,0.6-1.8,1.2-2.5c0.6-0.7,1.3-1.2,2.2-1.5c0.9-0.4,2.1-0.5,3.5-0.5
+		c0.7,0,1.4,0.1,2,0.2s1.1,0.2,1.5,0.4L131.4,9c-0.4-0.1-0.8-0.2-1.3-0.3c-0.5-0.1-1-0.1-1.5-0.1c-0.9,0-1.7,0.1-2.3,0.3
+		c-0.6,0.2-1.1,0.5-1.5,0.9c-0.4,0.4-0.7,1.1-0.9,1.8c-0.2,0.8-0.3,1.7-0.3,2.9v1.6c0,1.2,0.1,2.1,0.2,2.9c0.2,0.7,0.4,1.3,0.8,1.8
+		c0.4,0.4,0.9,0.7,1.5,0.9c0.6,0.2,1.4,0.3,2.4,0.3c0.5,0,1,0,1.6-0.1c0.6-0.1,1.1-0.1,1.6-0.2l-0.4,1.9c-0.5,0.1-1,0.2-1.6,0.3
+		C129.2,23.8,128.7,23.9,128.2,23.9z"/>
+	<path class="st1" d="M135.7,14.2c0-1.2,0.1-2.2,0.3-3.2c0.2-0.9,0.5-1.8,1.1-2.4c0.5-0.7,1.2-1.2,2-1.6c0.8-0.4,1.9-0.5,3.2-0.5
+		c1.3,0,2.4,0.2,3.2,0.5c0.8,0.4,1.5,0.9,2,1.5c0.5,0.7,0.8,1.5,1,2.4c0.2,1,0.3,2,0.3,3.2v2.1c0,1.2-0.1,2.2-0.3,3.2
+		c-0.2,0.9-0.5,1.8-1.1,2.4c-0.5,0.7-1.2,1.2-2,1.6s-1.9,0.5-3.2,0.5c-1.3,0-2.4-0.2-3.2-0.5c-0.9-0.4-1.5-0.9-2-1.5
+		c-0.5-0.7-0.8-1.5-1-2.4c-0.2-1-0.3-2-0.3-3.2V14.2z M146.4,14.2c0-1.2-0.1-2.1-0.2-2.9c-0.2-0.7-0.4-1.3-0.8-1.7
+		c-0.3-0.4-0.8-0.7-1.3-0.9c-0.5-0.2-1.1-0.2-1.8-0.2c-0.7,0-1.3,0.1-1.8,0.2c-0.5,0.2-1,0.5-1.3,0.9c-0.3,0.4-0.6,1-0.8,1.8
+		s-0.3,1.7-0.3,2.8v2.1c0,1.2,0.1,2.1,0.2,2.9c0.2,0.7,0.4,1.3,0.8,1.7c0.3,0.4,0.8,0.7,1.3,0.9c0.5,0.2,1.1,0.2,1.8,0.2
+		c0.7,0,1.3-0.1,1.8-0.2c0.5-0.2,1-0.5,1.3-0.9c0.3-0.4,0.6-1,0.8-1.7c0.2-0.7,0.3-1.7,0.3-2.9V14.2z"/>
+	<path class="st1" d="M156.3,6.8l7.9,13v-13h2.2v16.8h-2.1l-7.9-13v13h-2.2V6.8H156.3z"/>
+	<path class="st1" d="M183.9,6.8l-0.3,2h-5.2v14.8h-2.3V8.8h-5.4l0.3-2H183.9z"/>
+	<path class="st1" d="M198.7,6.8l-0.3,1.9h-7.9V14h7.4l-0.3,1.9h-7.1v5.7h8.2l-0.3,1.9h-10.3V6.8H198.7z"/>
+	<path class="st1" d="M205.9,6.8l7.9,13v-13h2.2v16.8h-2.1l-7.9-13v13h-2.2V6.8H205.9z"/>
+	<path class="st1" d="M233.4,6.8l-0.3,2H228v14.8h-2.3V8.8h-5.4l0.3-2H233.4z"/>
+	<path class="st1" d="M236.3,23.8c-0.5,0-0.9-0.1-1.1-0.4c-0.2-0.3-0.4-0.6-0.4-1.1c0-0.5,0.1-0.8,0.4-1.1c0.2-0.3,0.6-0.4,1.1-0.4
+		c0.5,0,0.9,0.1,1.1,0.4c0.2,0.3,0.4,0.6,0.4,1.1c0,0.5-0.1,0.8-0.4,1.1C237.2,23.7,236.9,23.8,236.3,23.8z"/>
+	<path class="st1" d="M244.4,23.8c-0.5,0-0.9-0.1-1.1-0.4c-0.2-0.3-0.4-0.6-0.4-1.1c0-0.5,0.1-0.8,0.4-1.1c0.2-0.3,0.6-0.4,1.1-0.4
+		c0.5,0,0.9,0.1,1.1,0.4c0.2,0.3,0.4,0.6,0.4,1.1c0,0.5-0.1,0.8-0.4,1.1C245.3,23.7,244.9,23.8,244.4,23.8z"/>
+	<path class="st1" d="M252.4,23.8c-0.5,0-0.9-0.1-1.1-0.4c-0.2-0.3-0.4-0.6-0.4-1.1c0-0.5,0.1-0.8,0.4-1.1c0.2-0.3,0.6-0.4,1.1-0.4
+		c0.5,0,0.9,0.1,1.1,0.4c0.2,0.3,0.4,0.6,0.4,1.1c0,0.5-0.1,0.8-0.4,1.1C253.3,23.7,253,23.8,252.4,23.8z"/>
+</g>
+</svg>
diff --git a/scripts/system/progress.js b/scripts/system/progress.js
index b93cdb9218..082ede95c4 100644
--- a/scripts/system/progress.js
+++ b/scripts/system/progress.js
@@ -35,14 +35,22 @@
         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"),
+        TEXT_HEIGHT = 32,
+        TEXT_WIDTH = 256,
+        TEXT_URL = Script.resolvePath("assets/images/progress-bar-text.svg"),
         BACKGROUND_WIDTH = 520,
         BACKGROUND_HEIGHT = 50,
         BACKGROUND_URL = Script.resolvePath("assets/images/progress-bar-background.svg"),
         windowWidth = 0,
         windowHeight = 0,
-        background2D = {},
         bar2D = {},
+        background2D = {},
+        textDesktop = {},  // Separate desktop and HMD overlays because can't change text size after overlay created.
+        textHMD = {},
         SCALE_2D = 0.35, // Scale the SVGs for 2D display.
+        SCALE_TEXT_DESKTOP = 0.6,
+        SCALE_TEXT_HMD = 1.0,
+        isHMD = false,
 
         // Max seen since downloads started. This is reset when all downloads have completed.
         maxSeen = 0,
@@ -92,6 +100,14 @@
             alpha: alpha,
             visible: visible
         });
+        Overlays.editOverlay(textDesktop.overlay, {
+            alpha: alpha,
+            visible: visible && !isHMD
+        });
+        Overlays.editOverlay(textHMD.overlay, {
+            alpha: alpha,
+            visible: visible && isHMD
+        });
     }
 
     Window.domainChanged.connect(function () {
@@ -156,6 +172,20 @@
             visible: false,
             alpha: 0.0
         });
+        textDesktop.overlay = Overlays.addOverlay("image", {
+            imageURL: TEXT_URL,
+            width: textDesktop.width,
+            height: textDesktop.height,
+            visible: false,
+            alpha: 0.0
+        });
+        textHMD.overlay = Overlays.addOverlay("image", {
+            imageURL: TEXT_URL,
+            width: textHMD.width,
+            height: textHMD.height,
+            visible: false,
+            alpha: 0.0
+        });
     }
 
     function deleteOverlays() {
@@ -166,15 +196,11 @@
     function updateProgressBarLocation() {
         var viewport = Controller.getViewportDimensions(),
             yOffset;
+
         windowWidth = viewport.x;
         windowHeight = viewport.y;
-
-        yOffset = HMD.active ? BAR_Y_OFFSET_HMD : BAR_Y_OFFSET_2D;
-
-        background2D.width = SCALE_2D * BACKGROUND_WIDTH;
-        background2D.height = SCALE_2D * BACKGROUND_HEIGHT;
-        bar2D.width = SCALE_2D * BAR_WIDTH;
-        bar2D.height = SCALE_2D * BAR_HEIGHT;
+        isHMD = HMD.active;
+        yOffset = isHMD ? BAR_Y_OFFSET_HMD : BAR_Y_OFFSET_2D;
 
         Overlays.editOverlay(background2D.overlay, {
             x: windowWidth / 2 - background2D.width / 2,
@@ -185,12 +211,23 @@
             x: windowWidth / 2 - bar2D.width / 2,
             y: windowHeight - background2D.height - bar2D.height + (background2D.height - bar2D.height) / 2 + yOffset
         });
+
+        Overlays.editOverlay(textDesktop.overlay, {
+            x: windowWidth / 2 - textDesktop.width / 2,
+            y: windowHeight - 2 * textDesktop.height + yOffset
+        });
+
+        Overlays.editOverlay(textHMD.overlay, {
+            x: windowWidth / 2 - textHMD.width / 2,
+            y: windowHeight - 2 * textHMD.height + yOffset
+        });
     }
 
     function update() {
-        initialDelayCooldown -= 30;
         var viewport, diff;
 
+        initialDelayCooldown -= 30;
+
         if (displayProgress < rawProgress) {
             diff = rawProgress - displayProgress;
             if (diff < 0.5) {
@@ -235,11 +272,13 @@
         }
 
         if (visible) {
-
             // Update progress bar
             Overlays.editOverlay(bar2D.overlay, {
                 visible: true,
                 subImage: {
+
+                    // $$$$$$$
+
                     x: BAR_WIDTH * (1 - displayProgress / 100),
                     y: 0,
                     width: BAR_WIDTH,
@@ -251,20 +290,34 @@
                 visible: true
             });
 
+            Overlays.editOverlay(textDesktop.overlay, {
+                visible: !isHMD
+            });
+
+            Overlays.editOverlay(textHMD.overlay, {
+                visible: isHMD
+            });
+
             // Update 2D overlays to maintain positions at bottom middle of window
             viewport = Controller.getViewportDimensions();
 
-            if (viewport.x !== windowWidth || viewport.y !== windowHeight) {
+            if (viewport.x !== windowWidth || viewport.y !== windowHeight || isHMD !== HMD.active) {
                 updateProgressBarLocation();
             }
         }
     }
 
     function setUp() {
+        isHMD = HMD.active;
+
         background2D.width = SCALE_2D * BACKGROUND_WIDTH;
         background2D.height = SCALE_2D * BACKGROUND_HEIGHT;
         bar2D.width = SCALE_2D * BAR_WIDTH;
         bar2D.height = SCALE_2D * BAR_HEIGHT;
+        textDesktop.width = SCALE_TEXT_DESKTOP * TEXT_WIDTH;
+        textDesktop.height = SCALE_TEXT_DESKTOP * TEXT_HEIGHT;
+        textHMD.width = SCALE_TEXT_HMD * TEXT_WIDTH;
+        textHMD.height = SCALE_TEXT_HMD * TEXT_HEIGHT;
 
         createOverlays();
     }

From c9e4fddeabe234973135d97cd8e2c31f96ed260c Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 28 Oct 2016 14:17:18 +1300
Subject: [PATCH 3/7] Remove background image

---
 .../assets/images/progress-bar-background.svg |  5 ---
 scripts/system/progress.js                    | 34 ++-----------------
 2 files changed, 3 insertions(+), 36 deletions(-)
 delete mode 100644 scripts/system/assets/images/progress-bar-background.svg

diff --git a/scripts/system/assets/images/progress-bar-background.svg b/scripts/system/assets/images/progress-bar-background.svg
deleted file mode 100644
index a8b4e1aab5..0000000000
--- a/scripts/system/assets/images/progress-bar-background.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="520" height="50" viewBox="0 0 520.00 50.00" enable-background="new 0 0 540.00 50.00" xml:space="preserve">
-    <rect x="0" y="0" rx="8" ry="8" width="520" height="50" style="fille:black;opacity:0.6" />
-</svg>
diff --git a/scripts/system/progress.js b/scripts/system/progress.js
index 082ede95c4..11aabcfc22 100644
--- a/scripts/system/progress.js
+++ b/scripts/system/progress.js
@@ -38,13 +38,9 @@
         TEXT_HEIGHT = 32,
         TEXT_WIDTH = 256,
         TEXT_URL = Script.resolvePath("assets/images/progress-bar-text.svg"),
-        BACKGROUND_WIDTH = 520,
-        BACKGROUND_HEIGHT = 50,
-        BACKGROUND_URL = Script.resolvePath("assets/images/progress-bar-background.svg"),
         windowWidth = 0,
         windowHeight = 0,
         bar2D = {},
-        background2D = {},
         textDesktop = {},  // Separate desktop and HMD overlays because can't change text size after overlay created.
         textHMD = {},
         SCALE_2D = 0.35, // Scale the SVGs for 2D display.
@@ -92,10 +88,6 @@
             visible = false;
         }
 
-        Overlays.editOverlay(background2D.overlay, {
-            alpha: alpha,
-            visible: visible
-        });
         Overlays.editOverlay(bar2D.overlay, {
             alpha: alpha,
             visible: visible
@@ -152,13 +144,6 @@
     }
 
     function createOverlays() {
-        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: {
@@ -189,8 +174,9 @@
     }
 
     function deleteOverlays() {
-        Overlays.deleteOverlay(background2D.overlay);
         Overlays.deleteOverlay(bar2D.overlay);
+        Overlays.deleteOverlay(textDesktop.overlay);
+        Overlays.deleteOverlay(textHMD.overlay);
     }
 
     function updateProgressBarLocation() {
@@ -202,14 +188,9 @@
         isHMD = HMD.active;
         yOffset = isHMD ? BAR_Y_OFFSET_HMD : BAR_Y_OFFSET_2D;
 
-        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
+            y: windowHeight - 2 * bar2D.height + yOffset
         });
 
         Overlays.editOverlay(textDesktop.overlay, {
@@ -276,9 +257,6 @@
             Overlays.editOverlay(bar2D.overlay, {
                 visible: true,
                 subImage: {
-
-                    // $$$$$$$
-
                     x: BAR_WIDTH * (1 - displayProgress / 100),
                     y: 0,
                     width: BAR_WIDTH,
@@ -286,10 +264,6 @@
                 }
             });
 
-            Overlays.editOverlay(background2D.overlay, {
-                visible: true
-            });
-
             Overlays.editOverlay(textDesktop.overlay, {
                 visible: !isHMD
             });
@@ -310,8 +284,6 @@
     function setUp() {
         isHMD = HMD.active;
 
-        background2D.width = SCALE_2D * BACKGROUND_WIDTH;
-        background2D.height = SCALE_2D * BACKGROUND_HEIGHT;
         bar2D.width = SCALE_2D * BAR_WIDTH;
         bar2D.height = SCALE_2D * BAR_HEIGHT;
         textDesktop.width = SCALE_TEXT_DESKTOP * TEXT_WIDTH;

From edc9b1fa074a8f3fdc9e6aa18f449c7c77310dbe Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 28 Oct 2016 15:50:50 +1300
Subject: [PATCH 4/7] Update bar graph for desktop and HMD displays

---
 .../system/assets/images/progress-bar-2k.svg  |  26 ++++
 .../system/assets/images/progress-bar-hmd.svg |  26 ++++
 scripts/system/assets/images/progress-bar.svg |  12 --
 scripts/system/progress.js                    | 123 +++++++++++++-----
 4 files changed, 139 insertions(+), 48 deletions(-)
 create mode 100644 scripts/system/assets/images/progress-bar-2k.svg
 create mode 100644 scripts/system/assets/images/progress-bar-hmd.svg
 delete mode 100644 scripts/system/assets/images/progress-bar.svg

diff --git a/scripts/system/assets/images/progress-bar-2k.svg b/scripts/system/assets/images/progress-bar-2k.svg
new file mode 100644
index 0000000000..45758c7c68
--- /dev/null
+++ b/scripts/system/assets/images/progress-bar-2k.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2240 3" style="enable-background:new 0 0 2240 3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0.1399" y1="-1.9217" x2="2239.7764" y2="-1.9217" gradientTransform="matrix(-1 0 0 0.5607 2240.1399 2.812)">
+	<stop  offset="0" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.13" style="stop-color:#020202;stop-opacity:0"/>
+	<stop  offset="0.1515" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.28" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.3" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.42" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.44" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.57" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.5885" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.71" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.73" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.85" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.869" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.9831" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#0FE8CD"/>
+</linearGradient>
+<rect x="0.4" y="0.5" class="st0" width="2239.6" height="2.5"/>
+</svg>
diff --git a/scripts/system/assets/images/progress-bar-hmd.svg b/scripts/system/assets/images/progress-bar-hmd.svg
new file mode 100644
index 0000000000..a6b555691f
--- /dev/null
+++ b/scripts/system/assets/images/progress-bar-hmd.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 4430 6" style="enable-background:new 0 0 4430 6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-2.077286e-09" y1="-0.84" x2="4430.1401" y2="-0.84" gradientTransform="matrix(-1 0 0 0.5607 4430.1401 3.471)">
+	<stop  offset="0" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.13" style="stop-color:#020202;stop-opacity:0"/>
+	<stop  offset="0.1515" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.28" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.3" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.42" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.44" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.57" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.5885" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.71" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.73" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.85" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.869" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.9831" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#0FE8CD"/>
+</linearGradient>
+<rect x="0" y="0" class="st0" width="4430.1" height="6"/>
+</svg>
diff --git a/scripts/system/assets/images/progress-bar.svg b/scripts/system/assets/images/progress-bar.svg
deleted file mode 100644
index e24a2cbff4..0000000000
--- a/scripts/system/assets/images/progress-bar.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 960 10" enable-background="new -159 536 960 30" xml:space="preserve">
-<defs>
-	<linearGradient id="loadingGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-		<stop offset="0%" style="stop-color:rgb(16,128,184);stop-opacity:1" />
-		<stop offset="100%" style="stop-color:rgb(0,180,239);stop-opacity:1" />
-	</linearGradient>
-</defs>
-<rect x="0" y="0" fill="url(#loadingGrad)" width="480" height="10"/>
-<rect x="480" y="0" fill="#000000" fill-opacity="0.8039" width="480" height="10"/>
-</svg>
diff --git a/scripts/system/progress.js b/scripts/system/progress.js
index 11aabcfc22..34dbdea7da 100644
--- a/scripts/system/progress.js
+++ b/scripts/system/progress.js
@@ -30,20 +30,29 @@
         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 = 10,
+
+        BAR_DESKTOP_WIDTH = 2240, // Width of SVG image in pixels. Sized for 1920 x 1080 display with 6 visible repeats.
+        BAR_DESKTOP_REPEAT = 320,  // Length of repeat in bar = 2240 / 7.
+        BAR_DESKTOP_HEIGHT = 3,  // Display height of SVG
+        BAR_DESKTOP_URL = Script.resolvePath("assets/images/progress-bar-2k.svg"),
+
+        BAR_HMD_WIDTH = 4430, // Width of SVG image in pixels. Sized for Rift with 6 visible repeats.
+        BAR_HMD_REPEAT = 585,  // Length of repeat in bar = 4430 / 7.
+        BAR_HMD_HEIGHT = 4,  // Display height of SVG
+        BAR_HMD_URL = Script.resolvePath("assets/images/progress-bar-hmd.svg"),
+
         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"),
+
         TEXT_HEIGHT = 32,
         TEXT_WIDTH = 256,
         TEXT_URL = Script.resolvePath("assets/images/progress-bar-text.svg"),
         windowWidth = 0,
         windowHeight = 0,
-        bar2D = {},
+        barDesktop = {},
+        barHMD = {},
         textDesktop = {},  // Separate desktop and HMD overlays because can't change text size after overlay created.
         textHMD = {},
-        SCALE_2D = 0.35, // Scale the SVGs for 2D display.
         SCALE_TEXT_DESKTOP = 0.6,
         SCALE_TEXT_HMD = 1.0,
         isHMD = false,
@@ -88,9 +97,13 @@
             visible = false;
         }
 
-        Overlays.editOverlay(bar2D.overlay, {
+        Overlays.editOverlay(barDesktop.overlay, {
             alpha: alpha,
-            visible: visible
+            visible: visible && !isHMD
+        });
+        Overlays.editOverlay(barHMD.overlay, {
+            alpha: alpha,
+            visible: visible && isHMD
         });
         Overlays.editOverlay(textDesktop.overlay, {
             alpha: alpha,
@@ -144,16 +157,29 @@
     }
 
     function createOverlays() {
-        bar2D.overlay = Overlays.addOverlay("image", {
-            imageURL: BAR_URL,
+        barDesktop.overlay = Overlays.addOverlay("image", {
+            imageURL: BAR_DESKTOP_URL,
             subImage: {
                 x: 0,
                 y: 0,
-                width: BAR_WIDTH,
-                height: BAR_HEIGHT
+                width: BAR_DESKTOP_WIDTH - BAR_DESKTOP_REPEAT,
+                height: BAR_DESKTOP_HEIGHT
             },
-            width: bar2D.width,
-            height: bar2D.height,
+            width: barDesktop.width,
+            height: barDesktop.height,
+            visible: false,
+            alpha: 0.0
+        });
+        barHMD.overlay = Overlays.addOverlay("image", {
+            imageURL: BAR_HMD_URL,
+            subImage: {
+                x: 0,
+                y: 0,
+                width: BAR_HMD_WIDTH - BAR_HMD_REPEAT,
+                height: BAR_HMD_HEIGHT
+            },
+            width: barHMD.width,
+            height: barHMD.height,
             visible: false,
             alpha: 0.0
         });
@@ -174,34 +200,46 @@
     }
 
     function deleteOverlays() {
-        Overlays.deleteOverlay(bar2D.overlay);
+        Overlays.deleteOverlay(barDesktop.overlay);
+        Overlays.deleteOverlay(barHMD.overlay);
         Overlays.deleteOverlay(textDesktop.overlay);
         Overlays.deleteOverlay(textHMD.overlay);
     }
 
     function updateProgressBarLocation() {
-        var viewport = Controller.getViewportDimensions(),
-            yOffset;
+        var viewport = Controller.getViewportDimensions();
 
         windowWidth = viewport.x;
         windowHeight = viewport.y;
         isHMD = HMD.active;
-        yOffset = isHMD ? BAR_Y_OFFSET_HMD : BAR_Y_OFFSET_2D;
 
-        Overlays.editOverlay(bar2D.overlay, {
-            x: windowWidth / 2 - bar2D.width / 2,
-            y: windowHeight - 2 * bar2D.height + yOffset
-        });
+        if (isHMD) {
+            barHMD.width = windowWidth;
 
-        Overlays.editOverlay(textDesktop.overlay, {
-            x: windowWidth / 2 - textDesktop.width / 2,
-            y: windowHeight - 2 * textDesktop.height + yOffset
-        });
+            Overlays.editOverlay(barHMD.overlay, {
+                x: windowWidth / 2 - barHMD.width / 2,
+                y: windowHeight - 2 * barHMD.height + BAR_Y_OFFSET_HMD,
+                width: barHMD.width
+            });
 
-        Overlays.editOverlay(textHMD.overlay, {
-            x: windowWidth / 2 - textHMD.width / 2,
-            y: windowHeight - 2 * textHMD.height + yOffset
-        });
+            Overlays.editOverlay(textHMD.overlay, {
+                x: windowWidth / 2 - textHMD.width / 2,
+                y: windowHeight - 2 * textHMD.height + BAR_Y_OFFSET_HMD
+            });
+        } else {
+            barDesktop.width = windowWidth;
+
+            Overlays.editOverlay(barDesktop.overlay, {
+                x: windowWidth / 2 - barDesktop.width / 2,
+                y: windowHeight - 2 * barDesktop.height + BAR_Y_OFFSET_2D,
+                width: barDesktop.width
+            });
+
+            Overlays.editOverlay(textDesktop.overlay, {
+                x: windowWidth / 2 - textDesktop.width / 2,
+                y: windowHeight - 2 * textDesktop.height + BAR_Y_OFFSET_2D
+            });
+        }
     }
 
     function update() {
@@ -254,13 +292,23 @@
 
         if (visible) {
             // Update progress bar
-            Overlays.editOverlay(bar2D.overlay, {
-                visible: true,
+            Overlays.editOverlay(barDesktop.overlay, {
+                visible: !isHMD,
                 subImage: {
-                    x: BAR_WIDTH * (1 - displayProgress / 100),
+                    x: BAR_DESKTOP_REPEAT * (1 - displayProgress / 100),
                     y: 0,
-                    width: BAR_WIDTH,
-                    height: BAR_HEIGHT
+                    width: BAR_DESKTOP_WIDTH - BAR_DESKTOP_REPEAT,
+                    height: BAR_DESKTOP_HEIGHT
+                }
+            });
+
+            Overlays.editOverlay(barHMD.overlay, {
+                visible: isHMD,
+                subImage: {
+                    x: BAR_HMD_REPEAT * (1 - displayProgress / 100),
+                    y: 0,
+                    width: BAR_HMD_WIDTH - BAR_HMD_REPEAT,
+                    height: BAR_HMD_HEIGHT
                 }
             });
 
@@ -284,8 +332,11 @@
     function setUp() {
         isHMD = HMD.active;
 
-        bar2D.width = SCALE_2D * BAR_WIDTH;
-        bar2D.height = SCALE_2D * BAR_HEIGHT;
+        barDesktop.width = BAR_DESKTOP_WIDTH;
+        barDesktop.height = BAR_DESKTOP_HEIGHT;
+        barHMD.width = BAR_HMD_WIDTH;
+        barHMD.height = BAR_HMD_HEIGHT;
+
         textDesktop.width = SCALE_TEXT_DESKTOP * TEXT_WIDTH;
         textDesktop.height = SCALE_TEXT_DESKTOP * TEXT_HEIGHT;
         textHMD.width = SCALE_TEXT_HMD * TEXT_WIDTH;

From 73b2bc433dcaaf745d18846f8033628d6dbd85c8 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 28 Oct 2016 18:03:13 +1300
Subject: [PATCH 5/7] Improve bar positions

---
 .../system/assets/images/progress-bar-hmd.svg | 26 -------------------
 scripts/system/progress.js                    | 24 ++++++++---------
 2 files changed, 11 insertions(+), 39 deletions(-)
 delete mode 100644 scripts/system/assets/images/progress-bar-hmd.svg

diff --git a/scripts/system/assets/images/progress-bar-hmd.svg b/scripts/system/assets/images/progress-bar-hmd.svg
deleted file mode 100644
index a6b555691f..0000000000
--- a/scripts/system/assets/images/progress-bar-hmd.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 4430 6" style="enable-background:new 0 0 4430 6;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:url(#SVGID_1_);}
-</style>
-<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-2.077286e-09" y1="-0.84" x2="4430.1401" y2="-0.84" gradientTransform="matrix(-1 0 0 0.5607 4430.1401 3.471)">
-	<stop  offset="0" style="stop-color:#0FE8CD"/>
-	<stop  offset="0.13" style="stop-color:#020202;stop-opacity:0"/>
-	<stop  offset="0.1515" style="stop-color:#0FE8CD"/>
-	<stop  offset="0.28" style="stop-color:#000000;stop-opacity:0"/>
-	<stop  offset="0.3" style="stop-color:#0FE8CD"/>
-	<stop  offset="0.42" style="stop-color:#000000;stop-opacity:0"/>
-	<stop  offset="0.44" style="stop-color:#0FE8CD"/>
-	<stop  offset="0.57" style="stop-color:#000000;stop-opacity:0"/>
-	<stop  offset="0.5885" style="stop-color:#0FE8CD"/>
-	<stop  offset="0.71" style="stop-color:#000000;stop-opacity:0"/>
-	<stop  offset="0.73" style="stop-color:#0FE8CD"/>
-	<stop  offset="0.85" style="stop-color:#000000;stop-opacity:0"/>
-	<stop  offset="0.869" style="stop-color:#0FE8CD"/>
-	<stop  offset="0.9831" style="stop-color:#000000;stop-opacity:0"/>
-	<stop  offset="1" style="stop-color:#0FE8CD"/>
-</linearGradient>
-<rect x="0" y="0" class="st0" width="4430.1" height="6"/>
-</svg>
diff --git a/scripts/system/progress.js b/scripts/system/progress.js
index 34dbdea7da..20023b0352 100644
--- a/scripts/system/progress.js
+++ b/scripts/system/progress.js
@@ -36,13 +36,13 @@
         BAR_DESKTOP_HEIGHT = 3,  // Display height of SVG
         BAR_DESKTOP_URL = Script.resolvePath("assets/images/progress-bar-2k.svg"),
 
-        BAR_HMD_WIDTH = 4430, // Width of SVG image in pixels. Sized for Rift with 6 visible repeats.
-        BAR_HMD_REPEAT = 585,  // Length of repeat in bar = 4430 / 7.
-        BAR_HMD_HEIGHT = 4,  // Display height of SVG
-        BAR_HMD_URL = Script.resolvePath("assets/images/progress-bar-hmd.svg"),
+        BAR_HMD_WIDTH = 2240,  // Desktop image works with HMD well.
+        BAR_HMD_REPEAT = 320,
+        BAR_HMD_HEIGHT = 3,
+        BAR_HMD_URL = Script.resolvePath("assets/images/progress-bar-2k.svg"),
 
-        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_Y_OFFSET_DESKTOP = 0, // Offset of progress bar while in desktop mode
+        BAR_Y_OFFSET_HMD = -100, // Offset of progress bar while in HMD
 
         TEXT_HEIGHT = 32,
         TEXT_WIDTH = 256,
@@ -214,30 +214,28 @@
         isHMD = HMD.active;
 
         if (isHMD) {
-            barHMD.width = windowWidth;
 
             Overlays.editOverlay(barHMD.overlay, {
                 x: windowWidth / 2 - barHMD.width / 2,
-                y: windowHeight - 2 * barHMD.height + BAR_Y_OFFSET_HMD,
-                width: barHMD.width
+                y: windowHeight - 2 * barHMD.height + BAR_Y_OFFSET_HMD
             });
 
             Overlays.editOverlay(textHMD.overlay, {
                 x: windowWidth / 2 - textHMD.width / 2,
-                y: windowHeight - 2 * textHMD.height + BAR_Y_OFFSET_HMD
+                y: windowHeight - 2 * barHMD.height - textHMD.height + BAR_Y_OFFSET_HMD
             });
+
         } else {
-            barDesktop.width = windowWidth;
 
             Overlays.editOverlay(barDesktop.overlay, {
                 x: windowWidth / 2 - barDesktop.width / 2,
-                y: windowHeight - 2 * barDesktop.height + BAR_Y_OFFSET_2D,
+                y: windowHeight - 2 * barDesktop.height + BAR_Y_OFFSET_DESKTOP,
                 width: barDesktop.width
             });
 
             Overlays.editOverlay(textDesktop.overlay, {
                 x: windowWidth / 2 - textDesktop.width / 2,
-                y: windowHeight - 2 * textDesktop.height + BAR_Y_OFFSET_2D
+                y: windowHeight - 2 * barDesktop.height - textDesktop.height + BAR_Y_OFFSET_DESKTOP
             });
         }
     }

From 610159fcbe44c0079d262ab2999a6de758fb27e8 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 28 Oct 2016 18:20:33 +1300
Subject: [PATCH 6/7] Improve bar for 4K displays

---
 .../system/assets/images/progress-bar-4k.svg  | 26 +++++++++++++++
 scripts/system/progress.js                    | 33 ++++++++++++-------
 2 files changed, 47 insertions(+), 12 deletions(-)
 create mode 100644 scripts/system/assets/images/progress-bar-4k.svg

diff --git a/scripts/system/assets/images/progress-bar-4k.svg b/scripts/system/assets/images/progress-bar-4k.svg
new file mode 100644
index 0000000000..609ab9610b
--- /dev/null
+++ b/scripts/system/assets/images/progress-bar-4k.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 4480 6" style="enable-background:new 0 0 4480 6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0.607" y1="-0.4217" x2="4479.3096" y2="-0.4217" gradientTransform="matrix(-1 0 0 0.5607 4480.1401 3.471)">
+	<stop  offset="0" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.13" style="stop-color:#020202;stop-opacity:0"/>
+	<stop  offset="0.1515" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.28" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.3" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.42" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.44" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.57" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.5885" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.71" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.73" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.85" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="0.869" style="stop-color:#0FE8CD"/>
+	<stop  offset="0.9831" style="stop-color:#000000;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#0FE8CD"/>
+</linearGradient>
+<rect x="0.8" y="0.7" class="st0" width="4478.7" height="5.1"/>
+</svg>
diff --git a/scripts/system/progress.js b/scripts/system/progress.js
index 20023b0352..89f64639e7 100644
--- a/scripts/system/progress.js
+++ b/scripts/system/progress.js
@@ -31,10 +31,15 @@
         FADE_OUT_WAIT = 1000, // Wait before starting to fade out after progress 100%.
         visible = false,
 
-        BAR_DESKTOP_WIDTH = 2240, // Width of SVG image in pixels. Sized for 1920 x 1080 display with 6 visible repeats.
-        BAR_DESKTOP_REPEAT = 320,  // Length of repeat in bar = 2240 / 7.
-        BAR_DESKTOP_HEIGHT = 3,  // Display height of SVG
-        BAR_DESKTOP_URL = Script.resolvePath("assets/images/progress-bar-2k.svg"),
+        BAR_DESKTOP_2K_WIDTH = 2240, // Width of SVG image in pixels. Sized for 1920 x 1080 display with 6 visible repeats.
+        BAR_DESKTOP_2K_REPEAT = 320,  // Length of repeat in bar = 2240 / 7.
+        BAR_DESKTOP_2K_HEIGHT = 3,  // Display height of SVG
+        BAR_DESKTOP_2K_URL = Script.resolvePath("assets/images/progress-bar-2k.svg"),
+
+        BAR_DESKTOP_4K_WIDTH = 4480, // Width of SVG image in pixels. Sized for 1920 x 1080 display with 6 visible repeats.
+        BAR_DESKTOP_4K_REPEAT = 640,  // Length of repeat in bar = 2240 / 7.
+        BAR_DESKTOP_4K_HEIGHT = 6,  // Display height of SVG
+        BAR_DESKTOP_4K_URL = Script.resolvePath("assets/images/progress-bar-4k.svg"),
 
         BAR_HMD_WIDTH = 2240,  // Desktop image works with HMD well.
         BAR_HMD_REPEAT = 320,
@@ -158,12 +163,12 @@
 
     function createOverlays() {
         barDesktop.overlay = Overlays.addOverlay("image", {
-            imageURL: BAR_DESKTOP_URL,
+            imageURL: barDesktop.url,
             subImage: {
                 x: 0,
                 y: 0,
-                width: BAR_DESKTOP_WIDTH - BAR_DESKTOP_REPEAT,
-                height: BAR_DESKTOP_HEIGHT
+                width: barDesktop.width - barDesktop.repeat,
+                height: barDesktop.height
             },
             width: barDesktop.width,
             height: barDesktop.height,
@@ -293,10 +298,10 @@
             Overlays.editOverlay(barDesktop.overlay, {
                 visible: !isHMD,
                 subImage: {
-                    x: BAR_DESKTOP_REPEAT * (1 - displayProgress / 100),
+                    x: barDesktop.repeat * (1 - displayProgress / 100),
                     y: 0,
-                    width: BAR_DESKTOP_WIDTH - BAR_DESKTOP_REPEAT,
-                    height: BAR_DESKTOP_HEIGHT
+                    width: barDesktop.width - barDesktop.repeat,
+                    height: barDesktop.height
                 }
             });
 
@@ -328,10 +333,14 @@
     }
 
     function setUp() {
+        var is4k = Window.innerWidth > 3000;
+
         isHMD = HMD.active;
 
-        barDesktop.width = BAR_DESKTOP_WIDTH;
-        barDesktop.height = BAR_DESKTOP_HEIGHT;
+        barDesktop.width = is4k ? BAR_DESKTOP_4K_WIDTH : BAR_DESKTOP_2K_WIDTH;
+        barDesktop.height = is4k ? BAR_DESKTOP_4K_HEIGHT : BAR_DESKTOP_2K_HEIGHT;
+        barDesktop.repeat = is4k ? BAR_DESKTOP_4K_REPEAT : BAR_DESKTOP_2K_REPEAT;
+        barDesktop.url = is4k ? BAR_DESKTOP_4K_URL : BAR_DESKTOP_2K_URL;
         barHMD.width = BAR_HMD_WIDTH;
         barHMD.height = BAR_HMD_HEIGHT;
 

From b548e6441c5a15961bdb14628e35de049e51986c Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 28 Oct 2016 18:57:54 +1300
Subject: [PATCH 7/7] Animate progress bar without regard for amount of content
 left to load

---
 scripts/system/progress.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/scripts/system/progress.js b/scripts/system/progress.js
index 89f64639e7..c0b7143a11 100644
--- a/scripts/system/progress.js
+++ b/scripts/system/progress.js
@@ -49,6 +49,8 @@
         BAR_Y_OFFSET_DESKTOP = 0, // Offset of progress bar while in desktop mode
         BAR_Y_OFFSET_HMD = -100, // Offset of progress bar while in HMD
 
+        ANIMATION_SECONDS_PER_REPEAT = 4,  // Speed of bar animation
+
         TEXT_HEIGHT = 32,
         TEXT_WIDTH = 256,
         TEXT_URL = Script.resolvePath("assets/images/progress-bar-text.svg"),
@@ -246,7 +248,7 @@
     }
 
     function update() {
-        var viewport, diff;
+        var viewport, diff, x;
 
         initialDelayCooldown -= 30;
 
@@ -294,11 +296,18 @@
         }
 
         if (visible) {
+            x = ((Date.now() / 1000) % ANIMATION_SECONDS_PER_REPEAT) / ANIMATION_SECONDS_PER_REPEAT;
+            if (isHMD) {
+                x = x * barDesktop.repeat;
+            } else {
+                x = x * BAR_HMD_REPEAT;
+            }
+
             // Update progress bar
             Overlays.editOverlay(barDesktop.overlay, {
                 visible: !isHMD,
                 subImage: {
-                    x: barDesktop.repeat * (1 - displayProgress / 100),
+                    x: barDesktop.repeat - x,
                     y: 0,
                     width: barDesktop.width - barDesktop.repeat,
                     height: barDesktop.height
@@ -308,7 +317,7 @@
             Overlays.editOverlay(barHMD.overlay, {
                 visible: isHMD,
                 subImage: {
-                    x: BAR_HMD_REPEAT * (1 - displayProgress / 100),
+                    x: BAR_HMD_REPEAT - x,
                     y: 0,
                     width: BAR_HMD_WIDTH - BAR_HMD_REPEAT,
                     height: BAR_HMD_HEIGHT
@@ -337,11 +346,11 @@
 
         isHMD = HMD.active;
 
-        barDesktop.width = is4k ? BAR_DESKTOP_4K_WIDTH : BAR_DESKTOP_2K_WIDTH;
+        barDesktop.width = is4k ? BAR_DESKTOP_4K_WIDTH - BAR_DESKTOP_4K_REPEAT : BAR_DESKTOP_2K_WIDTH - BAR_DESKTOP_2K_REPEAT;
         barDesktop.height = is4k ? BAR_DESKTOP_4K_HEIGHT : BAR_DESKTOP_2K_HEIGHT;
         barDesktop.repeat = is4k ? BAR_DESKTOP_4K_REPEAT : BAR_DESKTOP_2K_REPEAT;
         barDesktop.url = is4k ? BAR_DESKTOP_4K_URL : BAR_DESKTOP_2K_URL;
-        barHMD.width = BAR_HMD_WIDTH;
+        barHMD.width = BAR_HMD_WIDTH - BAR_HMD_REPEAT;
         barHMD.height = BAR_HMD_HEIGHT;
 
         textDesktop.width = SCALE_TEXT_DESKTOP * TEXT_WIDTH;