From 24a12a2f8fd792d9fcaa06e052e9867304660f41 Mon Sep 17 00:00:00 2001 From: beholder Date: Sun, 24 Sep 2017 22:44:13 +0300 Subject: [PATCH 1/5] 7722 Add onHover Outline to Tablet "X" Button --- .../src/scripting/HMDScriptingInterface.h | 5 +++ scripts/system/libraries/WebTablet.js | 37 +++++++++++++++++++ scripts/system/libraries/utils.js | 9 ++++- scripts/system/tablet-ui/tabletUI.js | 5 +++ 4 files changed, 55 insertions(+), 1 deletion(-) diff --git a/interface/src/scripting/HMDScriptingInterface.h b/interface/src/scripting/HMDScriptingInterface.h index 2eefe6ea22..e5040b1f90 100644 --- a/interface/src/scripting/HMDScriptingInterface.h +++ b/interface/src/scripting/HMDScriptingInterface.h @@ -32,6 +32,7 @@ class HMDScriptingInterface : public AbstractHMDScriptingInterface, public Depen Q_PROPERTY(bool showTablet READ getShouldShowTablet) Q_PROPERTY(QUuid tabletID READ getCurrentTabletFrameID WRITE setCurrentTabletFrameID) Q_PROPERTY(QUuid homeButtonID READ getCurrentHomeButtonID WRITE setCurrentHomeButtonID) + Q_PROPERTY(QUuid homeButtonHighlightID READ getCurrentHomeButtonHightlightID WRITE setCurrentHomeButtonHightlightID) Q_PROPERTY(QUuid tabletScreenID READ getCurrentTabletScreenID WRITE setCurrentTabletScreenID) public: @@ -97,6 +98,9 @@ public: void setCurrentHomeButtonID(QUuid homeButtonID) { _homeButtonID = homeButtonID; } QUuid getCurrentHomeButtonID() const { return _homeButtonID; } + void setCurrentHomeButtonHightlightID(QUuid homeButtonHightlightID) { _homeButtonHightlightID = homeButtonHightlightID; } + QUuid getCurrentHomeButtonHightlightID() const { return _homeButtonHightlightID; } + void setCurrentTabletScreenID(QUuid tabletID) { _tabletScreenID = tabletID; } QUuid getCurrentTabletScreenID() const { return _tabletScreenID; } @@ -105,6 +109,7 @@ private: QUuid _tabletUIID; // this is the entityID of the tablet frame QUuid _tabletScreenID; // this is the overlayID which is part of (a child of) the tablet-ui. QUuid _homeButtonID; + QUuid _homeButtonHightlightID; QUuid _tabletEntityID; // Get the position of the HMD diff --git a/scripts/system/libraries/WebTablet.js b/scripts/system/libraries/WebTablet.js index c5f8168c30..34e8dd96fd 100644 --- a/scripts/system/libraries/WebTablet.js +++ b/scripts/system/libraries/WebTablet.js @@ -150,6 +150,22 @@ WebTablet = function (url, width, dpi, hand, clientOnly, location, visible) { parentJointIndex: -1 }); + this.homeButtonHighlightID = Overlays.addOverlay("circle3d", { + name: "homeButtonHighlight", + localPosition: { x: 0, y: -HOME_BUTTON_Y_OFFSET + 0.003, z: -0.015 }, + localRotation: { x: 0, y: 1, z: 0, w: 0 }, + dimensions: { x: 4 * tabletScaleFactor, y: 4 * tabletScaleFactor, z: 4 * tabletScaleFactor }, + solid: true, + outerRadius: 25 * tabletScaleFactor, + innerRadius: 17 * tabletScaleFactor, + alpha: 1.0, + color: { red: 255, green: 255, blue: 255 }, + visible: visible, + drawInFront: false, + parentID: this.tabletEntityID, + parentJointIndex: -1 + }); + this.receive = function (channel, senderID, senderUUID, localOnly) { if (_this.homeButtonID == senderID) { var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system"); @@ -272,6 +288,7 @@ WebTablet.prototype.destroy = function () { Overlays.deleteOverlay(this.webOverlayID); Overlays.deleteOverlay(this.tabletEntityID); Overlays.deleteOverlay(this.homeButtonID); + Overlays.deleteOverlay(this.homeButtonHighlightID); HMD.displayModeChanged.disconnect(this.myOnHmdChanged); Controller.mousePressEvent.disconnect(this.myMousePressEvent); @@ -500,6 +517,22 @@ WebTablet.prototype.scheduleMouseMoveProcessor = function() { } }; +WebTablet.prototype.handleHomeButtonHover = function(x, y) { + var pickRay = Camera.computePickRay(x, y); + var entityPickResults; + var homebuttonHovered = false; + entityPickResults = Overlays.findRayIntersection(pickRay, true, [this.tabletEntityID]); + if (entityPickResults.intersects && (entityPickResults.entityID === this.tabletEntityID || + entityPickResults.overlayID === this.tabletEntityID)) { + var overlayPickResults = Overlays.findRayIntersection(pickRay, true, [this.homeButtonID], []); + if (overlayPickResults.intersects && overlayPickResults.overlayID === this.homeButtonID) { + homebuttonHovered = true; + } + } + + Overlays.editOverlay(this.homeButtonHighlightID, { alpha: homebuttonHovered ? 1.0 : 0.0 }); +} + WebTablet.prototype.mouseMoveEvent = function (event) { if (this.dragging) { this.currentMouse = { @@ -507,6 +540,8 @@ WebTablet.prototype.mouseMoveEvent = function (event) { y: event.y }; this.scheduleMouseMoveProcessor(); + } else { + this.handleHomeButtonHover(event.x, event.y); } }; @@ -533,6 +568,8 @@ WebTablet.prototype.mouseMoveProcessor = function () { }); } this.scheduleMouseMoveProcessor(); + } else { + this.handleHomeButtonHover(this.currentMouse.x, this.currentMouse.y); } }; diff --git a/scripts/system/libraries/utils.js b/scripts/system/libraries/utils.js index 162edcaea0..3a10d5d713 100644 --- a/scripts/system/libraries/utils.js +++ b/scripts/system/libraries/utils.js @@ -370,7 +370,7 @@ getTabletWidthFromSettings = function () { resizeTablet = function (width, newParentJointIndex, sensorToWorldScaleOverride) { - if (!HMD.tabletID || !HMD.tabletScreenID || !HMD.homeButtonID) { + if (!HMD.tabletID || !HMD.tabletScreenID || !HMD.homeButtonID || !HMD.homeButtonHighlightID) { return; } @@ -413,4 +413,11 @@ resizeTablet = function (width, newParentJointIndex, sensorToWorldScaleOverride) localPosition: {x: -0.001, y: -HOME_BUTTON_Y_OFFSET, z: 0.0}, dimensions: { x: 4 * tabletScaleFactor, y: 4 * tabletScaleFactor, z: 4 * tabletScaleFactor} }); + + Overlays.editOverlay(HMD.homeButtonHighlightID, { + localPosition: { x: 0, y: -HOME_BUTTON_Y_OFFSET + 0.003, z: -0.015 }, + dimensions: { x: 4 * tabletScaleFactor, y: 4 * tabletScaleFactor, z: 4 * tabletScaleFactor }, + outerRadius: 25 * tabletScaleFactor, + innerRadius: 17 * tabletScaleFactor + }); }; diff --git a/scripts/system/tablet-ui/tabletUI.js b/scripts/system/tablet-ui/tabletUI.js index 9d2382b3f8..4ce155dbb0 100644 --- a/scripts/system/tablet-ui/tabletUI.js +++ b/scripts/system/tablet-ui/tabletUI.js @@ -103,6 +103,7 @@ UIWebTablet.register(); HMD.tabletID = UIWebTablet.tabletEntityID; HMD.homeButtonID = UIWebTablet.homeButtonID; + HMD.homeButtonHighlightID = UIWebTablet.homeButtonHighlightID; HMD.tabletScreenID = UIWebTablet.webOverlayID; HMD.displayModeChanged.connect(onHmdChanged); MyAvatar.sensorToWorldScaleChanged.connect(onSensorToWorldScaleChanged); @@ -127,6 +128,7 @@ tabletProperties.visible = true; Overlays.editOverlay(HMD.tabletID, tabletProperties); Overlays.editOverlay(HMD.homeButtonID, { visible: true }); + Overlays.editOverlay(HMD.homeButtonHighlightID, { visible: true }); Overlays.editOverlay(HMD.tabletScreenID, { visible: true }); Overlays.editOverlay(HMD.tabletScreenID, { maxFPS: 90 }); updateTabletWidthFromSettings(true); @@ -147,6 +149,7 @@ Overlays.editOverlay(HMD.tabletID, { visible: false }); Overlays.editOverlay(HMD.homeButtonID, { visible: false }); + Overlays.editOverlay(HMD.homeButtonHighlightID, { visible: false }); Overlays.editOverlay(HMD.tabletScreenID, { visible: false }); Overlays.editOverlay(HMD.tabletScreenID, { maxFPS: 1 }); } @@ -167,6 +170,7 @@ UIWebTablet = null; HMD.tabletID = null; HMD.homeButtonID = null; + HMD.homeButtonHighlightID = null; HMD.tabletScreenID = null; } else if (debugTablet) { print("TABLET closeTabletUI, UIWebTablet is null"); @@ -317,6 +321,7 @@ Overlays.deleteOverlay(tabletID); HMD.tabletID = null; HMD.homeButtonID = null; + HMD.homeButtonHighlightID = null; HMD.tabletScreenID = null; }); }()); // END LOCAL_SCOPE From 6409580b0302ce091097d9ece137303966562f32 Mon Sep 17 00:00:00 2001 From: beholder Date: Wed, 27 Sep 2017 01:06:22 +0300 Subject: [PATCH 2/5] ignore intersection for 'close' button highlight overlay --- scripts/system/libraries/WebTablet.js | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/system/libraries/WebTablet.js b/scripts/system/libraries/WebTablet.js index 34e8dd96fd..0632827bf6 100644 --- a/scripts/system/libraries/WebTablet.js +++ b/scripts/system/libraries/WebTablet.js @@ -158,6 +158,7 @@ WebTablet = function (url, width, dpi, hand, clientOnly, location, visible) { solid: true, outerRadius: 25 * tabletScaleFactor, innerRadius: 17 * tabletScaleFactor, + ignoreIntersection: true, alpha: 1.0, color: { red: 255, green: 255, blue: 255 }, visible: visible, From ef732fb5475ad3711943c6b9d45d8326578e9d7e Mon Sep 17 00:00:00 2001 From: beholder Date: Wed, 27 Sep 2017 01:07:32 +0300 Subject: [PATCH 3/5] enable 'close' button overlay on hover/leave with stylys/lasers --- scripts/system/libraries/WebTablet.js | 39 +++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/scripts/system/libraries/WebTablet.js b/scripts/system/libraries/WebTablet.js index 0632827bf6..fbe869c602 100644 --- a/scripts/system/libraries/WebTablet.js +++ b/scripts/system/libraries/WebTablet.js @@ -187,6 +187,23 @@ WebTablet = function (url, width, dpi, hand, clientOnly, location, visible) { } }; + this.myOnHoverEnterOverlay = function (overlayID, pointerEvent) { + _this.onHoverEnterOverlay(overlayID, pointerEvent); + }; + + Overlays.hoverEnterOverlay.connect(this.myOnHoverEnterOverlay); + + this.myOnHoverLeaveOverlay = function (overlayID, pointerEvent) { + _this.onHoverLeaveOverlay(overlayID, pointerEvent); + }; + + Overlays.hoverLeaveOverlay.connect(this.myOnHoverLeaveOverlay); + + this.myOnHoverOverOverlay = function (overlayID, pointerEvent) { + _this.onHoverOverOverlay(overlayID, pointerEvent); + }; + Overlays.hoverOverOverlay.connect(this.myOnHoverOverOverlay); + this.state = "idle"; this.getRoot = function() { @@ -286,6 +303,10 @@ WebTablet.prototype.setWidth = function (width) { }; WebTablet.prototype.destroy = function () { + Overlays.hoverEnterOverlay.disconnect(this.myOnHoverEnterOverlay); + Overlays.hoverLeaveOverlay.disconnect(this.myOnHoverLeaveOverlay); + Overlays.hoverOverOverlay.disconnect(this.myOnHoverOverOverlay); + Overlays.deleteOverlay(this.webOverlayID); Overlays.deleteOverlay(this.tabletEntityID); Overlays.deleteOverlay(this.homeButtonID); @@ -381,6 +402,24 @@ WebTablet.prototype.calculateWorldAttitudeRelativeToCamera = function (windowPos }; }; +WebTablet.prototype.onHoverEnterOverlay = function (overlayID, pointerEvent) { + if (overlayID === this.homeButtonID) { + Overlays.editOverlay(this.homeButtonHighlightID, { alpha: 1.0 }); + } +} + +WebTablet.prototype.onHoverOverOverlay = function (overlayID, pointerEvent) { + if (overlayID !== this.homeButtonID) { + Overlays.editOverlay(this.homeButtonHighlightID, { alpha: 0.0 }); + } +} + +WebTablet.prototype.onHoverLeaveOverlay = function (overlayID, pointerEvent) { + if (overlayID === this.homeButtonID) { + Overlays.editOverlay(this.homeButtonHighlightID, { alpha: 0.0 }); + } +} + // compute position, rotation & parentJointIndex of the tablet WebTablet.prototype.calculateTabletAttachmentProperties = function (hand, useMouse, tabletProperties) { if (HMD.active) { From 9c15af9fbebe8d8fac43f84b4bbe4e9ecf2ac030 Mon Sep 17 00:00:00 2001 From: beholder Date: Thu, 12 Oct 2017 14:46:01 +0300 Subject: [PATCH 4/5] raise highlight above button overlay to reduce flickering --- scripts/system/libraries/WebTablet.js | 2 +- scripts/system/libraries/utils.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/system/libraries/WebTablet.js b/scripts/system/libraries/WebTablet.js index fbe869c602..0bfdf91afe 100644 --- a/scripts/system/libraries/WebTablet.js +++ b/scripts/system/libraries/WebTablet.js @@ -152,7 +152,7 @@ WebTablet = function (url, width, dpi, hand, clientOnly, location, visible) { this.homeButtonHighlightID = Overlays.addOverlay("circle3d", { name: "homeButtonHighlight", - localPosition: { x: 0, y: -HOME_BUTTON_Y_OFFSET + 0.003, z: -0.015 }, + localPosition: { x: 0, y: -HOME_BUTTON_Y_OFFSET + 0.003, z: -0.019 }, localRotation: { x: 0, y: 1, z: 0, w: 0 }, dimensions: { x: 4 * tabletScaleFactor, y: 4 * tabletScaleFactor, z: 4 * tabletScaleFactor }, solid: true, diff --git a/scripts/system/libraries/utils.js b/scripts/system/libraries/utils.js index 3a10d5d713..23c6d5f222 100644 --- a/scripts/system/libraries/utils.js +++ b/scripts/system/libraries/utils.js @@ -415,7 +415,7 @@ resizeTablet = function (width, newParentJointIndex, sensorToWorldScaleOverride) }); Overlays.editOverlay(HMD.homeButtonHighlightID, { - localPosition: { x: 0, y: -HOME_BUTTON_Y_OFFSET + 0.003, z: -0.015 }, + localPosition: { x: 0, y: -HOME_BUTTON_Y_OFFSET + 0.003, z: -0.019 }, dimensions: { x: 4 * tabletScaleFactor, y: 4 * tabletScaleFactor, z: 4 * tabletScaleFactor }, outerRadius: 25 * tabletScaleFactor, innerRadius: 17 * tabletScaleFactor From 8c7462f01250b069ef14bed3e6ffa8a580390861 Mon Sep 17 00:00:00 2001 From: beholder Date: Thu, 12 Oct 2017 22:21:40 +0300 Subject: [PATCH 5/5] fine-tuning based on discussion with Anshuman --- scripts/system/libraries/WebTablet.js | 4 ++-- scripts/system/libraries/utils.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/system/libraries/WebTablet.js b/scripts/system/libraries/WebTablet.js index 0bfdf91afe..29eb27890a 100644 --- a/scripts/system/libraries/WebTablet.js +++ b/scripts/system/libraries/WebTablet.js @@ -152,12 +152,12 @@ WebTablet = function (url, width, dpi, hand, clientOnly, location, visible) { this.homeButtonHighlightID = Overlays.addOverlay("circle3d", { name: "homeButtonHighlight", - localPosition: { x: 0, y: -HOME_BUTTON_Y_OFFSET + 0.003, z: -0.019 }, + localPosition: { x: 0, y: -HOME_BUTTON_Y_OFFSET + 0.003, z: -0.0158 }, localRotation: { x: 0, y: 1, z: 0, w: 0 }, dimensions: { x: 4 * tabletScaleFactor, y: 4 * tabletScaleFactor, z: 4 * tabletScaleFactor }, solid: true, outerRadius: 25 * tabletScaleFactor, - innerRadius: 17 * tabletScaleFactor, + innerRadius: 20 * tabletScaleFactor, ignoreIntersection: true, alpha: 1.0, color: { red: 255, green: 255, blue: 255 }, diff --git a/scripts/system/libraries/utils.js b/scripts/system/libraries/utils.js index 23c6d5f222..61ef5ac653 100644 --- a/scripts/system/libraries/utils.js +++ b/scripts/system/libraries/utils.js @@ -415,9 +415,9 @@ resizeTablet = function (width, newParentJointIndex, sensorToWorldScaleOverride) }); Overlays.editOverlay(HMD.homeButtonHighlightID, { - localPosition: { x: 0, y: -HOME_BUTTON_Y_OFFSET + 0.003, z: -0.019 }, + localPosition: { x: 0, y: -HOME_BUTTON_Y_OFFSET + 0.003, z: -0.0158 }, dimensions: { x: 4 * tabletScaleFactor, y: 4 * tabletScaleFactor, z: 4 * tabletScaleFactor }, outerRadius: 25 * tabletScaleFactor, - innerRadius: 17 * tabletScaleFactor + innerRadius: 20 * tabletScaleFactor }); };