QML Performance Problem

[snospmis_eht]

Hi,

i recently started a proof of concept for using QML as development environment for UIs. The target system is an embedded system (Colibri Board) running Windows CE 6.0. It has 600 MHz (single core), but no graphic acceleration at all.

I started by converting PSD Files into QML files (using the export script in Photoshop (see http://labs.qt.nokia.com/2010/10/19/...shop-and-gimp/)), which worked amazingly well ! So I ported a couple of screens, which came from our designer, and added some simple screen changes etc. within a couple hours. :-)

Now i ran a couple of tests on the target system and it seems that animations are really really slow. So stripped the whole app down to just some basic elements and found the problem to be the amount of layers used on the gui.

All animations seems to struggle, as soon as there are 3 or more layers below them.
I ran a test with only one layer (background): animation runs smoothly.
Two layers: the animation starts to struggle.
Three layers: the animation has a lot of interruption and is not drawn smoothly at all.

I removed all graphics (pngs etc.) and used just plain rectangles (without any gradients etc. but instead different colors). There is also no transparency or opacity set.
But there are still problems with my animations, if they are animated above 2 or more layers.

I tried different types of animations, but they all have the same performance issues.

Example:
[Layer5: my animation]
[Layer4: Button]
[Layer3: TestBackground]
[Layer2: BACKGROUND FORM (e.g. dialog background)]
[Layer1: BACKGROUND APPLICATION]

What seems to be the problem?
Is there a problem, because several layers have to be redrawn?

Thanks for your help, any advice highly appreciated!
Tobias

PS: how can i attach screenshots in a forum thread?

---------------------------------------------------------------------
EXAMPLE CODE USED:
main.cpp:

#include <QtGui/QApplication>
#include <QDeclarativeEngine>
#include <QDeclarativeComponent>
#include <QDeclarativeView>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QDeclarativeView viewer;
    viewer.setSource(QUrl::fromLocalFile("qml/Main.qml"));

    viewer.setAttribute(Qt::WA_OpaquePaintEvent);
    viewer.setAttribute(Qt::WA_NoSystemBackground);
    viewer.viewport()->setAttribute(Qt::WA_OpaquePaintEvent);
    viewer.viewport()->setAttribute(Qt::WA_NoSystemBackground);

    viewer.setFrameShape(QFrame::NoFrame);
    viewer.setWindowFlags(Qt::FramelessWindowHint);
    viewer.showFullScreen();

    return app.exec();
}

Main.qml:

import QtQuick 1.0

Rectangle {
    width: 800
    height: 480
    color: "green"

    signal sendValueToCPP(int n);

    MouseArea {
        anchors.fill: parent;

        onReleased: {
            console.log("mouse.button: " + mouse.button)

            flyingRect.x = mouse.x;
            flyingRect.y = mouse.y;

            anotherFlyingRect.x = mouse.x-40;
            anotherFlyingRect.y = mouse.y-40;
        }
    }

    Button2 {
        x: 20; y: 140;
        width: 300; height: 20;
        text: "Pause (screen)"
        fontColor: "white"
        fontSize: 10
        fontFamily: "Axel"
        frontColor: "gray"

        onClicked: {
            var test = loadScreen("MyTestForm.qml");
        }
    }

    Item {
        id: currentScreen

        anchors.fill: parent
    }

    Rectangle {
        id: flyingRect

        width: 20
        height: 20

        border.color: "black"
        border.width: 2
        radius: 5
        color: "yellow"

        Behavior on x { SmoothedAnimation { velocity: 200; } }
        Behavior on y { SmoothedAnimation { velocity: 200; } }
    }

    Rectangle {
        id: anotherFlyingRect

        width: 30
        height: 30

        border.color: "black"
        border.width: 2
        radius: 5
        color: "blue"

        Behavior on x { NumberAnimation { duration: 1000; easing.type: Easing.OutBounce } }
        Behavior on y { NumberAnimation { duration: 1000; easing.type: Easing.OutBounce } }
    }

    function loadScreen(strQMLFile) {
        var component = Qt.createComponent(strQMLFile);
        console.debug("component: " + component);

        if (component.status == Component.Ready) {
            var myNewComponent = component.createObject(currentScreen);
        }

        switch(component.status) {
            case Component.Null:
                console.debug("component.status: " + component.status + " = Null");
            break;
            case Component.Ready:
                console.debug("component.status: " + component.status + " = Ready");
                return component;
            break;
            case Component.Loading:
                console.debug("component.status: " + component.status + " = Loading");
            break;
            default:
            case Component.Error:
                console.debug("component.status: " + component.status + " = ERROR");
                console.debug("error message: " + component.errorString());
            break;
        }
    }
}

MyTestForm.qml:

import Qt 4.7

Rectangle {
    id: screen_Pause
    width: 800
    height: 480

    rotation: 90

    Rectangle {
        color: "#FF0000"
        x: 160
        y: -144
        width: 490
        height: 828
        opacity: 1
    }


    Rectangle {
        color: "#000000"
        x: 155
        y: -162
        width: 490
        height: 828
        opacity: 1
    }


    Rectangle {
        id: popup

        border.color: "#363636";
        border.width: 1;

        color: "#cccccc";

        x: 178
        y: 11
        width: 444
        height: 516
        opacity: 1
    }


    Text {
        text: "Test pausiert"
        font.pixelSize: 32
        font.family: "Axel-Bold"
        font.bold: true
        color: "#ffffff"
        x: 288
        y: 47
        opacity: 1
    }


    Button2 {
        x: 211
        y: 124
        width: 380
        height: 60
        text: "test abbrechen"
        fontColor: "white"
        fontSize: 24
        fontFamily: "Axel"
        frontColor: "#363636";

        opacity: 1
    }



    Button2 {
        x: 211
        y: 194
        width: 380
        height: 60
        text: "Uebungen"
        fontColor: "white"
        fontSize: 24
        fontFamily: "Axel"
        frontColor: "#363636";

        opacity: 1
    }


    Button2 {
        x: 211
        y: 264
        width: 380
        height: 60
        text: "sperren"
        fontColor: "white"
        fontSize: 24
        fontFamily: "Axel"
        frontColor: "#363636";

        opacity: 1
    }


    Button2 {
        x: 211
        y: 334
        width: 380
        height: 60
        text: "Beenden und Ausloggen"
        fontColor: "white"
        fontSize: 24
        fontFamily: "Axel"
        frontColor: "#363636";

        opacity: 1

        onClicked: {
            screen_Pause.destroy();
        }
    }


    Button2 {
        x: 211
        y: 444
        width: 380
        height: 60
        text: "Beenden und Ausloggen"
        fontColor: "white"
        fontSize: 24
        fontFamily: "Axel"
        frontColor: "#363636";

        opacity: 1
    }
}

BUTTON2 CLASS USED in EXAMPLE:
Button2.qml

import QtQuick 1.0

 Rectangle {
    id: container

    property variant text
    property variant fontColor
    property variant fontSize
    property variant fontFamily
    property color  frontColor

    signal clicked

    height: text.height + 10; width: text.width + 20
    border.width: 1
    radius: 4

    color: frontColor;

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: container.clicked()
    }


    Text {
        id: text

        anchors.centerIn: parent

        font.pointSize: parent.fontSize
        font.family: parent.fontFamily
        color: parent.fontColor

        text: parent.text
    }
 }

