May 10, 2011

snospmis_eht snospmis_eht
Lab Rat
4 posts

QML Performance on Colibri Board and Windows CE (~600MHz,No GPU)

 

Hi,

i recently started a proof of concept for using QML as development environment for UIs for embedded systems. 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/exporting-qml-from-photoshop-and-gimp/)), which worked amazingly well! So I ported a couple of screens and added some simple screen changes and animations.

However, I performed a couple of tests on the target system and it seems that animations are really really slow. Therefor I 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 seem to struggle, as soon as there are three or more layers underneath them.
I performed a test including only one single layer as background and the animation runs smoothly on top of it.
Also a background with an image (e.g. a png) works well.

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.
The problem seems to be caused by the amount of layers, i.e. if an animation runs ontop of two 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]

The gui design is very specific and i won’t be able to strip it down to less then three layers, because the designer wants some gui elements being animated on top of other gui elements. For example popups should slide in from left to right, or while popups are visible, the background, i.e. the previous active dialog, is supposed to be darken.

What seems to be the problem with the layers?
Is there a problem, because several layers have to be redrawn, while the animation runs?
Is there a way to improve performance in such cases?

I attached an example code below.

Thanks for your help, any advice highly appreciated!
Tobias

——————————————————————————————————-
EXAMPLE CODE USED:

  1. import Qt 4.7
  2.  
  3. Rectangle {
  4.     id: screen_Pause
  5.     width: 800
  6.     height: 480
  7.  
  8.     rotation: 90
  9.  
  10.     Rectangle {
  11.         color: "#FF0000"
  12.         x: 160
  13.         y: -144
  14.         width: 490
  15.         height: 828
  16.         opacity: 1
  17.     }
  18.  
  19.  
  20.     Rectangle {
  21.         color: "#000000"
  22.         x: 155
  23.         y: -162
  24.         width: 490
  25.         height: 828
  26.         opacity: 1
  27.     }
  28.  
  29.  
  30.     Rectangle {
  31.         id: popup
  32.  
  33.         border.color: "#363636";
  34.         border.width: 1;
  35.  
  36.         color: "#cccccc";
  37.  
  38.         x: 178
  39.         y: 11
  40.         width: 444
  41.         height: 516
  42.         opacity: 1
  43.     }
  44.  
  45.  
  46.     Text {
  47.         text: "Test pausiert"
  48.         font.pixelSize: 32
  49.         font.family: "Axel-Bold"
  50.         font.bold: true
  51.         color: "#ffffff"
  52.         x: 288
  53.         y: 47
  54.         opacity: 1
  55.     }
  56.  
  57.  
  58.     Button2 {
  59.         x: 211
  60.         y: 124
  61.         width: 380
  62.         height: 60
  63.         text: "test abbrechen"
  64.         fontColor: "white"
  65.         fontSize: 24
  66.         fontFamily: "Axel"
  67.         frontColor: "#363636";
  68.  
  69.         opacity: 1
  70.     }
  71.  
  72.  
  73.  
  74.     Button2 {
  75.         x: 211
  76.         y: 194
  77.         width: 380
  78.         height: 60
  79.         text: "Uebungen"
  80.         fontColor: "white"
  81.         fontSize: 24
  82.         fontFamily: "Axel"
  83.         frontColor: "#363636";
  84.  
  85.         opacity: 1
  86.     }
  87.  
  88.  
  89.     Button2 {
  90.         x: 211
  91.         y: 264
  92.         width: 380
  93.         height: 60
  94.         text: "sperren"
  95.         fontColor: "white"
  96.         fontSize: 24
  97.         fontFamily: "Axel"
  98.         frontColor: "#363636";
  99.  
  100.         opacity: 1
  101.     }
  102.  
  103.  
  104.     Button2 {
  105.         x: 211
  106.         y: 334
  107.         width: 380
  108.         height: 60
  109.         text: "Beenden und Ausloggen"
  110.         fontColor: "white"
  111.         fontSize: 24
  112.         fontFamily: "Axel"
  113.         frontColor: "#363636";
  114.  
  115.         opacity: 1
  116.  
  117.         onClicked: {
  118.             screen_Pause.destroy();
  119.         }
  120.     }
  121.  
  122.  
  123.     Button2 {
  124.         x: 211
  125.         y: 444
  126.         width: 380
  127.         height: 60
  128.         text: "Beenden und Ausloggen"
  129.         fontColor: "white"
  130.         fontSize: 24
  131.         fontFamily: "Axel"
  132.         frontColor: "#363636";
  133.  
  134.         opacity: 1
  135.     }
  136. }

