From 8728640f60ac95f31029b45034b94b45f3454ae2 Mon Sep 17 00:00:00 2001 From: RebeccaStankus Date: Wed, 14 Aug 2019 12:03:49 -0700 Subject: [PATCH] Initial CR changes --- .../simplifiedUI/settingsApp/SettingsApp.qml | 6 +- .../settingsApp/general/General.qml | 94 +++--- .../simplifiedUI/simplifiedConstants/qmldir | 2 + interface/src/ui/InteractiveWindow.cpp | 4 +- .../emojiApp/resources/modules/entityMaker.js | 1 - .../emojiApp/simplifiedEmoji.js | 106 ++----- .../emojiApp/ui/qml/SimplifiedEmoji.qml | 61 +++- .../simplifiedEmote/simplifiedEmote.js | 32 +- .../ui/qml/SimplifiedEmoteIndicator.qml | 283 +++--------------- scripts/simplifiedUI/ui/simplifiedUI.js | 15 +- 10 files changed, 194 insertions(+), 410 deletions(-) create mode 100644 interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/qmldir 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) {