How to animate the angle of neddle in a speedometer

Rajashekar V

I want to animate the speedometer neddle ,while changing the speed .Please help me.

jsulm

@Rajashekar-V What about https://doc.qt.io/qt-6/qml-qtquick-animation.html ?

Rajashekar V

I have gone through this link, but I am unable to figure out how to calculate the rotation angle value

Markkyboy

@Rajashekar-V - https://github.com/arunpkqt/CircularSlider

Take a good look at the link above, you can easily reuse what is there to make a working speedometer.

I have dozens of working speedometers and I replied to your other question about Nemo.DBus (for SailfishOS) but you do not reply, it seems you are in confusion,....I was in confusion 7/8 months ago as nobody could really help or show me how to make a speedometer with working needle/GPS/etc. But with the help from many different place, I now have made a collection all of which operate on my Sony Xperia 10ii mobile device.

Developing with SailfishSDK means I cannot use CircularGaugeQML as it is not available (licensed) on Sailfish, so I used the link I put at the top of this response to get angle and various other aspects of a working gauge.

What code do you have so far?, care to show some or all of it?, a working/part working snippet?

johngod

@Rajashekar-V You have to normalize the values of velocity (0 to 240) to a new range of values of the angles (from your speedometer pic, aprox. from -35º to 215º )
This is done with the formula
xnormalized = (b-a) * (x - xmin) / (xmax - xmin) + a + angleOffset
where
xnormalized = angle equivalent to velocity
x = velocity
xmax = max velocity
xmin = min velocity
a = xmin angle
b = xmax angle
angleOffset = angle offset to calibrate the needle "0" position the "0" velocity position

More info here https://stats.stackexchange.com/questions/281162/scale-a-number-between-a-range

The easy way to center the needle is to draw it in a rectangular image
with the needle rotation center position at the center of the image,
else you will have more trouble fixing the needle position.
I have been thickering with this and have done this example (also please enjoy the quality of the needle that I draw, compared with your fine speedometer pic, ahaha :)

import QtQuick 2.15
import QtQuick.Window

Window {
    id: mainRoot
    width: 640
    height: 480
    visible: true

    property real velocity: 0
    property real minVelocity: 0
    property real maxVelocity: 240
    property real minAngle: -35// aprox. value
    property real maxAngle: 215//aprox. value
    property real offsetangle: -90
    property real angle: (maxAngle - minAngle) * (velocity - minVelocity)
                        / (maxVelocity - minVelocity) + minAngle + offsetangle

    onVelocityChanged: {
        console.log("velocity: "+velocity)
        console.log("angle: "+angle)
    }

    Image {
        id: speedometer
        width: 512
        height: 421
        //source: "qrc:/images/speedmeter.png"
        source: "https://ddgobkiprc33d.cloudfront.net/e90f4516-ca8b-4d26-adf9-c81e4f118cd5.png"

        Image {
            id: pointer
            anchors.centerIn: parent
            //source: "qrc:/images/pointer.png"
            source: "https://i.imgur.com/1az1jJx.png"
            rotation: angle
        }

        Text {
            id: name
            text: velocity.toFixed(0)
            color: "red"
            font.pixelSize: 22
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            anchors.bottomMargin: parent.height *0.25
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: anim.running = !anim.running
    }

    SequentialAnimation {
        id: anim
        running: true
        loops: Animation.Infinite
        NumberAnimation {
            target: mainRoot
            property: "velocity"
            from: minVelocity;
            to: maxVelocity
            duration: 3500
            //loops: Animation.Infinite
        }
        NumberAnimation {
            target: mainRoot
            property: "velocity"
            from: maxVelocity;
            to: minVelocity
            duration: 3500
            //loops: Animation.Infinite
        }
    }

    /*

      x = velocity
      xmax = max velocity
      xmin = min velocity
      a = xmin angle
      b = xmax angle

      xnormalized = (b-a) * (x - xmin) / (xmax - xmin) + a
*/

}

Sattiy

@johngod can you provide a full simple speedometer without images