Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-09 03:37:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Improve floatingUIExample.js.

Browse source 
Demonstrates overlayManager.js functionality.
This commit is contained in:
Zander Otavka 2015-07-24 18:02:18 -07:00
parent ba190b4b34
commit 37a1ad7626
1 changed files with 133 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

247
examples/example/ui/floatingUIExample.js
View file

@ -10,140 +10,159 @@
// //
Script.include([ Script.include([
"../../libraries/globals.js", "../../libraries/globals.js",
"../../libraries/overlayUtils.js", "../../libraries/overlayManager.js",
]); ]);
var BG_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/card-bg.svg"; var BG_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/card-bg.svg";
var RED_DOT_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/red-dot.svg"; var RED_DOT_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/red-dot.svg";
var BLUE_SQUARE_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/blue-square.svg"; var BLUE_SQUARE_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/blue-square.svg";
var BLANK_ROTATION = { x: 0, y: 0, z: 0, w: 0 }; var mainPanel = new FloatingUIPanel({
offsetRotation: {
function isBlank(rotation) { bind: "quat",
return rotation.x == BLANK_ROTATION.x && value: { w: 1, x: 0, y: 0, z: 0 }
rotation.y == BLANK_ROTATION.y && },
rotation.z == BLANK_ROTATION.z && offsetPosition: { x: 0, y: 0.4, z: 1 }
rotation.w == BLANK_ROTATION.w;
}
var panel = new FloatingUIPanel({
offsetPosition: { x: 0, y: 0, z: 1 },
}); });
var bg = panel.addChild(new BillboardOverlay({ var bluePanel = mainPanel.addChild(new FloatingUIPanel ({
url: BG_IMAGE_URL, offsetPosition: { x: 0.1, y: 0.1, z: -0.2 }
dimensions: {
x: 0.5,
y: 0.5,
},
isFacingAvatar: false,
visible: true,
alpha: 1.0,
ignoreRayIntersection: false,
})); }));
var redDot = panel.addChild(new BillboardOverlay({ var mainPanelBackground = new BillboardOverlay({
url: RED_DOT_IMAGE_URL, url: BG_IMAGE_URL,
dimensions: { dimensions: {
x: 0.1, x: 0.5,
y: 0.1, y: 0.5,
}, },
isFacingAvatar: false, isFacingAvatar: false,
visible: true, alpha: 1.0,
alpha: 1.0, ignoreRayIntersection: false,
ignoreRayIntersection: false, offsetPosition: {
offsetPosition: { x: 0,
x: -0.15, y: 0,
y: -0.15, z: 0.001
z: -0.001 }
} });
var bluePanelBackground = mainPanelBackground.clone();
bluePanelBackground.dimensions = {
x: 0.3,
y: 0.3
};
mainPanel.addChild(mainPanelBackground);
bluePanel.addChild(bluePanelBackground);
var redDot = mainPanel.addChild(new BillboardOverlay({
url: RED_DOT_IMAGE_URL,
dimensions: {
x: 0.1,
y: 0.1,
},
isFacingAvatar: false,
alpha: 1.0,
ignoreRayIntersection: false,
offsetPosition: {
x: -0.15,
y: -0.15,
z: 0
}
})); }));
var redDot2 = panel.addChild(new BillboardOverlay({ var redDot2 = mainPanel.addChild(new BillboardOverlay({
url: RED_DOT_IMAGE_URL, url: RED_DOT_IMAGE_URL,
dimensions: { dimensions: {
x: 0.1, x: 0.1,
y: 0.1, y: 0.1,
}, },
isFacingAvatar: false, isFacingAvatar: false,
visible: true, alpha: 1.0,
alpha: 1.0, ignoreRayIntersection: false,
ignoreRayIntersection: false, offsetPosition: {
offsetPosition: { x: -0.155,
x: -0.15, y: 0.005,
y: 0, z: 0
z: -0.001 }
}
})); }));
var blueSquare = panel.addChild(new BillboardOverlay({ var blueSquare = bluePanel.addChild(new BillboardOverlay({
url: BLUE_SQUARE_IMAGE_URL, url: BLUE_SQUARE_IMAGE_URL,
dimensions: { dimensions: {
x: 0.1, x: 0.1,
y: 0.1, y: 0.1,
}, },
isFacingAvatar: false, isFacingAvatar: false,
visible: true, alpha: 1.0,
alpha: 1.0, ignoreRayIntersection: false,
ignoreRayIntersection: false, offsetPosition: {
offsetPosition: { x: 0.055,
x: 0.1, y: -0.055,
y: 0, z: 0
z: -0.001 }
}
})); }));
var blueSquare2 = panel.addChild(new BillboardOverlay({ var blueSquare2 = bluePanel.addChild(new BillboardOverlay({
url: BLUE_SQUARE_IMAGE_URL, url: BLUE_SQUARE_IMAGE_URL,
dimensions: { dimensions: {
x: 0.1, x: 0.1,
y: 0.1, y: 0.1,
}, },
isFacingAvatar: false, isFacingAvatar: false,
visible: true, alpha: 1.0,
alpha: 1.0, ignoreRayIntersection: false,
ignoreRayIntersection: false, offsetPosition: {
offsetPosition: { x: 0.055,
x: 0.1, y: 0.055,
y: 0.11, z: 0
z: -0.001 }
}
})); }));
var blueSquare3 = blueSquare2.clone(); var blueSquare3 = blueSquare2.clone();
blueSquare3.offsetPosition = { blueSquare3.offsetPosition = {
x: -0.01, x: -0.055,
y: 0.11, y: 0.055,
z: -0.001 z: 0
}; };
blueSquare3.ignoreRayIntersection = false;
Controller.mousePressEvent.connect(function(event) {
if (event.isRightButton) {
var newOffsetRotation;
print(JSON.stringify(panel.offsetRotation))
if (isBlank(panel.offsetRotation)) {
newOffsetRotation = Quat.multiply(MyAvatar.orientation, { x: 0, y: 1, z: 0, w: 0 });
} else {
newOffsetRotation = BLANK_ROTATION;
}
panel.offsetRotation = newOffsetRotation;
} else if (event.isLeftButton) {
var pickRay = Camera.computePickRay(event.x, event.y)
var overlay = panel.findRayIntersection(pickRay);
if (overlay) {
var oldPos = overlay.offsetPosition;
var newPos = {
x: Number(oldPos.x),
y: Number(oldPos.y),
z: Number(oldPos.z) + 0.1
}
overlay.offsetPosition = newPos;
}
}
});
Script.scriptEnding.connect(function() { function onMouseDown(event) {
panel.destroy(); isLeftClick = event.isLeftButton;
}); isRightClick = event.isRightButton;
}
function onMouseMove(event) {
isLeftClick = isRightClick = false;
}
function onMouseUp(event) {
if (isLeftClick && event.isLeftButton) {
var overlay = OverlayManager.findAtPoint({ x: event.x, y: event.y });
print(overlay.attachedPanel);
if (overlay.attachedPanel === bluePanel) {
overlay.destroy();
} else if (overlay) {
var oldPos = overlay.offsetPosition;
var newPos = {
x: Number(oldPos.x),
y: Number(oldPos.y),
z: Number(oldPos.z) + 0.1
};
overlay.offsetPosition = newPos;
}
}
if (isRightClick && event.isRightButton) {
mainPanel.visible = !mainPanel.visible;
}
isLeftClick = isRightClick = false;
}
function onScriptEnd() {
mainPanel.destroy();
}
Controller.mousePressEvent.connect(onMouseDown);
Controller.mouseMoveEvent.connect(onMouseMove);
Controller.mouseReleaseEvent.connect(onMouseUp);
Script.scriptEnding.connect(onScriptEnd);