mirror of
https://github.com/overte-org/overte.git
synced 2025-04-20 03:44:02 +02:00
Working on testing the QML ui
This commit is contained in:
Brad Davis
parent
1563b05278
commit
aba2b395a6
6 changed files with 384 additions and 9 deletions
236
interface/resources/qml/Palettes.qml
Normal file
236
interface/resources/qml/Palettes.qml
Normal file
|
|
@ -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
|
||||
}
|
||||
*/
|
||||
112
interface/resources/qml/TestDialog.qml
Normal file
112
interface/resources/qml/TestDialog.qml
Normal file
|
|
@ -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
|
||||
}
|
||||
*/
|
||||
26
interface/resources/qml/TestRoot.qml
Normal file
26
interface/resources/qml/TestRoot.qml
Normal file
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue