Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-20 04:44:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update bar graph for desktop and HMD displays

Browse source
This commit is contained in:
David Rowe 2016-10-28 15:50:50 +13:00
parent c9e4fddeab
commit edc9b1fa07
4 changed files with 139 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
scripts/system/assets/images/progress-bar-2k.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

26
scripts/system/assets/images/progress-bar-hmd.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

12
scripts/system/assets/images/progress-bar.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 671 B

123
scripts/system/progress.js
View file

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