[ltomuta]

First thing first, see http://doc.qt.nokia.com/4.7/qdeclara...rformance.html , it might provide some tips for your overall design.

PS: how can i attach screenshots in a forum thread?

As your post number increases on the forum you will receive the right to create attachments as well. Until then http://tinypic.com or a similar service should do just fine.

Your example code is static, so I guess it doesn't really exemplifies the issue very well ...

[snospmis_eht]

First thing first, see http://doc.qt.nokia.com/4.7/qdeclara...rformance.html , it might provide some tips for your overall design.

Thanks for the hint. I checked it through, but i could not find anything relating to my problem.

Your example code is static, so I guess it doesn't really exemplifies the issue very well ...

i edited my post and included the missing files.

I am using the main.qml file to load the different screens dynamicly. So I hoped to be able to animate a whole dialog (e.g. fliping to screens or slide on screen on top of another screen etc.).

[ltomuta]

I will try your code some time this evening, I hope
One thing that the performace related documentation says is that bindings such as the ones below are costly, more so than an anchor.

height: text.height + 10; width: text.width + 20

How costly they are, that's another discussion.

[snospmis_eht]

Thanks, that would be great.

You are right about the bindings, but in this case I override those values in "MyTestForm.qml" by setting width and height to constant values.
So the bindings should not be used? correct me if i am wrong.

Button2 {
x: 211
y: 194
width: 380
height: 60
text: "Uebungen"
fontColor: "white"
fontSize: 24
fontFamily: "Axel"
frontColor: "#363636";

opacity: 1
}

[LateJ]

One thing you might also try is to set the smooth-property of Texts, etc. to false while animating, should help a bit with performance.

Another thing that is easy to get wrong especially when doing view transformations is to set the opacity of all the views that are not visible to 0. This way the declarative engine can ignore those items altogether, which improves performance.

You can also try this trick and see if it helps in your environment: http://juhaturunen.com/blog/2011/04/...that-it-hurts/

[snospmis_eht]

Hi Late,

tried all of those things, but could not get it to run smoothly.

I was wondering if this has anything to do with how I built the Qt libs for the target system. As there is no opengl support on the target system, I compiled Qt without setting the "graphicssystem" parameter. So i guess, all Qt applications will automatically use the raster graphics system?

Is there a way to see which graphicssystem is used while the application runs?

thanks
tobias