From aba2b395a6769bd91df352506e63fd47391e240c Mon Sep 17 00:00:00 2001 From: Brad Davis Date: Wed, 15 Apr 2015 12:35:30 -0700 Subject: [PATCH] Working on testing the QML ui --- interface/resources/qml/Palettes.qml | 236 +++++++++++++++++++++ interface/resources/qml/TestDialog.qml | 112 ++++++++++ interface/resources/qml/TestRoot.qml | 26 +++ interface/src/ui/ApplicationOverlay.h | 3 +- libraries/render-utils/src/OffscreenUi.cpp | 5 +- tests/render-utils/src/main.cpp | 11 +- 6 files changed, 384 insertions(+), 9 deletions(-) create mode 100644 interface/resources/qml/Palettes.qml create mode 100644 interface/resources/qml/TestDialog.qml create mode 100644 interface/resources/qml/TestRoot.qml diff --git a/interface/resources/qml/Palettes.qml b/interface/resources/qml/Palettes.qml new file mode 100644 index 0000000000..c4b0953df7 --- /dev/null +++ b/interface/resources/qml/Palettes.qml @@ -0,0 +1,236 @@ +import QtQuick 2.3 +import QtQuick.Controls 1.2 +import QtQuick.Window 2.2 +import QtQuick.Dialogs 1.2 +import QtQuick.Controls.Styles 1.3 + +Rectangle { + color: "teal" + height: 512 + width: 192 + SystemPalette { id: sp; colorGroup: SystemPalette.Active } + SystemPalette { id: spi; colorGroup: SystemPalette.Inactive } + SystemPalette { id: spd; colorGroup: SystemPalette.Disabled } + + Column { + anchors.margins: 8 + anchors.fill: parent + spacing: 8 + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "base" } + Rectangle { height: parent.height; width: 16; color: sp.base } + Rectangle { height: parent.height; width: 16; color: spi.base } + Rectangle { height: parent.height; width: 16; color: spd.base } + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "alternateBase" } + Rectangle { height: parent.height; width: 16; color: sp.alternateBase } + Rectangle { height: parent.height; width: 16; color: spi.alternateBase } + Rectangle { height: parent.height; width: 16; color: spd.alternateBase } + } + Item { + height: 16 + width:parent.width + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "dark" } + Rectangle { height: parent.height; width: 16; color: sp.dark } + Rectangle { height: parent.height; width: 16; color: spi.dark } + Rectangle { height: parent.height; width: 16; color: spd.dark } + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "mid" } + Rectangle { height: parent.height; width: 16; color: sp.mid } + Rectangle { height: parent.height; width: 16; color: spi.mid } + Rectangle { height: parent.height; width: 16; color: spd.mid } + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "mid light" } + Rectangle { height: parent.height; width: 16; color: sp.midlight } + Rectangle { height: parent.height; width: 16; color: spi.midlight } + Rectangle { height: parent.height; width: 16; color: spd.midlight } + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "light" } + Rectangle { height: parent.height; width: 16; color: sp.light} + Rectangle { height: parent.height; width: 16; color: spi.light} + Rectangle { height: parent.height; width: 16; color: spd.light} + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "shadow" } + Rectangle { height: parent.height; width: 16; color: sp.shadow} + Rectangle { height: parent.height; width: 16; color: spi.shadow} + Rectangle { height: parent.height; width: 16; color: spd.shadow} + } + Item { + height: 16 + width:parent.width + } + + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "text" } + Rectangle { height: parent.height; width: 16; color: sp.text } + Rectangle { height: parent.height; width: 16; color: spi.text } + Rectangle { height: parent.height; width: 16; color: spd.text } + } + Item { + height: 16 + width:parent.width + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "window" } + Rectangle { height: parent.height; width: 16; color: sp.window } + Rectangle { height: parent.height; width: 16; color: spi.window } + Rectangle { height: parent.height; width: 16; color: spd.window } + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "window text" } + Rectangle { height: parent.height; width: 16; color: sp.windowText } + Rectangle { height: parent.height; width: 16; color: spi.windowText } + Rectangle { height: parent.height; width: 16; color: spd.windowText } + } + Item { + height: 16 + width:parent.width + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "button" } + Rectangle { height: parent.height; width: 16; color: sp.button } + Rectangle { height: parent.height; width: 16; color: spi.button } + Rectangle { height: parent.height; width: 16; color: spd.button } + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "buttonText" } + Rectangle { height: parent.height; width: 16; color: sp.buttonText } + Rectangle { height: parent.height; width: 16; color: spi.buttonText } + Rectangle { height: parent.height; width: 16; color: spd.buttonText } + } + Item { + height: 16 + width:parent.width + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "highlight" } + Rectangle { height: parent.height; width: 16; color: sp.highlight } + Rectangle { height: parent.height; width: 16; color: spi.highlight } + Rectangle { height: parent.height; width: 16; color: spd.highlight } + } + Row { + width: parent.width + height: 16 + Text { height: parent.height; width: 128; text: "highlighted text" } + Rectangle { height: parent.height; width: 16; color: sp.highlightedText} + Rectangle { height: parent.height; width: 16; color: spi.highlightedText} + Rectangle { height: parent.height; width: 16; color: spd.highlightedText} + } + } + + +/* + CustomDialog { + title: "Test Dlg" + anchors.fill: parent + + Rectangle { + property int d: 100 + id: square + objectName: "testRect" + width: d + height: d + anchors.centerIn: parent + color: "red" + NumberAnimation on rotation { from: 0; to: 360; duration: 2000; loops: Animation.Infinite; } + } + + + CustomTextEdit { + anchors.left: parent.left + anchors.leftMargin: 12 + anchors.right: parent.right + anchors.rightMargin: 12 + clip: true + text: "test edit" + anchors.top: parent.top + anchors.topMargin: parent.titleSize + 12 + } + + CustomButton { + x: 128 + y: 192 + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + anchors.right: parent.right + anchors.rightMargin: 12 + onClicked: { + console.log("Click"); + if (square.visible) { + square.visible = false + } else { + square.visible = true + } + } + } + + CustomButton { + id: customButton2 + y: 192 + text: "Close" + anchors.left: parent.left + anchors.leftMargin: 12 + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + onClicked: { + onClicked: testDialog.x == 0 ? testDialog.x = 200 : testDialog.x = 0 + } + } + + Keys.onPressed: { + console.log("Key " + event.key); + switch (event.key) { + case Qt.Key_Q: + if (Qt.ControlModifier == event.modifiers) { + event.accepted = true; + break; + } + } + } + } +*/ + +} + + +/* + +// This is the behavior, and it applies a NumberAnimation to any attempt to set the x property + +MouseArea { + anchors.fill: parent +} +*/ diff --git a/interface/resources/qml/TestDialog.qml b/interface/resources/qml/TestDialog.qml new file mode 100644 index 0000000000..9c8bcccd75 --- /dev/null +++ b/interface/resources/qml/TestDialog.qml @@ -0,0 +1,112 @@ +import QtQuick 2.3 +import QtQuick.Controls 1.2 +import QtQuick.Window 2.2 +import QtQuick.Dialogs 1.2 +import QtQuick.Controls.Styles 1.3 + +Item { + objectName: "TestDialog" + id: testDialog + width: 384 + height: 384 + scale: 0.0 + + onEnabledChanged: { + scale = enabled ? 1.0 : 0.0 + } + onScaleChanged: { + visible = (scale != 0.0); + } + Component.onCompleted: { + scale = 1.0 + } + Behavior on scale { + NumberAnimation { + //This specifies how long the animation takes + duration: 400 + //This selects an easing curve to interpolate with, the default is Easing.Linear + easing.type: Easing.InOutBounce + } + } + + CustomDialog { + title: "Test Dlg" + anchors.fill: parent + + Rectangle { + property int d: 100 + id: square + objectName: "testRect" + width: d + height: d + anchors.centerIn: parent + color: "red" + NumberAnimation on rotation { from: 0; to: 360; duration: 2000; loops: Animation.Infinite; } + } + + + CustomTextEdit { + anchors.left: parent.left + anchors.leftMargin: 12 + anchors.right: parent.right + anchors.rightMargin: 12 + clip: true + text: "test edit" + anchors.top: parent.top + anchors.topMargin: parent.titleSize + 12 + } + + CustomButton { + x: 128 + y: 192 + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + anchors.right: parent.right + anchors.rightMargin: 12 + onClicked: { + console.log("Click"); + if (square.visible) { + square.visible = false + } else { + square.visible = true + } + } + } + + CustomButton { + id: customButton2 + y: 192 + text: "Close" + anchors.left: parent.left + anchors.leftMargin: 12 + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + onClicked: { + onClicked: testDialog.x == 0 ? testDialog.x = 200 : testDialog.x = 0 + } + } + + Keys.onPressed: { + console.log("Key " + event.key); + switch (event.key) { + case Qt.Key_Q: + if (Qt.ControlModifier == event.modifiers) { + event.accepted = true; + break; + } + } + } + } + + +} + + +/* + +// This is the behavior, and it applies a NumberAnimation to any attempt to set the x property + +MouseArea { + anchors.fill: parent +} +*/ diff --git a/interface/resources/qml/TestRoot.qml b/interface/resources/qml/TestRoot.qml new file mode 100644 index 0000000000..a3ef5f8fe9 --- /dev/null +++ b/interface/resources/qml/TestRoot.qml @@ -0,0 +1,26 @@ +import QtQuick 2.3 +import "componentCreation.js" as Creator + + +Item { + id: root + width: 1280 + height: 720 + + function loadChild(url) { + Creator.createObject(root, url) + } + + + CustomButton { + anchors.right: parent.right + anchors.rightMargin: 24 + anchors.bottom: parent.bottom + anchors.bottomMargin: 24 + text: "Test" + onClicked: { + loadChild("TestDialog.qml"); + } + } +} + diff --git a/interface/src/ui/ApplicationOverlay.h b/interface/src/ui/ApplicationOverlay.h index cc4188e8ef..e6c7526c5d 100644 --- a/interface/src/ui/ApplicationOverlay.h +++ b/interface/src/ui/ApplicationOverlay.h @@ -23,7 +23,8 @@ const float MAGNIFY_MULT = 2.0f; const float DEFAULT_OCULUS_UI_ANGULAR_SIZE = 72.0f; // Handles the drawing of the overlays to the screen -class ApplicationOverlay { +class ApplicationOverlay : public QObject { + Q_OBJECT public: ApplicationOverlay(); ~ApplicationOverlay(); diff --git a/libraries/render-utils/src/OffscreenUi.cpp b/libraries/render-utils/src/OffscreenUi.cpp index cb57d86412..718a70f4e1 100644 --- a/libraries/render-utils/src/OffscreenUi.cpp +++ b/libraries/render-utils/src/OffscreenUi.cpp @@ -308,9 +308,10 @@ void OffscreenUi::toggle(const QUrl & url, const QString & name) { // Toggle the visibity AND the enabled flag (otherwise invisible // dialogs can still swallow keyboard input) - bool newFlag = !item->isVisible(); - item->setVisible(newFlag); + bool newFlag = !item->isEnabled(); item->setEnabled(newFlag); + // item->setVisible(newFlag); + } diff --git a/tests/render-utils/src/main.cpp b/tests/render-utils/src/main.cpp index 304d6f1a07..dd413a9f57 100644 --- a/tests/render-utils/src/main.cpp +++ b/tests/render-utils/src/main.cpp @@ -160,7 +160,7 @@ public: setFramePosition(QPoint(-1000, 0)); resize(QSize(800, 600)); - static const QString f("/Users/bdavis/Git/hifi/interface/resources/qml/Root.qml"); + static const QString f("/Users/bdavis/Git/hifi/interface/resources/qml/TestRoot.qml"); _offscreenUi.loadQml(QUrl::fromLocalFile(f)); connect(&_offscreenUi, &OffscreenUi::textureUpdated, this, [&](int textureId) { _offscreenUi.lockTexture(textureId); @@ -193,8 +193,7 @@ protected: void keyPressEvent(QKeyEvent *event) { switch (event->key()) { case Qt::Key_Slash: - qDebug() << "Foo"; - _offscreenUi.load(QString("Login.qml")); + _offscreenUi.toggle(QString("TestDialog.qml"), "TestDialog"); break; } QWindow::keyPressEvent(event); @@ -289,15 +288,15 @@ void QTestWindow::draw() { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glViewport(0, 0, _size.width(), _size.height()); - renderText(); - //renderQml(); + //renderText(); + renderQml(); _context->swapBuffers(this); glFinish(); fps.increment(); if (fps.elapsed() >= 2.0f) { - //qDebug() << "FPS: " << fps.rate(); + qDebug() << "FPS: " << fps.rate(); fps.reset(); } }