From 25842566eee73aa8f2b07dcd334d47d6f6853579 Mon Sep 17 00:00:00 2001 From: Samuli Piippo Date: Tue, 20 Oct 2020 12:06:53 +0300 Subject: 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 Reviewed-by: Rami Potinkara --- startupscreen/MainView.qml | 524 ++++++++------------------------------------- 1 file changed, 92 insertions(+), 432 deletions(-) (limited to 'startupscreen/MainView.qml') 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} -} -##^##*/ + -- cgit v1.2.3