LedDisplay/app/ressources/qml/main.qml

import QtQuick 2.12
import QtQuick.Controls 2.0
import QtQuick.Window 2.12
import de.itsblue.LedDisplayController 1.0
import de.itsblue.bluetoothleuart 1.0
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    width: 540
    height: 960
    visible: true
    title: qsTr("Itsblue smart display")

    Page {
        id: app

        state: backend.state

        anchors.fill: parent

        Material.accent: "#0094ff"
        Material.theme: Material.Light

        header: ToolBar {
            id: headerToolBar

            height: 50
            implicitWidth: parent.width

            Material.background: "white"

            RowLayout {
                anchors.fill: parent

                ToolButton {
                    id: backToolButton

                    enabled: false
                    Layout.fillHeight: true
                    Layout.preferredWidth: height

                    opacity: mainStack.currentItem.backButtonVisible ? 1:0

                    font.family: fontAwesome.name
                    font.pixelSize: height * 0.6
                    Material.foreground: "black"

                    text: "\uf104"

                    contentItem: Item {}

                    Text {
                        anchors.centerIn: parent
                        font.pixelSize: parent.font.pixelSize
                        text: parent.text
                    }

                    onClicked: mainStack.currentItem.backButtonClicked()
                }

                ToolButton {
                    visible: mainStack.currentItem.actionButtonVisible
                    opacity: 0
                    enabled: false
                }

                Label {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    Layout.alignment: Layout.Center

                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter

                    color: "black"
                    text: mainStack.currentItem.title
                }

                ToolButton {
                    id: infoToolButton

                    Layout.fillHeight: true
                    Layout.preferredWidth: height

                    font.family: fontAwesome.name
                    font.pixelSize: height * 0.4
                    Material.foreground: "black"

                    flat: true

                    text: "\uf05a"

                    onClicked: infoDisclaimerDialog.open()

                }

                ToolButton {
                    id: actionToolButton

                    Layout.fillHeight: true
                    Layout.preferredWidth: height

                    visible: mainStack.currentItem.actionButtonVisible

                    font.family: fontAwesome.name
                    font.pixelSize: height * 0.4
                    Material.foreground: "black"

                    flat: true

                    text: "\uf013"

                    onClicked: mainStack.currentItem.actionButtonClicked()

                }
            }
        }

        LedDisplayBackend {
            id: backend
        }

        FontLoader {
            id: fontAwesome
            source: "qrc:/fa5solid.woff"

            Component.onCompleted: {
                console.log("Font name: " + fontAwesome.name)
            }
        }

        FontLoader {
            id: fontAwesomeBrands
            source: "qrc:/fa5brands.woff"

            Component.onCompleted: {
                console.log("Font name: " + fontAwesome.name)
            }
        }

        StackView {
            id: mainStack

            anchors.fill: parent

            property Component currentComponent

            onCurrentComponentChanged: {
                if(currentComponent != currentItem)
                    mainStack.replace(currentComponent)
            }

            onCurrentItemChanged: {
                currentItem.opened()
            }

            initialItem: connectedPageComp

            replaceEnter: Transition {
                NumberAnimation {
                    properties: "opacity"
                    from: 0
                    to: 1
                }
            }

            replaceExit: Transition {
                NumberAnimation {
                    properties: "opacity"
                    from: 1
                    to: 0
                }
            }

            Component {
                id: connectPageComp
                ConnectPage {
                    state: app.state
                }
            }

            Component {
                id: connectedPageComp
                ConnectedPage {
                    opacity: 0
                    state: app.state
                }
            }
        }

        states: [
            State {
                name: LedDisplayBackend.Idle
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.BluetoothOff
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.LocationPermissionDenied
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.Scanning
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.ReadyToConnect
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.Connecting
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.AuthenticationRequired
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.Authenticating
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.Initing
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectPageComp
                }
            },

            State {
                name: LedDisplayBackend.Connected
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectedPageComp
                }
                 PropertyChanges {
                     target: headerToolBar
                     state: "open"
                 }
                 PropertyChanges {
                     target: backToolButton
                     enabled: true
                 }
            },

            State {
                name: LedDisplayBackend.Loading
                PropertyChanges {
                    target: mainStack
                    currentComponent: connectedPageComp
                }
                PropertyChanges {
                    target: headerToolBar
                    state: "open"
                }
                PropertyChanges {
                    target: backToolButton
                    enabled: true
                }
            }
        ]

        DisclaimerDialog {
            id: infoDisclaimerDialog

            title: "LedDisplayController v" + APP_VERSION + "<br>By <a href=\"https://itsblue.de\">Itsblue Development</a>, <a href=\"https://itsblue.de/apps/leddisplaycontroller\">" + qsTr("privacy policy") + "</a>"
            content: qsTr("This app was built using the <a href='https://qt.io'>Qt Framework</a> licensed under the <a href='https://www.gnu.org/licenses/lgpl-3.0.en.html'>GNU lgplV3 license</a>.<br><br>This app is open source and licensed under the <a href='https://www.gnu.org/licenses/agpl-3.0.en.html'>GNU agplV3 license</a>, the source code can be found <a href='https://itsblue.dev/itsblue-development/LedDisplay'>here</a>.")
        }

    }
}