Zacharias-Brohn
111 lines
2.7 KiB
QML
111 lines
2.7 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Shapes
|
|
import qs.Components
|
|
import qs.Config
|
|
|
|
Item {
|
|
id: root
|
|
|
|
property color accentColor: warning ? DynamicColors.palette.m3error : mainColor
|
|
property real animatedPercentage: 0
|
|
readonly property real arcStartAngle: 0.75 * Math.PI
|
|
readonly property real arcSweep: 1.5 * Math.PI
|
|
property string icon
|
|
required property color mainColor
|
|
required property double percentage
|
|
property bool shown: true
|
|
property color usageColor: warning ? DynamicColors.palette.m3error : mainColor
|
|
property bool warning: percentage * 100 >= warningThreshold
|
|
property int warningThreshold: 80
|
|
|
|
clip: true
|
|
height: implicitHeight
|
|
implicitHeight: 34
|
|
implicitWidth: 34
|
|
percentage: 0
|
|
visible: width > 0 && height > 0
|
|
width: implicitWidth
|
|
|
|
Behavior on animatedPercentage {
|
|
Anim {
|
|
duration: Appearance.anim.durations.large
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: animatedPercentage = percentage
|
|
onPercentageChanged: animatedPercentage = percentage
|
|
|
|
// Canvas {
|
|
// id: gaugeCanvas
|
|
//
|
|
// anchors.centerIn: parent
|
|
// height: width
|
|
// width: Math.min(parent.width, parent.height)
|
|
//
|
|
// Component.onCompleted: requestPaint()
|
|
// onPaint: {
|
|
// const ctx = getContext("2d");
|
|
// ctx.reset();
|
|
// const cx = width / 2;
|
|
// const cy = (height / 2) + 1;
|
|
// const radius = (Math.min(width, height) - 12) / 2;
|
|
// const lineWidth = 3;
|
|
// ctx.beginPath();
|
|
// ctx.arc(cx, cy, radius, root.arcStartAngle, root.arcStartAngle + root.arcSweep);
|
|
// ctx.lineWidth = lineWidth;
|
|
// ctx.lineCap = "round";
|
|
// ctx.strokeStyle = DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2);
|
|
// ctx.stroke();
|
|
// if (root.animatedPercentage > 0) {
|
|
// ctx.beginPath();
|
|
// ctx.arc(cx, cy, radius, root.arcStartAngle, root.arcStartAngle + root.arcSweep * root.animatedPercentage);
|
|
// ctx.lineWidth = lineWidth;
|
|
// ctx.lineCap = "round";
|
|
// ctx.strokeStyle = root.accentColor;
|
|
// ctx.stroke();
|
|
// }
|
|
// }
|
|
//
|
|
// Connections {
|
|
// function onAnimatedPercentageChanged() {
|
|
// gaugeCanvas.requestPaint();
|
|
// }
|
|
//
|
|
// target: root
|
|
// }
|
|
//
|
|
// Connections {
|
|
// function onPaletteChanged() {
|
|
// gaugeCanvas.requestPaint();
|
|
// }
|
|
//
|
|
// target: DynamicColors
|
|
// }
|
|
// }
|
|
|
|
MaterialIcon {
|
|
id: icon
|
|
|
|
anchors.centerIn: parent
|
|
color: DynamicColors.palette.m3onSurface
|
|
font.pointSize: 12
|
|
text: root.icon
|
|
}
|
|
|
|
CustomRect {
|
|
anchors.left: icon.right
|
|
color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
|
|
implicitHeight: parent.height
|
|
implicitWidth: 5
|
|
radius: Appearance.rounding.full
|
|
|
|
CustomRect {
|
|
anchors.bottom: parent.bottom
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
color: root.mainColor
|
|
}
|
|
}
|
|
}
|