From a6aba7cc3e0784e4a88049a4c51bd3402ff24467 Mon Sep 17 00:00:00 2001 From: Dorian Zedler Date: Tue, 6 Oct 2020 16:29:34 +0200 Subject: [PATCH] added battery indicators --- resources/qml/MainPage/CenterContent.qml | 75 +------ resources/qml/MainPage/TopToolBar.qml | 16 +- .../SettingsDialog/SettingsExtensionsPage.qml | 3 + resources/qml/components/BatteryIndicator.qml | 194 ++++++++++++++++++ .../qml/components/ConnectionDelegate.qml | 40 +++- resources/qml/components/StateIndicator.qml | 11 +- resources/qml/qml.qrc | 1 + shared-libraries | 2 +- 8 files changed, 252 insertions(+), 90 deletions(-) create mode 100644 resources/qml/components/BatteryIndicator.qml diff --git a/resources/qml/MainPage/CenterContent.qml b/resources/qml/MainPage/CenterContent.qml index fcf0e96..1a8605a 100644 --- a/resources/qml/MainPage/CenterContent.qml +++ b/resources/qml/MainPage/CenterContent.qml @@ -26,15 +26,15 @@ Item { width: parent.width height: parent.height - columns: app.landscape() ? 2:1 - rows: app.landscape() ? 1:2 + columns: app.landscape() ? 3:1 + rows: app.landscape() ? 1:3 Item { id: centerExtraContentTop property double size - Layout.preferredHeight: app.landscape() ? centerLayout.height * 0.8:Math.min(centerLayout.width * size, centerLayout.height * size) + Layout.preferredHeight: app.landscape() ? centerLayout.height * 0.6:Math.min(centerLayout.width * size, centerLayout.height * size) Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):centerLayout.width * 0.8 Layout.alignment: Layout.Center @@ -371,73 +371,4 @@ Item { } ] - - /* - - - ProgressCircle { - id: prog - - property double progress: speedBackend.race.nextStartActionDetails[ScStwRace.NextStartActionDelayProgress] - - anchors.fill: startButt - opacity: app.state === "STARTING" ? 1:0 - - scale: startButt.scale - - lineWidth: prog.width * 0.02 - - arcBegin: 0 - arcEnd: 360 * (1 - (progress > 0 ? progress:1)) - - colorCircle: "grey" - - Behavior on opacity { - NumberAnimation { - duration: 200 - } - } - - animationDuration: 0 - } - - FancyButton { - id: cancelButt - - text: "cancel" - anchors { - right: startButt.right - bottom: startButt.bottom - } - contentItem: Text { - //make text disappear - } - height: startButt.height * 0.3 - scale: 0 - width: height - - enabled: app.state === "STARTING" - - onClicked: { - app.cancel() - } - - Behavior on scale { - PropertyAnimation { - duration: 200 - } - } - - Text { - id: cancelButt_text - text: cancelButt.text - anchors.centerIn: parent - font.pixelSize: parent.height * 0.16 - font.family: "Helvetica" - color: appTheme.theme.colors.text - } - - backgroundColor: appTheme.theme.colors.button - }*/ - } diff --git a/resources/qml/MainPage/TopToolBar.qml b/resources/qml/MainPage/TopToolBar.qml index 9f86d18..7a5d4e7 100644 --- a/resources/qml/MainPage/TopToolBar.qml +++ b/resources/qml/MainPage/TopToolBar.qml @@ -148,7 +148,7 @@ ToolBar { property string thisLetter: modelData property var thisExtensions: speedBackend.scStwClient.extensions[modelData] - property bool allExtensionConnected: areAllExtensionConnected(thisExtensions) + property int thisLaneState: getLaneState(thisExtensions) width: height height: parent.height @@ -156,21 +156,23 @@ ToolBar { radius: width * 0.1 color: appTheme.theme.colors.background - border.color: allExtensionConnected ? appTheme.theme.colors.success:appTheme.theme.colors.error + border.color: [appTheme.theme.colors.success, appTheme.theme.colors.warning, appTheme.theme.colors.error][thisLaneState] border.width: width * 0.08 onThisExtensionsChanged: { - allExtensionConnected = areAllExtensionConnected(thisExtensions) + thisLaneState = getLaneState(thisExtensions) } - function areAllExtensionConnected(extensions) { + function getLaneState(extensions) { for(var i = 0; i < extensions.length; i++) { console.log(JSON.stringify(extensions[i])) - if(extensions[i]["state"] !== ScStw.ExtensionConnected || extensions[i]["batteryState"] !== ScStw.BatteryFine) - return false + if(extensions[i]["state"] !== ScStw.ExtensionConnected || extensions[i]["batteryState"] === ScStw.BatteryCritical) + return 2 + if(extensions[i]["batteryState"] === ScStw.BatteryWarning) + return 1 } - return true + return 0 } Behavior on border.color { diff --git a/resources/qml/SettingsDialog/SettingsExtensionsPage.qml b/resources/qml/SettingsDialog/SettingsExtensionsPage.qml index 4fac7ca..f0dee47 100644 --- a/resources/qml/SettingsDialog/SettingsExtensionsPage.qml +++ b/resources/qml/SettingsDialog/SettingsExtensionsPage.qml @@ -93,6 +93,9 @@ ListView { delegate: ConnectionDelegate { property var thisExtension: speedBackend.scStwClient.extensions[laneContainerRect.thisLane][index] property var stateTranslations: ["disconnected", "connecting", "connecting", "connected"] + property var batteryStateStrings: ["critical", "warning", "fine", "charging"] + + batteryState: thisExtension["batteryState"] === -1 ? "unknown":batteryStateStrings[thisExtension["batteryState"]] height: extensionsList.height / extensionsList.model diff --git a/resources/qml/components/BatteryIndicator.qml b/resources/qml/components/BatteryIndicator.qml new file mode 100644 index 0000000..d2045e5 --- /dev/null +++ b/resources/qml/components/BatteryIndicator.qml @@ -0,0 +1,194 @@ +import QtQuick 2.0 + +Rectangle { + id: control + + property color chargingColor: "green" + property color fineColor: "green" + property color warningColor: "orange" + property color criticalColor: "red" + property color unknownColor: "grey" + property color backgroundColor: "white" + property double indicatorSize: 1 + + height: app.height * 0.9 + width: height * 0.8 + + color: backgroundColor + + border.width: Math.min(width * 0.1, height * 0.1) * control.indicatorSize + border.color: "green" + radius: border.width + + state: "charging" + + Rectangle { + id: outerRect + + anchors { + right: parent.left + rightMargin: parent.border.width * 0.25 + verticalCenter: parent.verticalCenter + } + + width: parent.border.width + height: parent.height * 0.5 + radius: width * 0.5 + + color: parent.border.color + } + + Rectangle { + id: innerRect + + property double amountFilled: 1 + + anchors { + top: parent.top + bottom: parent.bottom + right: parent.right + + margins: parent.border.width * 1.5 + } + + width: (parent.width - parent.border.width * 3) * amountFilled + + radius: control.radius * 0.5 + + border.width: 0 + + color: control.border.color + + Rectangle { + id: chargingRect + + property double amountFilled: 0 + + anchors { + top: parent.top + bottom: parent.bottom + right: parent.right + } + + width: parent.width * amountFilled + + radius: innerRect.radius + + color: Qt.darker(innerRect.color, 1.5) + } + } + + + ParallelAnimation { + id: chargingAnimation + + running: false + + loops: Animation.Infinite + alwaysRunToEnd: true + + NumberAnimation { + target: chargingRect + + properties: "amountFilled" + + from: 0 + to: 1 + + duration: 3000 + + easing.type: Easing.OutQuad + } + + NumberAnimation { + target: chargingRect + + properties: "opacity" + + from: 1 + to: 0 + + duration: 3000 + + easing.type: Easing.Linear + } + } + + states: [ + State { + name: "charging" + PropertyChanges { + target: control + border.color: control.chargingColor + } + + PropertyChanges { + target: innerRect + amountFilled: 1 + } + + PropertyChanges { + target: chargingAnimation + running: true + } + }, + + State { + name: "fine" + PropertyChanges { + target: control + border.color: control.fineColor + } + + PropertyChanges { + target: innerRect + amountFilled: 1 + } + }, + + State { + name: "warning" + PropertyChanges { + target: control + border.color: control.warningColor + } + + PropertyChanges { + target: innerRect + amountFilled: 0.3 + } + }, + + State { + name: "critical" + PropertyChanges { + target: control + border.color: control.criticalColor + } + + PropertyChanges { + target: innerRect + amountFilled: 0.1 + } + } + + ] + + transitions: [ + Transition { + NumberAnimation { + properties: "amountFilled" + duration: 400 + easing.type: Easing.InOutQuad + } + + + ColorAnimation { + properties: "color,border.color" + duration: 400 + easing.type: Easing.InOutQuad + } + } + ] + +} diff --git a/resources/qml/components/ConnectionDelegate.qml b/resources/qml/components/ConnectionDelegate.qml index 49e4a56..e3bfee2 100644 --- a/resources/qml/components/ConnectionDelegate.qml +++ b/resources/qml/components/ConnectionDelegate.qml @@ -8,6 +8,7 @@ SmoothItemDelegate { property string oldState: "" property var connect: null property var disconnect + property string batteryState: "unknown" property string type @@ -46,20 +47,47 @@ SmoothItemDelegate { } } - Item { - id: statusItem + Row { anchors { right: parent.right rightMargin: ( height / control.height / 2 ) * height verticalCenter: parent.verticalCenter } - height: control.height * 0.4 - width: height + + spacing: height * 0.4 + + BatteryIndicator { + id: batteryIndicator + + height: control.height * 0.4 + width: height + + opacity: control.batteryState === "unknown" ? 0:1 + + backgroundColor: "transparent" + chargingColor: fineColor + fineColor: appTheme.theme.colors.success + warningColor: appTheme.theme.colors.warning + criticalColor: appTheme.theme.colors.error + + state: control.batteryState + + indicatorSize: 0.8 + + Behavior on opacity { + NumberAnimation { + duration: 200 + } + } + } StateIndicator { id: statusIndicator property string color_override: "" - anchors.fill: parent + + height: control.height * 0.4 + width: height + state: color_override === "" ? status.status === "connected" ? "success": status.status === "connecting" ? "working":"unknown":color_override indicatorSize: 0.8 @@ -71,4 +99,6 @@ SmoothItemDelegate { errorColor: appTheme.theme.colors.error } } + + } diff --git a/resources/qml/components/StateIndicator.qml b/resources/qml/components/StateIndicator.qml index a648d5d..e4485ee 100644 --- a/resources/qml/components/StateIndicator.qml +++ b/resources/qml/components/StateIndicator.qml @@ -54,8 +54,8 @@ Rectangle { ParallelAnimation { id: workingAnimation - property int from: Math.min(parent.width * 0.1, parent.height * 0.1) * control.indicatorSize - property int to: Math.max(parent.width * 0.98, parent.height * 0.98) + property int from: lowerRect.height + property int to: Math.max(control.width * 1.1, control.height * 1.1) property bool shouldBeRunning: false @@ -86,7 +86,7 @@ Rectangle { properties: "opacity" from: 1 - to: 0.5 + to: 0.3 duration: 1000 @@ -99,6 +99,7 @@ Rectangle { duration: 400 onStopped: { workingAnimation.running = workingAnimation.shouldBeRunning + higherRect.opacity = 1 } } @@ -255,8 +256,8 @@ Rectangle { State { id: tickState - property int bottomX: (control.width) / 2 - (higherRect.totalWidth - (lowerRect.totalWidth + higherRect.totalWidth) / 2 ) - property int bottomY: (control.height + higherRect.totalHeight) / 2 - lowerRect.radius + property int bottomX: ((control.width) / 2 - (higherRect.totalWidth - (lowerRect.totalWidth + higherRect.totalWidth) / 2 )) * 1.055 + property int bottomY: ((control.height + higherRect.totalHeight) / 2 - lowerRect.radius) * 1.05 name: "success" diff --git a/resources/qml/qml.qrc b/resources/qml/qml.qrc index 657e4b6..8e0b577 100644 --- a/resources/qml/qml.qrc +++ b/resources/qml/qml.qrc @@ -29,5 +29,6 @@ MainPage/BottomToolBar.qml components/MainActionButton.qml components/StateIndicator.qml + components/BatteryIndicator.qml diff --git a/shared-libraries b/shared-libraries index bc7baa3..10645e9 160000 --- a/shared-libraries +++ b/shared-libraries @@ -1 +1 @@ -Subproject commit bc7baa32bed3b7733b1dbbeb235bcc06fba73b82 +Subproject commit 10645e9eb80f64c259d4c007dbb13319fec05887