- redesigned the Extension status display in the top left corner

- redesigned the Extension overview in the basestation settings
(for #19)
This commit is contained in:
Dorian Zedler 2020-09-22 15:44:57 +02:00
parent 1ddf07eab3
commit 195ab87fea
Signed by: dorian
GPG key ID: D3B255CB8BC7CD37
6 changed files with 171 additions and 37 deletions

View file

@ -226,7 +226,9 @@ Column {
text: qsTr("volume")
width: parent.width
height: parentObj.delegateHeight
height: parentObj.delegateHeight * 0.8
font.pixelSize: height * 0.5
sliderValue: setting.value
@ -236,6 +238,19 @@ Column {
enabled = true
}
}
NextPageDelegate {
text: qsTr("extensions")
width: parent.width
height: parentObj.delegateHeight * 0.8
font.pixelSize: height * 0.5
onClicked: {
parentObj.push(extensions)
}
}
}
}
}

View file

@ -0,0 +1,106 @@
import QtQuick 2.9
import QtMultimedia 5.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.4
import "../components"
ListView {
id: control
property string title: qsTr("extensions")
property var parentObj
spacing: parentObj.delegateHeight * 0.3
boundsBehavior: Flickable.StopAtBounds
clip: true
model: Object.keys(speedBackend.scStwClient.extensions)
header: Rectangle {
// for top spacing
width: parent.width
height: control.spacing
color: appTheme.theme.colors.view
}
delegate: Rectangle {
id: laneContainerRect
property string thisLane: modelData
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width * 0.98
height: parentObj.delegateHeight * extensionsList.model.length
radius: width * 0.05
border.width: 1
border.color: appTheme.theme.colors.line
color: appTheme.theme.colors.view
Rectangle {
id: laneLabelRect
anchors {
left: parent.left
leftMargin: parent.radius * 1
verticalCenter: parent.top
}
height: parentObj.delegateHeight * 0.5
width: laneLabel.font.pixelSize * 4
color: appTheme.theme.colors.view
Label {
id: laneLabel
height: parent.height
width: parent.width
leftPadding: laneContainerRect.width * 0.02
rightPadding: laneContainerRect.width * 0.02
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
fontSizeMode: Text.Fit
font.pixelSize: height * 0.5
color: appTheme.theme.colors.text
text: "Lane " + laneContainerRect.thisLane
}
}
ListView {
id: extensionsList
anchors.fill: parent
anchors.margins: width * 0.04
interactive: false
model: speedBackend.scStwClient.extensions[parent.thisLane]
delegate: ConnectionDelegate {
property var thisExtension: modelData
property var stateTranslations: ["disconnected", "connecting", "connecting", "connected"]
height: extensionsList.height / extensionsList.model.length
enabled: true
text: thisExtension["type"] === 0 ? "StartPad":"TopPad" // TODO: make dynamic with ScStw::extensionTypeToString()
status: {'status': stateTranslations[thisExtension["state"]]}
}
}
}
}

View file

@ -47,6 +47,14 @@ StackView {
}
Component {
id: extensions
SettingsExtensionsPage {
parentObj: control
}
}
/*-----Custom animations-----*/
pushEnter: Transition {
NumberAnimation {

View file

@ -6,7 +6,7 @@ SmoothItemDelegate {
property var status
property string oldState: ""
property var connect
property var connect: null
property var disconnect
property string type
@ -16,12 +16,14 @@ SmoothItemDelegate {
enabled: (status.status === "disconnected" && control.connect !== undefined) || ( status.status === "connected" && control.disconnect !== undefined )
onClicked: {
if(status.status === "disconnected"){
if(connect == null)
return;
if(status.status === "disconnected")
connect()
}
else {
else
disconnect()
}
}
onStatusChanged: {

View file

@ -248,7 +248,7 @@ Window {
}
Row {
id: connectedExtensionsRow
id: extensionStatusRow
anchors {
top: parent.top
@ -257,49 +257,51 @@ Window {
leftMargin: 1
}
height: parent.height
width: parent.width
height: baseConnConnIcon.height * 0.4
spacing: 5
Repeater {
id: connectedExtensionsRep
anchors.fill: parent
model: speedBackend.scStwClient.extensions.length
delegate: ConnectionIcon {
id: buzzerConnIcon
status: speedBackend.scStwClient.extensions[index]["state"]
id: extensionStatusRep
source: {
var source
switch(speedBackend.scStwClient.extensions[index]["type"]){
case "STARTPAD":
source = appTheme.theme.images.startpadIcon
break
case "TOPPAD":
source = appTheme.theme.images.buzzerIcon
break
}
}
model: Object.keys(speedBackend.scStwClient.extensions)
delegate: Rectangle {
property string thisLetter: modelData
scale: 0
width: height
height: parent.height
height: !app.landscape()? parent.height*0.17:parent.width*0.17
width: status === "disconnected" ? 0:height
radius: width * 0.1
color: appTheme.theme.colors.success // TODO
Component.onCompleted: {
scale = 1
refreshConnectionState()
}
Behavior on scale {
NumberAnimation {
duration: 200
function refreshConnectionState() {
var extensions = speedBackend.scStwClient.extensions[modelData]
for(var i = 0; i < extensions.length; i++) {
console.log(JSON.stringify(extensions[i]))
// TODO!!
}
}
Behavior on width {
NumberAnimation {
duration: 200
}
Text {
anchors.fill: parent
text: parent.thisLetter
fontSizeMode: Text.Fit
font.pixelSize: height
font.bold: true
color: appTheme.theme.colors.background
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
}
}

View file

@ -21,5 +21,6 @@
<file>SettingsDialog/StartPage.qml</file>
<file>SettingsDialog/SettingsStartSequencePage.qml</file>
<file>SettingsDialog/SettingsBaseStationPage.qml</file>
<file>SettingsDialog/SettingsExtensionsPage.qml</file>
</qresource>
</RCC>