SemiCircular Gauge in qml

[A Former User]

I want to represent a semi-circular gauge like this:

I found it in:
https://doc.qt.io/qt-5/qml-qtquick-controls-styles-circulargaugestyle.html
but there isn't the code..Can you help me?

[jsulm]

@vale88 I'm not sure I understand your question. What code do you mean and what help do you need? In the link you posted there is code. You just need to play a bit with the parameters.

[Yaswanth]

You can achieve with this simple code,

    CircularGauge {
        anchors.centerIn: parent
        style: CircularGaugeStyle
        {
            minimumValueAngle : -90
            maximumValueAngle  : 90
            needle:Rectangle
            {
                width: outerRadius * 0.02
                height: outerRadius * 0.7
                color: "Light Blue"
            }

            tickmarkLabel:Text
            {
                color:"Black"
                text : styleData.value
            }
        }
    }

[A Former User]

@Yaswanth thanks, I have an other question..and if I want to draw this?

[Yaswanth]

@vale88
Set minimumValue & maximumValue to the CircularGauge and implement your own delegates for needle and foreground.

    CircularGauge {
        anchors.centerIn: parent
        minimumValue : -30
        maximumValue : 30
        style: CircularGaugeStyle
        {
            minimumValueAngle : -90
            maximumValueAngle  : 90

            needle:Item
            {
//                Rectangle
//                {
//                    width: outerRadius * 0.02
//                    height: outerRadius * 0.7
//                    color: "Light Blue"
//                }
            }
            foreground: Item
            {
//                Rectangle {
//                    width: outerRadius * 0.2
//                    height: width
//                    radius: width / 2
//                    color: "#e5e5e5"
//                    anchors.centerIn: parent
//                }
            }

            tickmarkLabel:Text
            {
                color:"Black"
                text : styleData.value
            }
        }
    }

As @jsulm already mentioned, please explore the properties in the CircularGuage control. Please explain what is the difficulty you are facing.

[A Former User]

@Yaswanth I have difficulty to connect my dial on mainWindow and circularGauge of Qml..I wrote : /ui->qml->setContextProperty("yourObject",ui->dial);

but it doesn't write setContextProperty

[Pablo J. Rogina]

@vale88 said in SemiCircular Gauge in qml:

mainWindow and circularGauge of Qml..I wrote : /ui->qml->setContextProperty("yourObject",ui->dial);

Are you trying to use both QML and C++ objects at the same time for showing the dial? If so, it's a quite arrangement.

Usually, you go with QML for the display and C++ for the backend providing the value that the dial should show...

[A Former User]

@Pablo-J.-Rogina I don't know how to write the connect

[Pablo J. Rogina]

@vale88 Life is a learning path... and documentation is your friend.

[A Former User]

@Pablo-J.-Rogina I solved..there is documentation but it isn't enough