Offer me a good QML exercise

[J.Hilk]

Hi @tomy , sorry for the late response.

I had a lengthly break, sickness and holiday - thankfully not overlapping. But I'm back now and will take a look later today. I actually managed not to touch my laptop during that time, that was difficult I'll tell ya.

Any progress in the last 23 days ?

Greetings.

[tomy]

@J.Hilk
Hi J.Hilk, welcome back. :)
I'm very glad that your sickness and holiday haven't had overlapping. :)
I hope you're very well now. And Happy New Year to you. :)

I see and it's OK. I'm appreciative for your assistance. :) Thanks.
Welcome back once again.

Any progress in the last 23 days ?

That last version was actually modified many times. :) That is, each time I modified it and edited the code here in that last version making it the most recent one for you when you'll get back.

The problem was that and I found no remedy so I thought of using a ParallelAnimation as the tool for moving the ball hoping it resolves the issue with the effect of moving the rackets on the ball's movement.

I'm still working on it and today or tomorrow will test this new version and post it here too. Can it be a good solution to the problem in your point of view please?

[tomy]

Well, to cope with that problem I tried Animations in the code the way below.
Other components are as before and here is the code after the stopGame() function in main.qml:

...
ParallelAnimation {
           id: anim
           NumberAnimation {
               target: ball
               properties: "x"
               to: in_timer.xMove
           }
           NumberAnimation {
               target: ball
               properties: "y"
               to: in_timer.yMove
           }
       }
       
       Timer {
           interval: 40; repeat: true; running: true
           
           onTriggered: {
               redRacket.yUwards = false
               redRacket.yDwards = false
               blackRacket.yUwards = false
               blackRacket.yDwards = false
           }
       }
       Timer {
           id: out_timer
           interval: 1; repeat: false; running: false
           
           function lightChange() {
               if (table.lightState) {
                   rightLight.color = "silver"
                   leftLight.color= "lime"
               }
               else {
                   rightLight.color = "lime"
                   leftLight.color= "silver"
               }
               table.lightState = !table.lightState
           }
           
           onTriggered: {
               ball.xincrement = Math.random() + 0.5
               ball.yincrement = Math.random() + 0.5
               
               if (table.count % 5 == 0) {
                   table.turn = !table.turn
                   lightChange()
               }
               
               if (table.turn)
                   ball.xincrement *= -1
               
               ball.x = table.width/2
               ball.y = table.height/2
               
               if (ball.yincrement > 1.1)
                   ball.yincrement *= -1
               
               in_timer.restart()
               table.count++
           }
       }
       Timer {
           id: right_return_timer
           interval: 1; repeat: true; running: false
           onTriggered: {
               in_timer.xMove += ball.xincrement * table.step
               in_timer.yMove += ball.yincrement * table.step
               anim.restart()
               if(ball.x + ball.width < redRacket.x) {
                   running = false
                   in_timer.running = true
               }
           }
       }
       Timer {
           id: left_return_timer
           interval: 1; repeat: true; running: false
           onTriggered: {
               in_timer.xMove += ball.xincrement * table.step
               in_timer.yMove += ball.yincrement * table.step
               anim.restart()
               if(ball.x > blackRacket.x + blackRacket.width) {
                   running = false
                   in_timer.running = true
               }
           }
       }
       Timer {
           id: in_timer
           interval: table.duration; repeat: true; running: false
           property double xMove: ball.x
           property double yMove: ball.y
           
           function hitsRightRacket() {
               if ((ball.x + ball.width >= redRacket.x &&
                    ball.x <= redRacket.x + redRacket.width) &&
                       (ball.y + ball.height >= redRacket.y &&
                        ball.y <= redRacket.y + redRacket.height))
                   return true
               return false
           }
           function hitsLeftRacket() {
               if ((ball.x + ball.width >= blackRacket.x &&
                    ball.x < blackRacket.x + blackRacket.width)  &&
                       (ball.y + ball.height >= blackRacket.y &&
                        ball.y <= blackRacket.y + blackRacket.height))
                   return true
               return false
           }
           function hitsUpperOrLowerWall(){
               if (ball.y <= 0)
                   return true
               else if (ball.y + ball.height >= table.height)
                   return true
               return false
           }
           function hitsRightWall() {
               if (ball.x + ball.width >= table.width)
                   return true
               return false
           }
           function hitsLeftWall() {
               if (ball.x <= 0) return true
               else return false
           }
           
           onTriggered: {
               if (hitsRightWall()) {
                   stop()
                   leftCounter.count++
                   out_timer.interval = 2000
                   out_timer.running = true
               }
               else if (hitsLeftWall()) {
                   stop()
                   rightCounter.count++
                   out_timer.interval = 2000
                   out_timer.running = true
               }
               else if (hitsRightRacket()) {
                   if (redRacket.yUwards) {
                       if (ball.yincrement == 0)
                           ball.yincrement = -ball.ran
                       else if (ball.yincrement > 0)
                           ball.yincrement = ball.yincrement > 0 ?
                                       -ball.yincrement: ball.yincrement
                       interval = (table.duration/4)
                   }
                   else if (redRacket.yDwards) {
                       if (ball.yincrement == 0)
                           ball.yincrement = ball.ran
                       else if (ball.yincrement < 0)
                           ball.yincrement = ball.yincrement > 0 ?
                                       -ball.yincrement: ball.yincrement
                       interval = (table.duration/4)
                   }
                   else {
                       ball.yincrement = 0
                       interval = (table.duration/2)
                   }
                   ball.xincrement = ball.xincrement > 0 ?
                               -ball.xincrement: ball.xincrement
                   running = false
                   right_return_timer.running = true
               }
               else if (hitsLeftRacket()) {
                   if(blackRacket.yUwards) {
                       if (ball.yincrement == 0)
                           ball.yincrement = -ball.ran
                       else if (ball.yincrement > 0)
                           ball.yincrement = ball.yincrement > 0 ?
                                       -ball.yincrement: ball.yincrement
                       interval = (table.duration/4)
                   }
                   else if (blackRacket.yDwards) {
                       if (ball.yincrement == 0)
                           ball.yincrement = ball.ran
                       else if (ball.yincrement < 0)
                           ball.yincrement = ball.yincrement > 0 ?
                                       -ball.yincrement: ball.yincrement
                       interval = (table.duration/4)
                   }
                   else {
                       ball.yincrement = 0
                       interval = (table.duration/2)
                   }
                   ball.xincrement = ball.xincrement > 0 ?
                               -ball.xincrement: ball.xincrement
                   running = false
                   left_return_timer.running = true
               }
               else if (hitsUpperOrLowerWall())
                   ball.yincrement = ball.yincrement > 0 ?
                               -ball.yincrement: ball.yincrement
               
               // Move Ball
               xMove += (ball.xincrement * table.step);
               yMove += (ball.yincrement * table.step);
               anim.restart()
               
               if(rightCounter.count + leftCounter.count == 21) {
                   stop()
                   if (rightCounter.count > leftCounter.count)
                       rightWin.visible = true
                   else
                       leftWin.visible = true
               }
           }
       }
   }
}

