Qt Quick - multi state home screen - embedded linux

marcin100

Hi,

I'm trying to implement GUI similar to Android home screen - the one with multiple screens.
Except much simpler. Each screen/state would be just a Rectangle with some dynamic text updated from C++ code.
There will be row of control buttons at the bottom which will activate certain screen/rectangle. Animation will be used but I have not decided on slide vs zoom/fade

What is a better way of implementing such interface. Should I use states or just have all rectangels on top of eachother and modify opacity/visibility?

I think visually I can achieve it either way, but I am wondering about the resources, processor load and speed since this will run on embedded linux device.

What happens when object's visiblity is set to false vs when the object is in the non-active state?

p3c0

Hi,

Did you check "StackView":http://doc.qt.io/qt-5/qml-qtquick-controls-stackview.html ? I guess it would be more suitable.

Qt Quick 2 makes use of a dedicated scene graph based on OpenGL ES 2.0 or OpenGL 2.0 which would use GPU for calculations and thus speed up rendering. The remaining load will be taken up by the CPU as usual.

bq. What happens when object’s visiblity is set to false vs when the object is in the non-active state?

AFAIK (in terms of rendering) setting visibility to false will not render that element until it is made visible and in latter case it will atleast be rendered.

marcin100

Thank you for the suggestion. I just came across the StackView 5 min before reading your post. I need to read about it first.

However I have already implemented this using Loader element. To do this I had to create separate QML files for each rectangle and they get dynamically loaded or destroyed by using the following code:

@
Loader
{
id: homeScreenLoader
anchors.fill: parent
source: "default_screen.qml" // only needed if you want something loaded on startup

@

And then each control button will have this line inside the Mouse Area:

@
onClicked:
{
centerLoader.source = "qml_file_name.qml"
}
@
This way only the loaded rectagle is taking up the memory (I think).

I still have a slight issue with controlling the animation (not related to this post) but the reason I do not mark it as SOLVED is because I'm interested in opinions on this approach. Thanks in advance.

p3c0

Your way is also correct but in this way you will need manage everything for eg. creating, loading, deleting etc.. With StackView you get the readymade methods to do those. Also it provides Transitions animations. Moreover if you dont require any Item you can just pop it. Setting destroyOnPop to true will destroy the Item when popped.

marcin100

Thank you.

Coming back to the "Loader":http://doc.qt.io/qt-5/qml-qtquick-loader.html QML Type, I have read this:

bq. If the source or sourceComponent changes, any previously instantiated items are destroyed. Setting source to an empty string or setting sourceComponent to undefined destroys the currently loaded object, freeing resources and leaving the Loader empty.

If I understand this correctly then the Loader takes care of destroying the unused objects and all that needs to be done is just load a new object on button click.

Please confirm if my understanding is correct.

Also anyone else has the opinion on "Loader":http://doc.qt.io/qt-5/qml-qtquick-loader.html vs "StackView":http://doc.qt.io/qt-5/qml-qtquick-controls-stackview.html?

p3c0

bq. If I understand this correctly then the Loader takes care of destroying the unused objects and all that needs to be done is just load a new object on button click.

Correct. But only those which are loaded by Loader.