QDS-13458 Update viewer UI

CMakeLists.txt

@@ -4,9 +4,9 @@ project(qtuiviewer LANGUAGES CXX)
 
 set(CMAKE_INCLUDE_CURRENT_DIR ON)
 
-set(CMAKE_AUTOUIC ON)
-set(CMAKE_AUTOMOC ON)
-set(CMAKE_AUTORCC ON)
+#set(CMAKE_AUTOUIC ON)
+#set(CMAKE_AUTOMOC ON)
+#set(CMAKE_AUTORCC ON)
 
 set(CMAKE_CXX_STANDARD 17)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
@@ -30,6 +30,8 @@ if(QT_VERSION VERSION_LESS QT_MINIMUM_VERSION)
     message(FATAL_ERROR "Minimum supported Qt version: ${QT_MINIMUM_VERSION}")
 endif()
 
+qt_standard_project_setup(REQUIRES ${QT_MINIMUM_VERSION})
+
 set_property(DIRECTORY APPEND PROPERTY ADDITIONAL_MAKE_CLEAN_FILES ${CMAKE_INSTALL_PREFIX})
 
 execute_process(COMMAND git describe --always --tags OUTPUT_VARIABLE CMAKE_VAR_GIT_VERSION OUTPUT_STRIP_TRAILING_WHITESPACE)

src/CMakeLists.txt

@@ -18,29 +18,34 @@ qt_add_executable(${PROJECT_NAME}
     backend/dsconnector/dsdiscovery.cpp backend/dsconnector/dsdiscovery.h
     backend/dsconnector/dsmanager.cpp backend/dsconnector/dsmanager.h
     backend/qrscanner.cpp backend/qrscanner.h
-    ui/main.qml
     ../3rdparty/zxing-cpp/example/ZXingQtReader.h
 )
 
