How to dynamically pair qml objects with c++ objects

[Jay_emissary]

@GrecKo Good evening,
I've spent hours today researching and trying to implement the model system into my project. I did run into a couple of issues with this "simple" approach, though. Here's what I've done:

I use this function to start the object creation process

void GameManager::spawnNote(int index)
{
    emit createHitObject();
}

In main.qml I instantiate the C++ AbstractListModel and call the C++ function, createHitObject() to spawn the hitObjects.

    HitObjectModel{
        id:hitObjModel
    }

    Repeater{
        model: hitObjModel
        delegate:  Rectangle {
                id: image      
                width: 10
                height: 40
                color: "white"
                x: 100
                y:100}
    }

    Connections{
        target: gameManager
       function onCreateHitObject ()
                {
                    hitObjModel.createHitObject()
                }
    }

Now let's take a look at hitObjModel.createHitObject() from c++'s side:

void HitObjectModel::createHitObject()
{
    beginInsertRows(QModelIndex(),objects.size(),objects.size());
    objects.append(new HitObject());
    endInsertRows();

}

I use this code to ensure that the repeater spawns enough visual elements to pair with each HitObject. This successfully puts the rectangles on the screen, and I can control each of their functions from c++.

[Jay_emissary]

@Jay_emissary Here's where the complexity comes in:
I need to reference deltatimer, a QTimer that's instantiated from another class. Each object should have this connect function attached, so it fires the tick function for each corresponding object. Essentially, this code:

• HitObjectModel.cpp

   HitObject* hitObj = new HitObject();
    beginInsertRows(QModelIndex(),objects.size(),objects.size());
    objects.append(hitObj);
    endInsertRows();
    connect(deltaTimer, &TimeStep::Tick,hitObj, &HitObject::Tick);

The only way to access a C++ object created by another class is by passing it into the model, but since the model is created from QML, there is no way for it to access deltatimer from the "initializer" class.

My hope is that I can create the model in C++ instead and expose it to QML. That way, I can pass in the timer reference and use it across all the created objects.

This is from the initializer class:

    deltaTimer = new TimeStep();
    hitModelObj = new HitObjectModel(this,deltaTimer);
    engine->rootContext()->setContextProperty("HitObjectModel", hitModelObj);

Now I have the deltaTimer reference. I should be able to access the model in QML too, no?

I'll also call createHitObject() from the model directly from the spawnNote function instead of emitting a signal like earlier

