added battery indicators

This commit is contained in:
Dorian Zedler 2020-10-06 16:29:34 +02:00
parent 08cabc0459
commit a6aba7cc3e
Signed by: dorian
GPG key ID: D3B255CB8BC7CD37
8 changed files with 252 additions and 90 deletions

View file

@ -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
}*/
}

View file

@ -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 {

View file

@ -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

View file

@ -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
}
}
]
}

View file

@ -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
}
}
}

View file

@ -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"

View file

@ -29,5 +29,6 @@
<file>MainPage/BottomToolBar.qml</file>
<file>components/MainActionButton.qml</file>
<file>components/StateIndicator.qml</file>
<file>components/BatteryIndicator.qml</file>
</qresource>
</RCC>

@ -1 +1 @@
Subproject commit bc7baa32bed3b7733b1dbbeb235bcc06fba73b82
Subproject commit 10645e9eb80f64c259d4c007dbb13319fec05887