BUTTON2 CLASS USED in EXAMPLE:

  1. import QtQuick 1.0
  2.  
  3.  Rectangle {
  4.     id: container
  5.  
  6.     property variant text
  7.     property variant fontColor
  8.     property variant fontSize
  9.     property variant fontFamily
  10.     property color  frontColor
  11.  
  12.     signal clicked
  13.  
  14.     height: text.height + 10; width: text.width + 20
  15.     border.width: 1
  16.     radius: 4
  17.  
  18.     color: frontColor;
  19.  
  20.     MouseArea {
  21.         id: mouseArea
  22.         anchors.fill: parent
  23.         onClicked: container.clicked()
  24.     }
  25.  
  26.  
  27.     Text {
  28.         id: text
  29.  
  30.         anchors.centerIn: parent
  31.  
  32.         font.pointSize: parent.fontSize
  33.         font.family: parent.fontFamily
  34.         color: parent.fontColor
  35.  
  36.         text: parent.text
  37.     }
  38.  }

9 replies

May 11, 2011

mbrasser mbrasser
Lab Rat
452 posts

Hi,

If you haven’t seen it already, there are some performance suggestions available at http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeperformance.html, though I’m not sure if any of them will apply in your case. For embedded X11, a common problem is the graphicssystem being used: raster is much more performant than native. But I don’t think that is the case for WinCE (where raster is used by default, as far as I know).

I’m not familiar with the Colibri Board; could you provide more information on the specs?

Regards,
Michael

May 11, 2011

snospmis_eht snospmis_eht
Lab Rat
4 posts

Hi there,

it is a Colibri Orchid Board made by Toradex. The processor is a Col PXA310 V1.30.
The Spec can be found here http://www.toradex.com/En/Products/Colibri_Modules/Colibri_PXA310 [toradex.com]

How can I check, which graphics system is being used? Could it be a configuration error?

I attached some files, which were missing in my original post. As there is the main.cpp file and the main.qml file, which dynamicly loads the qml file, which i am having problems with.

regards
tobias

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

  1. #include <QtGui/QApplication>
  2. #include <QDeclarativeEngine>
  3. #include <QDeclarativeComponent>
  4. #include <QDeclarativeView>
  5.  
  6. int main(int argc, char *argv[])
  7. {
  8.     QApplication app(argc, argv);
  9.  
  10.     QDeclarativeView viewer;
  11.     viewer.setSource(QUrl::fromLocalFile("qml/Main.qml"));
  12.  
  13.     viewer.setAttribute(Qt::WA_OpaquePaintEvent);
  14.     viewer.setAttribute(Qt::WA_NoSystemBackground);
  15.     viewer.viewport()->setAttribute(Qt::WA_OpaquePaintEvent);
  16.     viewer.viewport()->setAttribute(Qt::WA_NoSystemBackground);
  17.  
  18.     viewer.setFrameShape(QFrame::NoFrame);
  19.     viewer.setWindowFlags(Qt::FramelessWindowHint);
  20.     viewer.showFullScreen();
  21.  
  22.     return app.exec();
  23. }

main.qml:

  1. import QtQuick 1.0
  2.  
  3. Rectangle {
  4.     width: 800
  5.     height: 480
  6.     color: "green"
  7.  
  8.     signal sendValueToCPP(int n);
  9.  
  10.     MouseArea {
  11.         anchors.fill: parent;
  12.  
  13.         onReleased: {
  14.             console.log("mouse.button: " + mouse.button)
  15.  
  16.             flyingRect.x = mouse.x;
  17.             flyingRect.y = mouse.y;
  18.  
  19.             anotherFlyingRect.x = mouse.x-40;
  20.             anotherFlyingRect.y = mouse.y-40;
  21.         }
  22.     }
  23.  
  24.     Button2 {
  25.         x: 20; y: 140;
  26.         width: 300; height: 20;
  27.         text: "Pause (screen)"
  28.         fontColor: "white"
  29.         fontSize: 10
  30.         fontFamily: "Axel"
  31.         frontColor: "gray"
  32.  
  33.         onClicked: {
  34.             var test = loadScreen("MyTestForm.qml");
  35.         }
  36.     }
  37.  
  38.     Item {
  39.         id: currentScreen
  40.  
  41.         anchors.fill: parent
  42.     }
  43.  
  44.     Rectangle {
  45.         id: flyingRect
  46.  
  47.         width: 20
  48.         height: 20
  49.  
  50.         border.color: "black"
  51.         border.width: 2
  52.         radius: 5
  53.         color: "yellow"
  54.  
  55.         Behavior on x { SmoothedAnimation { velocity: 200; } }
  56.         Behavior on y { SmoothedAnimation { velocity: 200; } }
  57.     }
  58.  
  59.     Rectangle {
  60.         id: anotherFlyingRect
  61.  
  62.         width: 30
  63.         height: 30
  64.  
  65.         border.color: "black"
  66.         border.width: 2
  67.         radius: 5
  68.         color: "blue"
  69.  
  70.         Behavior on x { NumberAnimation { duration: 1000; easing.type: Easing.OutBounce } }
  71.         Behavior on y { NumberAnimation { duration: 1000; easing.type: Easing.OutBounce } }
  72.     }
  73.  
  74.     function loadScreen(strQMLFile) {
  75.         var component = Qt.createComponent(strQMLFile);
  76.         console.debug("component: " + component);
  77.  
  78.         if (component.status == Component.Ready) {
  79.             var myNewComponent = component.createObject(currentScreen);
  80.         }
  81.  
  82.         switch(component.status) {
  83.             case Component.Null:
  84.                 console.debug("component.status: " + component.status + " = Null");
  85.             break;
  86.             case Component.Ready:
  87.                 console.debug("component.status: " + component.status + " = Ready");
  88.                 return component;
  89.             break;
  90.             case Component.Loading:
  91.                 console.debug("component.status: " + component.status + " = Loading");
  92.             break;
  93.             default:
  94.             case Component.Error:
  95.                 console.debug("component.status: " + component.status + " = ERROR");
  96.                 console.debug("error message: " + component.errorString());
  97.             break;
  98.         }
  99.     }
  100. }

