Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Dial-style progress bars



  • Hi all -

    Customer wants something like this:
    dial.PNG

    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?


  • Lifetime Qt Champion

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



  • @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.


  • Moderators

    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.



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


  • Moderators

    @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... 🙈



  • 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
                    }
                }
            }
    

    8aa108e1-c336-46a0-a39e-af38847fdfed-image.png

    You can also use already implemented customizable QML Circular Slider:

    Best Regards



  • @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...



  • @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".



  • @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.


  • Moderators

    @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



  • @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



  • 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...


Log in to reply