-qt_add_resources(${PROJECT_NAME} "images"
-    PREFIX "/"
-    FILES
-        ui/content/images/appicon.png
-        ui/content/images/closed_eye.png
-        ui/content/images/open_eye.png
-        ui/content/images/container.png
+set_source_files_properties(Constants.qml PROPERTIES
+    QT_QML_SINGLETON_TYPE TRUE
 )
 
-qt_add_resources(${PROJECT_NAME} "qml"
-    PREFIX "/"
-    FILES
-        ui/main.qml
-        ui/HomePage.qml
-        ui/Logs.qml
-        ui/DSManagement.qml
-        ui/ExamplesPage.qml
-        ui/AboutHeader.qml
-        ui/SettingsPage.qml
+qt_add_qml_module(${PROJECT_NAME}
+    URI AndroidUI
+    VERSION 1.0
+    QML_FILES
+        Constants.qml
+        HomePage.qml
+        Main.qml
+        NavigationBar.qml
+        NavigationButton.qml
+        QrButton.qml
+        SettingsItem.qml
+        SettingsPage.qml
+        SwitchSettingsItem.qml
+)
+
+qt_target_qml_sources(${PROJECT_NAME}
+    PREFIX
+        "/"
+    RESOURCES
+        fonts/QtOneIconFont.ttf
+        images/appicon.png
 )
 
 target_link_libraries(${PROJECT_NAME} PRIVATE
@@ -90,4 +95,4 @@ set_property(TARGET ${PROJECT_NAME} PROPERTY QT_ANDROID_EXTRA_LIBS
 # this needs to be increased with every new release
 set(GOOGLE_PLAY_APP_VERSION 31)
 # CMAKE_VAR_GIT_VERSION (coming from the top-level CMakeLists.txt) and GOOGLE_PLAY_APP_VERSION replaced in the following file
-configure_file(${CMAKE_CURRENT_SOURCE_DIR}/android/AndroidManifest.xml.in  ${CMAKE_CURRENT_SOURCE_DIR}/android/AndroidManifest.xml)
+configure_file(${CMAKE_CURRENT_SOURCE_DIR}/android/AndroidManifest.xml.in ${CMAKE_CURRENT_SOURCE_DIR}/android/AndroidManifest.xml)

src/Constants.qml

+pragma Singleton
+import QtQuick
+
+QtObject {
+    id: root
+
+    property FontLoader iconFont: FontLoader {
+        source: "/fonts/QtOneIconFont.ttf"
+    }
+
+    property QtObject icons: QtObject {
+        readonly property string home: "\u0021"
+        readonly property string link: "\u0022"
+        readonly property string qrCode: "\u0023"
+        readonly property string settings: "\u0024"
+        readonly property string unlink: "\u0025"
+    }
+
+    readonly property int smTextSize: 12
+    readonly property int mdTextSize: 14
+    readonly property int lgTextSize: 20
+    readonly property int xlTextSize: 30
+
+    readonly property int iconSize: 18
+
+    readonly property color statusBarDisconnected: "#eb991f"
+    readonly property color statusBarConnected: "#23b26a"
+
+    readonly property int statusBarHeight: 24
+    readonly property int tabBarHeight: 69
+
+    readonly property bool dark: Application.styleHints.colorScheme === Qt.Dark
+
+    readonly property color boxBackgroundColor: root.dark ? "#262626" : "#f2f2f2"
+    readonly property color boxBorderColor: root.dark ? "#2e2e2e" : "#e7e7e7"
+}

src/HomePage.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Layouts
+
+Flickable {
+    id: root
+    interactive: true
+    contentHeight: mainLayout.height
+    boundsMovement: Flickable.StopAtBounds
+    boundsBehavior: Flickable.DragAndOvershootBounds
+
+    property bool landscape: root.width > root.height
+
+    Connections {
+        target: Qt.inputMethod
+
+        function onKeyboardRectangleChanged() {
+            let mapPositon = optionLayout2.mapToItem(root, ipAddress.x, ipAddress.y)
+            root.contentY = mapPositon.y
+        }
+    }
+
+    RowLayout {
+        id: dummy
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        GridLayout {
+            id: mainLayout
+
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter
+
+            columns: root.landscape ? 2 : 1
+            rowSpacing: 20
+            columnSpacing: 20
+
+            RowLayout {
+                id: headerLayout
+
+                Layout.columnSpan: root.landscape ? 2 : 1
+                Layout.alignment: Qt.AlignLeft
+                Layout.fillWidth: true
+                Layout.topMargin: 10
+                Layout.bottomMargin: 0
+                Layout.leftMargin: 20
+                Layout.rightMargin: 20
+
+                spacing: 20
+
+                Image {
+                    id: qdsLogo
+                    source: "/images/appicon.png"
+                    fillMode: Image.PreserveAspectFit
+                    Layout.preferredWidth: 64
+                    Layout.preferredHeight: 64
+                }
+
+                Label {
+                    id: qdvLabel
+                    text: qsTr("Qt UI Viewer")
+                    font.pixelSize: Constants.xlTextSize
+                    font.bold: true
+                }
+            }
+
+            ColumnLayout {
+                id: infoLayout
+
+                Layout.leftMargin: 20
+                Layout.rightMargin: 20
+                Layout.fillWidth: true
+                Layout.preferredWidth: 300
+                Layout.maximumWidth: 400
+                Layout.alignment: Qt.AlignTop
+
+                spacing: 10
+
+                Label {
+                    id: title
+                    Layout.fillWidth: true
+                    text: qsTr("Connect with Qt Design Studio in your local network.")
+                    font.pixelSize: Constants.lgTextSize
+                    font.bold: true
+                    wrapMode: Text.WordWrap
+                }
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    spacing: 0
+
+                    Label {
+                        Layout.fillWidth: true
+                        text: qsTr("How to:")
+                        font.pixelSize: Constants.mdTextSize
+                        font.bold: true
+                        wrapMode: Text.WordWrap
+                    }
+
+                    Repeater {
+                        model: [
+                            qsTr("Open Qt Design Studio"),
+                            qsTr("Click Play > Manage Run Targets"),
+                            qsTr("In Manage Run Targets window click Add run target button.")
+                        ]
+
+                        delegate: RowLayout {
+                            Layout.fillWidth: true
+                            spacing: 6
+
+                            Label {
+                                Layout.alignment: Qt.AlignTop
+                                text: (index + 1) + "."
+                                font.pixelSize: Constants.mdTextSize
+                            }
+
+                            Label {
+                                Layout.fillWidth: true
+                                text: modelData
+                                font.pixelSize: Constants.mdTextSize
+                                wrapMode: Text.WordWrap
+                            }
+                        }
+                    }
+                }
+            }
+
+            ColumnLayout {
+                id: optionLayout
+
+                Layout.leftMargin: 20
+                Layout.rightMargin: 20
+                Layout.bottomMargin: 20
+                Layout.fillWidth: true
+                Layout.preferredWidth: 300
+                Layout.maximumWidth: 400
+                Layout.alignment: Qt.AlignTop
+
+                spacing: 10
+
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: optionLayout1.height
+
+                    color: Constants.boxBackgroundColor
+                    radius: Material.MediumScale
+                    border {
+                        width: 1
+                        color: Constants.boxBorderColor
+                    }
+
+                    ColumnLayout {
+                        id: optionLayout1
+                        width: parent.width
+                        spacing: 20
+
+                        Label {
+                            Layout.fillWidth: true
+                            Layout.topMargin: 20
+
+                            horizontalAlignment: Qt.AlignHCenter
+                            text: qsTr("Option 1")
+                            font.pixelSize: Constants.lgTextSize
+                            font.bold: true
+                            wrapMode: Text.WordWrap
+                        }
+
+                        Label {
+                            Layout.fillWidth: true
+                            Layout.leftMargin: 20
+                            Layout.rightMargin: 20
+
+                            horizontalAlignment: Qt.AlignHCenter
+                            text: qsTr("Click to scan the QR code in Qt Design Studio")
+                            font.pixelSize: Constants.mdTextSize
+                            wrapMode: Text.WordWrap
+                        }
+
+                        QrButton {
+                            Layout.alignment: Qt.AlignHCenter
+                            Layout.bottomMargin: 20
+
+                            onClicked: backend.scanQrCode()
+                        }
+                    }
+                }
+
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: optionLayout2.height
+
+                    color: Constants.boxBackgroundColor
+                    radius: Material.MediumScale
+                    border {
+                        width: 1
+                        color: Constants.boxBorderColor
+                    }
+
+                    ColumnLayout {
+                        id: optionLayout2
+                        width: parent.width
+                        spacing: 20
+
+                        Label {
+                            Layout.fillWidth: true
+                            Layout.topMargin: 20
+
+                            horizontalAlignment: Qt.AlignHCenter
+                            text: qsTr("Option 2")
+                            font.pixelSize: Constants.lgTextSize
+                            font.bold: true
+
+                            wrapMode: Text.WordWrap
+                        }
+
+                        TextField {
+                            id: ipAddress
+
+                            Layout.fillWidth: true
+                            Layout.leftMargin: 20
+                            Layout.rightMargin: 20
+                            Layout.alignment: Qt.AlignHCenter
+
+                            placeholderText: qsTr("IP Address")
+                            text: "10.0.2.2"
+                            validator: RegularExpressionValidator {
+                                regularExpression: /^(\d{1,3}\.){3}\d{1,3}$/
+                            }
+                        }
+
+                        Button {
+                            id: downloadUserProject
+
+                            Layout.fillWidth: true
+                            Layout.leftMargin: 20
+                            Layout.rightMargin: 20
+                            Layout.bottomMargin: 20
+                            Layout.alignment: Qt.AlignHCenter
+
+                            text: qsTr("Connect Design Studio")
+                            enabled: true
+
+                            onClicked: backend.connectDesignStudio(ipAddress.text)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/Main.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Layouts
+
+Rectangle {
+    id: root
+
+    property bool connected: false
+    property string ip: "0.0.0.0"
+
+    width: 400
+    height: 800
+    color: Material.backgroundColor
+
+    Material.theme: Application.styleHints.colorScheme === Qt.Dark ? Material.Dark : Material.Light
+    Material.accent: Material.Blue
+    Material.primary: Material.Blue
+
+    Column {
+        id: column
+        anchors.fill: parent
+
+        Rectangle {
+            id: statusBar
+            width: column.width
+            height: Constants.statusBarHeight
+            color: root.connected ? Constants.statusBarConnected : Constants.statusBarDisconnected
+
+            Row {
+                anchors.horizontalCenter: parent.horizontalCenter
+                height: statusBar.height
+                spacing: 6
+
+                Text {
+                    height: parent.height
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+
+                    font.family: Constants.iconFont.font.family
+                    font.pixelSize: Constants.iconSize
+                    text: root.connected ? Constants.icons.link : Constants.icons.unlink
+                }
+
+                Text {
+                    id: statusText
+                    height: parent.height
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+
+                    font.pixelSize: Constants.smTextSize
+                    wrapMode: Text.WordWrap
+
+                    text: root.connected ? qsTr("Qt Design Studio is connected to " + root.ip)
+                                         : qsTr("Qt Design Studio is disconnected.")
+                }
+            }
+
+            Connections {
+                target: backend
+                function onConnectedChanged(isConnected, ip) {
+                    root.connected = isConnected
+                    root.ip = ip
+                }
+            }
+        }
+
+        StackLayout {
+            id: stackLayout
+
+            width: column.width
+            height: column.height - statusBar.height - tabBar.height
+            clip: true
+
+            HomePage { id: homePage }
+            SettingsPage { id: settingsPage }
+        }
+
+        NavigationBar {
+            id: tabBar
+            width: column.width
+            height: Constants.tabBarHeight
+
+            NavigationButton {
+                id: home
+                myIcon: Constants.icons.home
+                text: qsTr("Home")
+                checked: true
+                checkable: true
+                autoExclusive: true
+                onClicked: stackLayout.currentIndex = 0
+
+                height: Constants.tabBarHeight // TODO
+            }
+
+            NavigationButton {
+                id: settings
+                myIcon: Constants.icons.settings
+                text: qsTr("Settings")
+                checkable: true
+                autoExclusive: true
+                onClicked: stackLayout.currentIndex = 1
+
+                height: Constants.tabBarHeight // TODO
+            }
+        }
+    }
+}

src/NavigationBar.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.TabBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 1
+
+    contentItem: ListView {
+        model: control.contentModel
+        currentIndex: control.currentIndex
+
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
+
+        highlightMoveDuration: 250
+        highlightResizeDuration: 0
+        highlightFollowsCurrentItem: true
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 48
+        preferredHighlightEnd: width - 48
+
+        highlight: Item {
+            z: 2
+            Rectangle {
+                height: 2
+                width: parent.width
+                y: control.position === T.TabBar.Footer ? 0 : parent.height - height
+                color: control.Material.accentColor
+            }
+        }
+    }
+
+    background: Rectangle {
+        color: control.Material.dialogColor
+    }
+}

src/NavigationButton.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.TabButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 12
+    spacing: 6
+
+    property alias myIcon: icon.text
+
+    contentItem: Column {
+        Label {
+            id: icon
+            width: 24
+            height: 24
+            horizontalAlignment: Qt.AlignHCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+            font.family: Constants.iconFont.font.family
+            font.pixelSize: Constants.iconSize
+            color: !control.enabled ? control.Material.hintTextColor
+                                    : control.down || control.checked ? control.Material.accentColor
+                                                                      : control.Material.foreground
+        }
+
+        Label {
+            id: text
+            horizontalAlignment: Qt.AlignHCenter
+            width: parent.width
+            text: control.text
+            font: control.font
+            color: !control.enabled ? control.Material.hintTextColor
+                                    : control.down || control.checked ? control.Material.accentColor
+                                                                      : control.Material.foreground
+        }
+    }
+
+    background: Ripple {
+        implicitHeight: control.Material.touchTarget
+
+        clip: true
+        pressed: control.pressed
+        anchor: control
+        active: enabled && (control.down || control.visualFocus || control.hovered)
+        color: control.Material.rippleColor
+        //clipRadius: 0
+    }
+}

src/QrButton.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.AbstractButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 20
+    spacing: 6
+
+    contentItem: Label {
+        id: icon
+        width: 24
+        height: 24
+        horizontalAlignment: Qt.AlignHCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        font.family: Constants.iconFont.font.family
+        font.pixelSize: 40
+        text: Constants.icons.qrCode
+        color: !control.enabled ? control.Material.hintTextColor
+                                : control.down || control.checked ? control.Material.accentColor
+                                                                  : control.Material.foreground
+    }
+
+    background: Rectangle {
+        implicitWidth: 64
+        implicitHeight: control.Material.buttonHeight
+
+        radius: height / 2
+        color: control.Material.buttonColor(control.Material.theme, control.Material.background,
+            control.Material.accent, control.enabled, control.flat, control.highlighted, control.checked)
+
+        // The layer is disabled when the button color is transparent so you can do
+        // Material.background: "transparent" and get a proper flat button without needing
+        // to set Material.elevation as well
+        layer.enabled: control.enabled && color.a > 0 && !control.flat
+        layer.effect: RoundedElevationEffect {
+            elevation: control.Material.elevation
+            roundedScale: control.background.radius
+        }
+
+        Ripple {
+            clip: true
+            clipRadius: parent.radius
+            width: parent.width
+            height: parent.height
+            pressed: control.pressed
+            anchor: control
+            active: enabled && (control.down || control.visualFocus || control.hovered)
+            color: control.flat && control.highlighted ? control.Material.highlightedRippleColor : control.Material.rippleColor
+        }
+    }
+}

src/SettingsItem.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.AbstractButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 16
+    verticalPadding: Material.menuItemVerticalPadding
+    spacing: 16
+
+    property string subText: ""
+
+    contentItem: Column {
+        id: column
+
+        property int labelWidth: control.width - control.leftPadding - control.rightPadding
+
+        Label {
+            width: column.labelWidth
+            text: control.text
+            font.family: control.font.family
+            font.pixelSize: Constants.lgTextSize
+            color: control.enabled ? Material.primaryTextColor : Material.secondaryTextColor
+        }
+
+        Label {
+            visible: control.subText !== ""
+            width: column.labelWidth
+            text: control.subText
+            font.family: control.font.family
+            font.pixelSize: Constants.mdTextSize
+            wrapMode: Text.WordWrap
+            color: Material.secondaryTextColor
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: control.Material.menuItemHeight
+        color: "transparent"
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: control.down
+            color: control.Material.rippleColor
+        }
+    }
+}

src/SettingsPage.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Flickable {
+    id: root
+    interactive: true
+    contentHeight: mainLayout.height
+    boundsMovement: Flickable.StopAtBounds
+    boundsBehavior: Flickable.DragAndOvershootBounds
+
+    ColumnLayout {
+        id: mainLayout
+        anchors.left: parent.left
+        anchors.right: parent.right
+        spacing: 0
+
+        Label {
+            id: title
+            Layout.margins: 20
+            text: qsTr("Settings")
+            font.pixelSize: Constants.xlTextSize
+        }
+
+        SwitchSettingsItem {
+            Layout.fillWidth: true
+            horizontalPadding: 20
+            text: qsTr("Auto-scale")
+            subText: qsTr("Scales the project to fit to current display and orientation")
+            checked: backend.autoScaleProject() ? Qt.Checked : Qt.Unchecked
+        }
+
+        SettingsItem {
+            Layout.fillWidth: true
+            horizontalPadding: 20
+            text: qsTr("Send feedback")
+        }
+
+        SettingsItem {
+            Layout.fillWidth: true
+            horizontalPadding: 20
+            text: qsTr("About")
+            subText: backend.buildInfo()
+            enabled: false
+        }
+    }
+}

src/SwitchSettingsItem.qml

+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.AbstractButton {
+    id: control
+
+    checkable: true
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 16
+    verticalPadding: Material.menuItemVerticalPadding
+    spacing: 16
+
+    property string subText: ""
+
+    indicator: Switch {
+        id: switchIndicator
+        x: control.width - switchIndicator.indicator.width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        visible: control.checkable
+        checked: control.checked
+        padding: 0
+        z: -1 // Otherwise Switch can be clicked independently instead of the button itself
+    }
+
+    contentItem: Column {
+        id: column
+
+        property int labelWidth: control.width - control.leftPadding - control.rightPadding - switchIndicator.indicator.width - 6
+
+        Label {
+            width: column.labelWidth
+            text: control.text
+            font.family: control.font.family
+            font.pixelSize: Constants.lgTextSize
+        }
+
+        Label {
+            width: column.labelWidth
+            text: control.subText
+            font.family: control.font.family
+            font.pixelSize: Constants.mdTextSize
+            wrapMode: Text.WordWrap
+            color: Material.secondaryTextColor
+        }
+    }
+
+    background: Item {
+        implicitWidth: 200
+        implicitHeight: control.Material.menuItemHeight
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: control.down
+            color: control.Material.rippleColor
+        }
+    }
+}

src/android/AndroidManifest.xml.in

@@ -15,7 +15,8 @@
         <activity android:name="org.qtproject.qt.android.bindings.QtActivity"
             android:configChanges="orientation|uiMode|screenLayout|screenSize|smallestScreenSize|layoutDirection|locale|fontScale|keyboard|keyboardHidden|navigation|mcc|mnc|density"
             android:label="Qt UI Viewer" android:launchMode="singleTask"
-            android:screenOrientation="unspecified" android:exported="true">
+            android:screenOrientation="unspecified" android:exported="true"
+            android:windowSoftInputMode="adjustResize">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />

src/backend/main.cpp

@@ -47,7 +47,7 @@ int main(int argc, char *argv[])
 
     QQuickView view;
     view.engine()->rootContext()->setContextProperty("backend", &backend);
-    view.setSource(QUrl(QStringLiteral("qrc:/ui/main.qml")));
+    view.setSource(QUrl(QStringLiteral("qrc:/qt/qml/AndroidUI/Main.qml")));
     view.setResizeMode(QQuickView::SizeRootObjectToView);
     view.showMaximized();
 

src/ui/AboutHeader.qml

-import QtQuick
-import QtQuick.Controls 6.4
-import QtQuick.Layouts
-
-
-Item {
-    id: headerPage
-
-    ColumnLayout {
-        anchors.fill: parent
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-        Item {
-            width: 200
-            height: 200
-            Layout.preferredHeight: 10
-            Layout.fillWidth: true
-        }
-
-        Label {
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            horizontalAlignment: "AlignHCenter"
-            text: backend.buildInfo()
-        }
-
-
-        Item {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-        }
-    }
-}

src/ui/CMakeLists.txt

-cmake_minimum_required(VERSION 3.21.1)
-
-option(LINK_INSIGHT "Link Qt Insight Tracker library" ON)
-option(BUILD_QDS_COMPONENTS "Build design studio components" ON)
-
-project(DesignViewerApp LANGUAGES CXX)
-
-set(CMAKE_AUTOMOC ON)
-
-find_package(Qt6 6.2 REQUIRED COMPONENTS Core Gui Qml Quick)
-
-if (Qt6_VERSION VERSION_GREATER_EQUAL 6.3)
-    qt_standard_project_setup()
-endif()
-
-qt_add_executable(DesignViewerApp src/main.cpp)
-
-qt_add_resources(DesignViewerApp "configuration"
-    PREFIX "/"
-    FILES
-        qtquickcontrols2.conf
-)
-
-target_link_libraries(DesignViewerApp PRIVATE
-    Qt6::Core
-    Qt6::Gui
-    Qt6::Qml
-    Qt6::Quick
-)
-
-if (BUILD_QDS_COMPONENTS)
-    include(${CMAKE_CURRENT_SOURCE_DIR}/qmlcomponents)
-endif()
-
-include(${CMAKE_CURRENT_SOURCE_DIR}/qmlmodules)
-
-if (LINK_INSIGHT)
-    include(${CMAKE_CURRENT_SOURCE_DIR}/insight)
-endif ()
-
-install(TARGETS DesignViewerApp
-    BUNDLE DESTINATION .
-    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
-    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
-)

src/ui/DSManagement.qml

-import QtQuick
-import QtQuick.Controls 6.4
-import QtQuick.Layouts
-
-
-Item {
-    id: header
-
-    ColumnLayout {
-        spacing: 10
-        anchors.fill: parent
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-        Text {
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            Layout.preferredWidth: parent.width
-            horizontalAlignment: "AlignHCenter"
-            wrapMode: Text.WordWrap
-            textFormat: Text.StyledText
-            text: "<p>
-                       Use Design Studio (File -> Device Management) to register you phone.
-                   <br>
-
-                   <p>
-                       If your phone is not discovered by Design Studio, or if it has been registered before but doesn't show up as online, you can scan the QR code shown on Design Studio.
-                   "
-        }
-
-        Button {
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            text: "Scan QR Code"
-            onClicked: backend.scanQrCode()
-        }
-    }
-}

src/ui/DesignViewer.qmlproject

-import QmlProject
-
-Project {
-    mainFile: "main.qml"
-
-    /* Include .qml, .js, and image files from current directory and subdirectories */
-    QmlFiles {
-        directory: "."
-    }
-
-    QmlFiles {
-        directory: "content"
-    }
-
-    QmlFiles {
-        directory: "imports"
-    }
-
-    JavaScriptFiles {
-        directory: "content"
-    }
-
-    JavaScriptFiles {
-        directory: "imports"
-    }
-
-    ImageFiles {
-        directory: "content"
-    }
-
-    ImageFiles {
-        directory: "asset_imports"
-    }
-
-    Files {
-        filter: "*.conf"
-        files: ["qtquickcontrols2.conf"]
-    }
-
-    Files {
-        filter: "qmldir"
-        directory: "."
-    }
-
-    Files {
-        filter: "*.ttf;*.otf"
-    }
-
-    Files {
-        filter: "*.wav;*.mp3"
-    }
-
-    Files {
-        filter: "*.mp4"
-    }
-
-    Files {
-        filter: "*.glsl;*.glslv;*.glslf;*.vsh;*.fsh;*.vert;*.frag"
-    }
-
-    Files {
-        filter: "*.qsb"
-    }
-
-    Files {
-        filter: "*.mesh"
-        directory: "asset_imports"
-    }
-
-    Files {
-        filter: "*.qml"
-        directory: "asset_imports"
-    }
-
-    Environment {
-        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
-        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
-        QML_COMPAT_RESOLVE_URLS_ON_ASSIGNMENT: "1"
-        QT_LOGGING_RULES: "qt.qml.connections=false"
-        QT_ENABLE_HIGHDPI_SCALING: "0"
-        /* Useful for debugging
-       QSG_VISUALIZE=batches
-       QSG_VISUALIZE=clip
-       QSG_VISUALIZE=changes
-       QSG_VISUALIZE=overdraw
-       */
-    }
-
-    qt6Project: true
-
-    /* List of plugin directories passed to QML runtime */
-    importPaths: [ "imports", "asset_imports" ]
-
-    /* Required for deployment */
-    targetDirectory: "/opt/DesignViewer"
-
-    qdsVersion: "4.2"
-
-    quickVersion: "6.5"
-
-    /* If any modules the project imports require widgets (e.g. QtCharts), widgetApp must be true */
-    widgetApp: true
-
-    /* args: Specifies command line arguments for qsb tool to generate shaders.
-       files: Specifies target files for qsb tool. If path is included, it must be relative to this file.
-              Wildcard '*' can be used in the file name part of the path.
-              e.g. files: [ "content/shaders/*.vert", "*.frag" ]  */
-    ShaderTool {
-        args: "-s --glsl \"100 es,120,150\" --hlsl 50 --msl 12"
-        files: [ "content/shaders/*" ]
-    }
-
-    multilanguageSupport: true
-    supportedLanguages: ["en"]
-    primaryLanguage: "en"
-
-
-    mainUiFile: "main.qml"
-}

src/ui/ExamplesPage.qml

-import QtQuick
-import QtQuick.Window 2.2
-import QtQuick.Controls 6.5
-import QtQuick.Layouts
-
-Item {
-    id: examplesPage
-
-    ColumnLayout {
-        anchors.fill: parent
-
-        Button {
-            id: button3
-            text: qsTr("Cluster Tutorial")
-            Layout.fillWidth: true
-            onClicked: backend.runDemoProject("ClusterTutorial")
-        }
-
-
-        Button {
-            id: button
-            text: qsTr("E-Bike Design")
-            Layout.fillWidth: true
-            onClicked: backend.runDemoProject("EBikeDesign")
-        }
-
-        Button {
-            id: button4
-            text: qsTr("Material Bundle")
-            Layout.fillWidth: true
-            onClicked: backend.runDemoProject("MaterialBundle")
-        }
-
-        Item {
-            id: item1
-            width: 200
-            height: 200
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-        }
-
-        Button {
-            id: button5
-            text: qsTr("Clear demo caches")
-            Layout.fillWidth: true
-            onClicked: backend.clearDemoCaches()
-        }
-    }
-}