MyTestForm.qml is the qml file listed in my original post.

May 11, 2011

L.MCH L.MCH
Lab Rat
61 posts

Toradex Colibri boards based on Marvell PXA3xx cpus DO have graphics acceleration (just 2D acceleration, not 3D).
Have you tried increasing the videoram reserved to the GCU ?
Maybe part of the problem is there is not enough videoram to keep all the layer buffers inside it.

http://wiki.toradex.com/index.php/GCU_ [wiki.toradex.com])

N.B. The correct link above is “http://wiki.toradex.com/index.php/GCU_(Colibri)” when clicking above it seems the “)” is removed from the URL

http://wiki.toradex.com/index.php/VideoRAM [wiki.toradex.com]

http://wiki.toradex.com/index.php/BitBlt [wiki.toradex.com]

As i said above, my guess is that increasing videoram will improve things but I don’t expect it to solve all the performance problems.

May 16, 2011

snospmis_eht snospmis_eht
Lab Rat
4 posts

Hi,

thanks for the hint! Indeed seems I oversaw the fact the fact that there is a 2D acceleration. I doubled the videoram from 10 MB to 20MB as you mentioned, but there is no performance improvement at all. I can’t imaging that 20MB videoram are not enough for drawing some rects and texts onto the screen.

How does Qt use the 2D acceleration? Do I have to compile Qt with OpenVG or OpenES/EGL support?

Besides, is there a way to see, which graphicssystem is being used while a Qt app runs?
Is it possible to see, whether the 2D acceleration is used or not?

regards
tobi

May 16, 2011

L.MCH L.MCH
Lab Rat
61 posts

On the PXA3xx colibris the 2D acceleration is not faster than cpu-only graphics, but it can run in parallel with it (i.e. while the GCU blits a rectangle the cpu can go on doing other stuff) so the overall performance is a little better when running simultaneous graphics and cpu intensive stuff.

I don’t know if switching to OpenES/EGL you will see an inprovement (and you will need a Windows CE system build with OpenGL/EGL libraries) because I usually compile Qt for CE leaving the default graphicsystem setting (raster) for better compatibility across different devices (the baseline hardware for my application was a PXA270 without 2D acceleration and using a custom Windows CE build to minimize ram and flash memory usage to have more free memory and storage available for the application).

Anyway, if you compiled Qt libs with all the supported graphicssystems you can try switching between them as described in the following link:
http://doc.qt.nokia.com/latest/qapplication.html#setGraphicsSystem

December 7, 2011

vncodex vncodex
Lab Rat
2 posts

Hey, so what is the outcome of this discussion? Any solution has been invented? I have very much the same performance issue on OMAP TI8148 board without hardware acceleration. The performance is unacceptably poor, especially when it comes to animations and transitions of the fullscreen views. For smaller animations, it works just fine. Another problem is that the application hogs a big amount of CPU and memory when doing even simple transitions (around 50% CPU and 30% MEM). I noticed that the situation is the same for QML demos that come with QtSDK. A simple clock application is eating 15% of CPU. Any ideas on how to improve the performance? I am using Qt Embedded System on the board now.

Thanks,
Phil

January 25, 2013

artacademy artacademy
Lab Rat
10 posts

I also would appreciate any conclusory feedback on this topic: What was the outcome? Did compiling Qt with different graphics systems result in any new insights?

Thanking you

May 23, 2013

artacademy artacademy
Lab Rat
10 posts

Seems to be dead.. ;) :/

August 26, 2013

Nmut Nmut
Lab Rat
2 posts

Not dead, I’m here! :D
From my little experience, different platforms suffers different drawbacks. And all the Qt performance tricks are applicable with QML (Qt::WA_OpaquePaintEvent flag for example).
What I found to be performance killer on all platforms are graphical effects and transparencies. It makes sense as there are some computations and commpositions to display each object and low perf platform cannot cope with this.

In conclusion, Qt and even more QML as any other high level tools, hides loads of operation done in the background and sometime some small modifications in what you ask (QML animations for example) can lead to huge impacts in performances and depends on the capacities of the platform, this is very difficult to analyse…

NM

 
  ‹‹ Missing modules in qml viewer      [Solved] Stripping double quotes from string ››

You must log in to post a reply. Not a member yet? Register here!