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 onStateChanged: { console.log("new state: " + 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() } 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: actionToolButton Layout.fillHeight: true Layout.preferredWidth: height opacity: mainStack.currentItem.actionButtonVisible ? 1:0 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 } } ] } }