From 37a1ad76262a1b9b7e109548e012ee7640e0777b Mon Sep 17 00:00:00 2001 From: Zander Otavka Date: Fri, 24 Jul 2015 18:02:18 -0700 Subject: [PATCH] Improve floatingUIExample.js. Demonstrates overlayManager.js functionality. --- examples/example/ui/floatingUIExample.js | 247 ++++++++++++----------- 1 file changed, 133 insertions(+), 114 deletions(-) diff --git a/examples/example/ui/floatingUIExample.js b/examples/example/ui/floatingUIExample.js index 3b555efce3..9c4e43be94 100644 --- a/examples/example/ui/floatingUIExample.js +++ b/examples/example/ui/floatingUIExample.js @@ -10,140 +10,159 @@ // Script.include([ - "../../libraries/globals.js", - "../../libraries/overlayUtils.js", + "../../libraries/globals.js", + "../../libraries/overlayManager.js", ]); var BG_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/card-bg.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 BLANK_ROTATION = { x: 0, y: 0, z: 0, w: 0 }; - -function isBlank(rotation) { - return rotation.x == BLANK_ROTATION.x && - rotation.y == BLANK_ROTATION.y && - rotation.z == BLANK_ROTATION.z && - rotation.w == BLANK_ROTATION.w; -} - -var panel = new FloatingUIPanel({ - offsetPosition: { x: 0, y: 0, z: 1 }, +var mainPanel = new FloatingUIPanel({ + offsetRotation: { + bind: "quat", + value: { w: 1, x: 0, y: 0, z: 0 } + }, + offsetPosition: { x: 0, y: 0.4, z: 1 } }); -var bg = panel.addChild(new BillboardOverlay({ - url: BG_IMAGE_URL, - dimensions: { - x: 0.5, - y: 0.5, - }, - isFacingAvatar: false, - visible: true, - alpha: 1.0, - ignoreRayIntersection: false, +var bluePanel = mainPanel.addChild(new FloatingUIPanel ({ + offsetPosition: { x: 0.1, y: 0.1, z: -0.2 } })); -var redDot = panel.addChild(new BillboardOverlay({ - url: RED_DOT_IMAGE_URL, - dimensions: { - x: 0.1, - y: 0.1, - }, - isFacingAvatar: false, - visible: true, - alpha: 1.0, - ignoreRayIntersection: false, - offsetPosition: { - x: -0.15, - y: -0.15, - z: -0.001 - } +var mainPanelBackground = new BillboardOverlay({ + url: BG_IMAGE_URL, + dimensions: { + x: 0.5, + y: 0.5, + }, + isFacingAvatar: false, + alpha: 1.0, + ignoreRayIntersection: false, + offsetPosition: { + x: 0, + y: 0, + 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({ - url: RED_DOT_IMAGE_URL, - dimensions: { - x: 0.1, - y: 0.1, - }, - isFacingAvatar: false, - visible: true, - alpha: 1.0, - ignoreRayIntersection: false, - offsetPosition: { - x: -0.15, - y: 0, - z: -0.001 - } +var redDot2 = 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.155, + y: 0.005, + z: 0 + } })); -var blueSquare = panel.addChild(new BillboardOverlay({ - url: BLUE_SQUARE_IMAGE_URL, - dimensions: { - x: 0.1, - y: 0.1, - }, - isFacingAvatar: false, - visible: true, - alpha: 1.0, - ignoreRayIntersection: false, - offsetPosition: { - x: 0.1, - y: 0, - z: -0.001 - } +var blueSquare = bluePanel.addChild(new BillboardOverlay({ + url: BLUE_SQUARE_IMAGE_URL, + dimensions: { + x: 0.1, + y: 0.1, + }, + isFacingAvatar: false, + alpha: 1.0, + ignoreRayIntersection: false, + offsetPosition: { + x: 0.055, + y: -0.055, + z: 0 + } })); -var blueSquare2 = panel.addChild(new BillboardOverlay({ - url: BLUE_SQUARE_IMAGE_URL, - dimensions: { - x: 0.1, - y: 0.1, - }, - isFacingAvatar: false, - visible: true, - alpha: 1.0, - ignoreRayIntersection: false, - offsetPosition: { - x: 0.1, - y: 0.11, - z: -0.001 - } +var blueSquare2 = bluePanel.addChild(new BillboardOverlay({ + url: BLUE_SQUARE_IMAGE_URL, + dimensions: { + x: 0.1, + y: 0.1, + }, + isFacingAvatar: false, + alpha: 1.0, + ignoreRayIntersection: false, + offsetPosition: { + x: 0.055, + y: 0.055, + z: 0 + } })); var blueSquare3 = blueSquare2.clone(); blueSquare3.offsetPosition = { - x: -0.01, - y: 0.11, - z: -0.001 + x: -0.055, + y: 0.055, + 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() { - panel.destroy(); -}); \ No newline at end of file +function onMouseDown(event) { + 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); \ No newline at end of file