Dial-style progress bars

mzimmers

Hi all -

Customer wants something like this:

Two nested, circular progress bars with some annotation. All very doable...except the circular part. I did some looking online, and I guess some people have created stuff to do this, but my preference would be to use components supplied by Qt.

Any suggestions on how we might do this?

mrjj

Hi
what does circular part do ?
I used an animated gif for this. but you need it to show the actual % ?

mzimmers

@mrjj the circular part is just a progress bar, bent into a curve. At least, this is what I'm hoping for -- it's very possible that this isn't readily available in Qt.

J.Hilk

QWidgets I assume?

QML has the circular gauge, that could be modified. But for widgets you probably need to override the paintevent and draw it yourself.

mzimmers

@J-Hilk no, QML is fine. I'll take a closer look at the circular gauge...thanks.

J.Hilk

@mzimmers said in Dial-style progress bars:

no, QML is fine

of course this is in the qml section!

reading, a skill that needs constant training... 🙈

ndias

Hi @mzimmers,

You can use PathAngleArc or ArcItem component:

Below you can find a simple example :

import QtQuick.Shapes
    
        Shape {
            width: 200
            height: 200
            anchors.top: parent.top
            anchors.left: parent.left
            // Enable multisampled rendering
            layer.enabled: true
            layer.samples: 4
    
            ShapePath {
                fillColor: "transparent"
                strokeColor: "gray"
                strokeWidth: 20
                capStyle: ShapePath.RoundCap
                PathAngleArc {
                    centerX: 100; centerY: 100
                    radiusX: 100-20/2; radiusY: 100-20/2
                    startAngle: 135
                    sweepAngle: 270
                }
            }
    
            ShapePath {
                fillColor: "transparent"
                strokeColor: "blue"
                strokeWidth: 20
                capStyle: ShapePath.RoundCap
                PathAngleArc {
                    centerX: 100; centerY: 100
                    radiusX: 100-20/2; radiusY: 100-20/2
                    startAngle: 135
                    sweepAngle: 180
                }
            }
        }

You can also use already implemented customizable QML Circular Slider:

https://github.com/arunpkqt/CircularSlider

Best Regards

mzimmers

@ndias thank you for that recommendation. I imagine that I can bind the sweepAngle to a Q_PROPERTY that holds the level of progress, so I don't have to update the completion manually. This is very helpful.

I wonder if I can somehow smooth the update so that changes to progress don't "jump." Is this a possible application for Transitions?

Thanks again...

ndias

@mzimmers said in Dial-style progress bars:

I wonder if I can somehow smooth the update so that changes to progress don't "jump." Is this a possible application for Transitions?

Can you provide more details about your problem?
I tested the sample code I provided before, binding sweepAngle to a slider value and I didn't see any "jump".

mzimmers

@ndias in this application, the granularity of change in the sweep angle is going to be rather large (say from 20% to 50% in one change). I was just hoping I could make this happen gradually, rather than instantly. (And by gradually, I mean over maybe 0.5 seconds.)

But, now that I've typed this out, I suppose I could just have a C++ side routine that changes the value gradually, and that would do the same thing, so maybe it's not necessary.

J.Hilk

@mzimmers said in Dial-style progress bars:

@ndias in this application, the granularity of change in the sweep angle is going to be rather large (say from 20% to 50% in one change). I was just hoping I could make this happen gradually, rather than instantly. (And by gradually, I mean over maybe 0.5 seconds.)

But, now that I've typed this out, I suppose I could just have a C++ side routine that changes the value gradually, and that would do the same thing, so maybe it's not necessary.

this is all you‘ll need, literaly 1 line of code 😉
https://doc.qt.io/qt-5/qml-qtquick-behavior.html

SimonSchroeder

@mzimmers said in Dial-style progress bars:

But, now that I've typed this out, I suppose I could just have a C++ side routine that changes the value gradually, and that would do the same thing, so maybe it's not necessary.

@J-Hilk's answer is already the best as it is done inside QML directly. However, if you ever happen to try to write this in C++ (e.g. for QWidgets), there's already a class for that: https://doc.qt.io/qt-5/qpropertyanimation.html

mzimmers

So, I'm trying to draw (lightly) from the github example posted above, and having trouble with what he calls the "handle" (the highlighted circle within the arc). I'll worry about calculating the correct position later, but for now...how do I go rotating this around the center of the parent?

I won't include the code (way too lengthy) but this is what I'm getting at various rotation points. It's clearly rotating around the lower right corner. How can I get it to rotate around the center of the window?

Scratch that question...I just played a little with Arun's stuff, and it's way better than anything I could do myself.

Thanks...