Important: Please read the Qt Code of Conduct -

Circular Gauge, not centralized needle (offset)

  • Hi, I want to style the CircularGauge as below:

    As can be see, the needle and also tick origin centers are not sync (have some offset in vertical position). So this my problem. How can I implement this and create this offset in the needle component?

    this is my code until now:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Extras 1.4
    import QtQuick.Extras.Private 1.0
    import QtGraphicalEffects 1.0
    CircularGauge {
        id: gauge;
        style: CircularGaugeStyle {
            labelStepSize: 10
            tickmarkStepSize: 2;
            labelInset: outerRadius / 2.5
            tickmarkInset: outerRadius / 4.2
            minorTickmarkInset: outerRadius / 4.2
            minimumValueAngle: -50
            maximumValueAngle: 50
            background: Rectangle {
                implicitHeight: gauge.height
                implicitWidth: gauge.width
                color: "black"
                anchors.centerIn: parent
                radius: 360
                Image {
                    anchors.fill: parent
                    source: "qrc:/img/No4/backScreen.svg";
                    asynchronous: true
                    sourceSize {
                        width: width
            needle: Item {
    //            y: -outerRadius * 0.4;
                height: outerRadius * 0.8
                x: -needle.width / 2.0;
                antialiasing: true;
                Image {
                    id: needle
                    source: "qrc:/img/No4/needle.svg"
                    height: parent.height
                    width: height * 0.155
                    asynchronous: true
                    antialiasing: true
            foreground: Item {
                Image {
                    id: needleCntr
                    source: "qrc:/img/No4/needleTop.svg";
                    anchors.fill: parent;
                    antialiasing: true
                Image {
                    id: glassImg
                    source: "qrc:/img/No4/glass.svg"
                    anchors.centerIn: parent
                    anchors.leftMargin: outerRadius * 0.12;
                    anchors.rightMargin: outerRadius * 0.12;
                    anchors.topMargin: outerRadius * 0.12;
                    anchors.bottomMargin:  outerRadius * 0.12;
                    antialiasing: true
                    anchors.fill: parent;
                    z: 20;
            tickmarkLabel:  null;
            tickmark: null;
            minorTickmark: null;

    and the result is:
    0_1548570612805_2019-01-27 09_58_00-gauge-example.png

    You can see that the needle center is synced with background center. How can I create the offset.

  • @alizadeh91 have you check the documentation about CircularGaugeStyle?

    When defining your own needle component, the only properties that the style requires you to set are the implicitWidth and implicitHeight.

    which looks like you're not setting.

    Also this document refers to styling the needle and those mentioned properties.