Mirrors/overte-JulianGro
3
0
Fork 0
mirror of https://github.com/JulianGro/overte.git synced 2025-04-25 18:55:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change "bubble" button to "goto"

Browse source
This commit is contained in:
David Rowe 2018-09-07 16:43:21 +12:00
parent d0e73b00f7
commit f3cbca6cee
8 changed files with 48 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
scripts/system/html/css/img/mt-bubble-a-hover.svg
View file

@ -1,5 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="128.052" height="89.9583" viewBox="0 0 128.05 89.96" enable-background="new 0 0 128.05 89.96" xml:space="preserve">
<path fill="#1FC6A6" fill-opacity="1" stroke-width="2" stroke-linejoin="round" stroke="#E3E3E3" stroke-opacity="1" d="M 9.54237,1.00001L 118.458,1.00001C 123.175,1.00001 127,4.58004 127,8.99622L 127.052,53.375C 127.052,53.8882 124.052,49.625 118.052,46.875C 110.822,43.5612 99.1611,43.7442 90.552,51.875C 81.552,60.3749 81.302,72.6249 84.802,80.3749C 87.6162,86.6064 91.8496,88.8749 91.302,88.8749L 9.54237,88.9583C 4.82455,88.9583 1,85.3783 1,80.9621L 1,8.99622C 1,4.58004 4.82455,1.00001 9.54237,1.00001 Z "/>
</svg>

5
scripts/system/html/css/img/mt-bubble-a-normal.svg
View file

@ -1,5 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="128.052" height="89.9583" viewBox="0 0 128.05 89.96" enable-background="new 0 0 128.05 89.96" xml:space="preserve">
<path fill="#1FC6A6" fill-opacity="1" stroke-width="2" stroke-linejoin="round" stroke="#1FC6A6" stroke-opacity="1" d="M 9.54237,0.999992L 118.458,0.999992C 123.175,0.999992 127,4.58003 127,8.99621L 127.052,53.3749C 127.052,53.8882 124.052,49.6249 118.052,46.8749C 110.822,43.5612 99.1611,43.7441 90.552,51.8749C 81.552,60.3749 81.302,72.6249 84.802,80.3749C 87.6162,86.6063 91.8497,88.8749 91.302,88.8749L 9.54237,88.9582C 4.82455,88.9582 1,85.3782 1,80.962L 1,8.99621C 1,4.58003 4.82455,0.999992 9.54237,0.999992 Z "/>
</svg>

0
scripts/system/html/css/img/mt-bubble-i-hover.svg → scripts/system/html/css/img/mt-goto-hover.svg
View file

0
scripts/system/html/css/img/mt-bubble-i-normal.svg → scripts/system/html/css/img/mt-goto-normal.svg
View file

18
scripts/system/html/css/miniTablet.css
View file

@ -57,25 +57,17 @@ img {
background-image: url("./img/mt-mute-hover.svg");
}
#bubble {
#goto {
padding-top: 19px;
background-size: 100% 100%;
}
#bubble.off {
background-image: url("./img/mt-bubble-i-normal.svg");
#goto.off {
background-image: url("./img/mt-goto-normal.svg");
}
#bubble.off:hover {
background-image: url("./img/mt-bubble-i-hover.svg");
}
#bubble.on {
background-image: url("./img/mt-bubble-a-normal.svg");
}
#bubble.on:hover {
background-image: url("./img/mt-bubble-a-hover.svg");
#goto.off:hover {
background-image: url("./img/mt-goto-hover.svg");
}
#expand {

24
scripts/system/html/js/miniTablet.js
View file

