Rebuild Displays around the canvas, and let the transaction keep color

Claude-Session: https://claude.ai/code/session_01Ms2FbjQy31TVf3CEvQhGM8
2026-08-24 10:44:11 -04:00
parent 1f694b00b6
commit 9bc68ba358
29 changed files with 3065 additions and 388 deletions
@@ -0,0 +1,73 @@
+// The fifteen seconds a display change has left, drawn as a ring.
+//
+// Repainted once per second, when `secondsLeft` changes, and never otherwise:
+// this shell has no idle animation, and a countdown that redraws every frame
+// would be one -- on a 240 Hz panel it is 240 repaints to move a number that
+// changes once.
+
+import QtQuick
+import qs.config
+
+Item {
+    id: root
+
+    property int secondsLeft: 0
+    property int totalSeconds: 15
+
+    implicitWidth: 40
+    implicitHeight: 40
+
+    onSecondsLeftChanged: ring.requestPaint()
+    onTotalSecondsChanged: ring.requestPaint()
+    onVisibleChanged: if (root.visible) ring.requestPaint()
+
+    Canvas {
+        id: ring
+
+        anchors.fill: parent
+
+        onPaint: {
+            const context = ring.getContext("2d");
+            context.reset();
+
+            const stroke = 3.5;
+            const radius = Math.min(ring.width, ring.height) / 2 - stroke / 2 - 1;
+            const centreX = ring.width / 2;
+            const centreY = ring.height / 2;
+            if (radius <= 0)
+                return;
+
+            context.lineWidth = stroke;
+            context.lineCap = "round";
+
+            context.strokeStyle = Theme.alpha(Theme.warn, 0.18);
+            context.beginPath();
+            context.arc(centreX, centreY, radius, 0, Math.PI * 2);
+            context.stroke();
+
+            const remaining = root.totalSeconds > 0
+                ? Math.max(0, Math.min(1, root.secondsLeft / root.totalSeconds))
+                : 0;
+            if (remaining <= 0)
+                return;
+
+            // Twelve o'clock, clockwise, so the arc empties the way a clock
+            // face does rather than unwinding backwards.
+            context.strokeStyle = Theme.warn;
+            context.beginPath();
+            context.arc(centreX, centreY, radius,
+                -Math.PI / 2, -Math.PI / 2 + remaining * Math.PI * 2);
+            context.stroke();
+        }
+    }
+
+    Text {
+        anchors.centerIn: parent
+        text: String(Math.max(0, root.secondsLeft))
+        color: Theme.warn
+        font.family: Theme.fontFamily
+        font.features: Theme.tabularFigures
+        font.pixelSize: Theme.fontSizeSmall
+        font.weight: Font.DemiBold
+    }
+}