QML Circular slider

[Naveen_D]

Hi all

I want to develop a circular slider using Qml. Is it possible to have circular slider in Qml? if yes, how can i develop it? please give the possible solution.

Thanks

[jpnurmi]

How about Dial?

[Naveen_D]

Dial is fine sir. I tried it. but i want to customize it, i tried with dialStyle but didn't get how to use it. Is there any example for customizing dial in QML ? I am using Qt 5.6, thanks

[Naveen_D]

Hi all, can anyone please suggest me how to customize Dial in QML ?

[p3c0]

Hi @Naveen_D
Dial was added in Qt 5.7. Which Dial are you referring in Qt 5.6 ?

[Naveen_D]

@p3c0 i am using Dial which is since Qt 5.5

[p3c0]

@Naveen_D Ok so you are using the labs version which is now in QtQuick Extras. So far how much were you able to customize DialStyle ?

[Naveen_D]

@p3c0 Sir i tried with background, handle as given in the assistant, but i didn't get the output so i wanted an example how to make customizable dial using dial style. so that i can refer the example and try to make changes.

[p3c0]

@Naveen_D You can try the CircularGauge's styling example.
https://doc.qt.io/qt-5/styling-circulargauge.html#styling-circulargauge-background
https://doc.qt.io/qt-5/styling-circulargauge.html#styling-circulargauge-foreground

[Naveen_D]

@p3c0 i want to develop a volume type module for music player. can i develop using this ?

[p3c0]

@Naveen_D Sure. Just try customizing them as per the given links.
Here's a small example according to it:

Dial {
        width: 200
        height: 200

        style: DialStyle {

            function degreesToRadians(degrees) {
                return degrees * (Math.PI / 180);
            }

            background: Canvas {
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.reset();

                    ctx.beginPath();
                    ctx.strokeStyle = "#e34c22";
                    ctx.lineWidth = outerRadius * 0.02;

                    ctx.arc(outerRadius, outerRadius, outerRadius - ctx.lineWidth / 2,
                        degreesToRadians(valueToAngle(80) - 90), degreesToRadians(valueToAngle(100) - 90));
                    ctx.stroke();
                }
            }

            handle: Rectangle {
                width: outerRadius * 0.3
                height: outerRadius * 0.3
                radius: width/2.0
                color: "green"
            }

            handleInset: outerRadius * 0.25

        }
    }

[Naveen_D]

@p3c0 Thank you so much for your help. Now i got an idea.

[Ratataplam]

@Naveen_D Can you share your solution if possible? Thanks in advance

[Markkyboy]

@Ratataplam - You can glean much info from this github account. I have used this for purposes of creating speedometers;

https://github.com/arunpkqt/CircularSlider