Results 1 to 8 of 8

Thread: An unusual effect of a component over another in a QML program

  1. #1
    Join Date
    Jan 2016
    Posts
    76
    Thanks
    28
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Windows Android

    Default An unusual effect of a component over another in a QML program

    Hi all,

    I tested the QML program below on an Android device (a tablet running Android 4.4.2). The problem is that, when rackets are not moving the ball moves smoothly (and it’s OK), but when I move either racket, it affects the speed of the ball, strangely, and reduces ball's speed! These two must be independent in terms of movement and speed, but in effect this issue takes place. I don’t know why.

    Will you if possible test this code on your Android device too, to see if the problem exits there as well? If yes, what could be the source of the issue and how to remedy that, please?

    main.qml:

    Qt Code:
    1. import QtQuick 2.12
    2. import QtQuick.Window 2.12
    3. import QtQuick.Controls 2.5
    4.  
    5. Window {
    6. id: window
    7. visible: true
    8. width: 1000; height: 800
    9. color: "gray"
    10.  
    11. // The components
    12. // --------------
    13.  
    14. Rectangle {
    15. id: table
    16. anchors.fill: parent
    17. anchors.margins: 10
    18. y: 10
    19. anchors.horizontalCenter: parent.horizontalCenter
    20. color: "royalblue"
    21. }
    22. Racket {
    23. id: blackRacket
    24. anchors.left: table.left
    25. anchors.leftMargin: width * 2
    26. y: table.height / 2
    27. color: "black"
    28. }
    29. Racket {
    30. id: redRacket
    31. anchors.right: table.right
    32. anchors.rightMargin: width * 2
    33. y: table.height / 2
    34. color: "red"
    35. }
    36. Ball {
    37. id: ball
    38. x: 150
    39. y: 150
    40. }
    41. }
    To copy to clipboard, switch view to plain text mode 


    Ball.qml:

    Qt Code:
    1. import QtQuick 2.12
    2.  
    3. Rectangle {
    4. width: 18; height: 18
    5. color: "white"
    6. radius: width/2
    7.  
    8. Timer { // This timer's job is merely moving the ball
    9. id: timer
    10. interval: 22; repeat: true; running: true
    11.  
    12. onTriggered: {
    13. parent.x += 0.88
    14. parent.y += 0.88
    15. }
    16. }
    17. }
    To copy to clipboard, switch view to plain text mode 

    Racket.qml:

    Qt Code:
    1. import QtQuick 2.12
    2.  
    3. Rectangle {
    4. id: root
    5. width: 15; height: 65
    6.  
    7. MouseArea {
    8. anchors.fill: root
    9.  
    10. drag.target: root
    11. drag.axis: Drag.YAxis
    12. drag.minimumY: table.y
    13. drag.maximumY: table.height - root.height - 10
    14. }
    15. }
    To copy to clipboard, switch view to plain text mode 

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: An unusual effect of a component over another in a QML program

    Most likely the timer event processing is delayed by user input processing, so the spacing becomes more than 22ms.

    Two ideas:

    1) instead of using a timer, calculate the duration needed for the whole movement and use an animation (or a pair of animations) to control the actual movement

    2) Instead of assuming mono spaced time events, take the current time stamp in onTriggered, calculate how much time has really elapsed since the last invocation and adjust the position accordingly

    Cheers,
    _

  3. The following user says thank you to anda_skoa for this useful post:

    franky (5th February 2019)

  4. #3
    Join Date
    Jan 2016
    Posts
    76
    Thanks
    28
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Windows Android

    Default Re: An unusual effect of a component over another in a QML program

    Thanks so much for your guidance.
    Unfortunately I'm very new in QML. If you think the first idea is better, then I go for that. But since I'm novice, if possible, please explain it a little more so that I can understand it comprehensively (say, how to calculate the duration needed for the whole movement?). And then I go for the Docs to learn the stuff needed (Animations) for the program to solve its problem.


    Added after 57 minutes:


    Up to now I got to this point:
    I removed the Timer inside the Ball component and tried to use a ParallelAnimation inside main.qml like this:

    Qt Code:
    1. {
    2. ...
    3. ...
    4. ParallelAnimation {
    5. property int step: 5
    6. running: true
    7. loops: Animation.Infinite
    8. NumberAnimation {
    9. target: ball
    10. property: "x"
    11. from: ball.x
    12. to: ball.x + step
    13. duration: 22
    14. }
    15. NumberAnimation {
    16. target: ball
    17. property: "y"
    18. from: ball.y
    19. to: ball.y + step
    20. duration: 22
    21. }
    22. step +=5
    23. }
    24. }
    To copy to clipboard, switch view to plain text mode 

    Is it a correct way to solve the problem please?

    Also "step +=5" doesn't work there unfortunately!
    Last edited by franky; 5th February 2019 at 20:13.

  5. #4
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: An unusual effect of a component over another in a QML program

    Quote Originally Posted by franky View Post
    Unfortunately I'm very new in QML. If you think the first idea is better, then I go for that.
    That's just one of the options that came to my mind.

    Basically if you know where the ball should end up at and how long this should take, then the actual movement could be done with animations.

    I guess that is not really the case here, so maybe try the other option.

    Something like this

    Qt Code:
    1. // Saved as Mover.qml
    2. import QtQuick 2.9
    3.  
    4. Timer {
    5. repeat: true
    6.  
    7. property Item target
    8.  
    9. // speed of movement in pixels per millisecond
    10. property real velocityX: 0.0
    11. property real velocityY: 0.0
    12.  
    13. property date lastUpdate
    14.  
    15. function startMove() {
    16. lastUpdate = new Date();
    17. restart();
    18. }
    19.  
    20. onTriggered: {
    21. var now = new Date();
    22. var elapsed = now.getTime() - lastUpdate.getTime();
    23.  
    24. target.x += velocityX * elapsed;
    25. target.y += velocityY * elapsed;
    26.  
    27. lastUpdate = now;
    28. }
    29. }
    To copy to clipboard, switch view to plain text mode 

    Use like this
    Qt Code:
    1. Mover {
    2. id: mover
    3.  
    4. target: ball
    5.  
    6. velocityX: 0.01
    7. velocityY: 0.01
    8. interval: 20
    9. }
    10.  
    11. // starting the move
    12. mover.startMove();
    To copy to clipboard, switch view to plain text mode 

    Cheers,
    _

  6. #5
    Join Date
    Jan 2016
    Posts
    76
    Thanks
    28
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Windows Android

    Default Re: An unusual effect of a component over another in a QML program

    Thank you very much.
    But how about the ParallelAnimation I offered in the prior post, please?
    The only thing that we need to change is step, because the animation runs forever. If we can increase the step, the ball moves and probably will have no problem with rackets' movements. Now how to increase/increment step to be each time used in the Animation loop, please?

    By the way, you're using a Timer once again there in that new code. I fear this will keep the problem we had in the first place by Timer!

  7. #6
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: An unusual effect of a component over another in a QML program

    Quote Originally Posted by franky View Post
    But how about the ParallelAnimation I offered in the prior post, please?
    Well, as I said, it is only applicable if you can calculate end positions and duration of a movement.

    Quote Originally Posted by franky View Post
    The only thing that we need to change is step, because the animation runs forever. If we can increase the step, the ball moves and probably will have no problem with rackets' movements. Now how to increase/increment step to be each time used in the Animation loop, please?
    Why do you need to increase "step"?
    Do you want the movement to accelerate?

    Quote Originally Posted by franky View Post
    By the way, you're using a Timer once again there in that new code. I fear this will keep the problem we had in the first place by Timer!
    Have you tried it?
    "Mover" is only using the Timer to trigger updates, the distance of each update is calculated for the actually passed time

    Cheers,
    _

  8. #7
    Join Date
    Jan 2016
    Posts
    76
    Thanks
    28
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Windows Android

    Default Re: An unusual effect of a component over another in a QML program

    Well, as I said, it is only applicable if you can calculate end positions and duration of a movement.
    We don't know the finish point. Think of the ball as in a real ping pong game. The players hit the ball by their rackets and the ball goes towards that direction each time hit by the users. So you say, without knowing the final point (to be used for the to: property of the NumberAnimation) can't we use the ParallelAnimation to moves until the ball, for instance, hit lower or upper walls?


    Why do you need to increase "step"?
    Do you want the movement to accelerate?
    We will also need that too. I used interval changes (lower intervals) to accelerate the ball's movement. But as I said, Timers create the problem I said in the first post. I think timers at least in this program are not good for that task (moving the ball) nor does their task make the ball move as smoothly as by animations.

    Have you tried it?
    "Mover" is only using the Timer to trigger updates, the distance of each update is calculated for the actually passed time
    I used the Mover this way in main.qml:

    Qt Code:
    1. Mover {
    2. id: mover
    3. target: ball
    4.  
    5. velocityX: 0.08 // I wanted it to move faster
    6. velocityY: 0.08
    7. interval: 4
    8.  
    9. Component.onCompleted: {
    10. mover.startMove()
    11. }
    12. }
    To copy to clipboard, switch view to plain text mode 

    I tested that on PC and it's fine. I must test it on an Android device too.


    Added after 1 28 minutes:


    I tested it on an Android device. Since what that does the real task of moving the ball still is a Timer, the effect still exists unfortunately. As you said, "the timer event processing is delayed by user input processing".
    Your first choice for solving the issue can solve the problem I think:

    instead of using a timer, calculate the duration needed for the whole movement and use an animation (or a pair of animations) to control the actual movement


    Why don't we stick to animations instead of a Timer to move the ball?

    By the way, a more complete version of the program is here. If possible please test it and what's your opinion on focusing on Animations for the task please?
    Last edited by franky; 6th February 2019 at 13:55.

  9. #8
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: An unusual effect of a component over another in a QML program

    Quote Originally Posted by franky View Post
    So you say, without knowing the final point (to be used for the to: property of the NumberAnimation) can't we use the ParallelAnimation to moves until the ball, for instance, hit lower or upper walls?
    Well, you can calculate where the ball will hit the wall, which gives you end coordinates.
    And you can calulate the distance between that point and the current position.
    And with a known speed you can calculate how long it will take to travel that distance.

    You would only need to stop the animation if the ball is intercepted by the racket.



    Quote Originally Posted by franky View Post
    But as I said, Timers create the problem I said in the first post
    Well yes, that's why the mover calculates the actual time that has passed between two timer signals and moves more or less than "distance per tick".


    Quote Originally Posted by franky View Post
    Qt Code:
    1. Mover {
    2. id: mover
    3. target: ball
    4.  
    5. velocityX: 0.08 // I wanted it to move faster
    6. velocityY: 0.08
    7. interval: 4
    8.  
    9. Component.onCompleted: {
    10. mover.startMove()
    11. }
    12. }
    To copy to clipboard, switch view to plain text mode 
    I would go for larger intervals. Event at 60 fps each frame will have 16ms time slices.

    Quote Originally Posted by franky View Post
    Since what that does the real task of moving the ball still is a Timer, the effect still exists unfortunately. As you said, "the timer event processing is delayed by user input processing".
    Interesting.
    The time calculation should have compensated that.
    Even if a timer event happens delayed, the time calculation should just result in a larger movement.

    Cheers,
    _

  10. The following user says thank you to anda_skoa for this useful post:

    franky (7th February 2019)

Similar Threads

  1. which component to disable to reduce the size of program?
    By umnbr in forum Installation and Deployment
    Replies: 3
    Last Post: 11th February 2016, 10:09
  2. QDockWidget unusual layout
    By Kryzon in forum Newbie
    Replies: 2
    Last Post: 24th October 2014, 03:10
  3. Replies: 8
    Last Post: 31st October 2011, 02:49
  4. Unusual TableView
    By giker in forum Qt Programming
    Replies: 0
    Last Post: 6th January 2011, 14:10
  5. Getting some unusual character
    By Abc in forum Qt Programming
    Replies: 2
    Last Post: 21st August 2008, 07:28

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.