From 195ab87fea4868cc21d7c6bbda96636f3a5a4ab5 Mon Sep 17 00:00:00 2001 From: Dorian Zedler Date: Tue, 22 Sep 2020 15:44:57 +0200 Subject: [PATCH] - redesigned the Extension status display in the top left corner - redesigned the Extension overview in the basestation settings (for #19) --- .../SettingsBaseStationPage.qml | 17 ++- .../SettingsDialog/SettingsExtensionsPage.qml | 106 ++++++++++++++++++ .../qml/SettingsDialog/SettingsStack.qml | 8 ++ .../qml/components/ConnectionDelegate.qml | 12 +- resources/qml/main.qml | 64 ++++++----- resources/qml/qml.qrc | 1 + 6 files changed, 171 insertions(+), 37 deletions(-) create mode 100644 resources/qml/SettingsDialog/SettingsExtensionsPage.qml diff --git a/resources/qml/SettingsDialog/SettingsBaseStationPage.qml b/resources/qml/SettingsDialog/SettingsBaseStationPage.qml index 1ab1d24..f82ef9b 100644 --- a/resources/qml/SettingsDialog/SettingsBaseStationPage.qml +++ b/resources/qml/SettingsDialog/SettingsBaseStationPage.qml @@ -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) + } + } } } } diff --git a/resources/qml/SettingsDialog/SettingsExtensionsPage.qml b/resources/qml/SettingsDialog/SettingsExtensionsPage.qml new file mode 100644 index 0000000..47940c9 --- /dev/null +++ b/resources/qml/SettingsDialog/SettingsExtensionsPage.qml @@ -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"]]} + } + } + } +} diff --git a/resources/qml/SettingsDialog/SettingsStack.qml b/resources/qml/SettingsDialog/SettingsStack.qml index af80d1a..e63725a 100644 --- a/resources/qml/SettingsDialog/SettingsStack.qml +++ b/resources/qml/SettingsDialog/SettingsStack.qml @@ -47,6 +47,14 @@ StackView { } + Component { + id: extensions + + SettingsExtensionsPage { + parentObj: control + } + } + /*-----Custom animations-----*/ pushEnter: Transition { NumberAnimation { diff --git a/resources/qml/components/ConnectionDelegate.qml b/resources/qml/components/ConnectionDelegate.qml index f8c96d0..9285c81 100644 --- a/resources/qml/components/ConnectionDelegate.qml +++ b/resources/qml/components/ConnectionDelegate.qml @@ -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: { diff --git a/resources/qml/main.qml b/resources/qml/main.qml index 9d13f04..1f319f6 100644 --- a/resources/qml/main.qml +++ b/resources/qml/main.qml @@ -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 } + } } } diff --git a/resources/qml/qml.qrc b/resources/qml/qml.qrc index 526b689..43f6541 100644 --- a/resources/qml/qml.qrc +++ b/resources/qml/qml.qrc @@ -21,5 +21,6 @@ SettingsDialog/StartPage.qml SettingsDialog/SettingsStartSequencePage.qml SettingsDialog/SettingsBaseStationPage.qml + SettingsDialog/SettingsExtensionsPage.qml