mirror of
https://github.com/overte-org/overte.git
synced 2025-08-08 16:38:27 +02:00
Update bar graph for desktop and HMD displays
This commit is contained in:
David Rowe
parent
c9e4fddeab
commit
edc9b1fa07
4 changed files with 139 additions and 48 deletions
26
scripts/system/assets/images/progress-bar-2k.svg
Normal file
26
scripts/system/assets/images/progress-bar-2k.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
26
scripts/system/assets/images/progress-bar-hmd.svg
Normal file
26
scripts/system/assets/images/progress-bar-hmd.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -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>
|
|
||||||
|
Before Width: | Height: | Size: 671 B |
|
|
@ -30,20 +30,29 @@
|
||||||
fadeWaitTimer = null,
|
fadeWaitTimer = null,
|
||||||
FADE_OUT_WAIT = 1000, // Wait before starting to fade out after progress 100%.
|
FADE_OUT_WAIT = 1000, // Wait before starting to fade out after progress 100%.
|
||||||
visible = false,
|
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_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_HMD = -300, // Offset of progress bar while in HMD
|
||||||
BAR_URL = Script.resolvePath("assets/images/progress-bar.svg"),
|
|
||||||
TEXT_HEIGHT = 32,
|
TEXT_HEIGHT = 32,
|
||||||
TEXT_WIDTH = 256,
|
TEXT_WIDTH = 256,
|
||||||
TEXT_URL = Script.resolvePath("assets/images/progress-bar-text.svg"),
|
TEXT_URL = Script.resolvePath("assets/images/progress-bar-text.svg"),
|
||||||
windowWidth = 0,
|
windowWidth = 0,
|
||||||
windowHeight = 0,
|
windowHeight = 0,
|
||||||
bar2D = {},
|
barDesktop = {},
|
||||||
|
barHMD = {},
|
||||||
textDesktop = {}, // Separate desktop and HMD overlays because can't change text size after overlay created.
|
textDesktop = {}, // Separate desktop and HMD overlays because can't change text size after overlay created.
|
||||||
textHMD = {},
|
textHMD = {},
|
||||||
SCALE_2D = 0.35, // Scale the SVGs for 2D display.
|
|
||||||
SCALE_TEXT_DESKTOP = 0.6,
|
SCALE_TEXT_DESKTOP = 0.6,
|
||||||
SCALE_TEXT_HMD = 1.0,
|
SCALE_TEXT_HMD = 1.0,
|
||||||
isHMD = false,
|
isHMD = false,
|
||||||
|
|
@ -88,9 +97,13 @@
|
||||||
visible = false;
|
visible = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
Overlays.editOverlay(bar2D.overlay, {
|
Overlays.editOverlay(barDesktop.overlay, {
|
||||||
alpha: alpha,
|
alpha: alpha,
|
||||||
visible: visible
|
visible: visible && !isHMD
|
||||||
|
});
|
||||||
|
Overlays.editOverlay(barHMD.overlay, {
|
||||||
|
alpha: alpha,
|
||||||
|
visible: visible && isHMD
|
||||||
});
|
});
|
||||||
Overlays.editOverlay(textDesktop.overlay, {
|
Overlays.editOverlay(textDesktop.overlay, {
|
||||||
alpha: alpha,
|
alpha: alpha,
|
||||||
|
|
@ -144,16 +157,29 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function createOverlays() {
|
function createOverlays() {
|
||||||
bar2D.overlay = Overlays.addOverlay("image", {
|
barDesktop.overlay = Overlays.addOverlay("image", {
|
||||||
imageURL: BAR_URL,
|
imageURL: BAR_DESKTOP_URL,
|
||||||
subImage: {
|
subImage: {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
width: BAR_WIDTH,
|
width: BAR_DESKTOP_WIDTH - BAR_DESKTOP_REPEAT,
|
||||||
height: BAR_HEIGHT
|
height: BAR_DESKTOP_HEIGHT
|
||||||
},
|
},
|
||||||
width: bar2D.width,
|
width: barDesktop.width,
|
||||||
height: bar2D.height,
|
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,
|
visible: false,
|
||||||
alpha: 0.0
|
alpha: 0.0
|
||||||
});
|
});
|
||||||
|
|
@ -174,34 +200,46 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteOverlays() {
|
function deleteOverlays() {
|
||||||
Overlays.deleteOverlay(bar2D.overlay);
|
Overlays.deleteOverlay(barDesktop.overlay);
|
||||||
|
Overlays.deleteOverlay(barHMD.overlay);
|
||||||
Overlays.deleteOverlay(textDesktop.overlay);
|
Overlays.deleteOverlay(textDesktop.overlay);
|
||||||
Overlays.deleteOverlay(textHMD.overlay);
|
Overlays.deleteOverlay(textHMD.overlay);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateProgressBarLocation() {
|
function updateProgressBarLocation() {
|
||||||
var viewport = Controller.getViewportDimensions(),
|
var viewport = Controller.getViewportDimensions();
|
||||||
yOffset;
|
|
||||||
|
|
||||||
windowWidth = viewport.x;
|
windowWidth = viewport.x;
|
||||||
windowHeight = viewport.y;
|
windowHeight = viewport.y;
|
||||||
isHMD = HMD.active;
|
isHMD = HMD.active;
|
||||||
yOffset = isHMD ? BAR_Y_OFFSET_HMD : BAR_Y_OFFSET_2D;
|
|
||||||
|
|
||||||
Overlays.editOverlay(bar2D.overlay, {
|
if (isHMD) {
|
||||||
x: windowWidth / 2 - bar2D.width / 2,
|
barHMD.width = windowWidth;
|
||||||
y: windowHeight - 2 * bar2D.height + yOffset
|
|
||||||
});
|
|
||||||
|
|
||||||
Overlays.editOverlay(textDesktop.overlay, {
|
Overlays.editOverlay(barHMD.overlay, {
|
||||||
x: windowWidth / 2 - textDesktop.width / 2,
|
x: windowWidth / 2 - barHMD.width / 2,
|
||||||
y: windowHeight - 2 * textDesktop.height + yOffset
|
y: windowHeight - 2 * barHMD.height + BAR_Y_OFFSET_HMD,
|
||||||
});
|
width: barHMD.width
|
||||||
|
});
|
||||||
|
|
||||||
Overlays.editOverlay(textHMD.overlay, {
|
Overlays.editOverlay(textHMD.overlay, {
|
||||||
x: windowWidth / 2 - textHMD.width / 2,
|
x: windowWidth / 2 - textHMD.width / 2,
|
||||||
y: windowHeight - 2 * textHMD.height + yOffset
|
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() {
|
function update() {
|
||||||
|
|
@ -254,13 +292,23 @@
|
||||||
|
|
||||||
if (visible) {
|
if (visible) {
|
||||||
// Update progress bar
|
// Update progress bar
|
||||||
Overlays.editOverlay(bar2D.overlay, {
|
Overlays.editOverlay(barDesktop.overlay, {
|
||||||
visible: true,
|
visible: !isHMD,
|
||||||
subImage: {
|
subImage: {
|
||||||
x: BAR_WIDTH * (1 - displayProgress / 100),
|
x: BAR_DESKTOP_REPEAT * (1 - displayProgress / 100),
|
||||||
y: 0,
|
y: 0,
|
||||||
width: BAR_WIDTH,
|
width: BAR_DESKTOP_WIDTH - BAR_DESKTOP_REPEAT,
|
||||||
height: BAR_HEIGHT
|
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() {
|
function setUp() {
|
||||||
isHMD = HMD.active;
|
isHMD = HMD.active;
|
||||||
|
|
||||||
bar2D.width = SCALE_2D * BAR_WIDTH;
|
barDesktop.width = BAR_DESKTOP_WIDTH;
|
||||||
bar2D.height = SCALE_2D * BAR_HEIGHT;
|
barDesktop.height = BAR_DESKTOP_HEIGHT;
|
||||||
|
barHMD.width = BAR_HMD_WIDTH;
|
||||||
|
barHMD.height = BAR_HMD_HEIGHT;
|
||||||
|
|
||||||
textDesktop.width = SCALE_TEXT_DESKTOP * TEXT_WIDTH;
|
textDesktop.width = SCALE_TEXT_DESKTOP * TEXT_WIDTH;
|
||||||
textDesktop.height = SCALE_TEXT_DESKTOP * TEXT_HEIGHT;
|
textDesktop.height = SCALE_TEXT_DESKTOP * TEXT_HEIGHT;
|
||||||
textHMD.width = SCALE_TEXT_HMD * TEXT_WIDTH;
|
textHMD.width = SCALE_TEXT_HMD * TEXT_WIDTH;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue