startupscreen: make UI dynamic

Dynamically adjust the UI element based on the screen size to better
handle the various screen sizes available in embedded devices.
Make states handle only the landscape - portrait changes.

Remove progress bar from splash screen and make it hide automoatically.
Remove SD card button and hide wifi button.

Change-Id: I308ad696cf4c2ee3b97adfc231cd76899152f357
Reviewed-by: Assam Boudjelthia <assam.boudjelthia@qt.io>
Reviewed-by: Rami Potinkara <rami.potinkara@qt.io>

1 files changed, 92 insertions, 432 deletions

diff --git a/startupscreen/MainView.qml b/startupscreen/MainView.qml
index e4c6522..bed57e4 100644
--- a/startupscreen/MainView.qml
+++ b/startupscreen/MainView.qml
@@ -48,13 +48,14 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.12
-import StartupScreen 1.0
+import QtQuick
+import StartupScreen
 
 Item {
     id: root
-    width: Constants.smallWidth
-    height: Constants.smallHeight
+
+    property var textNormal: panel.height / 9
+    property var textLarge: panel.height / 7
 
     Image {
         id: backgroundImage
@@ -65,37 +66,35 @@ Item {
     Item {
         id: panel
         anchors.top: root.top
-        anchors.topMargin: 20
+        anchors.topMargin: height / 10
 
         anchors.left: root.left
-        height: headerBackground.height + bodyBackground.height
-        width: Constants.smallPanelWidth
-
+        height: width / 2
+        width: root.width * 0.6
 
         Item {
             id: headerBackground
 
-            width: parent.width
-            height: Constants.smallHeaderHeight
-
+            height: parent.height / 3
             anchors.top: panel.top
             anchors.left: panel.left
+            anchors.right: panel.right
 
             Image {
                 id: headerBackgroundRight
                 source: "assets/headerBackgroundRight.png"
-                fillMode: Image.PreserveAspectFit
-                height: parent.height
+                width: height
                 anchors.right: parent.right
                 anchors.top: parent.top
+                anchors.bottom: parent.bottom
             }
             Image {
                 id: headerBackgroundLeft
                 source: "assets/headerBackgroundLeft.png"
-                height: parent.height
-                width: parent.width-headerBackgroundRight.width
                 anchors.left: parent.left
                 anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.right: headerBackgroundRight.left
             }
             Text {
                 id: headerText_1
@@ -103,9 +102,8 @@ Item {
                 text: "Get started with"
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
-                font.pixelSize: 20
+                font.pixelSize: textNormal
                 font.family: "Titillium Web"
-                anchors.topMargin: 8
             }
             Text {
                 id: headerText_2
@@ -114,474 +112,136 @@ Item {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.bottom: parent.bottom
                 font.bold: true
-                font.pixelSize: 48
+                font.pixelSize: textLarge
                 font.family: "Titillium Web"
-                anchors.bottomMargin: 0
             }
         }
 
         // body of the text panel
         Rectangle {
             id: bodyBackground
-            height: Constants.smallBodyHeight
             color: "#000000"
-            width: headerBackground.width
+            anchors.right: panel.right
+            anchors.left: panel.left
             anchors.top: headerBackground.bottom
-            anchors.left: headerBackground.left
+            anchors.bottom: panel.bottom
 
             Text {
                 id: bodyText
                 color: "#ffffff"
-                width: parent.width - 40
                 text: "How to install demo\napplication from Qt Creator?"
-                font.pixelSize: 24
+                font.pixelSize: textNormal
                 font.family: "Titillium Web"
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 horizontalAlignment: Text.AlignHCenter
                 lineHeight: 0.8
                 wrapMode: Text.WordWrap
-                anchors.topMargin: 8
             }
 
             TextButton {
                 id: textButton
-                width: parent.width - 40
-                height: Constants.smallTextButton
-                fontSize: 24
+                width: parent.width * 0.9
+                height: parent.height / 3
+                fontSize: textNormal
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.bottom: parent.bottom
-                anchors.bottomMargin: 20
+                anchors.bottomMargin: height / 4
             }
         }
     }
 
-    // Button row
-    UsbButton {
-        id: usbButton
-        height: Constants.smallButton
-        width: height
-        iconHeight: height-24
-
-        anchors.left: parent.left
-        anchors.leftMargin: 20
-        anchors.top: panel.bottom
-        anchors.topMargin: 48
-    }
-    SDcardButton {
-        id: sdCardButton
-        height: Constants.smallButton
-        width: height
-        iconHeight: height-24
-
-
-        anchors.bottom: usbButton.bottom
-        anchors.left: usbButton.right
-        anchors.leftMargin: 50
-    }
-    WifiButton {
-        id: wifiButton
-        height: Constants.smallButton
-        width: height
-        iconHeight: height-24
-
-        anchors.bottom: usbButton.bottom
-        anchors.right: panel.right
-    }
-
     // Analog clock showing the current time
+    Item {
+        id: clockAlignment
+        anchors.right: root.right
+        anchors.left: panel.right
+        anchors.top: panel.top
+        anchors.bottom: panel.bottom
+    }
     AnalogClock {
         id: clock
-        width: Constants.smallClock
-        height: Constants.smallClock
-        anchors.top: root.top
-        anchors.topMargin: panel.anchors.topMargin + panel.height / 2 - clock.height / 2
-        anchors.right: root.right
-        anchors.rightMargin: 20
+        width: height
+        height: panel.height * 0.7
+        anchors.horizontalCenter: clockAlignment.horizontalCenter
+        anchors.verticalCenter: panel.verticalCenter
+        anchors.topMargin: height * 0.1
     }
 
-    // label and IP address
-    Item {
-        id: ipPanel
-        height: usbButton.height
-        anchors.horizontalCenter: clock.horizontalCenter
-        anchors.bottom: usbButton.bottom
 
-        Text {
-            id: ipLabel
-            color: "#ffffff"
-            text: "IP address"
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: parent.top
-            anchors.topMargin: 24
-            font.pixelSize: 20
-            font.family: "Titillium Web"
+    // Button row
+    Row {
+        id: buttonRow
+        anchors.top: panel.bottom
+        anchors.horizontalCenter: panel.horizontalCenter
+        spacing: buttonSize / 4
+        padding: buttonSize / 4
+        property var buttonSize: panel.height / 2
+
+        UsbButton {
+            id: usbButton
+            height: parent.buttonSize
+            width: height
+            iconHeight: height * 0.9
         }
-        Text {
-            id: ipAddress
-            color: "#ffffff"
-            text: "255.255.255.255"
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 24
-            font.pixelSize: 20
-            font.bold: true
-            font.family: "Titillium Web"
+        WifiButton {
+            id: wifiButton
+            height: parent.buttonSize
+            width: height
+            iconHeight: height * 0.9
+            visible: false
         }
     }
 
-    // states for different resolutions
-    // base state = small landscape
-    states: [
-        State {
-            name: "smallPortrait"
-
-            PropertyChanges {
-                target: clock
-                width: Constants.smallClock
-                height: Constants.smallClock
-
-                anchors.topMargin: 12
-                anchors.rightMargin: root.width / 2 - clockRadius
-            }
-            PropertyChanges {
-                target: panel
-                anchors.topMargin: 204
-            }
-            PropertyChanges {
-                target: usbButton
-                anchors.topMargin: 12
-            }
-            PropertyChanges {
-                target: ipPanel
-                anchors.bottomMargin: -80
-            }
-        },
-        State {
-            name: "mediumLandscape"
-
-            PropertyChanges {
-                target: clock
-                width: Constants.mediumClock
-                height: Constants.mediumClock
-
-                anchors.topMargin: panel.anchors.topMargin + panel.height / 2 - clock.height / 2
-                anchors.rightMargin: 152
+    // label and IP address
+    Text {
+        id: ipLabel
+        color: "grey"
+        text: "Network"
+        anchors.bottom: ipAddress.top
+        anchors.horizontalCenter: ipAddress.horizontalCenter
+        font.pixelSize: textNormal
+        font.family: "Titillium Web"
+    }
+    Text {
+        id: ipAddress
+        color: "grey"
+        text: "eth0: 255.255.255.255\nusb0: 0:0.0.0.0"
+        anchors.bottom: root.bottom
+        anchors.right: root.right
+        anchors.rightMargin: 5
+        font.pixelSize: textNormal
+        font.bold: true
+        font.family: "Titillium Web"
+    }
 
-                wideDial: 8
-                narrowDial: 4
-            }
-            PropertyChanges {
-                target: panel
-                anchors.topMargin: 48
-                width: Constants.mediumPanelWidth
-            }
-            PropertyChanges {
-                target: headerBackground
-                height: Constants.mediumHeaderHeight
-            }
-            PropertyChanges {
-                target: bodyBackground
-                height: Constants.mediumBodyHeight
-            }
-            PropertyChanges {
-                target: headerText_1
-                font.pixelSize: 40
-                anchors.topMargin: 0
-            }
-            PropertyChanges {
-                target: headerText_2
-                font.pixelSize: 88
-                anchors.bottomMargin: -8
-            }
-            PropertyChanges {
-                target: bodyText
-                font.pixelSize: 40
-            }
-            PropertyChanges {
-                target: textButton
-                height: Constants.mediumTextButton
-                width: panel.width - 64
-                fontSize: 40
-                anchors.bottomMargin: 32
-            }
-            PropertyChanges {
-                target: usbButton
-                height: Constants.mediumButton
-                width: height
-                anchors.topMargin: 54
-                anchors.leftMargin: 32
-            }
-            PropertyChanges {
-                target: sdCardButton
-                height: Constants.mediumButton
-                width: height
-                anchors.leftMargin: 90
-            }
-            PropertyChanges {
-                target: wifiButton
-                height: Constants.mediumButton
-                width: height
-            }
-            PropertyChanges {
-                target: ipPanel
-            }
-            PropertyChanges {
-                target: ipLabel
-                font.pixelSize: 36
-            }
-            PropertyChanges {
-                target: ipAddress
-                font.pixelSize: 36
-            }
-        },
+    // base state = landscape
+    states: [
         State {
-            name: "mediumPortrait"
-            PropertyChanges {
-                target: clock
-                width: Constants.mediumClock
-                height: Constants.mediumClock
-
-                anchors.topMargin: 60
-                anchors.rightMargin: root.width / 2 - clockRadius
+            name: "portrait"
 
-                wideDial: 8
-                narrowDial: 4
-            }
             PropertyChanges {
                 target: panel
-                anchors.topMargin: 440
-                width: Constants.mediumPanelWidth
-            }
-            PropertyChanges {
-                target: headerBackground
-                height: Constants.mediumHeaderHeight
-            }
-            PropertyChanges {
-                target: bodyBackground
-                height: Constants.mediumBodyHeight
-            }
-            PropertyChanges {
-                target: headerText_1
-                font.pixelSize: 40
-                anchors.topMargin: 0
-            }
-            PropertyChanges {
-                target: headerText_2
-                font.pixelSize: 88
-                anchors.bottomMargin: -8
-            }
-            PropertyChanges {
-                target: bodyText
-                font.pixelSize: 40
-            }
-            PropertyChanges {
-                target: textButton
-                height: Constants.mediumTextButton
-                width: panel.width - 64
-                fontSize: 40
-                anchors.bottomMargin: 32
-            }
-            PropertyChanges {
-                target: usbButton
-                height: Constants.mediumButton
-                width: height
-                anchors.topMargin: 60
-                anchors.leftMargin: 32
-            }
-            PropertyChanges {
-                target: sdCardButton
-                height: Constants.mediumButton
-                width: height
-                anchors.leftMargin: 90
-            }
-            PropertyChanges {
-                target: wifiButton
-                height: Constants.mediumButton
-                width: height
-            }
-            PropertyChanges {
-                target: ipPanel
-                anchors.bottomMargin: -200
+                width: root.width * 0.9
             }
-            PropertyChanges {
-                target: ipLabel
-                font.pixelSize: 36
-            }
-            PropertyChanges {
-                target: ipAddress
-                font.pixelSize: 36
-            }
-        },
-        State {
-            name: "largeLandscape"
-
-            PropertyChanges {
-                target: clock
-                width: Constants.largeClock
-                height: Constants.largeClock
-
-                anchors.topMargin: panel.anchors.topMargin + panel.height / 2 - clock.height / 2
-                anchors.rightMargin: 152
-
-                wideDial: 12
-                narrowDial: 6
-            }
-            PropertyChanges {
+            AnchorChanges {
                 target: panel
-                anchors.topMargin: 48
-                width: Constants.largePanelWidth
-            }
-            PropertyChanges {
-                target: headerBackground
-                height: Constants.largeHeaderHeight
-            }
-            PropertyChanges {
-                target: bodyBackground
-                height: Constants.largeBodyHeight
-            }
-            PropertyChanges {
-                target: headerText_1
-                font.pixelSize: 72
-                anchors.topMargin: 0
-            }
-            PropertyChanges {
-                target: headerText_2
-                font.pixelSize: 132
-                anchors.bottomMargin: -8
-            }
-            PropertyChanges {
-                target: bodyText
-                font.pixelSize: 72
-            }
-            PropertyChanges {
-                target: textButton
-                height: Constants.largeTextButton
-                width: panel.width - 80
-                fontSize: 72
-                anchors.bottomMargin: 40
-            }
-            PropertyChanges {
-                target: usbButton
-                height: Constants.largeButton
-                width: height
-                anchors.topMargin: 32
-                anchors.leftMargin: 40
-
-            }
-            PropertyChanges {
-                target: sdCardButton
-                height: Constants.largeButton
-                width: height
-                anchors.leftMargin: 188
-            }
-            PropertyChanges {
-                target: wifiButton
-                height: Constants.largeButton
-                width: height
-            }
-            PropertyChanges {
-                target: ipPanel
-                anchors.bottom: usbButton.bottom
-            }
-            PropertyChanges {
-                target: ipLabel
-                font.pixelSize: 72
-                anchors.topMargin: 0
+                anchors.top: clock.bottom
             }
-            PropertyChanges {
-                target: ipAddress
-                font.pixelSize: 72
-                anchors.bottomMargin: 0
-            }
-        },
-        State {
-            name: "largePortrait"
-            PropertyChanges {
+            AnchorChanges {
                 target: clock
-                width: Constants.largeClock
-                height: Constants.largeClock
-
-                anchors.topMargin: 48
-                anchors.rightMargin: root.width / 2 - clockRadius
-
-                wideDial: 12
-                narrowDial: 6
-            }
-            PropertyChanges {
-                target: panel
-                anchors.topMargin: 640
-                width: Constants.largePanelWidth
+                anchors.top: root.top
+                anchors.horizontalCenter: root.horizontalCenter
+                anchors.verticalCenter: undefined
             }
-
-            PropertyChanges {
-                target: headerBackground
-                height: Constants.largeHeaderHeight
-            }
-            PropertyChanges {
-                target: bodyBackground
-                height: Constants.largeBodyHeight
-            }
-            PropertyChanges {
-                target: headerText_1
-                font.pixelSize: 72
-                anchors.topMargin: 0
-            }
-            PropertyChanges {
-                target: headerText_2
-                font.pixelSize: 132
-                anchors.bottomMargin: -8
-            }
-            PropertyChanges {
-                target: bodyText
-                font.pixelSize: 72
-            }
-            PropertyChanges {
-                target: textButton
-                height: Constants.largeTextButton
-                width: panel.width - 80
-                fontSize: 72
-                anchors.bottomMargin: 40
-            }
-            PropertyChanges {
-                target: usbButton
-                height: Constants.largeButton
-                width: height
-                anchors.topMargin: 60
-                anchors.leftMargin: 40
-            }
-            PropertyChanges {
-                target: sdCardButton
-                height: Constants.largeButton
-                width: height
-                anchors.leftMargin: 188
-            }
-            PropertyChanges {
-                target: wifiButton
-                height: Constants.largeButton
-                width: height
-            }
-            PropertyChanges {
-                target: ipPanel
-                anchors.bottomMargin: -240
-            }
-            PropertyChanges {
-                target: ipLabel
-                font.pixelSize: 72
-                anchors.topMargin: 0
-            }
-            PropertyChanges {
-                target: ipAddress
-                font.pixelSize: 72
-                anchors.bottomMargin: 0
+            AnchorChanges {
+                target: buttonRow
+                anchors.horizontalCenter: undefined
+                anchors.left: root.left
             }
         }
     ]
 }
 
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:640;width:480}
-}
-##^##*/
+