This code also has several problems! One of them is that the ball doesn't stop when it hits the right or left wall. I tired several statements, like:
stop()
in_timer.stop()
running = false
anim.stop()
but neither works!

[J.Hilk]

hey @tomy ,

I used the code from your previous post, the one before the last one, and brought it on my iphone.

For me it works flawlessly, no slowdown at all.

Take a look at this video:
Video
Edit: video link fixed, thanks to @mrjj

In fact, the animation/movement of the ball is too fast in my opinion.

Did you compile the release version for your android device? Debug versions are ressource demanding and may result in slow animations on old devices.

The racket movment invokes a property binding recalculations, that is executed as soon as the event loop returns, I believe.
The Movement of the ball and checks are all depending on timers, during the property binding induced calculations those timers may queue up, that then results in a slow Ball-Animation.

[mrjj]

Hi
Video link didnt work for me but i could extract
https://vimeo.com/251451461

[tomy]

@J.Hilk

For me it works flawlessly, no slowdown at all.
Take a look at this video:
Video
Edit: video link fixed, thanks to @mrjj

Hallo, Thank you very much.

In fact, the animation/movement of the ball is too fast in my opinion.

I think by increasing table.duration it will be solved

Did you compile the release version for your android device? Debug versions are ressource demanding and may result in slow animations on old devices.

Well, when testing on the Desktop kit on my Windows, the program has no problem. It's fine. When switching to "Android for armeabi-v7a (GCC 4.9, Qt 5.10.0 for Android armv7)" kit in both Debug and Release modes, I get these two issues in the Issues window which are the same apparently. I don't know if it's related to the problem on Android devices or not.

:-1: warning: "D:\android-ndk-r10e\toolchains\arm-linux-androideabi-4.9\prebuilt\windows-x86_64\bin\arm-linux-androideabi-gcc" is used by qmake, but "D:\android-ndk-r10e\toolchains\arm-linux-androideabi-4.9\prebuilt\windows-x86_64\bin\arm-linux-androideabi-gcc.exe" is configured in the kit.
Please update your kit or choose a mkspec for qmake that matches your target environment better.

