194 lines
3.9 KiB
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
|
|
}
|
|
}
|
|
]
|
|
|
|
}
|