Mirrors/overte-thingvellir
3
0
Fork 0
mirror of https://thingvellir.net/git/overte synced 2025-03-27 23:52:03 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Moved a timer from JS to QML; progress circle on Emote Indicator

Browse source
This commit is contained in:
Zach Fox 2019-08-19 15:12:48 -07:00
parent fd287654f4
commit b40d5658e3
8 changed files with 87 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/ProgressCircle/ProgressCircle.qml → interface/resources/qml/hifi/simplifiedUI/simplifiedControls/ProgressCircle.qml
View file

1
interface/resources/qml/hifi/simplifiedUI/simplifiedControls/qmldir
View file

@ -2,6 +2,7 @@ module hifi.simplifiedUI.simplifiedControls
Button 1.0 Button.qml
CheckBox 1.0 CheckBox.qml
InputPeak 1.0 InputPeak.qml
ProgressCircle 1.0 ProgressCircle.qml
RadioButton 1.0 RadioButton.qml
Slider 1.0 Slider.qml
Switch 1.0 Switch.qml

0
scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/sounds/emojiPopSound.wav → scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/sounds/emojiPopSound1.wav
View file

BIN
scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/sounds/emojiPopSound2.wav Normal file
View file

Binary file not shown.

9
scripts/simplifiedUI/simplifiedEmote/emojiApp/simplifiedEmoji.js
View file

