This commit is contained in:
Zacharias-Brohn
2026-03-12 10:04:27 +01:00
parent 401ccef90c
commit 851b78f0ff
17 changed files with 1347 additions and 64 deletions
+18 -62
View File
@@ -19,91 +19,47 @@ RowLayout {
property bool warning: percentage * 100 >= warningThreshold
property int warningThreshold: 80
clip: true
percentage: 0
Behavior on animatedPercentage {
Anim {
duration: Appearance.anim.durations.large
}
}
Component.onCompleted: animatedPercentage = percentage
onPercentageChanged: animatedPercentage = percentage
onPercentageChanged: {
const next = 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
// }
// }
if (Math.abs(next - animatedPercentage) >= 0.05)
animatedPercentage = next;
}
MaterialIcon {
id: icon
color: DynamicColors.palette.m3onSurface
font.pointSize: 12
font.pointSize: Appearance.font.size.larger
text: root.icon
}
CustomClippingRect {
Layout.preferredHeight: root.height
Layout.preferredWidth: 5
Layout.preferredHeight: root.height - Appearance.padding.small
Layout.preferredWidth: 4
color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
radius: Appearance.rounding.full
CustomRect {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
color: root.mainColor
implicitHeight: root.percentage * parent.height
radius: implicitHeight / 2
id: fill
Behavior on implicitHeight {
Anim {
}
anchors.fill: parent
antialiasing: false
color: root.mainColor
implicitHeight: Math.ceil(root.percentage * parent.height)
radius: Appearance.rounding.full
transform: Scale {
origin.y: fill.height
yScale: Math.max(0.001, root.animatedPercentage)
}
}
}