Redesign the battery graph
This commit is contained in:
parent
b5c2002080
commit
c546cdef99
3 changed files with 76 additions and 19 deletions
|
@ -20,39 +20,94 @@ import Sailfish.Silica 1.0
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: batteryGraph
|
id: batteryGraph
|
||||||
property real borderSize: width * 0.15
|
property real borderSize: width * 0.1
|
||||||
property real charge: battery.charge
|
property bool enableLowBatteryAnimation
|
||||||
property bool chargerConnected: battery.chargerConnected
|
property int _charge: battery.charge
|
||||||
|
|
||||||
height: 1.75 * width
|
height: 1.75 * width
|
||||||
|
|
||||||
|
// Timer {
|
||||||
|
// id: debugChargeAnimation
|
||||||
|
// property int newCharge: -20
|
||||||
|
// repeat: true
|
||||||
|
// running: true
|
||||||
|
// interval: 300
|
||||||
|
// onTriggered: {
|
||||||
|
// newCharge = newCharge + 5
|
||||||
|
// if(newCharge > 120)
|
||||||
|
// newCharge = -20
|
||||||
|
// _charge = newCharge < 0 ? 0 : newCharge > 100 ? 100 : newCharge
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
Timer {
|
||||||
|
id: lowChargeBlink
|
||||||
|
property int counter: 0
|
||||||
|
running: (false && enableLowBatteryAnimation
|
||||||
|
&& !battery.chargerConnected
|
||||||
|
&& _charge <= settings.lowAlert)
|
||||||
|
repeat: true
|
||||||
|
interval: 400
|
||||||
|
onTriggered: {
|
||||||
|
counter = (counter + 1) % 5
|
||||||
|
if(counter === 0) {
|
||||||
|
batteryLevel.opacity = 0.0
|
||||||
|
restoreOpacity.start()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Timer {
|
||||||
|
id: restoreOpacity
|
||||||
|
running: false
|
||||||
|
repeat: false
|
||||||
|
interval: opacityAnimation.duration
|
||||||
|
onTriggered: batteryLevel.opacity = 1.0
|
||||||
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: battTip
|
id: battTip
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
width: 2 * borderSize
|
width: 2 * borderSize
|
||||||
height: borderSize
|
height: 1.5 * borderSize
|
||||||
color: "white"
|
color: Theme.highlightBackgroundColor
|
||||||
radius: 0.25 * borderSize
|
radius: borderSize / 2
|
||||||
}
|
}
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: battBody
|
id: battBody
|
||||||
anchors.top: battTip.verticalCenter
|
anchors {
|
||||||
anchors.bottom: parent.bottom
|
top: battTip.verticalCenter
|
||||||
width: parent.width
|
bottom: parent.bottom
|
||||||
color: "black"
|
horizontalCenter: parent.horizontalCenter
|
||||||
border.color: "white"
|
}
|
||||||
|
width: parent.width * 0.75
|
||||||
|
color: "transparent"
|
||||||
|
border.color: Theme.highlightBackgroundColor
|
||||||
border.width: borderSize
|
border.width: borderSize
|
||||||
radius: 0.25 * borderSize
|
radius: borderSize
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: batteryLevel
|
id: batteryLevel
|
||||||
border.color: "black"
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
border.width: 0.4 * borderSize
|
anchors.bottom: parent.bottom
|
||||||
x: borderSize
|
anchors.bottomMargin: borderSize * 1.5
|
||||||
y: parent.height - x - height
|
width: parent.width - 3 * borderSize
|
||||||
width: parent.width - 2.0 * x
|
height: (borderSize) + ((parent.height - 4 * borderSize) * _charge / 100.0)
|
||||||
height: (parent.height - 2.0 * x) * charge / 100.0
|
radius: borderSize / 2
|
||||||
color: charge >= 80 ? "white" : charge >= 50 ? "green" : charge >= 20 ? "orange" : "red"
|
opacity: 1.0
|
||||||
|
color: _charge >= 80 ? Theme.highlightBackgroundColor
|
||||||
|
: _charge >= 50 ? Theme.highlightFromColor("green", Theme.colorScheme)
|
||||||
|
: _charge >= 20 ? Theme.highlightFromColor("yellow", Theme.colorScheme)
|
||||||
|
: Theme.highlightFromColor("red", Theme.colorScheme)
|
||||||
|
Behavior on color {
|
||||||
|
ColorAnimation {}
|
||||||
|
}
|
||||||
|
Behavior on opacity {
|
||||||
|
NumberAnimation {
|
||||||
|
id: opacityAnimation
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,6 +33,7 @@ CoverBackground {
|
||||||
x: coverPage.width * 0.3
|
x: coverPage.width * 0.3
|
||||||
y: coverPage.width * 0.25
|
y: coverPage.width * 0.25
|
||||||
width: 0.35 * coverPage.width
|
width: 0.35 * coverPage.width
|
||||||
|
enableLowBatteryAnimation: coverPage.status === Cover.Active
|
||||||
}
|
}
|
||||||
CoverLabel {
|
CoverLabel {
|
||||||
id: chargeLabel
|
id: chargeLabel
|
||||||
|
|
|
@ -106,6 +106,7 @@ Page {
|
||||||
rotation: 90
|
rotation: 90
|
||||||
width: parent.width * 0.2
|
width: parent.width * 0.2
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
|
enableLowBatteryAnimation: Qt.application.active
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Detail column
|
// Detail column
|
||||||
|
|
Loading…
Reference in a new issue