Important: Please read the Qt Code of Conduct -

Changing the needle angle in CircularGauge

  • I am a beginner in Qt Creator, and I am trying to control the angle of the needle in CircularGauge. How would I go about changing this so that a slider can control the value shown by the gauge? My code is below:

    import QtQuick 2.6
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Extras 1.4
    import QtQuick.Extras.Private 1.0
    import QtQuick.Window 2.2

    Rectangle {
    x: 0
    y: 0
    z: -2147483646
    width: 350
    height: 350
    color: "#494d53"

    CircularGauge {
        id: circgage
        x: 13
        y: 17
        width: 325
        height: 317
        visible: true
        maximumValue: 80
        z: 2147483645
        style: CircularGaugeStyle {
            needle: Rectangle {
                id: needlepointer
                y: outerRadius * 0.15
                implicitWidth: outerRadius * 0.03
                implicitHeight: outerRadius * 0.9
                antialiasing: true
                color: Qt.rgba(0.66, 0.3, 0, 1)
        Text {
            id: gaugename
            x: 112
            y: 234
            z: 0
            width: 102
            height: 27
            color: "#a9a9a9"
            text: qsTr("Motor RPM")
            horizontalAlignment: Text.AlignHCenter
            lineHeight: 0.6
            renderType: Text.NativeRendering
            font.pixelSize: 20
    Slider {
        id: controlslider
        x: 76
        y: 363


  • @edorval hi
    Welcome to Qt world
    Qt Creator is the IDE (integrated development environment)

    @edorval said in Changing the needle angle in CircularGauge:

    slider can control the value shown by the gauge

    The CircularGauge has value property. You only need to change it, no need to change angle mannualy
    (but you can create your own gauge and do that if you want )

    In QML for every property there is a associated on<PropertyName>Changed signal so

    Slider {
        id: controlslider
        x: 76
        y: 363
    onValueChanged :{ circgage.value = value}

    why you put z property to -2147483646?

  • @LeLev The main reason that I am doing this is so that I can read the sensors and adjust the value shown on the gauge accordingly. I am trying to use the slider to control it for a preliminary demonstration. When I will be using the gauges to their full effects, they will be displaying values outputted by sensors.

Log in to reply