Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-06-15 15:59:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Trying to make QML UI work second launch

Browse source
This commit is contained in:
RebeccaStankus 2019-09-30 15:03:58 -07:00
parent 9a03058e88
commit 0f1190df8b
3 changed files with 86 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml
View file

@ -57,22 +57,20 @@ Rectangle {
GridLayout { GridLayout {
id: tempAvatarPageGrid id: tempAvatarPageGrid
anchors.fill: parent anchors.fill: parent
columns: root.width > root.height ? 2 : 1
rows: root.width > root.height ? 1 : 2
anchors.leftMargin: 180 anchors.leftMargin: 180
anchors.topMargin: 50 anchors.topMargin: 50
anchors.bottomMargin: 50 anchors.bottomMargin: 50
anchors.rightMargin: 100 anchors.rightMargin: 100
flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom columns: 2
// flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
Item { Item {
id: textAndQRContainer id: textAndQRContainer
Layout.preferredWidth: 600 Layout.preferredWidth: 600
Layout.preferredHeight: 650 Layout.preferredHeight: 670
Layout.minimumWidth: 200 Layout.minimumWidth: 200
Layout.maximumWidth: 800 Layout.maximumWidth: 800
Layout.topMargin: 80 Layout.topMargin: 80
Layout.fillWidth: true
HifiStylesUit.RalewayBold { HifiStylesUit.RalewayBold {
id: headerText id: headerText
@ -80,7 +78,9 @@ Rectangle {
color: "#000000" color: "#000000"
size: 48 size: 48
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
width: parent.width anchors.left: parent.left
anchors.right: parent.right
height: 100
} }
HifiStylesUit.RalewaySemiBold { HifiStylesUit.RalewaySemiBold {
@ -95,7 +95,9 @@ Rectangle {
outfits! Available now on iOS and Android Platforms." outfits! Available now on iOS and Android Platforms."
color: "#000000" color: "#000000"
size: 24 size: 24
width: parent.width anchors.left: parent.left
anchors.right: parent.right
height: 300
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
} }
@ -116,6 +118,9 @@ Rectangle {
HifiStylesUit.RalewayBold { HifiStylesUit.RalewayBold {
id: instructionText id: instructionText
anchors.left: avatarAppQRCodeImage.right anchors.left: avatarAppQRCodeImage.right
anchors.top: avatarAppQRCodeImage.top
anchors.bottom: avatarAppQRCodeImage.bottom
anchors.right: parent.right
anchors.verticalCenter: avatarAppQRCodeImage.verticalCenter anchors.verticalCenter: avatarAppQRCodeImage.verticalCenter
anchors.leftMargin: 50 anchors.leftMargin: 50
text: "Use your mobile phone to scan this QR code." text: "Use your mobile phone to scan this QR code."
@ -160,8 +165,10 @@ Rectangle {
Image { Image {
id: tempAvatarImage id: tempAvatarImage
// if I use preferred width and height, the image does not update when window changes size // if I use preferred width and height, the image does not update when window changes size
width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100 // width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100
height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187 // height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187
width: 400
height: 748
source: "images/DefaultAvatar_" + MyAvatar.skeletonModelURL.substring(123, MyAvatar.skeletonModelURL.length - 11) + ".png" source: "images/DefaultAvatar_" + MyAvatar.skeletonModelURL.substring(123, MyAvatar.skeletonModelURL.length - 11) + ".png"
} }
} }
@ -175,13 +182,14 @@ Rectangle {
HifiStylesUit.RalewaySemiBold { HifiStylesUit.RalewaySemiBold {
id: controlsDescriptionText id: controlsDescriptionText
text: "These are your avatar controls to text: "These are your avatar controls to <br></br>
<b>interact with and move around in your new HQ.</b>" <b>interact with and move around in your new HQ.</b>"
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 100 anchors.topMargin: 100
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
height: 100 height: 100
width: 850
color: "#000000" color: "#000000"
size: 36 size: 36
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
@ -190,37 +198,41 @@ Rectangle {
GridLayout { GridLayout {
id: controlsPageGrid id: controlsPageGrid
anchors.top: controlsDescriptionText.bottom anchors.top: controlsDescriptionText.bottom
anchors.topMargin: 100 anchors.topMargin: 60
anchors.bottomMargin: 100 anchors.bottomMargin: 80
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
columns: 2 columns: 2
rows: 2 columnSpacing: 50
flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom rowSpacing: 40
// flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
Image { Image {
Layout.preferredWidth: 650 Layout.preferredWidth: 450
Layout.preferredHeight: 400 Layout.preferredHeight: 280
id: walkingControls id: walkingControls
source: "images/walkingControls.png" source: "images/walkingControls.png"
} }
Image { Image {
Layout.preferredWidth: 400 Layout.preferredWidth: 450
Layout.preferredHeight: 300 Layout.preferredHeight: 240
id: mouseControls id: mouseControls
source: "images/mouseControls.png" source: "images/mouseControls.png"
} }
Image { Image {
Layout.preferredWidth: 400 Layout.preferredWidth: 300
Layout.preferredHeight: 300 Layout.preferredHeight: 200
// TODO Why is this not aligning correctly? (Same at line 235)
Layout.alignment: AlignHCenter
id: runJumpControls id: runJumpControls
source: "images/runJumpControls.png" source: "images/runJumpControls.png"
} }
Image { Image {
Layout.preferredWidth: 400 Layout.preferredWidth: 200
Layout.preferredHeight: 300 Layout.preferredHeight: 120
Layout.alignment: AlignHCenter
id: cameraControls id: cameraControls
source: "images/cameraControls.png" source: "images/cameraControls.png"
} }
@ -232,7 +244,7 @@ Rectangle {
anchors.leftMargin: 50 anchors.leftMargin: 50
anchors.bottomMargin: 50 anchors.bottomMargin: 50
text: "Learn more about our controls." text: "Learn more about our controls."
width: 100 width: 200
height: 25 height: 25
color: "#000000" color: "#000000"
opacity: learnMoreAboutControlsMouseArea.containsMouse ? 1.0 : 0.7 opacity: learnMoreAboutControlsMouseArea.containsMouse ? 1.0 : 0.7
@ -257,7 +269,7 @@ Rectangle {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: 50 anchors.bottomMargin: 50
text: "I've got a good grip on the controls." text: "I've got a good grip on the controls."
width: 350 width: 650
height: 60 height: 60
color: "#000000" color: "#000000"
opacity: goodGripMouseArea.containsMouse ? 1.0 : 0.7 opacity: goodGripMouseArea.containsMouse ? 1.0 : 0.7

64
scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml
View file

@ -23,20 +23,22 @@ Rectangle {
Image { Image {
id: topLeftAccentImage id: topLeftAccentImage
width: 400 width: 180
height: 180 height: 400
anchors.left: parent.left anchors.left: parent.left
anchors.top: parent.top anchors.top: parent.top
source: "images/standOutTopLeft.png" source: "images/standOutTopLeft.png"
z: 1
} }
Image { Image {
id: bottomRightAccentImage id: bottomRightAccentImage
width: 80 width: 250
height: 250 height: 80
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
source: "images/standOutBottomRight.png" source: "images/standOutBottomRight.png"
z: 1
} }
Item { Item {
@ -45,71 +47,83 @@ Rectangle {
GridLayout { GridLayout {
id: tempAvatarPageGrid id: tempAvatarPageGrid
anchors.fill: parent anchors.fill: parent
flow: root.width < root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
columns: root.width > root.height ? 2 : 1
rows: root.width > root.height ? 1 : 2
anchors.leftMargin: 180 anchors.leftMargin: 180
anchors.topMargin: 50 anchors.topMargin: 50
anchors.bottomMargin: 50 anchors.bottomMargin: 50
anchors.rightMargin: 100 anchors.rightMargin: 100
columns: 2
// flow: root.width < root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
Item { Item {
id: textAndQRContainer id: textAndQRContainer
width: 650 Layout.preferredWidth: 650
Layout.preferredHeight: 670
Layout.minimumWidth: 200
Layout.maximumWidth: 800
Layout.topMargin: 80 Layout.topMargin: 80
HifiStylesUit.GraphikSemiBold { HifiStylesUit.RalewayBold {
id: headerText id: headerText
text: "Stand out from the crowd!" text: "Stand out from the crowd!"
color: "#000000" color: "#000000"
size: 48 size: 48
wrapMode: Text.WordWrap
anchors.left: parent.left
anchors.right: parent.right
height: 80
} }
HifiStylesUit.GraphikSemiBold { HifiStylesUit.RalewaySemiBold {
id: descriptionText id: descriptionText
anchors.top: headerText.bottom anchors.top: headerText.bottom
anchors.topMargin: 20 text: "You can create and upload custom avatars from our Avatar Creator App. It's as easy as taking a selfie. Available now on iOS and Android Platforms."
text: "You can create and upload custom avatars from our<br></br>
Avatar Creator App. It's as easy as taking a selfie.<br></br>
Available now on iOS and Android Platforms."
color: "#000000" color: "#000000"
size: 24 size: 24
anchors.left: parent.left
anchors.right: parent.right
height: 100
wrapMode: Text.WordWrap
} }
Item { Item {
id: qrAndInstructionsContainer id: qrAndInstructionsContainer
anchors.top: descriptionText.bottom anchors.top: descriptionText.bottom
height: avatarAppQRCodeImage.height height: avatarAppQRCodeImage.height + instructionText.height + 50
width: parent.width width: parent.width
anchors.topMargin: 50 anchors.topMargin: 50
Image { Image {
id: avatarAppQRCodeImage id: avatarAppQRCodeImage
anchors.horizontalCenter: parent.horizontalCenter
source: "images/qrCode.jpg" source: "images/qrCode.jpg"
height: 200 height: 200
width: 200 width: 200
} }
HifiStylesUit.GraphikSemiBold { HifiStylesUit.RalewayBold {
id: instructionText id: instructionText
anchors.left: parent.left
anchors.right: parent.right
anchors.top: avatarAppQRCodeImage.bottom anchors.top: avatarAppQRCodeImage.bottom
anchors.horizontalCenter: avatarAppQRCodeImage.horizontalCenter anchors.horizontalCenter: avatarAppQRCodeImage.horizontalCenter
anchors.topMargin: 50
text: "Use your mobile phone to scan this QR code." text: "Use your mobile phone to scan this QR code."
color: "#000000" color: "#000000"
size: 24 size: 24
height: 60
wrapMode: Text.WordWrap
} }
} }
HifiStylesUit.RalewayBold { HifiStylesUit.RalewayBold {
text: "No thanks, I'll keep using my default avatar."
anchors.top: qrAndInstructionsContainer.bottom anchors.top: qrAndInstructionsContainer.bottom
anchors.topMargin: 50 anchors.topMargin: 50
anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter
text: "No thanks, I'll keep using my default avatar."
color: "#000000" color: "#000000"
opacity: continueMouseArea.containsMouse ? 1.0 : 0.8 opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
size: 20 size: 20
z: 1 z: 1
wrapMode: Text.WordWrap
MouseArea { MouseArea {
id: continueMouseArea id: continueMouseArea
@ -127,24 +141,26 @@ Rectangle {
} }
} }
} }
}
Item { Item {
id: heroImageContainer id: heroImageContainer
Layout.leftMargin: 50 Layout.leftMargin: 50
// these don't change when the window resizes // these don't change when the window resizes
width: tempAvatarImage.width Layout.preferredWidth: heroImage.width
height: tempAvatarImage.height Layout.preferredHeight: heroImage.height
Image { Image {
id: heroImage id: heroImage
// if I use preferred width and height, the image does not update when window changes size // if I use preferred width and height, the image does not update when window changes size
width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100 // width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100
height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187 // height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187
width: 400
height: 748
source: "images/hero.png" source: "images/hero.png"
} }
} }
} }
}
signal sendToScript(var message); signal sendToScript(var message);
} }

4
scripts/simplifiedUI/ui/simplifiedUI.js
View file

@ -469,10 +469,6 @@ function onMessageFromInitialLaunchWindow(message) {
closeInitialLaunchWindow(); closeInitialLaunchWindow();
break; break;
case "closeSecondLaunchWindow":
closeSecondLaunchWindow();
break;
default: default:
console.log("Unrecognized message from " + INITIAL_LAUNCH_WINDOW_MESSAGE_SOURCE + ": " + JSON.stringify(message)); console.log("Unrecognized message from " + INITIAL_LAUNCH_WINDOW_MESSAGE_SOURCE + ": " + JSON.stringify(message));
break; break;