:-1: warning: "D:\android-ndk-r10e\toolchains\arm-linux-androideabi-4.9\prebuilt\windows-x86_64\bin\arm-linux-androideabi-g++" is used by qmake, but "D:\android-ndk-r10e\toolchains\arm-linux-androideabi-4.9\prebuilt\windows-x86_64\bin\arm-linux-androideabi-g++.exe" is configured in the kit.
Please update your kit or choose a mkspec for qmake that matches your target environment better.

The racket movment invokes a property binding recalculations, that is executed as soon as the event loop returns, I believe.
The Movement of the ball and checks are all depending on timers, during the property binding induced calculations those timers may queue up, that then results in a slow Ball-Animation.

I'm not sure I can understand it well. Probably it's a too advanced for me. If it can be a lead, is there any solution for that please?

[J.Hilk]

@tomy mmh, my Idea would be to marry your QMl-program with a cpp class, that does the heavy stuff.

Your cpp-class could/should have Q_properties that are bound to ball.x and ball.y and right/leftracket position.

That class could emit signals when the ball hits something and trigger the new ball position etc.

Thats a bit more work than I can justify right now, but I'll look into it a bit more during lunch-break ;-)

[tomy]

@J.Hilk
Hi, thank you for your suggestion. I've used C++ for console applications on Visual Studio and also used it on Qt Creator for a few Qt programs. And also have used QML on Qt Creator as in this program. But I've never used C++ in a QML program! So it seems hard for me. But if it's the solution to make the program run correctly on Android devices, OK, I will go for that. But where to start?

[J.Hilk]

@tomy

theres a very basic example in the docu, that is really good to get general understanding of a c++ backend for a qml program:

Let me link that for you

[J.Hilk]

heres an quick example how your Backend could look like:

//PropertyBase.h
#ifndef PROPERTYBASE_H
#define PROPERTYBASE_H

#include <QObject>

class PropertyBase : public QObject
{
    Q_OBJECT
    
    Q_PROPERTY(double xBall READ xBall WRITE setXBall NOTIFY xBallChanged)
    Q_PROPERTY(double yBall READ yBall WRITE setYBall NOTIFY yBallChanged)
    Q_PROPERTY(double wBall READ wBall WRITE setWBall NOTIFY wBallChanged)
    Q_PROPERTY(double hBall READ hBall WRITE setHBall NOTIFY hBallChanged)
    
    Q_PROPERTY(double xRedRacket READ xRedRacket WRITE setXRedRacket NOTIFY xRedRacketChanged)
    Q_PROPERTY(double yRedRacket READ yRedRacket WRITE setYRedRacket NOTIFY yRedRacketChanged)
    Q_PROPERTY(double wRedRacket READ wRedRacket WRITE setWRedRacket NOTIFY wRedRacketChanged)
    Q_PROPERTY(double hRedRacket READ hRedRacket WRITE setHRedRacket NOTIFY hRedRacketChanged)
    
    Q_PROPERTY(double xBlackRacket READ xBlackRacket WRITE setXBlackRacket NOTIFY xBlackRacketChanged)
    Q_PROPERTY(double yBlackRacket READ yBlackRacket WRITE setYBlackRacket NOTIFY yBlackRacketChanged)
    Q_PROPERTY(double wBlackRacket READ wBlackRacket WRITE setWBlackRacket NOTIFY wBlackRacketChanged)
    Q_PROPERTY(double hBlackRacket READ hBlackRacket WRITE setHBlackRacket NOTIFY hBlackRacketChanged)
    
    Q_PROPERTY(double wScreen READ wScreen WRITE setWScreen NOTIFY wScreenChanged)
    Q_PROPERTY(double hScreen READ hScreen WRITE setHScreen NOTIFY hScreenChanged)
    
    inline double xBall(){return m_xBall;}
    inline double yBall(){return m_yBall;}
    inline double wBall(){return m_wBall;}
    inline double hBall(){return m_hBall;}
    
    inline double xRedRacket(){return m_xrRacket;}
    inline double yRedRacket(){return m_yrRacket;}
    inline double wRedRacket(){return m_wrRacket;}
    inline double hRedRacket(){return m_hrRacket;}
    
    inline double xBlackRacket(){return m_xbRacket;}
    inline double yBlackRacket(){return m_ybRacket;}
    inline double wBlackRacket(){return m_wbRacket;}
    inline double hBlackRacket(){return m_hbRacket;}
    
