added battery indicators
This commit is contained in:
parent
08cabc0459
commit
a6aba7cc3e
8 changed files with 252 additions and 90 deletions
|
@ -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
|
||||
}*/
|
||||
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
194
resources/qml/components/BatteryIndicator.qml
Normal file
194
resources/qml/components/BatteryIndicator.qml
Normal 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
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
||||
|
|
|
@ -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
|
Reference in a new issue