PDA

View Full Version : Loading Image in DocumentGalleryModel takes extremely long tine



wladek
28th March 2011, 16:49
Hi Guys,

I am trying to use the QML DocumentGalleryModel (http://doc.qt.nokia.com/qtmobility-1.1.1/qml-documentgallerymodel.html) with the following code (on my Symbian N8 device):

import Qt 4.7
import QtMobility.gallery 1.1

Rectangle {
width: 600
height: 360
color: "lightblue"

GridView {
id: gridView
anchors.fill: parent
cellWidth: 128
cellHeight: 128

model: DocumentGalleryModel {
rootType: DocumentGallery.Image
properties: [ "url" ]
}

delegate:
Item {
Image {
id: imageBusy
source: "busy.png"
width: 110
height: 110
sourceSize.width: 110
sourceSize.height: 110
visible: imageDelegate.status != Image.Ready
}
Image {
id: imageDelegate
asynchronous: true
source: url
smooth: true
width: 110
height: 110
fillMode: Image.PreserveAspectFit
sourceSize.width: 110
sourceSize.height: 110
onStatusChanged: {
console.log("Status is: " + status);
}
}
}
}
}

The problem is that displaying the images takes super long time (for just 20 images it takes around 10 seconds).

Any ideas on how can I improve this time?

I also know that drawing the image is problematic, hence retrieving the data from the model goes straight forward. It's also true that the images have a big resolution (aprox. 4000 x 2000).

Any leads are highly appreciated.

Thanks in advance and regards,
Wladek

wysota
28th March 2011, 16:52
If you use really large images then they have to be scaled now and then and it takes time. If you know you need the image in a particular resolution, it is best to scale the image down before using it. Otherwise you're just wasting cpu cycles as your device can't display such large images anyway.

wladek
28th March 2011, 17:00
Hi wysota,

I definitely do not want to use them in such a big resolution.
So I should use the QML Item's scale property?

Something like:
Image {
id: imageDelegate
asynchronous: true
source: url
smooth: true
width: 110
height: 110
fillMode: Image.PreserveAspectFit
sourceSize.width: 110
sourceSize.height: 110
scale: 0.3 //for example?


Wladek.

wysota
28th March 2011, 17:08
You can certainly try that but in general I would scale them down before going into QML layer.

wladek
28th March 2011, 19:57
And how should I try to achieve such a think?

wysota
28th March 2011, 20:03
You can use Qt/C++ and then expose the images to QML.

wladek
29th March 2011, 00:25
So you think I should implement my own model?
But in that way I could not benefit from all the advantages the DocumentGalleryModel has to offer, would I?

Thanks,
Wladek

wysota
29th March 2011, 00:57
So you think I should implement my own model?
I think you should use smaller images. The way you do it is a secondary issue. If an image is big and you want to fit it into a small screen it has to be scaled down and this takes time. You can't eat a cake and have the cake.

wladek
29th March 2011, 10:43
So what do you suggest in order to get the images smaller? :)

Wladek

wysota
29th March 2011, 10:55
Scale them down before you display them and store the thumbnails for future use. You can run a native function after you fetch the image from the model and before you display it. You can run the function in a worker thread to avoid freezing the UI.