[Solved] Help regarding speedometer animation



  • 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
                }
        }
    }
    

    }
    }@



  • 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);
    @



  • 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();
    

    }@



  • 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.



  • 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;
    }
    }@



  • hi...

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



  • 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..



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.