×

Discussion Board

Results 1 to 7 of 7
  1. #1
    Registered User
    Join Date
    May 2011
    Posts
    4

    Question QML Performance Problem

    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:
    Code:
    #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:
    Code:
    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:
    Code:
    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
    Code:
    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
        }
     }
    Last edited by snospmis_eht; 2011-05-11 at 13:18. Reason: errors

  2. #2
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,355

    Re: QML Performance Problem

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

    Quote Originally Posted by snospmis_eht View Post
    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 ...
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  3. #3
    Registered User
    Join Date
    May 2011
    Posts
    4

    Re: QML Performance Problem

    Quote Originally Posted by ltomuta View Post
    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.

    Quote Originally Posted by ltomuta View Post
    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.).

  4. #4
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,355

    Re: QML Performance Problem

    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.
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  5. #5
    Registered User
    Join Date
    May 2011
    Posts
    4

    Re: QML Performance Problem

    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
    }

  6. #6
    Nokia Developer Moderator
    Join Date
    Jul 2006
    Location
    Tampere, Finland
    Posts
    13

    Re: QML Performance Problem

    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/
    - Late

  7. #7
    Registered User
    Join Date
    May 2011
    Posts
    4

    Re: QML Performance Problem

    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

Similar Threads

  1. How to call/load another QML file from QML ?
    By cadlg in forum [Archived] Qt Quick
    Replies: 5
    Last Post: 2011-07-28, 09:15
  2. [Qt QML] Questions regarding QML Performance
    By SeanZhang in forum [Archived] Qt Quick
    Replies: 1
    Last Post: 2011-05-05, 13:07
  3. QML Flickable Element performance
    By cadlg in forum [Archived] Qt Quick
    Replies: 1
    Last Post: 2011-03-18, 01:57

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •