Merge pull request #15897 from zfox23/SUI/emoteAppPrototype

Implement DEV-218 & DEV-219 and commit a starting point for the Emote app
This commit is contained in:
Zach Fox 2019-07-10 09:53:09 -07:00 committed by GitHub
commit 57c820f42f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 258 additions and 18 deletions

View file

@ -31,6 +31,8 @@ Windows.Window {
signal selfDestruct();
property var flags: 0;
property var additionalFlags: 0;
property var overrideFlags: 0;
property var source;
property var dynamicContent;
@ -153,10 +155,11 @@ Windows.Window {
Qt.WindowMaximizeButtonHint |
Qt.WindowMinimizeButtonHint;
// only use the always on top feature for non Windows OS
if (Qt.platform.os !== "windows" && (flags & Desktop.ALWAYS_ON_TOP)) {
if (Qt.platform.os !== "windows" && (root.additionalFlags & Desktop.ALWAYS_ON_TOP)) {
nativeWindowFlags |= Qt.WindowStaysOnTopHint;
}
nativeWindow.flags = nativeWindowFlags;
root.flags = root.overrideFlags || nativeWindowFlags;
nativeWindow.flags = root.flags;
nativeWindow.x = interactiveWindowPosition.x;
nativeWindow.y = interactiveWindowPosition.y;
@ -225,10 +228,41 @@ Windows.Window {
// Handle message traffic from our loaded QML to the script that launched us
signal sendToScript(var message);
// Children of this InteractiveWindow Item are able to request a new width and height
// for the parent Item (this one) and its associated C++ InteractiveWindow using these methods.
function onRequestNewWidth(newWidth) {
interactiveWindowSize.width = newWidth;
updateInteractiveWindowSizeForMode();
}
function onRequestNewHeight(newWidth) {
interactiveWindowSize.width = newWidth;
updateInteractiveWindowSizeForMode();
}
// These signals are used to forward key-related events from the QML to the C++.
signal keyPressEvent(int key, int modifiers);
signal keyReleaseEvent(int key, int modifiers);
onDynamicContentChanged: {
if (dynamicContent && dynamicContent.sendToScript) {
dynamicContent.sendToScript.connect(sendToScript);
}
if (dynamicContent && dynamicContent.requestNewWidth) {
dynamicContent.requestNewWidth.connect(onRequestNewWidth);
}
if (dynamicContent && dynamicContent.requestNewHeight) {
dynamicContent.requestNewHeight.connect(onRequestNewHeight);
}
if (dynamicContent && dynamicContent.keyPressEvent) {
dynamicContent.keyPressEvent.connect(keyPressEvent);
}
if (dynamicContent && dynamicContent.keyReleaseEvent) {
dynamicContent.keyReleaseEvent.connect(keyReleaseEvent);
}
}
onInteractiveWindowVisibleChanged: {
@ -283,7 +317,7 @@ Windows.Window {
// set invisible on close, to make it not re-appear unintended after switching PresentationMode
interactiveWindowVisible = false;
if ((flags & Desktop.CLOSE_BUTTON_HIDES) !== Desktop.CLOSE_BUTTON_HIDES) {
if ((root.flags & Desktop.CLOSE_BUTTON_HIDES) !== Desktop.CLOSE_BUTTON_HIDES) {
selfDestruct();
}
}

View file

@ -0,0 +1,101 @@
//
// EmoteAppBar.qml
//
// Created by Zach Fox on 2019-07-08
// Copyright 2019 High Fidelity, Inc.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
import QtQuick 2.10
import QtQuick.Controls 2.3
import "../../simplifiedConstants" as SimplifiedConstants
import "../../simplifiedControls" as SimplifiedControls
import stylesUit 1.0 as HifiStylesUit
import TabletScriptingInterface 1.0
Rectangle {
id: root
color: simplifiedUI.colors.white
anchors.fill: parent
property int originalWidth: 48
property int hoveredWidth: 480
property int requestedWidth
onRequestedWidthChanged: {
root.requestNewWidth(root.requestedWidth);
}
Behavior on requestedWidth {
enabled: true
SmoothedAnimation { duration: 220 }
}
SimplifiedConstants.SimplifiedConstants {
id: simplifiedUI
}
MouseArea {
anchors.fill: parent
hoverEnabled: enabled
onEntered: {
Tablet.playSound(TabletEnums.ButtonHover);
root.requestedWidth = root.hoveredWidth;
}
onExited: {
Tablet.playSound(TabletEnums.ButtonClick);
root.requestedWidth = root.originalWidth;
}
}
Rectangle {
id: mainEmojiContainer
z: 2
color: simplifiedUI.colors.darkBackground
anchors.top: parent.top
anchors.left: parent.left
height: parent.height
width: root.originalWidth
HifiStylesUit.GraphikRegular {
text: "😊"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenterOffset: -2
anchors.verticalCenterOffset: -2
horizontalAlignment: Text.AlignHCenter
size: 26
color: simplifiedUI.colors.text.almostWhite
}
}
Rectangle {
id: drawerContainer
z: 1
color: simplifiedUI.colors.white
anchors.top: parent.top
anchors.right: parent.right
height: parent.height
width: root.hoveredWidth
HifiStylesUit.GraphikRegular {
text: "Emotes go here."
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
size: 20
color: simplifiedUI.colors.text.black
}
}
function fromScript(message) {
switch (message.method) {
default:
console.log('EmoteAppBar.qml: Unrecognized message from JS');
break;
}
}
signal sendToScript(var message);
signal requestNewWidth(int newWidth);
}

View file

@ -18,6 +18,7 @@ QtObject {
readonly property color white: "#FFFFFF"
readonly property color lightBlue: "#00B4EF"
readonly property color lightBlueHover: "#3dcfff"
readonly property color black: "#000000"
}
readonly property QtObject controls: QtObject {

View file

@ -32,7 +32,8 @@
static auto CONTENT_WINDOW_QML = QUrl("InteractiveWindow.qml");
static const char* const FLAGS_PROPERTY = "flags";
static const char* const ADDITIONAL_FLAGS_PROPERTY = "additionalFlags";
static const char* const OVERRIDE_FLAGS_PROPERTY = "overrideFlags";
static const char* const SOURCE_PROPERTY = "source";
static const char* const TITLE_PROPERTY = "title";
static const char* const POSITION_PROPERTY = "position";
@ -92,8 +93,12 @@ void InteractiveWindow::forwardKeyReleaseEvent(int key, int modifiers) {
* @property {InteractiveWindow.PresentationWindowInfo} [presentationWindowInfo] - Controls how a <code>NATIVE</code> window is
* displayed. If used, the window is docked to the specified edge of the Interface window, otherwise the window is
* displayed as its own separate window.
* @property {InteractiveWindow.Flags} [flags=0] - Window behavior flags, set at window creation. Possible flag values are
* provided as {@link Desktop|Desktop.ALWAYS_ON_TOP} and {@link Desktop|Desktop.CLOSE_BUTTON_HIDES}.
* @property {InteractiveWindow.AdditionalFlags} [additionalFlags=0] - Window behavior flags in addition to "native window flags" (minimize/maximize/close),
* set at window creation. Possible flag values are provided as {@link Desktop|Desktop.ALWAYS_ON_TOP} and {@link Desktop|Desktop.CLOSE_BUTTON_HIDES}.
* Additional flag values can be found on Qt's website at https://doc.qt.io/qt-5/qt.html#WindowType-enum.
* @property {InteractiveWindow.OverrideFlags} [overrideFlags=0] - Window behavior flags instead of the default window flags.
* Set at window creation. Possible flag values are provided as {@link Desktop|Desktop.ALWAYS_ON_TOP} and {@link Desktop|Desktop.CLOSE_BUTTON_HIDES}.
* Additional flag values can be found on Qt's website at https://doc.qt.io/qt-5/qt.html#WindowType-enum.
*/
InteractiveWindow::InteractiveWindow(const QString& sourceUrl, const QVariantMap& properties) {
InteractiveWindowPresentationMode presentationMode = InteractiveWindowPresentationMode::Native;
@ -179,8 +184,11 @@ InteractiveWindow::InteractiveWindow(const QString& sourceUrl, const QVariantMap
offscreenUi->loadInNewContext(CONTENT_WINDOW_QML, [&](QQmlContext* context, QObject* object) {
_qmlWindow = object;
context->setContextProperty(EVENT_BRIDGE_PROPERTY, this);
if (properties.contains(FLAGS_PROPERTY)) {
object->setProperty(FLAGS_PROPERTY, properties[FLAGS_PROPERTY].toUInt());
if (properties.contains(ADDITIONAL_FLAGS_PROPERTY)) {
object->setProperty(ADDITIONAL_FLAGS_PROPERTY, properties[ADDITIONAL_FLAGS_PROPERTY].toUInt());
}
if (properties.contains(OVERRIDE_FLAGS_PROPERTY)) {
object->setProperty(OVERRIDE_FLAGS_PROPERTY, properties[OVERRIDE_FLAGS_PROPERTY].toUInt());
}
if (properties.contains(PRESENTATION_MODE_PROPERTY)) {
object->setProperty(PRESENTATION_MODE_PROPERTY, properties[PRESENTATION_MODE_PROPERTY].toInt());
@ -201,6 +209,10 @@ InteractiveWindow::InteractiveWindow(const QString& sourceUrl, const QVariantMap
}
connect(object, SIGNAL(sendToScript(QVariant)), this, SLOT(qmlToScript(const QVariant&)), Qt::QueuedConnection);
QObject::connect(object, SIGNAL(keyPressEvent(int, int)), this, SLOT(forwardKeyPressEvent(int, int)),
Qt::QueuedConnection);
QObject::connect(object, SIGNAL(keyReleaseEvent(int, int)), this, SLOT(forwardKeyReleaseEvent(int, int)),
Qt::QueuedConnection);
connect(object, SIGNAL(interactiveWindowPositionChanged()), this, SIGNAL(positionChanged()), Qt::QueuedConnection);
connect(object, SIGNAL(interactiveWindowSizeChanged()), this, SIGNAL(sizeChanged()), Qt::QueuedConnection);
connect(object, SIGNAL(interactiveWindowVisibleChanged()), this, SIGNAL(visibleChanged()), Qt::QueuedConnection);

View file

@ -19,7 +19,7 @@ function getPreferredTitle() {
var virtualWindow = Desktop.createWindow(Script.resourcesPath() + 'qml/OverlayWindowTest.qml', {
title: getPreferredTitle(),
flags: Desktop.ALWAYS_ON_TOP,
additionalFlags: Desktop.ALWAYS_ON_TOP,
presentationMode: getPreferredPresentationMode(),
size: {x: 500, y: 400}
});

View file

@ -36,7 +36,7 @@
var qml = Script.resolvePath(QMLAPP_URL);
window = Desktop.createWindow(Script.resolvePath(QMLAPP_URL), {
title: 'Render Engine Profiler',
flags: Desktop.ALWAYS_ON_TOP,
additionalFlags: Desktop.ALWAYS_ON_TOP,
presentationMode: Desktop.PresentationMode.NATIVE,
size: {x: 500, y: 100}
});

View file

@ -52,7 +52,7 @@
var qml = Script.resolvePath(QMLAPP_URL);
window = Desktop.createWindow(Script.resolvePath(QMLAPP_URL), {
title: TABLET_BUTTON_NAME,
flags: Desktop.ALWAYS_ON_TOP,
additionalFlags: Desktop.ALWAYS_ON_TOP,
presentationMode: Desktop.PresentationMode.NATIVE,
size: {x: 400, y: 600}
});

View file

@ -52,7 +52,7 @@
var qml = Script.resolvePath(QMLAPP_URL);
window = Desktop.createWindow(Script.resolvePath(QMLAPP_URL), {
title: TABLET_BUTTON_NAME,
flags: Desktop.ALWAYS_ON_TOP,
additionalFlags: Desktop.ALWAYS_ON_TOP,
presentationMode: Desktop.PresentationMode.NATIVE,
size: {x: 400, y: 600}
});

View file

@ -52,7 +52,7 @@
var qml = Script.resolvePath(QMLAPP_URL);
window = Desktop.createWindow(Script.resolvePath(QMLAPP_URL), {
title: 'Workload Inspector',
flags: Desktop.ALWAYS_ON_TOP,
additionalFlags: Desktop.ALWAYS_ON_TOP,
presentationMode: Desktop.PresentationMode.NATIVE,
size: {x: 400, y: 600}
});

View file

@ -93,7 +93,7 @@ module.exports = (function() {
var windowRect = getWindowRect(this.settingsKey, defaultRect);
this.window = Desktop.createWindow(this.qmlPath, {
title: this.title,
flags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
additionalFlags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
presentationMode: Desktop.PresentationMode.NATIVE,
size: windowRect.size,
visible: true,

View file

@ -15,6 +15,7 @@
// START CONFIG OPTIONS
var DOCKED_QML_SUPPORTED = true;
var SHOW_PROTOTYPE_EMOTE_APP = false;
var TOOLBAR_NAME = "com.highfidelity.interface.toolbar.system";
var DEFAULT_SCRIPTS_PATH_PREFIX = ScriptDiscoveryService.defaultScriptsPath + "/";
// END CONFIG OPTIONS
@ -101,6 +102,12 @@ var AVATAR_APP_HEIGHT_PX = 615;
var avatarAppWindow = false;
var POPOUT_SAFE_MARGIN_X = 30;
var POPOUT_SAFE_MARGIN_Y = 30;
var AVATAR_APP_WINDOW_FLAGS = 0x00000001 | // Qt::Window
0x00001000 | // Qt::WindowTitleHint
0x00002000 | // Qt::WindowSystemMenuHint
0x08000000 | // Qt::WindowCloseButtonHint
0x00008000 | // Qt::WindowMaximizeButtonHint
0x00004000; // Qt::WindowMinimizeButtonHint
function toggleAvatarApp() {
if (avatarAppWindow) {
avatarAppWindow.close();
@ -121,7 +128,8 @@ function toggleAvatarApp() {
position: {
x: Math.max(Window.x + POPOUT_SAFE_MARGIN_X, Window.x + Window.innerWidth / 2 - AVATAR_APP_WIDTH_PX / 2),
y: Math.max(Window.y + POPOUT_SAFE_MARGIN_Y, Window.y + Window.innerHeight / 2 - AVATAR_APP_HEIGHT_PX / 2)
}
},
overrideFlags: AVATAR_APP_WINDOW_FLAGS
});
avatarAppWindow.fromQml.connect(onMessageFromAvatarApp);
@ -166,6 +174,12 @@ var SETTINGS_APP_WINDOW_TITLE = "Settings";
var SETTINGS_APP_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
var SETTINGS_APP_WIDTH_PX = 480;
var SETTINGS_APP_HEIGHT_PX = 615;
var SETTINGS_APP_WINDOW_FLAGS = 0x00000001 | // Qt::Window
0x00001000 | // Qt::WindowTitleHint
0x00002000 | // Qt::WindowSystemMenuHint
0x08000000 | // Qt::WindowCloseButtonHint
0x00008000 | // Qt::WindowMaximizeButtonHint
0x00004000; // Qt::WindowMinimizeButtonHint
var settingsAppWindow = false;
function toggleSettingsApp() {
if (settingsAppWindow) {
@ -187,13 +201,81 @@ function toggleSettingsApp() {
position: {
x: Math.max(Window.x + POPOUT_SAFE_MARGIN_X, Window.x + Window.innerWidth / 2 - SETTINGS_APP_WIDTH_PX / 2),
y: Math.max(Window.y + POPOUT_SAFE_MARGIN_Y, Window.y + Window.innerHeight / 2 - SETTINGS_APP_HEIGHT_PX / 2)
}
},
overrideFlags: SETTINGS_APP_WINDOW_FLAGS
});
settingsAppWindow.fromQml.connect(onMessageFromSettingsApp);
settingsAppWindow.closed.connect(onSettingsAppClosed);
}
function updateEmoteAppBarPosition() {
if (!emoteAppBarWindow) {
return;
}
emoteAppBarWindow.position = {
x: Window.x + EMOTE_APP_BAR_LEFT_MARGIN,
y: Window.y + Window.innerHeight - EMOTE_APP_BAR_BOTTOM_MARGIN
};
}
var EMOTE_APP_BAR_MESSAGE_SOURCE = "EmoteAppBar.qml";
function onMessageFromEmoteAppBar(message) {
if (message.source !== EMOTE_APP_BAR_MESSAGE_SOURCE) {
return;
}
switch (message.method) {
default:
console.log("Unrecognized message from " + EMOTE_APP_BAR_MESSAGE_SOURCE + ": " + JSON.stringify(message));
break;
}
}
function onEmoteAppBarClosed() {
if (emoteAppBarWindow) {
emoteAppBarWindow.fromQml.disconnect(onMessageFromEmoteAppBar);
emoteAppBarWindow.closed.disconnect(onEmoteAppClosed);
}
emoteAppBarWindow = false;
}
var EMOTE_APP_BAR_QML_PATH = Script.resourcesPath() + "qml/hifi/simplifiedUI/emoteApp/bar/EmoteAppBar.qml";
var EMOTE_APP_BAR_WINDOW_TITLE = "Emote";
var EMOTE_APP_BAR_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
var EMOTE_APP_BAR_WIDTH_PX = 48;
var EMOTE_APP_BAR_HEIGHT_PX = 48;
var EMOTE_APP_BAR_LEFT_MARGIN = 48;
var EMOTE_APP_BAR_BOTTOM_MARGIN = 48;
var EMOTE_APP_BAR_WINDOW_FLAGS = 0x00000001 | // Qt::Window
0x00000800 | // Qt::FramelessWindowHint
0x40000000 | // Qt::NoDropShadowWindowHint
0x00200000; // Qt::WindowDoesNotAcceptFocus
var emoteAppBarWindow = false;
function showEmoteAppBar() {
emoteAppBarWindow = Desktop.createWindow(EMOTE_APP_BAR_QML_PATH, {
title: EMOTE_APP_BAR_WINDOW_TITLE,
presentationMode: EMOTE_APP_BAR_PRESENTATION_MODE,
size: {
x: EMOTE_APP_BAR_WIDTH_PX,
y: EMOTE_APP_BAR_HEIGHT_PX
},
position: {
x: Window.x + EMOTE_APP_BAR_LEFT_MARGIN,
y: Window.y + Window.innerHeight - EMOTE_APP_BAR_BOTTOM_MARGIN
},
overrideFlags: EMOTE_APP_BAR_WINDOW_FLAGS
});
emoteAppBarWindow.fromQml.connect(onMessageFromEmoteAppBar);
emoteAppBarWindow.closed.connect(onEmoteAppBarClosed);
}
function maybeDeleteOutputDeviceMutedOverlay() {
if (outputDeviceMutedOverlay) {
@ -455,6 +537,8 @@ function onGeometryChanged(rect) {
"y": rect.y
};
}
updateEmoteAppBarPosition();
}
function onDisplayModeChanged(isHMDMode) {
@ -547,6 +631,10 @@ function startup() {
AvatarInputs.showAudioTools = false;
oldShowBubbleTools = AvatarInputs.showBubbleTools;
AvatarInputs.showBubbleTools = false;
if (SHOW_PROTOTYPE_EMOTE_APP) {
showEmoteAppBar();
}
}
@ -586,6 +674,10 @@ function shutdown() {
settingsAppWindow.close();
}
if (emoteAppBarWindow) {
emoteAppBarWindow.close();
}
maybeDeleteInputDeviceMutedOverlay();
maybeDeleteOutputDeviceMutedOverlay();

View file

@ -848,7 +848,7 @@ var toolBar = (function () {
var DIALOG_WINDOW_SIZE = { x: 500, y: 300 };
dialogWindow = Desktop.createWindow(qmlPath, {
title: "New " + entityType + " Entity",
flags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
additionalFlags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
presentationMode: Desktop.PresentationMode.NATIVE,
size: DIALOG_WINDOW_SIZE,
visible: true

View file

@ -93,7 +93,7 @@ module.exports = (function() {
var windowRect = getWindowRect(this.settingsKey, defaultRect);
this.window = Desktop.createWindow(this.qmlPath, {
title: this.title,
flags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
additionalFlags: Desktop.ALWAYS_ON_TOP | Desktop.CLOSE_BUTTON_HIDES,
presentationMode: Desktop.PresentationMode.NATIVE,
size: windowRect.size,
visible: true,