Merge pull request #11450 from ElderOrb/case7722

7722 Add onHover Outline to Tablet "X" Button

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

scripts/system/libraries/WebTablet.js

@@ -150,6 +150,23 @@ 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.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: 20 * tabletScaleFactor,
+        ignoreIntersection: true,
+        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");
@@ -170,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() {
@@ -273,9 +307,14 @@ 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);
+    Overlays.deleteOverlay(this.homeButtonHighlightID);
     HMD.displayModeChanged.disconnect(this.myOnHmdChanged);
 
     Controller.mousePressEvent.disconnect(this.myMousePressEvent);
@@ -367,6 +406,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) {
@@ -504,6 +561,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 = {
@@ -511,6 +584,8 @@ WebTablet.prototype.mouseMoveEvent = function (event) {
             y: event.y
         };
         this.scheduleMouseMoveProcessor();
+    } else {
+        this.handleHomeButtonHover(event.x, event.y);
     }
 };
 
@@ -537,6 +612,8 @@ WebTablet.prototype.mouseMoveProcessor = function () {
             });
         }
         this.scheduleMouseMoveProcessor();
+    } else {
+        this.handleHomeButtonHover(this.currentMouse.x, this.currentMouse.y);
     }
 };
 

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.0158 },
+        dimensions: { x: 4 * tabletScaleFactor, y: 4 * tabletScaleFactor, z: 4 * tabletScaleFactor },
+        outerRadius: 25 * tabletScaleFactor,
+        innerRadius: 20 * tabletScaleFactor
+    });
 };

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");
@@ -319,6 +323,7 @@
         Overlays.deleteOverlay(tabletID);
         HMD.tabletID = null;
         HMD.homeButtonID = null;
+        HMD.homeButtonHighlightID = null;
         HMD.tabletScreenID = null;
     });
 }()); // END LOCAL_SCOPE