From edc9b1fa074a8f3fdc9e6aa18f449c7c77310dbe Mon Sep 17 00:00:00 2001 From: David Rowe Date: Fri, 28 Oct 2016 15:50:50 +1300 Subject: [PATCH] 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 @@ + + + + + + + + + + + + + + + + + + + + + + + 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 @@ + + + + + + + + + + + + + + + + + + + + + + + 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 @@ - - - - - - - - - - - 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;