Working on UI

scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml

@@ -18,8 +18,11 @@ import hifi.simplifiedUI.simplifiedControls 1.0 as SimplifiedControls
 
 Rectangle {
     id: root
-    color: simplifiedUI.colors.white
+    // cannot get anything from SimplifiedConstants to work: simplifiedUI.colors.white 
+    // TODO figure out why and fix
+    color: "#ffffff"
     anchors.fill: parent
+    z: 1
 
     Component.onCompleted: {
         if (Settings.getValue("simplifiedUI/alreadyAutoSelectedAvatar", false)) {
@@ -30,20 +33,22 @@ Rectangle {
 
     Image {
         id: topLeftAccentImage
-        width: 60
+        width: 400
-        height: 150
+        height: 180
         anchors.left: parent.left
         anchors.top: parent.top
         source: "images/defaultTopLeft.png"
+        z: 3
     }
 
     Image {
         id: bottomRightAccentImage
-        width: 30
+        width: 80
-        height: 100
+        height: 250
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         source: "images/defaultBottomRight.png"
+        z: 3
     }
 
     Item {
@@ -53,82 +58,86 @@ Rectangle {
         GridLayout {
             id: tempAvatarPageGrid
             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.topMargin: 50
+            anchors.bottomMargin: 50
+            anchors.rightMargin: 100
+            flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
 
             Item {
                 id: textAndQRContainer
+                width: 650
+                Layout.topMargin: 80
 
-                HifiStylesUit.GraphikSemiBold {
+                HifiStylesUit.RalewayBold {
                     id: headerText
-                    width: 700
-                    height: 120
                     text: "We know this isn't you..."
-                    anchors.fill: parent
+                    color: "#000000"
-                    horizontalAlignment: Text.AlignHCenter
+                    size: 48
-                    verticalAlignment: Text.AlignVCenter
+                    z: 2
-                    color: simplifiedUI.colors.text.darkGrey
-                    size: 36
                 }
 
-                HifiStylesUit.GraphikSemiBold {
+                HifiStylesUit.RalewaySemiBold {
-                    width: 700
+                    id: descriptionText
-                    height: 500
+                    anchors.top: headerText.bottom
+                    anchors.topMargin: 20
                     text: "But, we've given you this <b>temporary avatar</b> to use<br></br>
                     for today. If you see this avatar in-world, walk up and<br></br>
                     say hello to other new users!<br></br><br></br>
                     <b>We want you to be you</b> so we've built an Avatar Creator<br></br>
                     App that's as easy as taking a selfie and picking your<br></br>
                     outfits! Available now on iOS and Android Platforms."
-                    anchors.top: headerText.bottom
+                    color: "#000000"
-                    horizontalAlignment: Text.AlignHLeft
-                    verticalAlignment: Text.AlignVCenter
-                    color: simplifiedUI.colors.text.darkGrey
                     size: 24
+                    z: 2
                 }
 
                 Item {
                     id: qrAndInstructionsContainer
+                    anchors.top: descriptionText.bottom
+                    height: avatarAppQRCodeImage.height
+                    width: parent.width
+                    anchors.topMargin: 50
+                    z: 2
 
                     Image {
                         id: avatarAppQRCodeImage
-                        width: 200
+                        source: "images/qrCode.jpg"
                         height: 200
-                        anchors.right: parent.right
+                        width: 200
-                        anchors.bottom: parent.bottom
-                        source: "images/qrCode.png"
                     }
 
-                    HifiStylesUit.GraphikSemiBold {
+                    HifiStylesUit.RalewayBold {
-                        width: 600
+                        id: instructionText
-                        height: 80
                         text: "Use your mobile phone to scan this QR code."
                         anchors.left: avatarAppQRCodeImage.right
-                        horizontalAlignment: Text.AlignHCenter
+                        anchors.verticalCenter: avatarAppQRCodeImage.verticalCenter
-                        verticalAlignment: Text.AlignVCenter
+                        anchors.leftMargin: 50
-                        color: simplifiedUI.colors.text.darkGrey
+                        color: "#000000"
                         size: 24
                     }
                 }
 
-                HifiStylesUit.GraphikSemiBold {
+                HifiStylesUit.RalewayBold {
-                    width: 250
-                    height: 120
                     text: "Continue"
-                    anchors.fill: parent
+                    anchors.top: qrAndInstructionsContainer.bottom
-                    horizontalAlignment: Text.AlignHCenter
+                    anchors.topMargin: 50
-                    verticalAlignment: Text.AlignVCenter
+                    anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter
-                    color: simplifiedUI.colors.text.lightBlue
+                    color: "#000000"
-                    opacity: continueMouseArea.containsMouse ? 1.0 : 0.8
+                    opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
-                    size: 30
+                    size: 36
+                    z: 2
 
                     MouseArea {
                         id: continueMouseArea
-                        hoverEnabled: false
+                        hoverEnabled: true
                         anchors.fill: parent
 
                         onClicked: {
                             Tablet.playSound(TabletEnums.ButtonClick);
-                            Print("CONTINUE CLICKED");
+                            print("CONTINUE CLICKED");
                             tempAvatarPageContainer.visible = false;
                             controlsContainer.visible = true;
                         }
@@ -138,10 +147,18 @@ Rectangle {
 
             Item {
                 id: tempAvatarImageContainer
+                Layout.leftMargin: 50
+                // these don't change when the window resizes
+                width: tempAvatarImage.width
+                height: tempAvatarImage.height
+                z: 1
+
+
                 Image {
                     id: tempAvatarImage
-                    width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 250 : 500
+                    // if I use preferred width and height, the image does not update when window changes size
-                    height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 500 : 1000
+                    width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100
+                    height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187
                     source: "images/DefaultAvatar_" + MyAvatar.skeletonModelURL.substring(123, MyAvatar.skeletonModelURL.length - 11) + ".png"
                 }
             }
@@ -151,73 +168,67 @@ Rectangle {
     Item {
         id: controlsContainer
         visible: false
+        anchors.fill: parent
 
-        HifiStylesUit.GraphikSemiBold {
+        HifiStylesUit.RalewaySemiBold {
+            id: controlsDescriptionText
             text: "These are your avatar controls to<br></br>
             <b>Interact with and move around in your new HQ.</b>"
-            anchors.fill: parent
+            anchors.top: parent.top
+            anchors.topMargin: 100
+            anchors.horizontalCenter: parent.horizontalCenter
             horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
+            height: 100
-            color: simplifiedUI.colors.text.darkGrey
+            color: "#000000"
-            size: 34
+            size: 36
         }
 
         GridLayout {
-            Item {
+            id: controlsPageGrid
-                id: controlsImagesContainer
+            anchors.top: controlsDescriptionText.bottom
-                Item {
+            anchors.topMargin: 100
-                    Image {
+            anchors.bottomMargin: 100
-                        id: walkingControls
+            anchors.horizontalCenter: parent.horizontalCenter
-                        width: 500
+            columns: 2
-                        height: 350
+            rows: 2
-                        source: "images/walkingControls.png"
+            flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
-                    }
+          
-                }
+            Image {
+                id: walkingControls
+                source: "images/walkingControls.png"
+            }
+              
+            Image {
+                id: mouseControls
+                source: "images/mouseControls.png"
+            }
 
-                Item {
+            Image {
-                    Image {
+                id: runJumpControls
-                        id: mouseControls
+                source: "images/runJumpControls.png"
-                        width: 600
+            }
-                        height: 350
-                        source: "images/mouseControls.png"
-                    }
-                }
 
-                Item {
+            Image {
-                    Image {
+                id: cameraControls
-                        id: runJumpControls
+                source: "images/cameraControls.png"
-                        width: 300
-                        height: 250
-                        source: "images/runJumpControls.png"
-                    }
-                }
-
-                Item {
-                    Image {
-                        id: cameraControls
-                        width: 500
-                        height: 50
-                        source: "images/cameraControls.png"
-                    }
-                }
             }
         }
 
-        HifiStylesUit.GraphikSemiBold {
+        HifiStylesUit.RalewayBold {
             text: "Learn more about our controls."
             anchors.bottom: parent.bottom
             anchors.left: parent.left
-            width: 200
+            anchors.leftMargin: 50
-            height: 50
+            anchors.bottomMargin: 50
-            horizontalAlignment: Text.AlignHCenter
+            width: 100
-            verticalAlignment: Text.AlignVCenter
+            height: 25
-            color: simplifiedUI.colors.text.lightBlue
+            color: "#000000"
-            opacity: learnMoreAboutControlsMouseArea.containsMouse ? 1.0 : 0.8
+            opacity: learnMoreAboutControlsMouseArea.containsMouse ? 1.0 : 0.7
-            size: 12
+            size: 14
 
             MouseArea {
                 id: learnMoreAboutControlsMouseArea
-                hoverEnabled: false
+                hoverEnabled: true
                 anchors.fill: parent
 
                 onClicked: {
@@ -228,20 +239,20 @@ Rectangle {
             }
         }
 
-        HifiStylesUit.GraphikSemiBold {
+        HifiStylesUit.RalewayBold {
             text: "I've got a good grip on the controls."
             anchors.bottom: parent.bottom
-            width: 700
+            anchors.horizontalCenter: parent.horizontalCenter
-            height: 120
+            anchors.bottomMargin: 50
-            horizontalAlignment: Text.AlignHCenter
+            width: 350
-            verticalAlignment: Text.AlignVCenter
+            height: 60
-            color: simplifiedUI.colors.text.lightBlue
+            color: "#000000"
-            opacity: goodGripMouseArea.containsMouse ? 1.0 : 0.8
+            opacity: goodGripMouseArea.containsMouse ? 1.0 : 0.7
-            size: 30
+            size: 36
 
             MouseArea {
                 id: goodGripMouseArea
-                hoverEnabled: false
+                hoverEnabled: true
                 anchors.fill: parent
 
                 onClicked: {

scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml

@@ -18,7 +18,7 @@ import hifi.simplifiedUI.simplifiedControls 1.0 as SimplifiedControls
 
 Rectangle {
     id: root
-    color: simplifiedUI.colors.white
+    color: "#ffffff"
     anchors.fill: parent
 
     Image {
@@ -57,7 +57,7 @@ Rectangle {
                     anchors.fill: parent
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
-                    color: simplifiedUI.colors.text.darkGrey
+                    color: "#000000"
                     size: 36
                 }
 
@@ -70,7 +70,7 @@ Rectangle {
                     anchors.top: headerText.bottom
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
-                    color: simplifiedUI.colors.text.darkGrey
+                    color: "#000000"
                     size: 24
                 }
 
@@ -81,7 +81,7 @@ Rectangle {
                         id: avatarAppQRCodeImage
                         width: 200
                         height: 200
-                        source: "images/qrCode.png"
+                        source: "images/qrCode.jpg"
                     }
 
                     HifiStylesUit.GraphikSemiBold {
@@ -91,7 +91,7 @@ Rectangle {
                         anchors.top: avatarAppQRCodeImage.bottom
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
-                        color: simplifiedUI.colors.text.darkGrey
+                        color: "#000000"
                         size: 24
                     }
                 }
@@ -101,7 +101,7 @@ Rectangle {
                     anchors.fill: parent
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
-                    color: simplifiedUI.colors.text.lightBlue
+                    color: "#000000"
                     opacity: noThanksMouseArea.containsMouse ? 1.0 : 0.8
                     size: 12
 

scripts/simplifiedUI/ui/simplifiedUI.js

@@ -358,17 +358,20 @@ function setOutputMuted(outputMuted) {
     }
 }
 
-var INITIAL_LAUNCH_QML_PATH = Script.resolvePath("simplifiedFTUE/InitialLaunchWindow.qml");
+var INITIAL_LAUNCH_QML_PATH = Script.resolvePath("./simplifiedFTUE/InitialLaunchWindow.qml");
 var INITIAL_LAUNCH_WINDOW_TITLE = "Initial Launch";
 var INITIAL_LAUNCH_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
 var INITIAL_LAUNCH_WIDTH_PX = Window.innerWidth;
-var INITIAL_LAUNCH_HEIGHT_PX = Window.innerHeight + TOP_BAR_HEIGHT_PX;
+// TODO use TOP_BAR_HEIGHT_PX instead of 48. Why is this not working?
+var INITIAL_LAUNCH_HEIGHT_PX = Window.innerHeight + 48;
 var INITIAL_WINDOW_FLAGS = 0x00000001 | // Qt::Window
 0x00000008 | // Qt::Popup
 0x00000800 | // Qt::FramelessWindowHint
 0x40000000; // Qt::NoDropShadowWindowHint
 var initialLaunchWindow = false;
 function displayInitialLaunchWindow() {
+    //TODO REMOVE ME
+    print("MILAD TESTING 3");
     print("DISPLAY INITIAL LAUNCH WINDOW.");
     if (initialLaunchWindow) {
         initialLaunchWindow.close();
@@ -394,14 +397,15 @@ function displayInitialLaunchWindow() {
 
     initialLaunchWindow.fromQml.connect(onMessageFromInitialLaunchWindow);
 
-    Window.location = "file:///~serverless/tutorial.json";
+    Window.location = "file:///~/serverless/tutorial.json";
 }
 
 var SECOND_LAUNCH_QML_PATH = Script.resolvePath("simplifiedFTUE/SecondLaunchWindow.qml");
 var SECOND_LAUNCH_WINDOW_TITLE = "Second Launch";
 var SECOND_LAUNCH_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
 var SECOND_LAUNCH_WIDTH_PX = Window.innerWidth;
-var SECOND_LAUNCH_HEIGHT_PX = Window.innerHeight + TOP_BAR_HEIGHT_PX;
+// TODO use TOP_BAR_HEIGHT_PX instead of 48. Why is this not working?
+var SECOND_LAUNCH_HEIGHT_PX = Window.innerHeight + 48;
 var SECOND_WINDOW_FLAGS = 0x00000001 | // Qt::Window
 0x00000008 | // Qt::Popup
 0x00000800 | // Qt::FramelessWindowHint
@@ -433,20 +437,24 @@ function displaySecondLaunchWindow() {
 
     secondLaunchWindow.fromQml.connect(onMessageFromSecondLaunchWindow);
 
-    Window.location = "file:///~serverless/tutorial.json";
+    Window.location = "file:///~/serverless/tutorial.json";
 }
 
 function closeInitialLaunchWindow() {
     initialLaunchWindow.fromQml.disconnect(onMessageFromInitialLaunchWindow);
-    // TODO make this go to bookmark
+    var homeLocation = LocationBookmarks.getAddress("hqhome");
-    // Window.location = "hqhome";
+    if (homeLocation) {
+        Window.location = "hqhome";
+    }
     initialLaunchWindow.close();
 }
 
 function closeSecondLaunchWindow() {
     secondLaunchWindow.fromQml.disconnect(onMessageFromSecondLaunchWindow);
-    // TODO make this go to bookmark
+    var homeLocation = LocationBookmarks.getAddress("hqhome");
-    // Window.location = "hqhome";
+    if (homeLocation) {
+        Window.location = "hqhome";
+    }
     secondLaunchWindow.close();
 }
 
@@ -535,7 +543,6 @@ function onMessageFromTopBar(message) {
 
         case "displaySecondLaunchWindow":
             displaySecondLaunchWindow();
-            print("DISPLAY SECOND LAUNCH WINDOW");
             break;
 
         default:
@@ -675,13 +682,33 @@ function onGeometryChanged(rect) {
             "y": rect.y
         };
     }
+    if (secondLaunchWindow) {
+        secondLaunchWindow.size = {
+            "x": rect.width,
+            "y": rect.height
+        };
+        secondLaunchWindow.position = {
+            "x": rect.x,
+            "y": rect.y
+        };
+    }
 }
 
 function onWindowMinimizedChanged(isMinimized) {
     if (isMinimized) {
-        initialLaunchWindow.setVisible(false);
+        if (initialLaunchWindow) {
+            initialLaunchWindow.setVisible(false);
+        }
+        if (secondLaunchWindow) {
+            secondLaunchWindow.setVisible(false);
+        }
     } else {
-        initialLaunchWindow.show();
+        if (initialLaunchWindow) {
+            initialLaunchWindow.show();
+        }
+        if (secondLaunchWindow) {
+            secondLaunchWindow.show();
+        }
     }
 }