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

This commit is contained in:
Seth Alves 2019-10-01 11:45:33 -07:00
parent 296617977c
commit 1c926db2db
4 changed files with 133 additions and 30 deletions

View file

@ -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 {
}

View file

@ -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);
gotoButton.addEventListener("mouseenter", onButtonHover, false);
if (muteButton) {
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 () {

View file

@ -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>

View file

@ -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
* (1 + scaleFactor * (miniTargetWidth - miniInitialWidth) / miniInitialWidth);
tabletScaleFactor = MyAvatar.sensorToWorldScale *
(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
&& Controller.getValue(Controller.Standard.LeftGrip) < TRIGGER_OFF_VALUE;
isLeftTriggerOff = Controller.getValue(Controller.Standard.LT) < 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
&& Controller.getValue(Controller.Standard.RightGrip) < TRIGGER_OFF_VALUE;
isRightTriggerOff = Controller.getValue(Controller.Standard.RT) < 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)
&& ((hand === LEFT_HAND ? wasRightTriggerOff : wasLeftTriggerOff) || ui.isLaserPointingAt());
show = (hand === LEFT_HAND ? wasLeftTriggerOff : wasRightTriggerOff) &&
((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
&& medialAngle <= MAX_MEDIAL_FINGER_CAMERA_ANGLE_RAD
&& -MAX_LATERAL_THUMB_CAMERA_ANGLE_RAD <= lateralAngle
&& lateralAngle <= MAX_LATERAL_PINKY_CAMERA_ANGLE_RAD;
show = -MAX_MEDIAL_WRIST_CAMERA_ANGLE_RAD <= medialAngle &&
medialAngle <= MAX_MEDIAL_FINGER_CAMERA_ANGLE_RAD &&
-MAX_LATERAL_THUMB_CAMERA_ANGLE_RAD <= lateralAngle &&
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]
+ ( data ? " " + JSON.stringify(data) : ""));
debug("State transition from " + STATE_STRINGS[miniState] + " to " + STATE_STRINGS[state] +
( 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
|| (message.grabbedEntity !== HMD.tabletID && message.grabbedEntity !== ui.getMiniTabletID())) {
if (miniState.getState() === miniState.MINI_DISABLED ||
(message.grabbedEntity !== HMD.tabletID && message.grabbedEntity !== ui.getMiniTabletID())) {
return;
}