void GameManager::spawnNote(int index)
{
    hitObjectModel->createHitObject();

in QML all I should need is a reference to the c++ model, which should be exposed now right?

Repeater{
        model: hitObjModel
         delegate:  Rectangle {
                        id: image      
                        width: 10
                        height: 40
                        color: "white"
                        x: 100
                        y:100}
            }

For some reason, Qt throws me an error: Main.qml:25: ReferenceError: hitObjModel is not defined

How doesn't Qt recognize the model after it's created??

Is what I'm trying to do impossible to execute in Qt? I'm at a loss...

[Jay_emissary]

@Bob64 Gotcha! I'll be sure to take note of this whenever I'm deciding on how I might approach connecting C++ to QML in my projects.

[Bob64]

@Jay_emissary said in How to dynamically pair qml objects with c++ objects:

"HitObjectModel"

This is the exact name you should use in QML, not hitObjectModel.

[Jay_emissary]

@Bob64 Oh, whoops! I must have overlooked that one. Thanks for catching that, lol... Now the QML objects are on the screen and the C++ objects get created as well!

The only issue I have at this point is that I'm not so sure that the C++ object is associated with the QML objects. I added this statement to the HitObject's constructor:

    qDebug() <<property("x").toDouble();

And because I set the x to 100 using in the following code, I should expect to receive that value when the c++ object is created.

    Repeater{
        model: hitObjectModel
        delegate:  Rectangle {
                id: image      
                width: 10
                height: 40
                color: "white"
                x: 100
                y:100}
    }

But instead, I'm getting a 0. Could this possibly be because the QML is only reacting to the fact my object list has increased, and less so the fact that a C++ object has been created to pair with the corresponding QML object?

[jsulm]

@Jay_emissary said in How to dynamically pair qml objects with c++ objects:

But instead, I'm getting a 0

I'm not a QML expert, but maybe QML uses setters to set members like x?

[Jay_emissary]

@jsulm As far as I know, yeah, you should be able to call a setProperty function in C++, and in QML you can directly set properties like x as well. Though, I'm currently trying to get x so I can verify that the c++ object is hooked up and can read QML's properties. It's important for me to get and set x and y properties so that I can perform functions such as smoothly moving objects across the screen at a framerate-dependent speed.

[jsulm]

@Jay_emissary said in How to dynamically pair qml objects with c++ objects:

I'm currently trying to get x so I can verify that the c++ object is hooked up and can read QML's properties

But you wrote: "I added this statement to the HitObject's constructor". This will print 0, because when the parameter-less constructor is called 100 was not yet assigned to x.

[Bob64]

@Jay_emissary @Jay_emissary There is no implicit association of the C++ object with the QML object. Each object in your "view" is associated with a known index into the model and can access whatever "data" the model exposes at that index. In your case I believe you are exposing a whole object as your data, but often the underlying items in a model are more encapsulated and you just expose certain named fields at each index.

Essentially there is a one way data flow from the model to the view. This doesn't mean that you can't expose functions from your model that can be used to update it. This would have to follow a strict process of updating the model items and providing appropriate signals to notify the view to update itself from the model.

One simple thing that is worth asking: would it make sense for the X and Y positions to be define by properties of your model object?

Otherwise, maybe it would help if you had another go at outlining what you are trying to achieve. For example, even if you don't know exactly how to write it, what is that you want to achieve in the QML layer and how will it relate to the C++ objects in the backend?

[Jay_emissary]

@jsulm I see… I initially thought that the QML object gets created first, allowing me to then view the properties via C++. Apparently, the C++ object can be created and called upon a bit earlier. Thanks for pointing that out. I’ll keep that in mind.

[Jay_emissary]

@Bob64

@Bob64 said in How to dynamically pair qml objects with c++ objects:

There is no implicit association of the C++ object with the QML object. Each object in your "view" is associated with a known index into the model and can access whatever "data" the model exposes at that index. In your case I believe you are exposing a whole object as your data, but often the underlying items in a model are more encapsulated and you just expose certain named fields at each index.

Ohhh gotcha. Given this information, I'll need to thoroughly think about how I can approach adding precise movement my objects while remaining within these guidelines

@Bob64 said in How to dynamically pair qml objects with c++ objects:

One simple thing that is worth asking: would it make sense for the X and Y positions to be define by properties of your model object?

I don't think so, since each object needs to have its own independent x and y values.

@Bob64 said in How to dynamically pair qml objects with c++ objects:

Otherwise, maybe it would help if you had another go at outlining what you are trying to achieve. For example, even if you don't know exactly how to write it, what is that you want to achieve in the QML layer and how will it relate to the C++ objects in the backend?

For some extra context, I'm creating a rhythm game in Qt. The HitObject/Notes are "falling" objects that the player "hits" to score points. Check https://www.youtube.com/watch?v=RSWoIsXfoM4
at 1:12. The vertical scrolling arrows in the footage are essentially what I'm creating at the moment. Each arrow has their own X and Y coordinate and in video games you usually need a timestep/deltatime system to ensure that every object moves consistently across all platforms. This is why I emphasize accessing the deltaTimer object I've created in c++.

But I think your explanation of the QML-> C++ workflow gives me a lot to consider, and honestly, probably answers the remaining questions I have about the process. I'm currently not in a place to hop on Qt just yet, but I'll continue to look into this later today. Oh, by the way, I know that I've been keeping this thread going for a while. Would you say it's best to just start a new one if I have another topic or one that closely resembles this one?

Regardless, many thanks to you and everyone for having patience with me and providing more insight into the QML->C++ workflow. This is a topic that has had me puzzled for a while now, haha. Glad I have a better grasp on it now.

[GrecKo]

I don't think so, since each object needs to have its own independent x and y values.

Your "hit objects" position will be handled by your gameplay loop, these should be definitely be defined by your model. At least a "column" value and a "yProgress" value.

[Jay_emissary]

@GrecKo I get the model determining a column value, but why yProgress? Shouldn't each element move independently of the other?

[Bob64]

The way I understood it is that each element has its own entry in the model and this entry provides its own column index and yProgress. One option is that yProgress is a number between 0 and 1 that represents how far down the screen the object is. The delegate converts the column index and the progress number to an x-y coordinate that is meaningful in the geometry of the UI.

[Jay_emissary]

@Bob64 Understood. I can see how that works now. Thanks!

[GrecKo]

Yes that's exactly what I meant, thanks for explaining it Bob64.