[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
- }
- }
- }
- }
- }
7 replies
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[])
- {
- QDeclarativeEngine engine;
- QDeclarativeProperty::write(speedmeter, "speedvalue", 200);
- QmlApplicationViewer viewer;
- viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
- viewer.showExpanded();
- return app.exec();
- }
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;
- }
- }
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..
You must log in to post a reply. Not a member yet? Register here!