LedDisplay/LedDisplayController/ressources/qml/main.qml
2020-10-18 15:08:12 +02:00

278 lines
7.2 KiB
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
onStateChanged: {
console.log("new state: " + state)
}
anchors.fill: parent
Material.accent: "#0094ff"
Material.theme: Material.Dark
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
}
}
]
}
}