@ -46,13 +46,12 @@ var UTF_CODE = 0;
// Plays the specified sound at the specified position, volume, and localOnly
// Only plays a sound if it is downloaded.
// Only plays one sound at a time.
var soundUrl = Script.resolvePath('./resources/sounds/emojiPopSound.wav');
var popSound = SoundCache.getSound(soundUrl);
var emojiCreateSound = SoundCache.getSound(Script.resolvePath('resources/sounds/emojiPopSound1.wav'));
var emojiDestroySound = SoundCache.getSound(Script.resolvePath('resources/sounds/emojiPopSound2.wav'));
var injector;
var DEFAULT_VOLUME = 0.01;
var local = false;
function playSound(sound, volume, position, localOnly) {
sound = sound || popSound;
volume = volume || DEFAULT_VOLUME;
position = position || MyAvatar.position;
localOnly = localOnly || local;
@ -342,7 +341,7 @@ function playPopAnimation() {
} else {
// Start with the pop sound on the out
currentPopScale = finalInPopScale ? finalInPopScale : MAX_POP_SCALE;
playSound();
playSound(emojiDestroySound);
}
}
@ -375,7 +374,7 @@ function playPopAnimation() {
if (currentPopStep === POP_ANIMATION_STEPS) {
if (popType === "in") {
finalInPopScale = currentPopScale;
playSound();
playSound(emojiCreateSound);
dimensions = [
Math.max(dimensions.x, emojiMaxDimensions.x),
Math.max(dimensions.y, emojiMaxDimensions.y),

7
scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml
View file

@ -17,7 +17,6 @@ import hifi.simplifiedUI.simplifiedControls 1.0 as SimplifiedControls
import hifi.simplifiedUI.simplifiedConstants 1.0 as SimplifiedConstants
import "../../resources/modules/emojiList.js" as EmojiList
import "../../resources/modules/customEmojiList.js" as CustomEmojiList
import "./ProgressCircle"
Rectangle {
id: root
@ -103,8 +102,8 @@ Rectangle {
Image {
id: mainEmojiLowOpacity
width: 180
height: 180
width: mainEmojiImage.width
height: mainEmojiImage.height
anchors.centerIn: parent
source: mainEmojiImage.source
opacity: 0.5
@ -125,7 +124,7 @@ Rectangle {
}
// The overlay used during the pie timeout
ProgressCircle {
SimplifiedControls.ProgressCircle {
id: progressCircle
animationDuration: 7000 // Must match `TOTAL_EMOJI_DURATION_MS` in `simplifiedEmoji.js`
anchors.centerIn: mainEmojiImage

26
scripts/simplifiedUI/simplifiedEmote/simplifiedEmote.js
View file

@ -152,10 +152,10 @@ function toggleReaction(reaction) {
if (reactionEnding) {
endReactionWrapper(reaction);
updateEmoteIndicatorIcon("images/emote_Icon.svg", true);
updateEmoteIndicatorIcon("images/emote_Icon.svg");
} else {
beginReactionWrapper(reaction);
updateEmoteIndicatorIcon("images/" + reaction + "_Icon.svg", true);
updateEmoteIndicatorIcon("images/" + reaction + "_Icon.svg");
}
}
@ -279,11 +279,11 @@ function onMessageFromEmoteAppBar(message) {
switch (message.method) {
case "positive":
triggerReactionWrapper("positive");
updateEmoteIndicatorIcon("images/" + message.method + "_Icon.svg", true);
updateEmoteIndicatorIcon("images/" + message.method + "_Icon.svg");
break;
case "negative":
triggerReactionWrapper("negative");
updateEmoteIndicatorIcon("images/" + message.method + "_Icon.svg", true);
updateEmoteIndicatorIcon("images/" + message.method + "_Icon.svg");
break;
case "raiseHand":
case "applaud":
@ -312,13 +312,12 @@ function getEmojiURLFromCode(code) {
return "../../emojiApp/resources/images/emojis/52px/" + emojiFilename;
}
function updateEmoteIndicatorIcon(iconURL, colorOverlayVisible) {
function updateEmoteIndicatorIcon(iconURL) {
emoteAppBarWindow.sendToQml({
"source": "simplifiedEmote.js",
"method": "updateEmoteIndicator",
"data": {
"iconURL": iconURL,
"colorOverlayVisible": colorOverlayVisible
"iconURL": iconURL
}
});
}
@ -530,23 +529,12 @@ function shutdown() {
// #region EMOJI_UTILITY
var EMOJI_52_BASE_URL = "../../resources/images/emojis/52px/";
// This duration must match the timeframe over which simplifiedEmoji.qml displays an emoji over the user's head
var EMOJI_DURATION_MS = 7000;
var restoreEmoteIndicatorIconTimeout;
function selectedEmoji(code) {
emojiAPI.addEmoji(code);
// this URL needs to be relative to SimplifiedEmoteIndicator.qml
var emojiURL = getEmojiURLFromCode(code);
updateEmoteIndicatorIcon(emojiURL, false);
if (restoreEmoteIndicatorIconTimeout) {
Script.clearTimeout(restoreEmoteIndicatorIconTimeout);
}
restoreEmoteIndicatorIconTimeout = Script.setTimeout(function () {
updateEmoteIndicatorIcon("images/emote_Icon.svg", true);
restoreEmoteIndicatorIconTimeout = null;
}, EMOJI_DURATION_MS);
updateEmoteIndicatorIcon(emojiURL);
}

83
scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml
View file

@ -15,6 +15,7 @@ import QtGraphicalEffects 1.0
import stylesUit 1.0 as HifiStylesUit
import TabletScriptingInterface 1.0
import hifi.simplifiedUI.simplifiedConstants 1.0 as SimplifiedConstants
import hifi.simplifiedUI.simplifiedControls 1.0 as SimplifiedControls
Rectangle {
id: root
@ -32,6 +33,8 @@ Rectangle {
emoteButtonsRepeater.itemAt(3).hovered ||
emoteButtonsRepeater.itemAt(4).hovered ||
emoteButtonsRepeater.itemAt(5).hovered) ? expandedWidth : originalWidth;
readonly property int totalEmojiDurationMS: 7000 // Must match `TOTAL_EMOJI_DURATION_MS` in `simplifiedEmoji.js`
readonly property string emoteIconSource: "images/emote_Icon.svg"
onRequestedWidthChanged: {
root.requestNewWidth(root.requestedWidth);
@ -54,14 +57,77 @@ Rectangle {
height: parent.height
width: root.originalWidth
Image {
id: emoteIndicatorLowOpacity
width: emoteIndicator.width
height: emoteIndicator.height
anchors.centerIn: parent
source: emoteIndicator.source
opacity: 0.5
fillMode: Image.PreserveAspectFit
// All "reactions" have associated icon filenames that contain "Icon.svg"; emojis don't.
visible: emoteIndicator.source.toString().indexOf("Icon.svg") === -1
mipmap: true
}
Image {
id: emoteIndicator
width: 30
height: 30
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: "images/emote_Icon.svg"
source: root.emoteIconSource
mipmap: true
visible: false
onSourceChanged: {
// All "reactions" have associated icon filenames that contain "Icon.svg"; emojis don't.
progressCircle.endAnimation = false;
progressCircle.arcEnd = 360;
progressCircle.endAnimation = true;
var sourceIsEmojiImage = source.toString().indexOf("Icon.svg") === -1;
// This kicks off the progress circle animation
if (sourceIsEmojiImage) {
progressCircle.arcEnd = 0;
restoreEmoteIconTimer.restart();
} else {
restoreEmoteIconTimer.stop();
}
}
}
Timer {
id: restoreEmoteIconTimer
running: false
repeat: false
interval: root.totalEmojiDurationMS
onTriggered: {
emoteIndicator.source = root.emoteIconSource;
}
}
// The overlay used during the pie timeout
SimplifiedControls.ProgressCircle {
id: progressCircle
animationDuration: root.totalEmojiDurationMS
anchors.centerIn: emoteIndicator
size: emoteIndicator.width * 2
opacity: 0.5
colorCircle: "#FFFFFF"
colorBackground: "#E6E6E6"
showBackground: false
isPie: true
arcBegin: 0
arcEnd: 360
visible: false
}
OpacityMask {
anchors.fill: emoteIndicator
source: emoteIndicator
maskSource: progressCircle
}
ColorOverlay {
@ -69,7 +135,8 @@ Rectangle {
anchors.fill: emoteIndicator
source: emoteIndicator
color: "#ffffff"
opacity: 1
// All "reactions" have associated icon filenames that contain "Icon.svg"; emojis don't.
opacity: emoteIndicator.source.toString().indexOf("Icon.svg") > -1 ? 1.0 : 0.0
}
MouseArea {
@ -188,15 +255,9 @@ Rectangle {
case "updateEmoteIndicator":
print("CHANGING INDICATOR TO: ", JSON.stringify(message));
if (message.data.iconURL) {
var imageURL = message.data.iconURL;
emoteIndicator.source = imageURL;
if (message.data.colorOverlayVisible) {
print("SET OPACITY TO 1");
emoteIndicatorColorOverlay.opacity = 1;
} else {
print("SET OPACITY TO 0");
emoteIndicatorColorOverlay.opacity = 0;
}
emoteIndicator.source = message.data.iconURL;
} else {
console.log("SimplifiedEmoteIndicator.qml: Error! `updateEmoteIndicator()` called without a new `iconURL`!");
}
break;