[Solved] Help regarding speedometer animation

muthu005

hi,
I am a new user of Qt. I am trying to pass a speed value from c++ to a custom property "speedvalue" in speedometer.qml file. This "speedvalue" property is binded to the rotation element of the speedometer needle.

The "speedvalue" value is updated in speedometer.qml file but the needle is not moving to the current value. can anyone please guide me how to animate the needle so that it points to the appropriate speedvalue's value.

I have gone through many threads explaining signals and slot mechanism, states and transitions etc, but i am not clear what technique to use to accomplish my task. Please help me to move forward. Please find below the basic code i have written for speedometer.qml

Speedometer.qml
@import QtQuick 1.0

Item {
id: speedo
property real speedvalue : 0

width: 300; height: 300

Image {
    id: dial
    anchors.fill: parent
    source: "speeddial_final.PNG"

    Image {
        id: needle
        x: 162
        y: 53
        width: 5
        height: 100
        transformOrigin: Item.BottomLeft
        anchors.verticalCenterOffset: -50
        anchors.centerIn: parent
        source: "needle_final.PNG"
        rotation: Math.min(Math.max(-120, (12*speedo.speedvalue - 1560)/13), 120)
        Behavior on rotation {
            SpringAnimation {
                spring: 1.4
                damping: .15
            }
    }
}

}
}@

favoritas37

Your code looks fine, so your problem is that the speedvalue doesn't gets updated from the C++ code?

This can be easily checked by creating the following function:

@
onSpeedvalueChanged: console.log(speedvalue);
@

muthu005

Thanks for your reply favoritas37.

I have checked the property modification using console.log, Please see the code and the output below.

The "speedvalue" is updated and the needle.rotation is also updated, but the needle is pointing to 0. The needle is not pointing to the value i am passing from C++ (I passed 200 from C++).

So the problem is, rotation property is updated but the needle is not animating

Can anyone please update me regarding how to animate the needle animate according to the value i am passing from C ++

@import QtQuick 1.0

Item {
id: speedo
property real speedvalue : 0
onSpeedvalueChanged: needle.rotation = Math.min(Math.max(-120, (12*speedvalue - 1560)/13), 120)

width: 300; height: 300

Image {
    id: dial
    anchors.fill: parent
    source: "speeddial_final.PNG"

    Image {
        id: needle
        x: 162
        y: 53
        width: 5
        height: 100
        transformOrigin: Item.BottomLeft
        anchors.verticalCenterOffset: -50
        anchors.centerIn: parent
        source: "needle_final.PNG"
        Behavior on rotation {
            SpringAnimation {
                spring: 1.4
                damping: .15
            }
    }
        onRotationChanged: console.log(rotation)
}

}
}@

The console log :

@Starting D:\MeeGoSDK_1.2\QtCreator\bin\examples\Cluster-build-simulator\debug\Cluster.exe...
18.46153846153846
18.46153846153846
19.495384615384612
21.384841846153844
23.95924465033846
27.058184569112417
30.533564781106776
34.251070725589805
38.091111409531784
41.94928971069357
45.736461792546166
49.37844593335245
52.81543987951532
56.001203495837224
58.902060226788706
61.49576691440201
63.770297035375336
65.72257759999486
67.35721495706619
68.68523971092316
69.72289599756151
70.49049558624336
71.01135275087569
71.31081165457817
71.41537415704735
71.35193251841291
71.1471084525458
70.82669738260634
70.41521456717203
69.93553798313283
69.40864145126196
68.85341044604806
68.28653231300939
67.72245219149971
67.17338577451152
66.6493800941071
66.15841376703997
65.70652853603583
65.29798446585973
64.93543176955939
64.62009292145059
64.35194943450223
64.12992841864789
63.952084773978605
63.81577559245721
63.71782403027759
63.65467055953132
63.6225101042481
63.61741410630682
63.63543704746007
63.67270737296185
63.725503119868634
63.790312850238955
63.86388272859299
63.94325076745805
64.02576939868692
64.10911761608547
64.19130398165855
64.27066179859112
64.34583773407999
64.41577512938674
64.47969316788384
64.53706298903039
64.58758174143529
64.63114546535591
64.66782158764909
64.69782170341956
64.72147521105249
64.73920426319752
64.75150039740979
64.75890311797285
64.76198061599348
64.76131273889737
64.75747625339899
64.75103238803385
64.74251659236613
64.73243040976419
64.72123532875844
64.70934845392398
64.6971398203314
64.6849311651869
64.6729959655985
64.66156055170357
64.65080610891934
64.64087139109756
64.63185597717309
64.62382391683322
64.61680762519188
64.61081190187706
64.60581796584204
64.60178741316201
64.59866602071378
64.59638733365341
64.59487598876288
64.59405073884226
64.59382715524427
64.59411999629313
64.59484523865231
64.59592177669641
64.59727280162052
64.59882687743432
64.60051873520614
64.60228981002818
64.6040885472669
64.60587050584564
64.60759828669126
64.60924131417276
64.61077549747918
64.61218279753072
64.61345072329446
64.61457177937646
64.61554288457273
64.61636477875976
64.61704143315913
64.61757947668045
64.61798764878054
64.61827628711755
64.6184568562572
64.61538461538461
D:\MeeGoSDK_1.2\QtCreator\bin\examples\Cluster-build-simulator\debug\Cluster.exe exited with code 0@

main.cpp
@/i am using speedometer.qml as a child element in digitalcluster.qml/

int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QDeclarativeEngine engine;
QDeclarativeComponent component(&engine, QLatin1String("qml/Cluster/content/DigitalCluster.qml"));
QObject *item = component.create();
QObject *speedmeter = item->findChild<QObject *>("speedobj");
QDeclarativeProperty::write(speedmeter, "speedvalue", 200);
QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/Cluster/content/DigitalCluster.qml"));
viewer.showExpanded();

return app.exec();

}@

favoritas37

It could be because you have defined an anchor to the "needle" which doesn't let it free to move. So remove anchors and place it with absolute values.

muthu005

I hope anchors may not be a problem. I appended the below code to speedometer.qml and observed the needle rotating to the appropriate position when i click the Mousearea.

when i change the same parameter (speedvalue) from C++, the needle animation is not working.

@ MouseArea {
anchors.fill: parent
onClicked: {
speedo.speedvalue = 200;
}
}@

muthu005

hi...

i m still facing problem with this issue, please help me to find where i am going wrong

jackyang

You sample work fine for me.
However, I use the Slider component to change the speedvalue, and the needle is rotating...~

I give your a suggestion :
Let your sample simple to trace, e.g. Let the speedo component only has one Image component last, and try to let it be rotated.
Keep thing simple will help your trace..

muthu005

Instead of using the default QApplicationViewer to display QML, i used QDeclarativeView and the problem is solved.