Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-08-09 21:17:36 +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"); background-image: url("./img/mt-mute-hover.svg");
} }
#bubble { #goto {
padding-top: 19px; padding-top: 19px;
background-size: 100% 100%; background-size: 100% 100%;
} }
#bubble.off { #goto.off {
background-image: url("./img/mt-bubble-i-normal.svg"); background-image: url("./img/mt-goto-normal.svg");
} }
#bubble.off:hover { #goto.off:hover {
background-image: url("./img/mt-bubble-i-hover.svg"); background-image: url("./img/mt-goto-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");
} }
#expand { #expand {

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

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

54
scripts/system/miniTablet.js
View file

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