mirror of
https://github.com/AleziaKurdis/overte.git
synced 2025-04-08 06:32:35 +02:00
if hands are tracked, make mini-tablet be just a big open-tablet button (remove mute and goto buttons)
This commit is contained in:
parent
296617977c
commit
1c926db2db
4 changed files with 133 additions and 30 deletions
56
scripts/system/html/css/miniHandTablet.css
Normal file
56
scripts/system/html/css/miniHandTablet.css
Normal 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 {
|
||||
}
|
|
@ -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 () {
|
||||
|
|
26
scripts/system/html/miniHandsTablet.html
Normal file
26
scripts/system/html/miniHandsTablet.html
Normal 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>
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue