LedDisplay/OmobiDisplayApp/ressources/qml/ConnectPage.qml
Dorian Zedler ce6d436c85
- finished implementing protocol
- added Initializing and Loading states
- added color picker
2020-10-14 23:54:12 +02:00

185 lines
5 KiB
QML

import QtQuick 2.0
import QtQuick.Controls 2.9
import QtQuick.Layouts 1.0
import de.itsblue.omobidisplayapp 1.0
import de.itsblue.bluetoothleuart 1.0
import QtQuick.Controls.Material 2.0
Page {
id: root
property string statusText
property bool working
ColumnLayout {
anchors {
fill: parent
margins: parent.height * 0.01
topMargin: 0
}
Text {
Layout.preferredWidth: parent.width * 0.6
Layout.preferredHeight: parent.height * 0.1
Layout.alignment: Layout.Center
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
fontSizeMode: Text.Fit
font.pixelSize: 500
minimumPixelSize: 1
text: qsTr("Available devices")
}
ListView {
id: availableDevicesListView
Layout.preferredWidth: parent.width
Layout.fillHeight: true
Layout.alignment: Layout.Center
clip: true
model: backend.bleController.availableDevicesModel
add: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 200 }
NumberAnimation { property: "scale"; from: 0.9; to: 1; duration: 200 }
}
remove: Transition {
NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 200 }
NumberAnimation { property: "scale"; from: 1; to: 0.9; duration: 200 }
}
spacing: 5
header: ItemDelegate {
id: headerDelegate
width: parent.width
height: implicitHeight * 0.8
topInset: 10
bottomInset: 10
text: root.statusText
onClicked: backend.bleController.startScanningForDevices()
Rectangle {
anchors.fill: parent
anchors.topMargin: 10
anchors.bottomMargin: 10
color: "transparent"
border.color: "lightgrey"
border.width: 3
}
Item {
anchors {
right: parent.right
rightMargin: parent.height * 0.15
verticalCenter: parent.verticalCenter
}
height: (parent.height - 20) * 0.7
width: height
BusyIndicator {
id: busyIndicator
anchors.centerIn: parent
width: parent.width
height: parent.height
opacity: root.working ? 1:0
}
}
}
delegate: ItemDelegate {
width: parent.width
text: name
onClicked: backend.bleController.connectToDevice(device)
Rectangle {
anchors {
top: parent.top
left: parent.left
right: parent.right
topMargin: - availableDevicesListView.spacing * 0.5
}
color: "lightgrey"
height: 1
visible: index !== 0
}
}
}
}
states: [
State {
name: OmobiDisplayBackend.Idle
PropertyChanges {
target: root
statusText: "Tap here to scan"
working: false
}
},
State {
name: OmobiDisplayBackend.Scanning
PropertyChanges {
target: root
statusText: "Scanning..."
working: true
}
},
State {
name: OmobiDisplayBackend.ReadyToConnect
PropertyChanges {
target: root
statusText: availableDevicesListView.model.rowCount() > 0 ? "Please select a device or tap to scan again":"No devices found. Tap to scan again"
working: false
}
},
State {
name: OmobiDisplayBackend.Connecting
PropertyChanges {
target: availableDevicesListView
enabled: false
}
PropertyChanges {
target: root
statusText: "trying to connect..."
working: true
}
},
State {
name: OmobiDisplayBackend.Initing
PropertyChanges {
target: availableDevicesListView
enabled: false
}
PropertyChanges {
target: root
statusText: "loading data..."
working: true
}
}
]
}