J-P Nurmi

Qt Quick Controls for Embedded

Published Tuesday March 31st, 2015
25 Comments on Qt Quick Controls for Embedded
Posted in Qt Quick Controls

Qt Quick Controls are a set of styled UI controls to conveniently build user interfaces in QML. The first release of Qt Quick Controls was included in Qt 5.1 and targeted desktop platforms. Subsequent releases have also vastly improved the support for mobile platforms.

Qt Quick Controls are not only offered for convenience, but also act as an example to vendors wanting to create their own UI control sets. Unlike specialized control sets for a defined target platform, Qt Quick Controls have a broad scope from desktop to mobile and embedded. This has led to a flexible, but somewhat complex design.

When targeting embedded hardware with limited resources, we would like to offer better performance than what the current set of Qt Quick Controls provide. Over the past months, we have spent a great deal of time researching, profiling, and discussing alternative approaches. We would like our customers to enjoy the convenience of Qt Quick Controls everywhere without a significant performance impact.

We now have a promising prototype up and running, so we thought it would be a good time to share the status. We have posted a little sneak preview showing the new controls in action. Please notice that the visual appearance is not final.

The following sections highlight some of the ideas that together helped to achieve a remarkable performance boost.

QML vs. C++

In many cases, the internal state of a control can be more efficiently processed in C++. For example, handling input events in C++ makes a difference for controls that would otherwise need to create internal MouseAreas and attached Keys objects. By doing all the heavy-lifting in C++, the visual QML layer could be implemented using simple and efficient declarative bindings.

The following charts present creation times of various Qt Quick Controls compared to what we have now in the works.

qqc-i7-1

qqc-rpi-1

As you can see, on a device like RPi, one still cannot create too many controls per frame when aiming for 60 FPS scrolling. We are clearly headed the right direction, though. :)

Styles

The new controls are spiced up with a customizable, light-weight and platform independent Qt style that performs well on devices with limited resources. The concept of styling is changing in a way that styles no longer provide components that are dynamically instantiated by controls, but controls themselves consist of delegates that can be replaced without dynamic instantiation. Style objects on the other hand have become simple sets of styling attributes. In order to brand an application, changing the color scheme is a matter of setting a few properties that are automatically inherited by the hierarchy of children.

Keep things simple

When it comes to more complex compound controls, it is sometimes better to provide the sub-controls as separate building blocks. As an example, we consider replacing the complex ScrollView control by simple ScrollBar/Indicator controls that can be attached to any Flickable:

ScrollView {
    horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
    Flickable {
        ...
    }
}

// vs.

Flickable {
    ...
    ScrollBar.vertical: ScrollBar { }
}

Maybe not entirely fair to compare these two approaches, but here’s the gain of the oversimplification in numbers:

qqc-i7-2

qqc-rpi-2

Wrap up

We have been exploring a bit what it would take to bring Qt Quick Controls to the segment of devices with limited resources. Some ideas, leading to significant performance improvements, are presented above. The performance comparisons focus on creation time, which reflects directly to application startup time, loading time of application views, and scrolling speed of item views that create and destroy delegate instances while scrolling. Simplifying things and doing all the heavy-lifting in C++ reduces memory consumption as well. Currently a Button using the “Base” style consists of 17 Items (of which 4 are Loaders) and a total of 64 QObjects. The amount of Items of a Button is now down to 3, and the total amount of QObjects is 7 at the moment.

Please bear in mind that the new light-weight controls are still in early development. The numbers, visual appearance, and the whole concept are still subject to change.

EDIT: The source code is available at http://code.qt.io/cgit/qt-labs/qtquickcontrols2.git.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Qt Quick Controls

25 comments

Benoit says:

These optimizations look impressive. Nice video by the way ๐Ÿ™‚ Will the traditional Quick controls (especially for mobile) also benefit from those changes (at least partially)?

J-P Nurmi J-P Nurmi says:

The changes we did were quite “radical”, so there’s not much we can share between the two. ๐Ÿ™‚ We’ve had some thoughts about utilizing the new architecture for the traditional controls, though.

Nuno Pinheiro says:

This looks pretty cool, and love the performance boost.

But. I feal that QML land has been heading in direction that me as a designer dont particulary find usefull. Interaction flow manipulation is key for any meningfull and efective good touch user experience, qml original concept of exposing that fine grain interaction components allowed us to tailor user experience that are smooth smart and natural. This I fear is a step in to widget like land, were mostly closed boxes are ofered as end items to be used as “lego” parts to create a UI.
THis might be great for many situations were you just want a quick eficient solution. But if you want a Consumer grade UI/UX you will need that fine control over the component so you can micromanage its apearence and interaction feedback…

My main fear is that in the process of making this types of solutions we lose scope of what problems QML tried to solve in the beguining. Cheers.

