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.svg"
                    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 up the Qt Design Studio, and a project"), qsTr("Click on the dropdown menu of the Play button in the header"), qsTr("Select Open Device Manager from the menu"), qsTr("In the Device Manager window click on Set Device IP and type in the IP address found from below")]

                        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

                Label {
                    Layout.fillWidth: true
                    text: qsTr("This device can be reached at the following IP addresses:")
                    font.pixelSize: Constants.lgTextSize
                    font.bold: true
                    wrapMode: Text.WordWrap
                }

                Label {
                    id: ipAddress
                    Layout.fillWidth: true
                    text: qsTr("xxx.xxx.xxx.xxx")
                    font.pixelSize: Constants.lgTextSize
                    font.bold: false
                    wrapMode: Text.WordWrap

                    function updateIpAddresses() {
                        ipAddress.text = '';
                        var val = backend.getIpAddresses();

                        if(val.length === 0)
                            ipAddress.text = qsTr("Not connected to any network.");

                        for(var i = 0; i < val.length; i++)
                            ipAddress.text += val[i].interface + ': ' + val[i].ip + '\n';
                    }

                    Timer {
                        id: timer
                        interval: 1000
                        running: true
                        repeat: true

                        onTriggered: {
                            ipAddress.updateIpAddresses();
                        }
                    }

                    Component.onCompleted: {
                        ipAddress.updateIpAddresses();
                        timer.start();
                    }
                }
            }
        }
    }
}