Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-08-09 19:20:16 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Display 3D progress bar

Browse source
This commit is contained in:
David Rowe 2015-02-03 09:24:33 -08:00
parent 7beb5bf25f
commit fdf4aeaeab
1 changed files with 116 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
examples/progress.js
View file

@ -13,28 +13,37 @@
(function () { (function () {
var progress = 100, // % var progress = 100, // %
alpha = 0.0, 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_IN = 0.15,
ALPHA_DELTA_OUT = -0.02, ALPHA_DELTA_OUT = -0.02,
fadeTimer = null, fadeTimer = null,
FADE_INTERVAL = 30, // ms between changes in alpha FADE_INTERVAL = 30, // ms between changes in alpha.
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_COLOR = { red: 0, green: 128, blue: 0 }, BAR_WIDTH = 320, // Nominal dimension of SVG in pixels of visible portion (half) of the bar.
BAR_WIDTH = 320, // Nominal dimension of SVG in pixels
BAR_HEIGHT = 20, BAR_HEIGHT = 20,
BAR_URL = "http://ctrlaltstudio.com/hifi/progress-bar.svg", BAR_URL = "http://ctrlaltstudio.com/hifi/progress-bar.svg",
BACKGROUND_WIDTH = 360, BACKGROUND_WIDTH = 360,
BACKGROUND_HEIGHT = 60, BACKGROUND_HEIGHT = 60,
BACKGROUND_URL = "http://ctrlaltstudio.com/hifi/progress-bar-background.svg", 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 = {}, background2D = {},
bar2D = {}, bar2D = {},
windowWidth = 0, SCALE_2D = 0.5, // Scale the SVGs for 2D display.
windowHeight = 0; 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() { function fade() {
@ -57,11 +66,11 @@
visible = false; visible = false;
} }
Overlays.editOverlay(background2D.overlay, { Overlays.editOverlay(isOnHMD ? background3D.overlay : background2D.overlay, {
alpha: alpha, alpha: alpha,
visible: visible visible: visible
}); });
Overlays.editOverlay(bar2D.overlay, { Overlays.editOverlay(isOnHMD ? bar3D.overlay : bar2D.overlay, {
alpha: alpha, alpha: alpha,
visible: visible visible: visible
}); });
@ -117,59 +126,122 @@
// Update progress bar // Update progress bar
if (visible) { if (visible) {
Overlays.editOverlay(bar2D.overlay, { Overlays.editOverlay(isOnHMD ? bar3D.overlay : bar2D.overlay, {
width: progress / 100 * bar2D.width 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() { 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) { if (visible) {
windowWidth = viewport.x; if (isOnHMD) {
windowHeight = viewport.y; // Update 3D overlays to maintain positions relative to avatar
eyePosition = MyAvatar.getDefaultEyePosition();
avatarOrientation = MyAvatar.orientation;
Overlays.editOverlay(background2D.overlay, { Overlays.editOverlay(background3D.overlay, {
x: windowWidth / 2 - background2D.width / 2, position: Vec3.sum(eyePosition, Vec3.multiplyQbyV(avatarOrientation, background3D.offset)),
y: windowHeight - background2D.height - bar2D.height 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, { } else {
x: windowWidth / 2 - bar2D.width / 2, // Update 2D overlays to maintain positions at bottom middle of window
y: windowHeight - background2D.height - bar2D.height + (background2D.height - bar2D.height) / 2 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() { function setUp() {
background2D.width = SCALE_2D * BACKGROUND_WIDTH; background2D.width = SCALE_2D * BACKGROUND_WIDTH;
background2D.height = SCALE_2D * BACKGROUND_HEIGHT; 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.width = SCALE_2D * BAR_WIDTH;
bar2D.height = SCALE_2D * BAR_HEIGHT; bar2D.height = SCALE_2D * BAR_HEIGHT;
bar2D.overlay = Overlays.addOverlay("image", {
width: bar2D.width, background3D.offset = Vec3.multiplyQbyV(Quat.fromPitchYawRollDegrees(0, PROGRESS_3D_DIRECTION, 0),
height: bar2D.height, { x: 0, y: 0, z: -PROGRESS_3D_DISTANCE });
imageURL: BAR_URL, background3D.offset.y += PROGRESS_3D_ELEVATION;
color: BAR_COLOR, background3D.orientation = Quat.fromPitchYawRollDegrees(PROGRESS_3D_PITCH, PROGRESS_3D_DIRECTION + PROGRESS_3D_YAW, 0);
visible: false, bar3D.offset = Vec3.sum(background3D.offset, { x: 0, y: 0, z: 0.001 }); // Just in front of background
alpha: 0.0 bar3D.orientation = background3D.orientation;
});
createOverlays();
} }
function tearDown() { function tearDown() {
Overlays.deleteOverlay(background2D.overlay); deleteOverlays();
Overlays.deleteOverlay(bar2D.overlay);
} }
setUp(); setUp();