Drawing a variable number of rectangles every x seconds (Dynamic Objects)

[xdn]

Hi,

I have an QML Gui in which I need to display a varying number of rectangles (at varying locations in the UI) every x seconds (triggered by a signal from C++ code, no fixed intervall). Rectangles should only be visible until the next batch of rectangles is drawn.

I.e. I need to have some way to create a bunch of QML objects at runtime, position them and then destroy them again before the next batch is created.
What is the recommended way to do this?

[wysota]

Is the maximum number of rectangles known? If so then the easiest thing would be to precreate them and just show or hide them on demand. If not then you can either create items in C++ using QDeclarativeComponent or pass enough info to QML to create items there using Component and its createObject method.

[xdn]

Ok, creating the objects in QML is the way I like best.

Creating them works fine but now I cannot access them when I want to destroy() them.
I would need some list to keep track of them but the things I tried are not working.
(using var rects = new Array() with push() does not work, because I"m not in a Script Element and having a Javascript for each dynamic list I want to keep seems overkill)
and using property list<Rectangle> rects and append() does not work, because the list always seems to be empty).

Here a small code example:




// init a global list here

Connections {
target: ticker
onTick: {
if (t%2 == 0) {
var comp = Qt.createComponent("Rect.qml") //can I use the Rectangle type directly somehow?
var new_rect = comp.createObject(page, {"x":50, "y":50})

// alternatively
// var new_rect = Qt.createQmlObject('import QtQuick 1.0; Rectangle {color: "red"; width: 20; height: 20}', page);

// add to list
}
else {
// destroy() all rects and clear list here
}
}
}

[wysota]

What do you need all the rectangles for?

As for the following:

//can I use the Rectangle type directly somehow?

Yes, you can:

Item {
Component {
id: component
Rectangle {
// put whatever you want here
}
}

Something {
onSomeEvent: var obj = component.createObject(parent, { ... })
}
}

[xdn]

I have a stream of images on top of which rectangles are shown to mark certain regions/objects. As new regions/objects show up and others disappear, I need to add/destroy rectangles. Technically there is an upper limit to the number of rectangles but I'd rather have them created dynamically.

At a later point, the user is supposed to be able to interact with the rectangles (click them mostly) so I cannot draw them into the image but need them to be separate objects on top of it.

[wysota]

I have a stream of images on top of which rectangles are shown to mark certain regions/objects. As new regions/objects show up and others disappear, I need to add/destroy rectangles. Technically there is an upper limit to the number of rectangles but I'd rather have them created dynamically.
You have to remember creating/destroying is always slower than showing/hiding. It's a trade-off decision you have to make.

As for keeping all the rectangles -- you can create a property that will hold a list of items.