J-P Nurmi J-P Nurmi says:

Hi Nuno. It’s perfectly fine to use the primitive Qt Quick items to build your own experience. Qt Quick Controls just offer convenience to those who don’t want to build everything from scratch. What comes to these new experimental controls, they are actually a big step towards more fine-grained access. Pretty much any part of any control can be replaced. They are very open about exposing the building blocks instead of hiding things into black boxes.

Robert says:

Hi,
My question is about memory consumption of a QtQuick base application versus a widgets based one. Some simple app like a simple GUI + networking is of interest.

J-P Nurmi J-P Nurmi says:

Hi, I’ll get back to you with some numbers. ๐Ÿ™‚

J-P Nurmi J-P Nurmi says:

Hi Robert, these numbers were taken with Valgrind/Massif.

QtWidgets: QScrollArea + QVBoxLayout + 100 QPushButtons

GTK style: 4.6mb
Fusion style: 3.6mb

QtQuick.Controls 1.3: ScrollView + ColumnLayout + 100 Buttons

GTK style: 15.1mb
Fusion style: 14.0mb
Base style: 18.8mb

With the new controls: Flickable + ScrollBar + 100 Buttons: 8.3mb

Yvan Da Silva says:

Nice improvement, well done!
Happy to see things going forward with Qt Quick Controls.

Francine says:

Nice! Will they be bundled with the regular Qt desktop builds? Are they free or enterprise-only?

J-P Nurmi J-P Nurmi says:

The license the same LGPLv3+Commerial as the other Qt Quick Controls have. The source code going out in the open as soon as I get to request a new repository. Even if the post talks about embedded, the controls are fully cross-platform and run fine on desktops as well. In fact the video was recorded on desktop for the sake of my own convenience. ๐Ÿ™‚

Aleix Pol says:

I guess that Francine was asking if the new platform supports the Desktop-style theming.

Sergio Martins says:

While profiling startup times on embedded of any non-trivial QML app I found out that QQmlComponent::create() is very expensive and usually the bottleneck.

Do you think your work will only benefit QtQuick Controls or there are upcoming changes to qtdeclarative that will benefit all components instead ?

J-P Nurmi J-P Nurmi says:

Component creation is known to be a bit heavy, but luckily the QML engine is in good hands these days. ๐Ÿ˜‰ I have mostly focused on just using Qt Quick in an optimal way, but the work has also triggered important tasks all the way in QtQml (such as QTBUG-43581 and QTBUG-43582) and Qt Quick itself also gets to benefit (eg. QTBUG-41559) in the process.

Chris Adams says:

These days? Ouch.

J-P Nurmi J-P Nurmi says:

Sorry, my intention was to say more like that it’s actively maintained again. It was drifting on its own for a while.

chocis says:

This is awesome. I’ve recently spent few weeks on research how to create QML Controls dynamically/asynchronously in the fastest way by not blocking GUI. I’ve found the most optimal way for me, but it still has the problem of slow/visible instantiation – especially on mobile phones. This would benefit greatly ๐Ÿ™‚

Olivier Twist says:

Could you share your experience?

J-P Nurmi J-P Nurmi says:

If you mean us, yes, we will share the code. We’re still discussing whether to create a new repo or try to combine with the existing. Both options have their pros and cons… Stay tuned ๐Ÿ™‚

fonzi337 says:

Very nice! One question: will the new Qt Quick Controls do away with the widgets module dependency? I remember for quite a while after Qt Quick Controls were released, they had a dependency on the widgets module, which made them unideal to use on embedded devices. Since these new Qt Quick Controls target embedded devices where a custom look-and-feel is desired anyway, I’m hoping the widgets module dependency is now gone.

J-P Nurmi J-P Nurmi says:

The new controls have no dependency on the widgets module, indeed. Notice that it’s also possible to build the traditional controls without a widgets dependency already today; configure qt with -no-widgets.

fonzi337 says:

Great! Good to know.

Artem says:

That looks great and fast and would be an awesome base.. if I was into building a new device, say, a TV box.

The demo looks not much like iOS or Android at the moment and I am not sure if just styling can fix it :/
There is a lot of specifics of how animations are happening (try clicking Search in the iOS contacts app for example and see how content flies out under a status bar), they change from version to version and following them by cloning the behavior is hard. That is unless it becomes one of the very top priorities for Qt.

J-P Nurmi J-P Nurmi says:

Hey Artem ๐Ÿ˜‰

> That looks great and fast and would be an awesome base.. if I was into building a new device, say, a TV box.

Yes, there’s been a high demand for controls that are light-weight enough to build such systems.

> The demo looks not much like iOS or Android at the moment and I am not sure if just styling can fix it :/

This is not the whole story. There might be something interesting coming out soon. Stay tuned. ๐Ÿ™‚

Commenting closed.

Get started today with Qt Download now