mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-07 17:50:45 +02:00
Display 3D progress bar
This commit is contained in:
David Rowe
parent
7beb5bf25f
commit
fdf4aeaeab
1 changed files with 116 additions and 44 deletions
|
|
@ -13,28 +13,37 @@
|
|||
|
||||
(function () {
|
||||
|
||||
var progress = 100, // %
|
||||
var progress = 100, // %
|
||||
alpha = 0.0,
|
||||
alphaDelta = 0.0, // > 0 if fading in; < 0 if fading out
|
||||
alphaDelta = 0.0, // > 0 if fading in; < 0 if fading out/
|
||||
ALPHA_DELTA_IN = 0.15,
|
||||
ALPHA_DELTA_OUT = -0.02,
|
||||
fadeTimer = null,
|
||||
FADE_INTERVAL = 30, // ms between changes in alpha
|
||||
FADE_INTERVAL = 30, // ms between changes in alpha.
|
||||
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,
|
||||
BAR_COLOR = { red: 0, green: 128, blue: 0 },
|
||||
BAR_WIDTH = 320, // Nominal dimension of SVG in pixels
|
||||
BAR_WIDTH = 320, // Nominal dimension of SVG in pixels of visible portion (half) of the bar.
|
||||
BAR_HEIGHT = 20,
|
||||
BAR_URL = "http://ctrlaltstudio.com/hifi/progress-bar.svg",
|
||||
BACKGROUND_WIDTH = 360,
|
||||
BACKGROUND_HEIGHT = 60,
|
||||
BACKGROUND_URL = "http://ctrlaltstudio.com/hifi/progress-bar-background.svg",
|
||||
SCALE_2D = 0.5, // Scale the SVGs for 2D display
|
||||
isOnHMD = false,
|
||||
windowWidth = 0,
|
||||
windowHeight = 0,
|
||||
background2D = {},
|
||||
bar2D = {},
|
||||
windowWidth = 0,
|
||||
windowHeight = 0;
|
||||
SCALE_2D = 0.5, // Scale the SVGs for 2D display.
|
||||
background3D = {},
|
||||
bar3D = {},
|
||||
ENABLE_VR_MODE_MENU_ITEM = "Enable VR Mode",
|
||||
PROGRESS_3D_DIRECTION = 0.0, // Degrees from avatar orientation.
|
||||
PROGRESS_3D_DISTANCE = 0.63, // Horizontal distance from avatar position.
|
||||
PROGRESS_3D_ELEVATION = -0.783, // Height of top middle of top notification relative to avatar eyes.
|
||||
PROGRESS_3D_YAW = 0.0, // Degrees relative to notifications direction.
|
||||
PROGRESS_3D_PITCH = -60.0, // Degrees from vertical.
|
||||
SCALE_3D = 0.0021; // Scale the SVGs for 3D display.
|
||||
|
||||
function fade() {
|
||||
|
||||
|
|
@ -57,11 +66,11 @@
|
|||
visible = false;
|
||||
}
|
||||
|
||||
Overlays.editOverlay(background2D.overlay, {
|
||||
Overlays.editOverlay(isOnHMD ? background3D.overlay : background2D.overlay, {
|
||||
alpha: alpha,
|
||||
visible: visible
|
||||
});
|
||||
Overlays.editOverlay(bar2D.overlay, {
|
||||
Overlays.editOverlay(isOnHMD ? bar3D.overlay : bar2D.overlay, {
|
||||
alpha: alpha,
|
||||
visible: visible
|
||||
});
|
||||
|
|
@ -117,59 +126,122 @@
|
|||
|
||||
// Update progress bar
|
||||
if (visible) {
|
||||
Overlays.editOverlay(bar2D.overlay, {
|
||||
width: progress / 100 * bar2D.width
|
||||
Overlays.editOverlay(isOnHMD ? bar3D.overlay : bar2D.overlay, {
|
||||
subImage: { x: BAR_WIDTH * (1 - progress / 100), y: 0, width: BAR_WIDTH, height: BAR_HEIGHT }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function createOverlays() {
|
||||
if (isOnHMD) {
|
||||
|
||||
background3D.overlay = Overlays.addOverlay("billboard", {
|
||||
url: BACKGROUND_URL,
|
||||
scale: SCALE_3D * BACKGROUND_WIDTH,
|
||||
isFacingAvatar: false,
|
||||
visible: false,
|
||||
alpha: 0.0
|
||||
});
|
||||
bar3D.overlay = Overlays.addOverlay("billboard", {
|
||||
url: BAR_URL,
|
||||
subImage: { x: BAR_WIDTH, y: 0, width: BAR_WIDTH, height: BAR_HEIGHT },
|
||||
scale: SCALE_3D * BAR_WIDTH,
|
||||
isFacingAvatar: false,
|
||||
visible: false,
|
||||
alpha: 0.0
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
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: { x: BAR_WIDTH, y: 0, width: BAR_WIDTH, height: BAR_HEIGHT },
|
||||
width: bar2D.width,
|
||||
height: bar2D.height,
|
||||
visible: false,
|
||||
alpha: 0.0
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function deleteOverlays() {
|
||||
Overlays.deleteOverlay(isOnHMD ? background3D.overlay : background2D.overlay);
|
||||
Overlays.deleteOverlay(isOnHMD ? bar3D.overlay : bar2D.overlay);
|
||||
}
|
||||
|
||||
function update() {
|
||||
var viewport;
|
||||
var viewport,
|
||||
eyePosition,
|
||||
avatarOrientation;
|
||||
|
||||
viewport = Controller.getViewportDimensions();
|
||||
if (isOnHMD !== Menu.isOptionChecked(ENABLE_VR_MODE_MENU_ITEM)) {
|
||||
deleteOverlays();
|
||||
isOnHMD = !isOnHMD;
|
||||
createOverlays();
|
||||
}
|
||||
|
||||
if (viewport.x !== windowWidth || viewport.y !== windowHeight) {
|
||||
windowWidth = viewport.x;
|
||||
windowHeight = viewport.y;
|
||||
if (visible) {
|
||||
if (isOnHMD) {
|
||||
// Update 3D overlays to maintain positions relative to avatar
|
||||
eyePosition = MyAvatar.getDefaultEyePosition();
|
||||
avatarOrientation = MyAvatar.orientation;
|
||||
|
||||
Overlays.editOverlay(background2D.overlay, {
|
||||
x: windowWidth / 2 - background2D.width / 2,
|
||||
y: windowHeight - background2D.height - bar2D.height
|
||||
});
|
||||
Overlays.editOverlay(background3D.overlay, {
|
||||
position: Vec3.sum(eyePosition, Vec3.multiplyQbyV(avatarOrientation, background3D.offset)),
|
||||
rotation: Quat.multiply(avatarOrientation, background3D.orientation)
|
||||
});
|
||||
Overlays.editOverlay(bar3D.overlay, {
|
||||
position: Vec3.sum(eyePosition, Vec3.multiplyQbyV(avatarOrientation, bar3D.offset)),
|
||||
rotation: Quat.multiply(avatarOrientation, bar3D.orientation)
|
||||
});
|
||||
|
||||
Overlays.editOverlay(bar2D.overlay, {
|
||||
x: windowWidth / 2 - bar2D.width / 2,
|
||||
y: windowHeight - background2D.height - bar2D.height + (background2D.height - bar2D.height) / 2
|
||||
});
|
||||
} else {
|
||||
// Update 2D overlays to maintain positions at bottom middle of window
|
||||
viewport = Controller.getViewportDimensions();
|
||||
|
||||
if (viewport.x !== windowWidth || viewport.y !== windowHeight) {
|
||||
windowWidth = viewport.x;
|
||||
windowHeight = viewport.y;
|
||||
|
||||
Overlays.editOverlay(background2D.overlay, {
|
||||
x: windowWidth / 2 - background2D.width / 2,
|
||||
y: windowHeight - background2D.height - bar2D.height
|
||||
});
|
||||
|
||||
Overlays.editOverlay(bar2D.overlay, {
|
||||
x: windowWidth / 2 - bar2D.width / 2,
|
||||
y: windowHeight - background2D.height - bar2D.height + (background2D.height - bar2D.height) / 2
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setUp() {
|
||||
background2D.width = SCALE_2D * BACKGROUND_WIDTH;
|
||||
background2D.height = SCALE_2D * BACKGROUND_HEIGHT;
|
||||
background2D.overlay = Overlays.addOverlay("image", {
|
||||
width: background2D.width,
|
||||
height: background2D.height,
|
||||
imageURL: BACKGROUND_URL,
|
||||
visible: false,
|
||||
alpha: 0.0
|
||||
});
|
||||
|
||||
bar2D.width = SCALE_2D * BAR_WIDTH;
|
||||
bar2D.height = SCALE_2D * BAR_HEIGHT;
|
||||
bar2D.overlay = Overlays.addOverlay("image", {
|
||||
width: bar2D.width,
|
||||
height: bar2D.height,
|
||||
imageURL: BAR_URL,
|
||||
color: BAR_COLOR,
|
||||
visible: false,
|
||||
alpha: 0.0
|
||||
});
|
||||
|
||||
background3D.offset = Vec3.multiplyQbyV(Quat.fromPitchYawRollDegrees(0, PROGRESS_3D_DIRECTION, 0),
|
||||
{ x: 0, y: 0, z: -PROGRESS_3D_DISTANCE });
|
||||
background3D.offset.y += PROGRESS_3D_ELEVATION;
|
||||
background3D.orientation = Quat.fromPitchYawRollDegrees(PROGRESS_3D_PITCH, PROGRESS_3D_DIRECTION + PROGRESS_3D_YAW, 0);
|
||||
bar3D.offset = Vec3.sum(background3D.offset, { x: 0, y: 0, z: 0.001 }); // Just in front of background
|
||||
bar3D.orientation = background3D.orientation;
|
||||
|
||||
createOverlays();
|
||||
}
|
||||
|
||||
function tearDown() {
|
||||
Overlays.deleteOverlay(background2D.overlay);
|
||||
Overlays.deleteOverlay(bar2D.overlay);
|
||||
deleteOverlays();
|
||||
}
|
||||
|
||||
setUp();
|
||||
|
|
|
|||
Loading…
Reference in a new issue