diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml
index a9199ff5f1..c102e9b7c7 100644
--- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml
+++ b/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml
@@ -146,6 +146,7 @@ Rectangle {
}
}
+
Item {
id: tabViewContainers
anchors.top: tabContainer.bottom
@@ -153,7 +154,6 @@ Rectangle {
anchors.right: parent.right
anchors.bottom: parent.bottom
-
GeneralSettings.General {
id: generalTabViewContainer
visible: activeTabView === "generalTabView"
@@ -161,8 +161,10 @@ Rectangle {
onSendNameTagInfo: {
sendToScript(message);
}
+ onSendEmoteVisible: {
+ sendToScript(message);
+ }
}
-
AudioSettings.Audio {
id: audioTabViewContainer
diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml
index 600e4a3a13..025aa82c6d 100644
--- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml
+++ b/interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml
@@ -28,10 +28,6 @@ Flickable {
sendNameTagInfo({method: 'handleAvatarNametagMode', avatarNametagMode: root.avatarNametagMode, source: "SettingsApp.qml"});
}
- onEmoteIndicatorVisible: {
- sendEmoteVisible({method: 'emoteIndicatorVisible', emoteIndicatorVisible: root.emoteIndicatorVisible, source: "SettingsApp.qml"})
- }
-
onVisibleChanged: {
if (visible) {
root.contentX = 0;
@@ -117,6 +113,40 @@ Flickable {
}
}
+ ColumnLayout {
+ id: emoteContainer
+ Layout.preferredWidth: parent.width
+ spacing: 0
+
+ HifiStylesUit.GraphikSemiBold {
+ id: emoteTitle
+ text: "Emote UI"
+ Layout.maximumWidth: parent.width
+ height: paintedHeight
+ size: 22
+ color: simplifiedUI.colors.text.white
+ }
+
+ ColumnLayout {
+ id: emoteSwitchGroup
+ Layout.preferredWidth: parent.width
+ Layout.topMargin: simplifiedUI.margins.settings.settingsGroupTopMargin
+
+ SimplifiedControls.Switch {
+ id: emoteSwitch
+ Layout.preferredHeight: 18
+ Layout.preferredWidth: parent.width
+ labelTextOn: "Show Emote UI"
+ checked: root.emoteIndicatorVisible
+ onClicked: {
+ root.emoteIndicatorVisible = !root.emoteIndicatorVisible;
+ sendEmoteVisible({method: 'handleEmoteIndicatorVisible', emoteIndicatorVisible: root.emoteIndicatorVisible, source: "SettingsApp.qml"});
+ console.log("emoteSwitch clicked. Emote UI is ", root.emoteIndicatorVisible);
+ }
+ }
+ }
+ }
+
ColumnLayout {
id: performanceContainer
Layout.preferredWidth: parent.width
@@ -202,60 +232,18 @@ Flickable {
}
}
- Connections {
- target: Camera
+ Connections {
+ target: Camera
- onModeUpdated: {
- if (Camera.mode === "first person") {
- firstPerson.checked = true
- } else if (Camera.mode === "third person") {
- thirdPerson.checked = true
- }
+ onModeUpdated: {
+ if (Camera.mode === "first person") {
+ firstPerson.checked = true
+ } else if (Camera.mode === "third person") {
+ thirdPerson.checked = true
}
- }
- }
- }
-
- ColumnLayout {
- id: emoteContainer
- Layout.preferredWidth: parent.width
- spacing: 0
- ColumnLayout {
- id: emoteRadioButtonGroup
- Layout.topMargin: simplifiedUI.margins.settings.settingsGroupTopMargin
- spacing: simplifiedUI.margins.settings.spacingBetweenRadiobuttons
-
- HifiStylesUit.GraphikSemiBold {
- id: emoteTitle
- text: "Emote"
- Layout.maximumWidth: parent.width
- height: paintedHeight
- size: 22
- color: simplifiedUI.colors.text.white
- }
-
-
- SimplifiedControls.RadioButton {
- id: emoteOn
- text: "Emote On"
- checked: root.emoteIndicatorVisible
- onClicked: {
- root.emoteIndicatorVisible = !root.emoteIndicatorVisible;
}
}
-
- SimplifiedControls.RadioButton {
- id: emoteOff
- text: "Emote Off"
- checked: !root.emoteIndicatorVisible
- onClicked: {
- root.emoteIndicatorVisible = !root.emoteIndicatorVisible;
- }
- }
-
}
-
-
}
ColumnLayout {
diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/qmldir b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/qmldir
new file mode 100644
index 0000000000..a2b5c292b2
--- /dev/null
+++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/qmldir
@@ -0,0 +1,2 @@
+module hifi.simplifiedUI.simplifiedConstants
+SimplifiedConstants 1.0 SimplifiedConstants.qml
\ No newline at end of file
diff --git a/interface/src/ui/InteractiveWindow.cpp b/interface/src/ui/InteractiveWindow.cpp
index c0f3e82b29..a313c7873e 100644
--- a/interface/src/ui/InteractiveWindow.cpp
+++ b/interface/src/ui/InteractiveWindow.cpp
@@ -296,7 +296,9 @@ void InteractiveWindow::sendToQml(const QVariant& message) {
QMetaObject::invokeMethod(rootItem, "fromScript", Qt::QueuedConnection, Q_ARG(QVariant, message));
}
} else {
- QMetaObject::invokeMethod(_qmlWindowProxy->getQmlWindow(), "fromScript", Qt::QueuedConnection, Q_ARG(QVariant, message));
+ if (_qmlWindowProxy) {
+ QMetaObject::invokeMethod(_qmlWindowProxy->getQmlWindow(), "fromScript", Qt::QueuedConnection, Q_ARG(QVariant, message));
+ }
}
}
diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/modules/entityMaker.js b/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/modules/entityMaker.js
index a2844de4d6..d47217ccde 100644
--- a/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/modules/entityMaker.js
+++ b/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/modules/entityMaker.js
@@ -1,5 +1,4 @@
//
-// User Inspector
// entityMaker.js
// Created by Milad Nazeri on 2019-02-19
// Copyright 2019 High Fidelity, Inc.
diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/simplifiedEmoji.js b/scripts/simplifiedUI/simplifiedEmote/emojiApp/simplifiedEmoji.js
index a68c0f61bd..5ed9bc552b 100644
--- a/scripts/simplifiedUI/simplifiedEmote/emojiApp/simplifiedEmoji.js
+++ b/scripts/simplifiedUI/simplifiedEmote/emojiApp/simplifiedEmoji.js
@@ -1,7 +1,6 @@
/*
- Avimoji
- avimoji_app.js
+ simplifiedEmoji.js
Created by Milad Nazeri on 2019-04-25
Copyright 2019 High Fidelity, Inc.
@@ -23,10 +22,8 @@ var EasingFunctions = Script.require("./resources/modules/easing.js?");
// The information needed to properly use the sprite sheets and get the general information
// about the emojis
var emojiList = Script.require("./resources/modules/emojiList.js?" + Date.now());
-// The location to find where the individual emoji icons are
-var CONFIG = Script.require("./resources/config.json?" + Date.now());
-// Where to load the images from taken from the Config above
-var imageURLBase = Script.resolvePath(CONFIG.baseImagesURL);
+var imageURLBase = Script.resolvePath("https://hifi-content.s3.amazonaws.com/milad/ROLC/mnt/d/ROLC_High-Fidelity/02_Organize/O_Projects/Repos/hifi-content/Prototyping/emojis/");
+// alternate url: ./resources/images/emojis/png1024/
// #endregion
@@ -52,7 +49,7 @@ var UTF_CODE = 0;
var soundUrl = Script.resolvePath('./resources/sounds/emojiPopSound.wav');
var popSound = SoundCache.getSound(soundUrl);
var injector;
-var DEFAULT_VOLUME = 0.0003;
+var DEFAULT_VOLUME = 0.01;
var local = false;
function playSound(sound, volume, position, localOnly) {
sound = sound || popSound;
@@ -92,43 +89,38 @@ function maybeClearTimeoutDelete() {
// Start the delete process and handle the right animation path for turning off
-var DEFAULT_TIMEOUT_MS = 5000;
+var TOTAL_EMOJI_DURATION_MS = 7000;
var defaultTimeout = null;
function startTimeoutDelete() {
defaultTimeout = Script.setTimeout(function () {
// This is called to start the shrink animation and also where the deleting happens when that is done
maybePlayPop("off");
- countDownTimer = Script.setInterval(countDownTimerHandler, COUNT_DOWN_INTERVAL_MS);
selectedEmoji = null;
- }, DEFAULT_TIMEOUT_MS);
+ }, TOTAL_EMOJI_DURATION_MS - POP_ANIMATION_OUT_DURATION_MS);
}
// The QML has a property called archEnd on the pie chart that controls how much pie is showing
var COUNT_DOWN_INTERVAL_MS = 100;
-var countDownTimer = null;
-function countDownTimerHandler() {
- currentArch += ARCH_END_PER_ANIMATION_STEP;
+function beginCountDownTimer() {
_this._avimojiQMLWindow.sendToQml({
"source": "simplifiedEmoji.js",
- "method": "updateArchEnd",
+ "method": "beginCountdownTimer",
"data": {
- "archEnd": currentArch
+ "interval": COUNT_DOWN_INTERVAL_MS,
+ "duration": TOTAL_EMOJI_DURATION_MS
}
});
}
-function maybeClearCountDownTimerHandler() {
- if (countDownTimer) {
- Script.clearTimeout(countDownTimer);
+function clearCountDownTimerHandler() {
+ if (_this._avimojiQMLWindow) {
_this._avimojiQMLWindow.sendToQml({
"source": "simplifiedEmoji.js",
- "method": "updateArchEnd",
- "data": {
- "archEnd": 0
- }
+ "method": "clearCountdownTimer",
+ "data": {}
});
}
}
@@ -138,27 +130,11 @@ function maybeClearCountDownTimerHandler() {
function resetEmojis() {
pruneOldAvimojis();
maybeClearPop();
- maybeClearCountDownTimerHandler();
+ clearCountDownTimerHandler();
if (currentEmoji && currentEmoji.id) {
currentEmoji.destroy();
selectedEmoji = null;
}
- _this._avimojiQMLWindow.sendToQml({
- "source": "simplifiedEmoji.js",
- "method": "updateArchEnd",
- "data": {
- "archEnd": 0
- }
- });
- // Turns off locking the selected emoji in the app
- _this._avimojiQMLWindow.sendToQml({
- "source": "simplifiedEmoji.js",
- "method": "isSelected",
- "data": {
- "isSelected": false
- }
- });
- currentArch = 0;
}
@@ -177,15 +153,13 @@ function resetEmojis() {
var selectedEmoji = null;
var lastEmoji = null;
function handleSelectedEmoji(emoji) {
- console.log("in handleSelectedEmoji");
if (selectedEmoji && selectedEmoji.code[UTF_CODE] === emoji.code[UTF_CODE]) {
return;
} else {
maybeClearTimeoutDelete();
- maybeClearCountDownTimerHandler();
+ clearCountDownTimerHandler();
selectedEmoji = emoji;
lastEmoji = emoji;
- console.log("handleSelected about to go to addEmoji - selectedEmoji")
addEmoji(selectedEmoji);
}
}
@@ -277,6 +251,7 @@ function createEmoji(emoji) {
.create();
maybePlayPop("in");
+ beginCountDownTimer();
startTimeoutDelete();
}
@@ -298,23 +273,13 @@ function createEmoji(emoji) {
First clear any current pop animations
Then we check what kind of pop animation might be requested, either an in or an out.
- If it's an out, reset the pie just in case.
*/
function maybePlayPop(type) {
- console.log("In maybe play pop");
maybeClearPop();
popType = type;
if (popType === "in") {
playPopInterval = Script.setInterval(playPopAnimation, POP_DURATION_IN_PER_STEP);
} else {
- _this._avimojiQMLWindow.sendToQml({
- "source": "simplifiedEmoji.js",
- "method": "updateArchEnd",
- "data": {
- "archEnd": 0
- }
- });
- currentArch = 0;
playPopInterval = Script.setInterval(playPopAnimation, POP_DURATION_OUT_PER_STEP);
}
}
@@ -322,7 +287,6 @@ function maybePlayPop(type) {
// maybe clear a pop up animation not in animation mode
function maybeClearPop() {
- console.log("In maybe clear pop");
if (playPopInterval) {
Script.clearTimeout(playPopInterval);
playPopInterval = null;
@@ -337,7 +301,7 @@ function maybeClearPop() {
/*
We are accounting for an in animation and an out animation
We need the following to setup an animation
- 1. The duration of the animiation
+ 1. The duration of the animation
2. How many animation steps there will be for that duration
The animation duration / the animation steps
3. The max and min values
@@ -350,10 +314,6 @@ var playPopInterval = null;
var finalInPopScale = null;
var currentArch = 0;
-// Degrees % Animation steps to know how much to fill in for each step
-var DEGREES_IN_CIRCLE = 360;
-var ARCH_END_PER_ANIMATION_STEP = DEGREES_IN_CIRCLE / POP_ANIMATION_OUT_STEPS;
-
var MAX_POP_SCALE = 1;
var MIN_POP_SCALE = 0;
var POP_SCALE_DISTANCE = MAX_POP_SCALE - MIN_POP_SCALE;
@@ -408,7 +368,6 @@ function playPopAnimation() {
Math.min(dimensions.y, emojiMaxDimensions.y),
Math.min(dimensions.z, emojiMaxDimensions.z)
];
- currentArch += ARCH_END_PER_ANIMATION_STEP;
}
currentPopStep++;
@@ -434,15 +393,7 @@ function playPopAnimation() {
}
finalInPopScale = null;
selectedEmoji = null;
- maybeClearCountDownTimerHandler();
- // Tell the UI we can show other icons in the selected window ok
- _this._avimojiQMLWindow.sendToQml({
- "source": "simplifiedEmoji.js",
- "method": "isSelected",
- "data": {
- "isSelected": false
- }
- });
+ clearCountDownTimerHandler();
}
maybeClearPop();
}
@@ -462,6 +413,7 @@ function playPopAnimation() {
// startup the app
var emojiCodeMap;
+var signalsConnected = false;
function init() {
// make a map of just the utf codes to help with accesing
@@ -479,8 +431,10 @@ function init() {
pruneOldAvimojis();
+ Window.domainChanged.connect(onDomainChanged);
MyAvatar.scaleChanged.connect(onScaleChanged);
Script.scriptEnding.connect(scriptEnding);
+ signalsConnected = true;
}
@@ -497,9 +451,12 @@ function init() {
function scriptEnding() {
resetEmojis();
- Window.domainChanged.disconnect(onDomainChanged);
- MyAvatar.scaleChanged.disconnect(onScaleChanged);
-
+ if (signalsConnected) {
+ Script.scriptEnding.disconnect(scriptEnding);
+ Window.domainChanged.disconnect(onDomainChanged);
+ MyAvatar.scaleChanged.disconnect(onScaleChanged);
+ signalsConnected = false;
+ }
}
@@ -526,13 +483,6 @@ function registerAvimojiQMLWindow(avimojiQMLWindow) {
function addEmojiFromQML(code) {
var emoji = emojiList[emojiCodeMap[code]];
handleSelectedEmoji(emoji);
- _this._avimojiQMLWindow.sendToQml({
- "source": "simplifiedEmoji.js",
- "method": "isSelected",
- "data": {
- "isSelected": true
- }
- });
}
function unload() {
diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml b/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml
index 0051211392..d9bea305e8 100644
--- a/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml
+++ b/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml
@@ -10,11 +10,9 @@
import QtQuick 2.12
import QtQuick.Controls 2.4
+import QtGraphicalEffects 1.12
import stylesUit 1.0 as HifiStylesUit
import TabletScriptingInterface 1.0
-/*
- See note in SimplifiedEmoteIndicator about import question
-*/
import "qrc:////qml//hifi//simplifiedUI//simplifiedConstants" as SimplifiedConstants
import "../../resources/modules/emojiList.js" as EmojiList
import "./ProgressCircle"
@@ -98,13 +96,26 @@ Rectangle {
anchors.centerIn: parent
source: ""
fillMode: Image.PreserveAspectFit
+ visible: false
+ }
+
+ Image {
+ id: mainEmojiLowOpacity
+ width: 180
+ height: 180
+ anchors.centerIn: parent
+ source: mainEmojiImage.source
+ opacity: 0.5
+ fillMode: Image.PreserveAspectFit
+ visible: true
}
// The overlay used during the pie timeout
ProgressCircle {
+ property int arcChangeSize: 15
id: progressCircle
- anchors.centerIn: parent
- size: 180
+ anchors.centerIn: mainEmojiImage
+ size: mainEmojiImage.width * 2
opacity: 0.5
colorCircle: "#FFFFFF"
colorBackground: "#E6E6E6"
@@ -112,17 +123,32 @@ Rectangle {
isPie: true
arcBegin: 0
arcEnd: 0
+ visible: false
+ }
+
+ OpacityMask {
+ anchors.fill: mainEmojiImage
+ source: mainEmojiImage
+ maskSource: progressCircle
+ }
+
+ Timer {
+ id: arcTimer
+ interval: 5000
+ repeat: true
+ running: false
+ onTriggered: {
+ progressCircle.arcEnd = ((progressCircle.arcEnd - progressCircle.arcChangeSize) > 0) ? (progressCircle.arcEnd - progressCircle.arcChangeSize) : 0;
+ }
}
}
- // The bottom half of the app. We might want to do something about the set height to be more responsive
- // Zach question probably.
Rectangle {
id: emojiIconListContainer
anchors.top: emojiIndicatorContainer.bottom
anchors.left: parent.left
anchors.right: parent.right
- height: 415
+ anchors.bottom: parent.bottom
clip: true
color: simplifiedUI.colors.darkBackground
@@ -188,7 +214,6 @@ Rectangle {
root.currentCode = mainModel.get(index).code.utf;
}
onClicked: {
- console.log("GOT THE CLICK on emoji");
sendToScript({
"source": "SimplifiedEmoji.qml",
"method": "selectedEmoji",
@@ -233,13 +258,21 @@ Rectangle {
}
switch(message.method) {
- case "updateArchEnd":
- progressCircle.arcEnd = message.data.archEnd;
+ case "beginCountdownTimer":
+ var degreesInCircle = 360;
+ progressCircle.arcEnd = degreesInCircle;
+ arcTimer.interval = message.data.interval;
+ progressCircle.arcChangeSize = degreesInCircle / (message.data.duration / arcTimer.interval);
+ arcTimer.start();
+ root.isSelected = true;
+ break;
+ case "clearCountdownTimer":
+ progressCircle.arcEnd = 0;
+ arcTimer.stop();
+ root.isSelected = false;
break;
- case "isSelected":
- root.isSelected = message.data.isSelected
default:
- console.log("Message not recoganized from simplifiedEmoji.js");
+ console.log("Message not recognized from simplifiedEmoji.js", JSON.stringify(message));
}
}
}
\ No newline at end of file
diff --git a/scripts/simplifiedUI/simplifiedEmote/simplifiedEmote.js b/scripts/simplifiedUI/simplifiedEmote/simplifiedEmote.js
index 546632d394..45c9e65141 100644
--- a/scripts/simplifiedUI/simplifiedEmote/simplifiedEmote.js
+++ b/scripts/simplifiedUI/simplifiedEmote/simplifiedEmote.js
@@ -135,7 +135,7 @@ var APPLAUD_KEY = "b";
var POINT_KEY = "n";
var EMOTE_WINDOW = "f";
function keyPressHandler(event) {
- if (!event.isAutoRepeat) {
+ if (!event.isAutoRepeat && ! event.isMeta && ! event.isControl && ! event.isAlt) {
if (event.text === POSITIVE_KEY) {
MyAvatar.triggerReaction("positive");
} else if (event.text === NEGATIVE_KEY) {
@@ -176,12 +176,8 @@ function keyReleaseHandler(event) {
// *************************************
// #region EMOTE_MAIN
-/*
- Milad Note
- Most of this is taken from Simplified. Nothing to be changed here really besides maybe the window title
-*/
var EMOTE_APP_BAR_QML_PATH = Script.resolvePath("./ui/qml/SimplifiedEmoteIndicator.qml");
-var EMOTE_APP_BAR_WINDOW_TITLE = "Emote";
+var EMOTE_APP_BAR_WINDOW_TITLE = "Emote Reaction Bar";
var EMOTE_APP_BAR_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
var EMOTE_APP_BAR_WIDTH_PX = 48;
var EMOTE_APP_BAR_HEIGHT_PX = 48;
@@ -215,13 +211,18 @@ function showEmoteAppBar() {
var EmojiAPI = Script.require("./emojiApp/simplifiedEmoji.js?" + Date.now());
var emojiAPI = new EmojiAPI();
+var geometryChangedSignalConnected = false;
+var keyPressSignalsConnected = false;
function init() {
Window.geometryChanged.connect(onGeometryChanged);
+ geometryChangedSignalConnected = true;
emojiAPI.startup();
showEmoteAppBar();
Controller.keyPressEvent.connect(keyPressHandler);
Controller.keyReleaseEvent.connect(keyReleaseHandler);
+ keyPressSignalsConnected = true;
+
Script.scriptEnding.connect(shutdown);
}
@@ -237,10 +238,16 @@ function shutdown() {
emojiAPI.unload();
- Window.geometryChanged.disconnect(onGeometryChanged);
+ if (geometryChangedSignalConnected) {
+ Window.geometryChanged.disconnect(onGeometryChanged);
+ geometryChangedSignalConnected = false;
+ }
- Controller.keyPressEvent.disconnect(keyPressHandler);
- Controller.keyReleaseEvent.disconnect(keyReleaseHandler);
+ if (keyPressSignalsConnected) {
+ Controller.keyPressEvent.disconnect(keyPressHandler);
+ Controller.keyReleaseEvent.disconnect(keyReleaseHandler);
+ keyPressSignalsConnected = false;
+ }
}
@@ -389,17 +396,16 @@ function unload() {
shutdown();
}
-function handleEmoteIndicatorVisible(newEmoteIndicatorVisible) {
+function handleEmoteIndicatorVisible(emoteIndicatorVisible) {
console.log("in handle emote indicator");
- emoteIndicatorVisible = newEmoteIndicatorVisible;
if (!emoteAppBarWindow) {
return;
}
if (emoteIndicatorVisible) {
- emoteAppBarWindow.close();
+ showEmoteAppBar();
} else {
- emoteAppBarWindow.open();
+ emoteAppBarWindow.close();
}
}
diff --git a/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml b/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml
index 84644a4693..72cbe8c9be 100644
--- a/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml
+++ b/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml
@@ -13,23 +13,17 @@ import QtQuick 2.10
import QtQuick.Controls 2.3
import stylesUit 1.0 as HifiStylesUit
import TabletScriptingInterface 1.0
-/*
- Not sure if there is a better way to request this?
-*/
-import "qrc:////qml//hifi//simplifiedUI//simplifiedConstants" as SimplifiedConstants
+import hifi.simplifiedUI.simplifiedConstants 1.0 as SimplifiedConstants
Rectangle {
id: root
- color: simplifiedUI.colors.darkBackground
+ color: simplifiedUI.colors.almostWhite
anchors.fill: parent
property int originalWidth: 48
property int hoveredWidth: 357
property int requestedWidth
- property bool overEmoteButton: false
- property bool overEmojiButton: false
-
onRequestedWidthChanged: {
root.requestNewWidth(root.requestedWidth);
}
@@ -58,21 +52,15 @@ Rectangle {
onEntered: {
Tablet.playSound(TabletEnums.ButtonHover);
root.requestedWidth = root.hoveredWidth;
- emojiMouseArea.hoverEnabled = true;
- root.overEmoteButton = true;
+ emoteButtonsRepeater.ItemAt(buttonsModel.count -1).buttonMouseArea.hoverEnabled = true;
}
onExited: {
- root.overEmoteButton = false;
Tablet.playSound(TabletEnums.ButtonClick);
root.requestedWidth = root.originalWidth;
}
z: 2
}
- /*
- MILAD NOTE:
- This would be where you would swap the current activiated icon
- */
Rectangle {
id: mainEmojiContainer
z: 2
@@ -99,10 +87,11 @@ Rectangle {
MILAD NOTE:
The main container of the actual buttons
*/
+
Rectangle {
id: drawerContainer
z: 1
- color: simplifiedUI.colors.white
+ color: simplifiedUI.colors.almostWhite
anchors.top: parent.top
anchors.right: parent.right
height: parent.height
@@ -114,236 +103,48 @@ Rectangle {
they probably be switched with Image {} to be supplied by Joshua.
*/
- Rectangle {
- id: happyBackground
- z: 3
- anchors.leftMargin: root.originalWidth + 3;
- width: root.originalWidth
- height: parent.height
- anchors.left: parent.left
- color: simplifiedUI.colors.darkBackground
+ Repeater {
+ id: emoteButtonsRepeater
+ model: ListModel {
+ id: buttonsModel
+ ListElement { text: "Z"; method: "happyPressed" }
+ ListElement { text: "C"; method: "sadPressed" }
+ ListElement { text: "V"; method: "raiseHandPressed" }
+ ListElement { text: "B"; method: "applaudPressed" }
+ ListElement { text: "N"; method: "pointPressed" }
+ ListElement { text: "😊"; method: "toggleEmojiApp" }
+ }
- HifiStylesUit.GraphikRegular {
- id: happyButton
- text: "Z"
+ Rectangle {
z: 3
- anchors.fill: parent
- anchors.verticalCenter: parent.verticalCenter
- anchors.rightMargin: 1
- anchors.verticalCenterOffset: -2
- horizontalAlignment: Text.AlignHCenter
- size: 26
- color: simplifiedUI.colors.text.almostWhite
- }
- MouseArea {
- id: happyMouseArea
- anchors.fill: parent
- hoverEnabled: false
- propagateComposedEvents: true;
- z: 4
- onClicked: {
- console.log("GOT THE CLICK");
- sendToScript({
- "source": "EmoteAppBar.qml",
- "method": "happyPressed"
- });
- }
- onEntered: {
- }
- }
- }
+ width: root.originalWidth
+ height: parent.height
+ color: simplifiedUI.colors.darkBackground
- Rectangle {
- id: sadBackground
- z: 3
- width: root.originalWidth
- height: parent.height
- anchors.left: happyBackground.right
- anchors.leftMargin: 3
- color: simplifiedUI.colors.darkBackground
-
- HifiStylesUit.GraphikRegular {
- id: sadButton
- text: "C"
- z: 3
- anchors.fill: parent
- anchors.verticalCenter: parent.verticalCenter
- anchors.rightMargin: 1
- anchors.verticalCenterOffset: -2
- horizontalAlignment: Text.AlignHCenter
- size: 26
- color: simplifiedUI.colors.text.almostWhite
- }
- MouseArea {
- id: sadMouseArea
- anchors.fill: parent
- hoverEnabled: false
- propagateComposedEvents: true;
- z: 4
- onClicked: {
- console.log("GOT THE CLICK");
- sendToScript({
- "source": "EmoteAppBar.qml",
- "method": "sadPressed"
- });
+ HifiStylesUit.GraphikRegular {
+ text: text
+ z: 3
+ anchors.fill: parent
+ anchors.rightMargin: 1
+ horizontalAlignment: Text.AlignHCenter
+ size: 26
+ color: simplifiedUI.colors.text.black
}
- onEntered: {
- }
- }
- }
- Rectangle {
- id: raiseHandBackground
- z: 3
- width: root.originalWidth
- height: parent.height
- anchors.left: sadBackground.right
- anchors.leftMargin: 3
- color: simplifiedUI.colors.darkBackground
-
- HifiStylesUit.GraphikRegular {
- id: raiseHandButton
- text: "V"
- z: 3
- anchors.fill: parent
- anchors.verticalCenter: parent.verticalCenter
- anchors.rightMargin: 1
- anchors.verticalCenterOffset: -2
- horizontalAlignment: Text.AlignHCenter
- size: 26
- color: simplifiedUI.colors.text.almostWhite
- }
- MouseArea {
- id: raiseHandMouseArea
- anchors.fill: parent
- hoverEnabled: false
- propagateComposedEvents: true;
- z: 4
- onClicked: {
- console.log("GOT THE CLICK");
- sendToScript({
- "source": "EmoteAppBar.qml",
- "method": "raiseHandPressed"
- });
- }
- onEntered: {
- }
- }
- }
-
- Rectangle {
- id: clapBackground
- z: 3
- width: root.originalWidth
- height: parent.height
- anchors.left: raiseHandBackground.right
- anchors.leftMargin: 3
- color: simplifiedUI.colors.darkBackground
-
- HifiStylesUit.GraphikRegular {
- id: clapButton
- text: "B"
- z: 3
- anchors.fill: parent
- anchors.verticalCenter: parent.verticalCenter
- anchors.rightMargin: 1
- anchors.verticalCenterOffset: -2
- horizontalAlignment: Text.AlignHCenter
- size: 26
- color: simplifiedUI.colors.text.almostWhite
- }
- MouseArea {
- id: clapMouseArea
- anchors.fill: parent
- hoverEnabled: false
- propagateComposedEvents: true;
- z: 4
- onClicked: {
- console.log("GOT THE CLICK");
- sendToScript({
- "source": "EmoteAppBar.qml",
- "method": "applaudPressed"
- });
- }
- onEntered: {
- }
- }
- }
-
- Rectangle {
- id: pointBackground
- z: 3
- width: root.originalWidth
- height: parent.height
- anchors.left: clapBackground.right
- anchors.leftMargin: 3
- color: simplifiedUI.colors.darkBackground
-
- HifiStylesUit.GraphikRegular {
- id: pointButton
- text: "N"
- z: 3
- anchors.fill: parent
- anchors.verticalCenter: parent.verticalCenter
- anchors.rightMargin: 1
- anchors.verticalCenterOffset: -2
- horizontalAlignment: Text.AlignHCenter
- size: 26
- color: simplifiedUI.colors.text.almostWhite
- }
- MouseArea {
- id: pointMouseArea
- anchors.fill: parent
- hoverEnabled: false
- propagateComposedEvents: true;
- z: 4
- onClicked: {
- console.log("GOT THE CLICK");
- sendToScript({
- "source": "EmoteAppBar.qml",
- "method": "pointPressed"
- });
- }
- onEntered: {
- }
- }
- }
-
- Rectangle {
- id: emojiButtonBackground
- z: 3
- width: root.originalWidth
- height: parent.height
- anchors.right: parent.right
- anchors.rightMargin: 3
- color: simplifiedUI.colors.darkBackground
-
- HifiStylesUit.GraphikRegular {
- id: emojiButton
- text: "😊"
- z: 3
- anchors.fill: parent
- anchors.verticalCenter: parent.verticalCenter
- anchors.rightMargin: 1
- anchors.verticalCenterOffset: -2
- horizontalAlignment: Text.AlignHCenter
- size: 26
- color: simplifiedUI.colors.text.almostWhite
- }
- MouseArea {
- id: emojiMouseArea
- anchors.fill: parent
- hoverEnabled: false
- propagateComposedEvents: true;
- z: 4
- onClicked: {
- console.log("GOT THE CLICK");
- sendToScript({
- "source": "EmoteAppBar.qml",
- "method": "toggleEmojiApp"
- });
- }
- onEntered: {
+ MouseArea {
+ id: buttonMouseArea
+ anchors.fill: parent
+ hoverEnabled: false
+ propagateComposedEvents: true;
+ z: 4
+ onClicked: {
+ sendToScript({
+ "source": "EmoteAppBar.qml",
+ "method": method
+ });
+ }
+ onEntered: {
+ }
}
}
}
diff --git a/scripts/simplifiedUI/ui/simplifiedUI.js b/scripts/simplifiedUI/ui/simplifiedUI.js
index 549f30e8ed..7adf932f9b 100644
--- a/scripts/simplifiedUI/ui/simplifiedUI.js
+++ b/scripts/simplifiedUI/ui/simplifiedUI.js
@@ -125,11 +125,10 @@ function handleEmoteIndicatorVisible(newEmoteIndicatorVisible) {
var SETTINGS_APP_MESSAGE_SOURCE = "SettingsApp.qml";
function onMessageFromSettingsApp(message) {
- console.log("message from settings app", message);
if (message.source !== SETTINGS_APP_MESSAGE_SOURCE) {
return;
}
-
+ console.log("\n \n MESSAGE FROM SETTINGS APP: ", JSON.stringify(message));
switch (message.method) {
/*
MILAD NOTE:
@@ -137,11 +136,12 @@ function onMessageFromSettingsApp(message) {
nametag.
*/
case "handleAvatarNametagMode":
+ console.log("Got to handle avatar nametag mode");
handleAvatarNametagMode(message.avatarNametagMode);
break;
- case "emoteIndicatorVisible":
- console.log("Got to emote indicator visible");
- handleEmoteIndicatorVisible(message.emoteIndicatorVisible);
+ case "handleEmoteIndicatorVisible":
+ console.log("Got to handle emote indicator visible");
+ handleEmoteIndicatorVisible(message.emoteIndicatorVisible);
break;
default:
console.log("Unrecognized message from " + SETTINGS_APP_MESSAGE_SOURCE + ": " + JSON.stringify(message));
@@ -306,11 +306,10 @@ function sendLocalStatusToQml() {
var TOP_BAR_MESSAGE_SOURCE = "SimplifiedTopBar.qml";
function onMessageFromTopBar(message) {
- console.log("\n\n FROM MESSAGE!")
if (message.source !== TOP_BAR_MESSAGE_SOURCE) {
return;
}
-
+ console.log("\n\n MESSAGE FROM TOP BAR! ", JSON.stringify(message));
switch (message.method) {
case "toggleAvatarApp":
toggleAvatarApp();
@@ -488,6 +487,7 @@ function modifyLODSettings() {
function restoreLODSettings() {
+ print("RESTORING LOD SETTINGS");
LODManager.automaticLODAdjust = oldAutomaticLODAdjust;
LODManager.lodAngleDeg = oldLODAngleDeg;
}
@@ -547,6 +547,7 @@ function startup() {
function shutdown() {
+ print("SHUTTING DOWN SIMPLIFIED UI");
restoreLODSettings();
if (!keepExistingUIAndScriptsSetting) {