    inline double wScreen(){return m_wScreen;}
    inline double hScreen(){return m_hScreen;}
    
    void setXBall(const double &);
    void setYBall(const double &);
    void setWBall(const double &);
    void setHBall(const double &);
    
    void setXRedRacket(const double &);
    void setYRedRacket(const double &);
    void setWRedRacket(const double &);
    void setHRedRacket(const double &);
    
    void setXBlackRacket(const double &);
    void setYBlackRacket(const double &);
    void setWBlackRacket(const double &);
    void setHBlackRacket(const double &);
    
    void setWScreen(const double &);
    void setHScreen(const double &);
public:
    explicit PropertyBase(QObject *parent = nullptr);

signals:
    void xBallChanged();
    void yBallChanged();
    void wBallChanged();
    void hBallChanged();
    
    void xRedRacketChanged();
    void yRedRacketChanged();
    void wRedRacketChanged();
    void hRedRacketChanged();
    
    void xBlackRacketChanged();
    void yBlackRacketChanged();
    void wBlackRacketChanged();
    void hBlackRacketChanged();
    
    void wScreenChanged();
    void hScreenChanged();
protected:
    double m_xBall;
    double m_yBall;
    double m_wBall;
    double m_hBall;
    
    double m_xrRacket;
    double m_yrRacket;
    double m_wrRacket;
    double m_hrRacket;
    
    double m_xbRacket;
    double m_ybRacket;
    double m_wbRacket;
    double m_hbRacket;
    
    double m_wScreen;
    double m_hScreen;
};

#endif // PROPERTYBASE_H

//

//PropertyBase.cpp
#include "propertybase.h"


PropertyBase::PropertyBase(QObject *parent) : QObject(parent)
{

}

void PropertyBase::setXBall(const double &value)
{
    if(value != m_xBall){
        m_xBall = value;
        emit xBallChanged();
    }
}

void PropertyBase::setYBall(const double &value)
{
    if(value != m_YBall){
        m_yBall = value;
        emit yBallChanged();
    }
}

void PropertyBase::setWBall(const double &value)
{
    if(value != m_wBall){
        m_wBall = value;
        emit wBallChanged();
    }
}

void PropertyBase::setHBall(const double &value)
{
    if(value != m_hBall){
        m_hBall = value;
        emit hBallChanged();
    }
}

void PropertyBase::setXRedRacket(const double &value)
{
    if(value != m_xrRacket){
        m_xrRacket = value;
        emit xRedRacketChanged();
    }
}

void PropertyBase::setYRedRacket(const double &value)
{
    if(value != m_yrRacket){
        m_yrRacket = value;
        emit yRedRacketChanged();
    }
}

void PropertyBase::setWRedRacket(const double &value)
{
    if(value != m_wrRacket){
        m_wrRacket = value;
        emit wRedRacketChanged();
    }
}

void PropertyBase::setHRedRacket(const double &value)
{
    if(value != m_hrRacket){
        m_hrRacket = value;
        emit hRedRacketChanged();
    }
}

void PropertyBase::setXBlackRacket(const double &value)
{
    if(value != m_xbRacket){
        m_xbRacket = value;
        emit xBlackRacketChanged();
    }
}

void PropertyBase::setYBlackRacket(const double &value)
{
    if(value != m_ybRacket){
        m_ybRacket = value;
        emit yBlackRacketChanged();
    }
}

void PropertyBase::setWBlackRacket(const double &value)
{
    if(value != m_wbRacket){
        m_wbRacket = value;
        emit wBlackRacketChanged();
    }
}

void PropertyBase::setHBlackRacket(const double &value)
{
    if(value != m_hbRacket){
        m_hbRacket = value;
        emit hBlackRacketChanged();
    }
}

void PropertyBase::setWScreen(const double &value)
{
    if(value != m_wScreen){
        m_wScreen = value;
        emit wScreenChanged();
    }
}

void PropertyBase::setHScreen(const double &value)
{
    if(value != m_hScreen){
        m_hScreen = value;
        emit hScreenChanged();
    }
}

//Backend.h
#ifndef BACKEND_H
#define BACKEND_H

#include "propertybase.h"
#include <QTimer>

class BackEnd : public PropertyBase
{
    Q_OBJECT
    
public:
    explicit BackEnd(PropertyBase *parent = nullptr);

    Q_INVOKABLE void timerStart(){m_BallTimer.start(m_timerInterval);}
    Q_INVOKABLE void timerStop(){m_BallTimer.stop();}
    
