December 5, 2011

muthu005 muthu005
Lab Rat
17 posts

[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

  1. import QtQuick 1.0
  2.  
  3. Item {
  4.     id: speedo
  5.     property real speedvalue : 0
  6.  
  7.     width: 300; height: 300
  8.  
  9.     Image {
  10.         id: dial
  11.         anchors.fill: parent
  12.         source: "speeddial_final.PNG"
  13.  
  14.         Image {
  15.             id: needle
  16.             x: 162
  17.             y: 53
  18.             width: 5
  19.             height: 100
  20.             transformOrigin: Item.BottomLeft
  21.             anchors.verticalCenterOffset: -50
  22.             anchors.centerIn: parent
  23.             source: "needle_final.PNG"
  24.             rotation: Math.min(Math.max(-120, (12*speedo.speedvalue - 1560)/13), 120)
  25.             Behavior on rotation {
  26.                 SpringAnimation {
  27.                     spring: 1.4
  28.                     damping: .15
  29.                 }
  30.         }
  31.     }
  32.  
  33. }
  34. }

7 replies

December 5, 2011

favoritas37 favoritas37
Lab Rat
148 posts

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:

  1. onSpeedvalueChanged: console.log(speedvalue);

December 6, 2011

muthu005 muthu005
Lab Rat
17 posts

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 ++

  1. import QtQuick 1.0
  2.  
  3. Item {
  4.     id: speedo
  5.     property real speedvalue : 0
  6.     onSpeedvalueChanged: needle.rotation = Math.min(Math.max(-120, (12*speedvalue - 1560)/13), 120)
  7.  
  8.     width: 300; height: 300
  9.  
  10.     Image {
  11.         id: dial
  12.         anchors.fill: parent
  13.         source: "speeddial_final.PNG"
  14.  
  15.         Image {
  16.             id: needle
  17.             x: 162
  18.             y: 53
  19.             width: 5
  20.             height: 100
  21.             transformOrigin: Item.BottomLeft
  22.             anchors.verticalCenterOffset: -50
  23.             anchors.centerIn: parent
  24.             source: "needle_final.PNG"
  25.             Behavior on rotation {
  26.                 SpringAnimation {
  27.                     spring: 1.4
  28.                     damping: .15
  29.                 }
  30.         }
  31.             onRotationChanged: console.log(rotation)
  32.     }
  33.  
  34. }
  35. }

The console log :

  1. Starting D:\MeeGoSDK_1.2\QtCreator\bin\examples\Cluster-build-simulator\debug\Cluster.exe...
  2. 18.46153846153846
  3. 18.46153846153846
  4. 19.495384615384612
  5. 21.384841846153844
  6. 23.95924465033846
  7. 27.058184569112417
  8. 30.533564781106776
  9. 34.251070725589805
  10. 38.091111409531784
  11. 41.94928971069357
  12. 45.736461792546166
  13. 49.37844593335245
  14. 52.81543987951532
  15. 56.001203495837224
  16. 58.902060226788706
  17. 61.49576691440201
  18. 63.770297035375336
  19. 65.72257759999486
  20. 67.35721495706619
  21. 68.68523971092316
  22. 69.72289599756151
  23. 70.49049558624336
  24. 71.01135275087569
  25. 71.31081165457817
  26. 71.41537415704735
  27. 71.35193251841291
  28. 71.1471084525458
  29. 70.82669738260634
  30. 70.41521456717203
  31. 69.93553798313283
  32. 69.40864145126196
  33. 68.85341044604806
  34. 68.28653231300939
  35. 67.72245219149971
  36. 67.17338577451152
  37. 66.6493800941071
  38. 66.15841376703997
  39. 65.70652853603583
  40. 65.29798446585973
  41. 64.93543176955939
  42. 64.62009292145059
  43. 64.35194943450223
  44. 64.12992841864789
  45. 63.952084773978605
  46. 63.81577559245721
  47. 63.71782403027759
  48. 63.65467055953132
  49. 63.6225101042481
  50. 63.61741410630682
  51. 63.63543704746007
  52. 63.67270737296185
  53. 63.725503119868634
  54. 63.790312850238955
  55. 63.86388272859299
  56. 63.94325076745805
  57. 64.02576939868692
  58. 64.10911761608547
  59. 64.19130398165855
  60. 64.27066179859112
  61. 64.34583773407999
  62. 64.41577512938674
  63. 64.47969316788384
  64. 64.53706298903039
  65. 64.58758174143529
  66. 64.63114546535591
  67. 64.66782158764909
  68. 64.69782170341956
  69. 64.72147521105249
  70. 64.73920426319752
  71. 64.75150039740979
  72. 64.75890311797285
  73. 64.76198061599348
  74. 64.76131273889737
  75. 64.75747625339899
  76. 64.75103238803385
  77. 64.74251659236613
  78. 64.73243040976419
  79. 64.72123532875844
  80. 64.70934845392398
  81. 64.6971398203314
  82. 64.6849311651869
  83. 64.6729959655985
  84. 64.66156055170357
  85. 64.65080610891934
  86. 64.64087139109756
  87. 64.63185597717309
  88. 64.62382391683322
  89. 64.61680762519188
  90. 64.61081190187706
  91. 64.60581796584204
  92. 64.60178741316201
  93. 64.59866602071378
  94. 64.59638733365341
  95. 64.59487598876288
  96. 64.59405073884226
  97. 64.59382715524427
  98. 64.59411999629313
  99. 64.59484523865231
  100. 64.59592177669641
  101. 64.59727280162052
  102. 64.59882687743432
  103. 64.60051873520614
  104. 64.60228981002818
  105. 64.6040885472669
  106. 64.60587050584564
  107. 64.60759828669126
  108. 64.60924131417276
  109. 64.61077549747918
  110. 64.61218279753072
  111. 64.61345072329446
  112. 64.61457177937646
  113. 64.61554288457273
  114. 64.61636477875976
  115. 64.61704143315913
  116. 64.61757947668045
  117. 64.61798764878054
  118. 64.61827628711755
  119. 64.6184568562572
  120. 64.61538461538461
  121. D:\MeeGoSDK_1.2\QtCreator\bin\examples\Cluster-build-simulator\debug\Cluster.exe exited with code 0

main.cpp

  1. /*i am using speedometer.qml as a child element in digitalcluster.qml*/
  2.  
  3. int main(int argc, char *argv[])
  4. {
  5.     QApplication app(argc, argv);
  6.     QDeclarativeEngine engine;
  7.      QDeclarativeComponent component(&engine, QLatin1String("qml/Cluster/content/DigitalCluster.qml"));
  8.      QObject *item = component.create();
  9. QObject *speedmeter = item->findChild<QObject *>("speedobj");
  10. QDeclarativeProperty::write(speedmeter, "speedvalue", 200);
  11. QmlApplicationViewer viewer;
  12.     viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
  13.  viewer.setMainQmlFile(QLatin1String("qml/Cluster/content/DigitalCluster.qml"));
  14.     viewer.showExpanded();
  15.  
  16.     return app.exec();
  17. }

December 6, 2011

favoritas37 favoritas37
Lab Rat
148 posts

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.

December 7, 2011

muthu005 muthu005
Lab Rat
17 posts

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.

  1.  MouseArea {
  2.         anchors.fill: parent
  3.         onClicked: {
  4.             speedo.speedvalue = 200;
  5.         }
  6.     }

December 14, 2011

muthu005 muthu005
Lab Rat
17 posts

hi…

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

December 14, 2011

jackyang jackyang
Lab Rat
13 posts

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

December 15, 2011

muthu005 muthu005
Lab Rat
17 posts

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

 
  ‹‹ QML ReferenceError: Can’t find variable      Can’t get ShaderEffectItem to work, any suggestions? ››

You must log in to post a reply. Not a member yet? Register here!