@ -19,13 +19,13 @@
READY_MESSAGE = "ready", // Engine <== Dialog
HOVER_MESSAGE = "hover", // Engine <== Dialog
MUTE_MESSAGE = "mute", // Engine <=> Dialog
BUBBLE_MESSAGE = "bubble", // Engine <=> Dialog
GOTO_MESSAGE = "goto", // Engine <=> Dialog
EXPAND_MESSAGE = "expand", // Engine <== Dialog
muteButton,
muteImage,
bubbleButton,
bubbleImage,
gotoButton,
gotoImage,
expandButton;
// #region Communications ==================================================================================================
@ -44,10 +44,8 @@
case MUTE_MESSAGE:
muteImage.src = message.icon;
break;
case BUBBLE_MESSAGE:
bubbleButton.classList.remove(message.on ? "off" : "on");
bubbleButton.classList.add(message.on ? "on" : "off");
bubbleImage.src = message.icon;
case GOTO_MESSAGE:
gotoImage.src = message.icon;
break;
}
}
@ -64,9 +62,9 @@
}));
}
function onBubbleButtonClick() {
function onGotoButtonClick() {
EventBridge.emitWebEvent(JSON.stringify({
type: BUBBLE_MESSAGE
type: GOTO_MESSAGE
}));
}
@ -98,17 +96,17 @@
function onLoad() {
muteButton = document.getElementById("mute");
muteImage = document.getElementById("mute-img");
bubbleButton = document.getElementById("bubble");
bubbleImage = document.getElementById("bubble-img");
gotoButton = document.getElementById("goto");
gotoImage = document.getElementById("goto-img");
expandButton = document.getElementById("expand");
connectEventBridge();
muteButton.addEventListener("mouseenter", onButtonHover, false);
bubbleButton.addEventListener("mouseenter", onButtonHover, false);
gotoButton.addEventListener("mouseenter", onButtonHover, false);
expandButton.addEventListener("mouseenter", onButtonHover, false);
muteButton.addEventListener("click", onMuteButtonClick, true);
bubbleButton.addEventListener("click", onBubbleButtonClick, true);
gotoButton.addEventListener("click", onGotoButtonClick, true);
expandButton.addEventListener("click", onExpandButtonClick, true);
document.body.onunload = function () {

4
scripts/system/html/miniTablet.html
View file

@ -20,8 +20,8 @@ See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.
<div id="mute" class="button off">
<img id="mute-img" />
</div>
<div id="bubble" class="button off">
<img id="bubble-img" />
<div id="goto" class="button off">
<img id="goto-img" />
</div>
<div id="expand" class="button off"></div>
</section>

54
scripts/system/miniTablet.js
View file

@ -126,8 +126,7 @@
// Button icons.
MUTE_ON_ICON = Script.resourcesPath() + "icons/tablet-icons/mic-mute-a.svg",
MUTE_OFF_ICON = Script.resourcesPath() + "icons/tablet-icons/mic-unmute-i.svg",
BUBBLE_ON_ICON = Script.resourcesPath() + "icons/tablet-icons/bubble-a.svg",
BUBBLE_OFF_ICON = Script.resourcesPath() + "icons/tablet-icons/bubble-i.svg",
GOTO_ICON = Script.resourcesPath() + "icons/tablet-icons/goto-i.svg",
// Expansion to tablet.
MINI_EXPAND_HANDLES = [ // Normalized coordinates in range [-0.5, 0.5] about center of mini tablet.
@ -149,14 +148,14 @@
miniTargetWidth,
miniTargetLocalRotation,
// EventBridge
// EventBridge.
READY_MESSAGE = "ready", // Engine <== Dialog
HOVER_MESSAGE = "hover", // Engine <== Dialog
MUTE_MESSAGE = "mute", // Engine <=> Dialog
BUBBLE_MESSAGE = "bubble", // Engine <=> Dialog
GOTO_MESSAGE = "goto", // Engine <=> Dialog
EXPAND_MESSAGE = "expand", // Engine <== Dialog
// Sounds
// Sounds.
HOVER_SOUND = "./assets/sounds/button-hover.wav",
HOVER_VOLUME = 0.5,
CLICK_SOUND = "./assets/sounds/button-click.wav",
@ -174,12 +173,10 @@
}));
}
function updateBubbleStatus() {
var isBubbleOn = Users.getIgnoreRadiusEnabled();
function setGotoIcon() {
miniOverlayObject.emitScriptEvent(JSON.stringify({
type: BUBBLE_MESSAGE,
on: isBubbleOn,
icon: isBubbleOn ? BUBBLE_ON_ICON : BUBBLE_OFF_ICON
type: GOTO_MESSAGE,
icon: GOTO_ICON
}));
}
@ -197,7 +194,7 @@
case READY_MESSAGE:
// Send initial button statuses.
updateMutedStatus();
updateBubbleStatus();
setGotoIcon();
break;
case HOVER_MESSAGE:
// Audio feedback.
@ -208,15 +205,15 @@
playSound(clickSound, CLICK_VOLUME);
Audio.muted = !Audio.muted;
break;
case BUBBLE_MESSAGE:
// Toggle bubble.
case GOTO_MESSAGE:
// Goto.
playSound(clickSound, CLICK_VOLUME);
Users.toggleIgnoreRadius();
miniState.setState(miniState.MINI_EXPANDING, { hand: uiHand, goto: true });
break;
case EXPAND_MESSAGE:
// Expand tablet;
playSound(clickSound, CLICK_VOLUME);
miniState.setState(miniState.MINI_EXPANDING, uiHand);
miniState.setState(miniState.MINI_EXPANDING, { hand: uiHand, goto: false });
break;
}
}
@ -419,7 +416,6 @@
getMiniTabletID: getMiniTabletID,
getMiniTabletProperties: getMiniTabletProperties,
updateMutedStatus: updateMutedStatus,
updateBubbleStatus: updateBubbleStatus,
show: show,
size: size,
startExpandingTablet: startExpandingTablet,
@ -470,6 +466,10 @@
miniExpandTimer = null,
miniExpandStart,
// Tablet targets.
isGoto = false,
TABLET_ADDRESS_DIALOG = "hifi/tablet/TabletAddressDialog.qml",
// Visibility.
MIN_HAND_CAMERA_ANGLE = 30,
DEGREES_180 = 180,
@ -483,9 +483,8 @@
updateTimer = null;
}
// Stop monitoring mute and bubble changes.
// Stop monitoring mute changes.
Audio.mutedChanged.disconnect(ui.updateMutedStatus);
Users.ignoreRadiusEnabledChanged.disconnect(ui.updateBubbleStatus);
// Don't keep overlays prepared if in desktop mode.
ui.destroy();
@ -496,9 +495,8 @@
// Create UI so that it's ready to be displayed without seeing artefacts from creating the UI.
ui = new UI();
// Start monitoring mute and bubble changes.
// Start monitoring mute changes.
Audio.mutedChanged.connect(ui.updateMutedStatus);
Users.ignoreRadiusEnabledChanged.connect(ui.updateBubbleStatus);
// Start updates.
updateTimer = Script.setTimeout(updateState, UPDATE_INTERVAL);
@ -640,8 +638,9 @@
setState(TABLET_OPEN);
}
function enterMiniExpanding(hand) {
ui.startExpandingTablet(hand);
function enterMiniExpanding(data) {
isGoto = data.goto;
ui.startExpandingTablet(data.hand);
miniExpandStart = Date.now();
miniExpandTimer = Script.setTimeout(expandMini, MINI_EXPAND_TIMEOUT);
}
@ -665,10 +664,17 @@
ui.hide();
if (isGoto) {
tablet.loadQMLSource(TABLET_ADDRESS_DIALOG);
} else {
tablet.gotoHomeScreen();
}
Overlays.editOverlay(HMD.tabletID, {
position: miniTabletProperties.position,
orientation: miniTabletProperties.orientation
});
HMD.openTablet(true);
}
@ -807,13 +813,13 @@
if (message.action === "grab" && miniState.getState() === miniState.MINI_VISIBLE) {
hand = message.joint === HAND_NAMES[miniHand] ? miniHand : otherHand(miniHand);
if (hand === miniHand) {
miniState.setState(miniState.MINI_EXPANDING, hand);
miniState.setState(miniState.MINI_EXPANDING, { hand: hand, goto: false });
} else {
miniState.setState(miniState.MINI_GRABBED);
}
} else if (message.action === "release" && miniState.getState() === miniState.MINI_GRABBED) {
hand = message.joint === HAND_NAMES[miniHand] ? miniHand : otherHand(miniHand);
miniState.setState(miniState.MINI_EXPANDING, hand);
miniState.setState(miniState.MINI_EXPANDING, { hand: hand, goto: false });
}
}