if hands are tracked, make mini-tablet be just a big open-tablet button (remove mute and goto buttons)

scripts/system/html/css/miniHandTablet.css

@@ -0,0 +1,56 @@
+/*
+miniTablet.css
+
+Copyright 2019 High Fidelity, Inc.
+
+Distributed under the Apache License, Version 2.0.
+See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+*/
+
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    user-select: none;
+}
+
+html {
+    background-color: #404040;
+}
+
+body {
+    height: 100%;
+}
+
+section {
+    background-color: #404040;
+    position: relative;
+    padding: 32px 0px;
+}
+
+.button {
+    text-align: center;
+}
+
+img {
+    width: 149px;
+    height: 149px;
+}
+
+#expand {
+    width: 149px;
+    height: 149px;
+    background-size: 100% 100%;
+    background-image: url("./img/mt-expand-normal.svg");
+}
+
+#expand:hover {
+    background-image: url("./img/mt-expand-hover.svg");
+}
+
+#expand:hover.unhover {
+    background-image: url("./img/mt-expand-normal.svg");
+}
+
+#expand img {
+}

scripts/system/html/js/miniTablet.js

@@ -35,7 +35,9 @@
 
     function setUnhover() {
         if (!isUnhover) {
-            gotoButton.classList.add("unhover");
+            if (gotoButton) {
+                gotoButton.classList.add("unhover");
+            }
             expandButton.classList.add("unhover");
             isUnhover = true;
         }
@@ -43,7 +45,9 @@
 
     function clearUnhover() {
         if (isUnhover) {
-            gotoButton.classList.remove("unhover");
+            if (gotoButton) {
+                gotoButton.classList.remove("unhover");
+            }
             expandButton.classList.remove("unhover");
             isUnhover = false;
         }
@@ -62,10 +66,14 @@
 
         switch (message.type) {
             case MUTE_MESSAGE:
-                muteImage.src = message.icon;
+                if (muteImage) {
+                    muteImage.src = message.icon;
+                }
                 break;
             case GOTO_MESSAGE:
-                gotoImage.src = message.icon;
+                if (gotoImage) {
+                    gotoImage.src = message.icon;
+                }
                 break;
         }
     }
@@ -130,9 +138,7 @@
 
     function onLoad() {
         muteButton = document.getElementById("mute");
-        muteImage = document.getElementById("mute-img");
         gotoButton = document.getElementById("goto");
-        gotoImage = document.getElementById("goto-img");
         expandButton = document.getElementById("expand");
 
         connectEventBridge();
@@ -140,11 +146,19 @@
         document.body.addEventListener("mouseenter", onBodyHover, false);
         document.body.addEventListener("mouseleave", onBodyUnhover, false);
 
-        muteButton.addEventListener("mouseenter", onButtonHover, false);
+        if (muteButton) {
-        gotoButton.addEventListener("mouseenter", onButtonHover, false);
+            muteImage = document.getElementById("mute-img");
+            muteButton.addEventListener("mouseenter", onButtonHover, false);
+            muteButton.addEventListener("click", onMuteButtonClick, true);
+        }
+
+        if (gotoButton) {
+            gotoImage = document.getElementById("goto-img");
+            gotoButton.addEventListener("mouseenter", onButtonHover, false);
+            gotoButton.addEventListener("click", onGotoButtonClick, true);
+        }
+
         expandButton.addEventListener("mouseenter", onButtonHover, false);
-        muteButton.addEventListener("click", onMuteButtonClick, true);
-        gotoButton.addEventListener("click", onGotoButtonClick, true);
         expandButton.addEventListener("click", onExpandButtonClick, true);
 
         document.body.onunload = function () {

scripts/system/html/miniHandsTablet.html

@@ -0,0 +1,26 @@
+<!--
+miniTablet.html
+
+Created by David Rowe on 20 Aug 2018.
+Copyright 2018 High Fidelity, Inc.
+
+Distributed under the Apache License, Version 2.0.
+See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+-->
+
+<!DOCTYPE html>
+
+<html>
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="css/miniHandTablet.css" />
+</head>
+<body>
+    <section>
+        <div id="expand" class="button">
+            <img src="./img/expand.svg" />
+        </div>
+    </section>
+    <script src="js/miniTablet.js"></script>
+</body>
+</html>

scripts/system/miniTablet.js

@@ -8,7 +8,8 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
-/* global getTabletWidthFromSettings, TRIGGER_OFF_VALUE */
+/* global getTabletWidthFromSettings, TRIGGER_OFF_VALUE, Controller, Script, Camera, Tablet, MyAvatar,
+   Quat, SoundCache, HMD, Overlays, Vec3, Uuid, Messages */
 
 (function () {
 
@@ -80,6 +81,10 @@
         return hand === LEFT_HAND ? RIGHT_HAND : LEFT_HAND;
     }
 
+    function handsAreTracked() {
+        return Controller.getPoseValue(Controller.Standard.LeftHandIndex3).valid ||
+            Controller.getPoseValue(Controller.Standard.RightHandIndex3).valid;
+    }
 
     UI = function () {
 
@@ -114,6 +119,7 @@
             uiHand = LEFT_HAND,
             miniUIOverlay = null,
             MINI_UI_HTML = Script.resolvePath("./html/miniTablet.html"),
+            MINI_HAND_UI_HTML = Script.resolvePath("./html/miniHandsTablet.html"),
             MINI_UI_DIMENSIONS = { x: 0.059, y: 0.0865, z: 0.001 },
             MINI_UI_WIDTH_PIXELS = 150,
             METERS_TO_INCHES = 39.3701,
@@ -291,6 +297,7 @@
                 visible: true
             });
             Overlays.editOverlay(miniUIOverlay, {
+                url: handsAreTracked() ? MINI_HAND_UI_HTML : MINI_UI_HTML,
                 localPosition: Vec3.multiply(MyAvatar.sensorToWorldScale, MINI_UI_LOCAL_POSITION),
                 localRotation: MINI_UI_LOCAL_ROTATION,
                 dimensions: Vec3.multiply(initialScale, MINI_UI_DIMENSIONS),
@@ -353,8 +360,8 @@
                 localRotation,
                 localPosition;
 
-            tabletScaleFactor = MyAvatar.sensorToWorldScale
+            tabletScaleFactor = MyAvatar.sensorToWorldScale *
-                * (1 + scaleFactor * (miniTargetWidth - miniInitialWidth) / miniInitialWidth);
+                (1 + scaleFactor * (miniTargetWidth - miniInitialWidth) / miniInitialWidth);
             dimensions = Vec3.multiply(tabletScaleFactor, MINI_DIMENSIONS);
             localRotation = Quat.mix(miniExpandLocalRotation, miniTargetLocalRotation, scaleFactor);
             localPosition =
@@ -469,11 +476,11 @@
                 solid: true,
                 grabbable: true,
                 showKeyboardFocusHighlight: false,
-                drawInFront: true,
+                drawInFront: false,
                 visible: false
             });
             miniUIOverlay = Overlays.addOverlay("web3d", {
-                url: MINI_UI_HTML,
+                url: handsAreTracked() ? MINI_HAND_UI_HTML : MINI_UI_HTML,
                 parentID: miniOverlay,
                 localPosition: Vec3.multiply(MyAvatar.sensorToWorldScale, MINI_UI_LOCAL_POSITION),
                 localRotation: MINI_UI_LOCAL_ROTATION,
@@ -482,7 +489,7 @@
                 alpha: 0, // Hide overlay while its content is being created.
                 grabbable: false,
                 showKeyboardFocusHighlight: false,
-                drawInFront: true,
+                drawInFront: false,
                 visible: false
             });
 
@@ -642,8 +649,8 @@
             // is grabbing something) or the other hand's trigger is pressed unless it is pointing at the mini tablet. Allow 
             // the triggers to be pressed briefly to allow for the grabbing process.
             if (show) {
-                isLeftTriggerOff = Controller.getValue(Controller.Standard.LT) < TRIGGER_OFF_VALUE
+                isLeftTriggerOff = Controller.getValue(Controller.Standard.LT) < TRIGGER_OFF_VALUE &&
-                    && Controller.getValue(Controller.Standard.LeftGrip) < TRIGGER_OFF_VALUE;
+                    Controller.getValue(Controller.Standard.LeftGrip) < TRIGGER_OFF_VALUE;
                 if (!isLeftTriggerOff) {
                     if (leftTriggerOn === 0) {
                         leftTriggerOn = Date.now();
@@ -653,8 +660,8 @@
                 } else {
                     leftTriggerOn = 0;
                 }
-                isRightTriggerOff = Controller.getValue(Controller.Standard.RT) < TRIGGER_OFF_VALUE
+                isRightTriggerOff = Controller.getValue(Controller.Standard.RT) < TRIGGER_OFF_VALUE &&
-                    && Controller.getValue(Controller.Standard.RightGrip) < TRIGGER_OFF_VALUE;
+                    Controller.getValue(Controller.Standard.RightGrip) < TRIGGER_OFF_VALUE;
                 if (!isRightTriggerOff) {
                     if (rightTriggerOn === 0) {
                         rightTriggerOn = Date.now();
@@ -665,8 +672,8 @@
                     rightTriggerOn = 0;
                 }
 
-                show = (hand === LEFT_HAND ? wasLeftTriggerOff : wasRightTriggerOff)
+                show = (hand === LEFT_HAND ? wasLeftTriggerOff : wasRightTriggerOff) &&
-                    && ((hand === LEFT_HAND ? wasRightTriggerOff : wasLeftTriggerOff) || ui.isLaserPointingAt());
+                    ((hand === LEFT_HAND ? wasRightTriggerOff : wasLeftTriggerOff) || ui.isLaserPointingAt());
             }
 
             // Should show mini tablet if it would be oriented toward the camera.
@@ -691,10 +698,10 @@
                 normalDot = Vec3.dot(normalHandVector, miniToCameraDirection);
                 medialAngle = Math.atan2(medialDot, normalDot);
                 lateralAngle = Math.atan2(lateralDot, normalDot);
-                show = -MAX_MEDIAL_WRIST_CAMERA_ANGLE_RAD <= medialAngle
+                show = -MAX_MEDIAL_WRIST_CAMERA_ANGLE_RAD <= medialAngle &&
-                    && medialAngle <= MAX_MEDIAL_FINGER_CAMERA_ANGLE_RAD
+                    medialAngle <= MAX_MEDIAL_FINGER_CAMERA_ANGLE_RAD &&
-                    && -MAX_LATERAL_THUMB_CAMERA_ANGLE_RAD <= lateralAngle
+                    -MAX_LATERAL_THUMB_CAMERA_ANGLE_RAD <= lateralAngle &&
-                    && lateralAngle <= MAX_LATERAL_PINKY_CAMERA_ANGLE_RAD;
+                    lateralAngle <= MAX_LATERAL_PINKY_CAMERA_ANGLE_RAD;
 
                 // Camera looking at mini tablet?
                 cameraToMini = -Vec3.dot(miniToCameraDirection, Quat.getForward(Camera.orientation));
@@ -972,8 +979,8 @@
 
         function setState(state, data) {
             if (state !== miniState) {
-                debug("State transition from " + STATE_STRINGS[miniState] + " to " + STATE_STRINGS[state]
+                debug("State transition from " + STATE_STRINGS[miniState] + " to " + STATE_STRINGS[state] +
-                    + ( data ? " " + JSON.stringify(data) : ""));
+                      ( data ? " " + JSON.stringify(data) : ""));
                 if (STATE_MACHINE[STATE_STRINGS[miniState]].exit) {
                     STATE_MACHINE[STATE_STRINGS[miniState]].exit(data);
                 }
@@ -1061,8 +1068,8 @@
                 return;
         }
 
-        if (miniState.getState() === miniState.MINI_DISABLED
+        if (miniState.getState() === miniState.MINI_DISABLED ||
-                || (message.grabbedEntity !== HMD.tabletID && message.grabbedEntity !== ui.getMiniTabletID())) {
+            (message.grabbedEntity !== HMD.tabletID && message.grabbedEntity !== ui.getMiniTabletID())) {
             return;
         }