LedDisplay/OmobiDisplayApp/ressources/qml/ConnectPage.qml

195 lines
5 KiB
QML
Raw Normal View History

2020-10-11 15:50:13 +02:00
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.05
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.fill: parent
color: "transparent"
border.color: "lightgrey"
border.width: 3
}
}
}
}
Popup {
id: connectingPopup
property bool shouldBeOpened: false
parent: Overlay.overlay
x: (parent.width - width) / 2
y: (parent.height - height) / 2
closePolicy: Popup.NoAutoClose
dim: true
contentItem: Column {
BusyIndicator {
running: true
}
}
onShouldBeOpenedChanged: {
if(shouldBeOpened)
connectingPopup.open()
else
connectingPopup.close()
}
}
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
}
}
]
}