import QtQuick 2.5
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Rectangle {
id: circularProgressBar
width: 60
height: 60
color: "#333333"
property real currentValue: 0
property bool textVisible: true
property bool canClick: false
Canvas {
id: canvas
anchors.fill: parent
antialiasing: true
property color primaryColor: "transparent"
property color secondaryColor: "lightblue"
property real centerWidth: width / 2
property real centerHeight: height / 2
property real radius: Math.min(canvas.width-10, canvas.height-10) / 2
property real minimumValue: 0
property real maximumValue: 100
property alias currentValue : circularProgressBar.currentValue
property string text: "0"
property real angle: (currentValue - minimumValue) / (maximumValue - minimumValue) * 2 * Math.PI
property real angleOffset: -Math.PI / 2
onPrimaryColorChanged: requestPaint()
onSecondaryColorChanged: requestPaint()
onMinimumValueChanged: requestPaint()
onMaximumValueChanged: requestPaint()
onCurrentValueChanged: requestPaint()
onPaint: {
var ctx = getContext("2d");
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
if(mouseArea.pressed) {
ctx.beginPath();
ctx.lineWidth = 10;
ctx.fillStyle = Qt.lighter(canvas.secondaryColor,1.25);
ctx.arc(canvas.centerWidth,
canvas.centerHeight,
canvas.radius,
0,
2*Math.PI);
ctx.fill();
timer.running = true;
}
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = primaryColor;
ctx.arc(canvas.centerWidth,
canvas.centerHeight,
canvas.radius,
angleOffset + canvas.angle,
angleOffset + 2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeStyle = canvas.secondaryColor;
ctx.arc(canvas.centerWidth,
canvas.centerHeight,
canvas.radius,
canvas.angleOffset,
canvas.angleOffset + canvas.angle);
ctx.stroke();
ctx.restore();
}
Text {
id: progressText
anchors.centerIn: parent
font.pixelSize: 16
text: canvas.text
visible: circularProgressBar.textVisible
color: canvas.secondaryColor
}
MouseArea {
id: mouseArea
anchors.fill: parent
visible: circularProgressBar.canClick
onClicked: canvas.clicked()
onPressedChanged: canvas.requestPaint()
}
Timer{
id: timer
interval: 100;
running: true
repeat: true;
onTriggered: {
if(circularProgressBar.currentValue === 100) {
circularProgressBar.currentValue = 0;
progressText.text = "0"
}
circularProgressBar.currentValue += 1;
progressText.text = circularProgressBar.currentValue.toString()+"%";
}
}
}
}