This repository has been archived on 2024-06-03. You can view files and clone it, but cannot push or open issues or pull requests.
app/resources/qml/components/BatteryIndicator.qml

194 lines
3.9 KiB
QML

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