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: 86
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
property real rotate: 0.0
onPrimaryColorChanged: requestPaint()
onSecondaryColorChanged: requestPaint()
onMinimumValueChanged: requestPaint()
onMaximumValueChanged: requestPaint()
onCurrentValueChanged: requestPaint()
onRotateChanged: requestPaint()
onPaint: {
var ctx = getContext("2d");
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(width/2,height/2)
ctx.rotate(rotate*Math.PI/180.0)
ctx.translate(-width/2,-height/2)
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();
}
MouseArea {
id: mouseArea
anchors.fill: parent
visible: circularProgressBar.canClick
onClicked: canvas.clicked()
onPressedChanged: canvas.requestPaint()
}
Timer{
id: timer
interval: 150;
running: true
repeat: true;
onTriggered: {
canvas.rotate += 5
}
}
}
}