Loading Image in DocumentGalleryModel takes extremely long tine

[wladek]

Hi Guys,

I am trying to use the QML DocumentGalleryModel 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);
                    }
                }
        }
    }
}

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);
                    }
                }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

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]

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]

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?

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?

To copy to clipboard, switch view to plain text mode 

Wladek.

[wysota]

You can certainly try that but in general I would scale them down before going into QML layer.

[wladek]

And how should I try to achieve such a think?

[wysota]

You can use Qt/C++ and then expose the images to QML.

[wladek]

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]

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]

So what do you suggest in order to get the images smaller?

Wladek

[wysota]

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.