feat(StatusCircularProgressBar): add a circular progress bar

- based on QML Canvas
- visualizing progress value (0..1) on a circle with 2 configurable
colors
This commit is contained in:
Lukáš Tinkl 2024-09-16 19:24:12 +02:00 committed by Lukáš Tinkl
parent 0c37700d52
commit 02066d098d
3 changed files with 70 additions and 0 deletions

View File

@ -0,0 +1,68 @@
import QtQuick 2.15
import StatusQ.Core.Theme 0.1
Item {
id: root
property int size: 16
property real lineWidth: 1.5
property real value: 1 // 0..1
property color primaryColor: Theme.palette.primaryColor1
property color secondaryColor: Theme.palette.primaryColor2
property int animationDuration: 1000
width: size
height: size
onValueChanged: canvas.degree = value * 360
Canvas {
id: canvas
property real degree: 0
anchors.fill: parent
antialiasing: true
renderStrategy: Canvas.Threaded
onDegreeChanged: {
requestPaint()
}
onPaint: {
var ctx = getContext("2d")
var x = root.width/2
var y = root.height/2
var radius = root.size/2 - root.lineWidth
var startAngle = (Math.PI/180) * 270
var fullAngle = (Math.PI/180) * (270 + 360)
var progressAngle = (Math.PI/180) * (270 + degree)
ctx.reset()
ctx.lineCap = 'round'
ctx.lineWidth = root.lineWidth
ctx.beginPath()
ctx.arc(x, y, radius, startAngle, fullAngle)
ctx.strokeStyle = root.secondaryColor
ctx.stroke()
ctx.beginPath()
ctx.arc(x, y, radius, startAngle, progressAngle)
ctx.strokeStyle = root.primaryColor
ctx.stroke()
}
Behavior on degree {
NumberAnimation {
duration: root.animationDuration
}
}
}
}

View File

@ -63,3 +63,4 @@ StatusColorRadioButton 0.1 StatusColorRadioButton.qml
StatusBlockProgressBar 0.1 StatusBlockProgressBar.qml
StatusWarningBox 0.1 StatusWarningBox.qml
StatusIconSwitch 0.1 StatusIconSwitch.qml
StatusCircularProgressBar 0.1 StatusCircularProgressBar.qml

View File

@ -103,6 +103,7 @@
<file>StatusQ/Controls/StatusChatInfoButton.qml</file>
<file>StatusQ/Controls/StatusChatListCategoryItemButton.qml</file>
<file>StatusQ/Controls/StatusCheckBox.qml</file>
<file>StatusQ/Controls/StatusCircularProgressBar.qml</file>
<file>StatusQ/Controls/StatusClearButton.qml</file>
<file>StatusQ/Controls/StatusColorRadioButton.qml</file>
<file>StatusQ/Controls/StatusColorSelector.qml</file>