Mirrors/overte-Armored-Dragon
3
0
Fork 0
mirror of https://github.com/Armored-Dragon/overte.git synced 2025-03-11 16:13:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve bar for 4K displays

Browse source
This commit is contained in:
David Rowe 2016-10-28 18:20:33 +13:00
parent 73b2bc433d
commit 610159fcbe
2 changed files with 47 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
scripts/system/assets/images/progress-bar-4k.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 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>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

33
scripts/system/progress.js
View file

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