    Q_INVOKABLE void setInterval(int & interval){
        m_timerInterval = interval;
        m_BallTimer.setInterval(interval);
    }
    
signals:
    void rightWallhit();
    void leftWallHit();
    void rightRacketHit();
    void leftRacketHit();
    void upperOrLowerWallHit();
    
    void moveBall();

public slots:
    
private:
    bool hitsRightRacket();
    bool hitsLeftRacket();
    
    bool hitsUpperOrLowerWall();
    bool hitsRightWall();
    bool hitsLeftWall();
    
private slots:
    void doCalculation();
    
protected:
    int m_timerInterval = 10;
    QTimer m_BallTimer;
};

#endif // BACKEND_H

//Backend.cpp
#include "backend.h"

BackEnd::BackEnd(PropertyBase *parent) : PropertyBase(parent)
{
    connect(&m_BallTimer, &QTimer::timeout, this, &BackEnd::doCalculation);
}

bool BackEnd::hitsRightRacket()
{
    if( (xBall() + wBall() >= xRedRacket() && xBall() <= xRedRacket() + wRedRacket() ) &&
        (yBall() + hBall() >= yRedRacket() && yBall() <= yRedRacket() + hRedRacket() ))
        return true;
    
    return false;
}

bool BackEnd::hitsLeftRacket()
{
    if( (xBall() + wBall() >= xBlackRacket() && xBall() <= xBlackRacket() + wBlackRacket() ) &&
        (yBall() + hBall() >= yBlackRacket() && yBall() <= yBlackRacket() + hBlackRacket() ))
        return true;
    
    return false;
}

bool BackEnd::hitsUpperOrLowerWall()
{
    if(yBall() <= 0 || yBall() +hBall() >= hScreen())
        return true;
    
    return false;
}

bool BackEnd::hitsRightWall()
{
    if(xBall() + wBall() >= wScreen())
        return true;
    
    return false;
}

bool BackEnd::hitsLeftWall()
{
    if(xBall() <= 0)
        return true;
    
    return false;
}

void BackEnd::doCalculation()
{
    if(hitsRightWall()){
        timerStop();
        emit rightWallhit();
    }
    
    if(hitsLeftWall()){
        timerStop();
        emit leftWallHit();
    }
    
    if(hitsRightRacket())
        emit rightRacketHit();
    
    if(hitsLeftRacket())
        emit leftRacketHit();
    
    if(hitsUpperOrLowerWall())
        emit upperOrLowerWallHit();
    
    emit moveBall();
}

//main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>

#include "backend.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    
    qmlRegisterType<BackEnd>("myBackend",1,0,"BackEnd");

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

//main.qml
Window {
    id: window
    visibility: Window.Maximized
    title: qsTr("The PingPong Game - A QML Game")
    color: "gray"
    
    
    BackEnd{
        id:myBackend
        
        xBall: ball.x
        yBall: ball.y
        wBall: ball.width
        hBall: ball.height
        
        xRedRacket: redRacket.x
        yRedRacket: redRacket.y
        //....
        
        onRightWallhit: {
            leftCounter.count++
            out_timer.interval = 2000
            out_timer.running = true
        }
        onLeftWallHit: {
            rightCounter.count++
            out_timer.interval = 2000
            out_timer.running = true
        }
        onRightRacketHit: {
            if (redRacket.yUwards) {
                if (ball.yincrement == 0)
                    ball.yincrement = -ball.ran
                else if (ball.yincrement > 0)
                    ball.yincrement *= -1
                
            }
            else if (redRacket.yDwards) {
                if (ball.yincrement == 0)
                    ball.yincrement = ball.ran
                else if (ball.yincrement < 0)
                    ball.yincrement *= -1
                setInterval(table.duration/4)
            }
        }
         ....
    }
.....
}

[tomy]

@J.Hilk
Thank you many times. :-)
I must analyse the code for both being familiar with the code and also the way C++ and QML have been mixed. :-)

[J.Hilk]

@tomy
great,

but keep in mind, its just an example.
When I wrote it down, I realized quickly, that I would move a lot more into the c++ class.

You could(should) do the new Ball-Position calculation also in the backend.

you can set the Balls position through the QProperty-binding

xBall: ball.x
yBall: ball.y

via calling setXBall() and setYBall inside the cpp-class.
In the end there should than be no need for any QML-side timers.

That should clean up and speed up your QML part significantly.

[tomy]

@J.Hilk
OK, I do my best to make it clear for myself. I should thank you very much. Vielen Dank.