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 [url]http://labs.qt.nokia.com/2010/10/19/exporting-qml-from-photoshop-and-gimp/[/url])), 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:
@import Qt 4.7Rectangle {
id: screen_Pause
width: 800
height: 480rotation: 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:
@import QtQuick 1.0Rectangle {
id: containerproperty 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 }
}@
-
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 -
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":http://www.toradex.com/En/Products/Colibri_Modules/Colibri_PXA310How 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:
@
#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.0Rectangle {
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 is the qml file listed in my original post.
-
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_(Colibri)":http://wiki.toradex.com/index.php/GCU_(Colibri)
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":http://wiki.toradex.com/index.php/VideoRAM
"http://wiki.toradex.com/index.php/BitBlt":http://wiki.toradex.com/index.php/BitBlt
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.
-
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 -
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 -
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 -
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
-
Seems to be dead.. ;) :/
-
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