Working QML Photo Gallery example for Nokia N9

deion

Hi,

In my app I am trying to let the user select a photo from the photo gallery on N9. I thought this would be a trivial task to do in QML (I have seen lots of apps that do this). Googling got me to "the official QML documentation page for DocumentGalleryModel":http://doc.qt.nokia.com/qtmobility/qml-documentgallerymodel.html . There is a short example in there:

@ import Qt 4.7
import QtMobility.gallery 1.1

Rectangle {
width: 1024
height: 768

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

     model: DocumentGalleryModel {
         rootType: DocumentGallery.Image
         properties: [ "url" ]
         filter: GalleryWildcardFilter {
             property: "fileName";
             value: "*.jpg";
         }
     }

     delegate: Image {
         source: url
         width: 128
         height: 128
     }
 }

}
@

I created a basic Qt Quick app using the Qt Creator wizard and used this code; I have attached this app ([EDIT] I can not find the attach zip file button :D).

When I run it on the N9 the whole device freezes and is generally unresponsive; After some time (30 seconds) I can see some thumbnails being displayed but when I try to scroll the view the device becomes unresponsive again and I generally need to restart it;

I have the following in the *.pro file:

@QT += declarative
CONFIG += qt qt-components mobility
MOBILITY += gallery
@

and I also added these lines in the aegis file:

@<aegis>
<request>
<credential name="GRP::video" />
<credential name="TrackerReadAccess"/>
<for path="/opt/MyGallery/bin/MyGallery" />
</request>
</aegis>@

Nothing works. Is this TRIVIAL scenario possible in QML or should I use Qt C++ to do the reading of the photo files in C++, provide a model and bla blah? I hope it's possible to do it only in QML and I'm missing something.

The only source code example I found that works is the "Media Browser project":https://projects.forum.nokia.com/mediabrowser/
However this looks like a lot of work to create a CoverFlow gallery, when I only want a simple GridView; plus this project looks to use C++ to read the photo files, and I'm hoping to use a QML only approach; if nothing comes up I guess I will study this project and use a similar approach.

Can someone help?

Thanks,
Ionut

deion

The one example that works is "here":http://juhaturunen.com/blog/2011/08/how-to-make-a-quick-hack-photo-picker-for-harmattan/ Thanks Blogasdf for the blog post.

So the issue is related to scaling: I have very large resolution photos on my N9 (I guess more than 2GB), so scaling all these large photos to 160x160 takes a long time; The solution is to use the default thumbnails that are created by the camera app for preview. The QUESTION is why the default C++ implementation of the QML DocumentGalleryModel element doesn't do this by default behind the scenes??

The other projects that work OK-ish are "Media Browser":https://projects.forum.nokia.com/mediabrowser/ and "n9-qml-photo-picker":https://gitorious.org/n9-qml-photo-picker

However there are some issues: Media Browser explicitly says that the 1st time the app runs it will run slower because it will generate a new set of thumbnails (thus completely ignoring the already existing set of camera thumbnails). I guess n9-qml-photo-picker does the same because the 1st time that I ran it on the N9 it was a lot slower than when I ran it the 2nd time; plus I did a search in files for "thread" and didn't find any results so the UI will clearly stutter when generating the thumbnails the 1st time; PLUS it gave errors when trying to compile n9-qml-photo-picker on MacOS for Harmattan target but compiled ok under Windows (something related to quill headers).

The other downside with generating your own set of thumbnails is that if there 10 apps on the user's phone that display a photo gallery, each one will clutter the phone memory with its own folder of thumbnails ....

So I will use the example at Blogasdf as it's the fastest working example. Now I'm hoping I will easily map the file name of the thumbnail to the actual photo file. If someone can give some hints here please DO.

Clearly there is much work to be done by Qt/Nokia to easily integrate a QML photo gallery in an app; Hopefully Qt5 will come to the rescue.

rferrazz

You can set the thumbnails size and some other tweaks in this way:
@ import Qt 4.7
import QtMobility.gallery 1.1

Rectangle {
width: 1024
height: 768

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

     model: DocumentGalleryModel {
         rootType: DocumentGallery.Image
         properties: [ "url" ]
         filter: GalleryWildcardFilter {
             property: "fileName";
             value: "*.jpg";
         }
     }

     delegate: Image {
         source: url
         smooth: false
         sourceSize.width: width
         sourceSize.height: height
         width: 128
         height: 128
     }
 }

}@

petru.motrescu

[quote author="deion" date="1333105054"]
The other projects that work OK-ish are "Media Browser":https://projects.forum.nokia.com/mediabrowser/ and "n9-qml-photo-picker":https://gitorious.org/n9-qml-photo-picker

However there are some issues: Media Browser explicitly says that the 1st time the app runs it will run slower because it will generate a new set of thumbnails (thus completely ignoring the already existing set of camera thumbnails). I guess n9-qml-photo-picker does the same because the 1st time that I ran it on the N9 it was a lot slower than when I ran it the 2nd time; plus I did a search in files for "thread" and didn't find any results so the UI will clearly stutter when generating the thumbnails the 1st time; PLUS it gave errors when trying to compile n9-qml-photo-picker on MacOS for Harmattan target but compiled ok under Windows (something related to quill headers).

The other downside with generating your own set of thumbnails is that if there 10 apps on the user's phone that display a photo gallery, each one will clutter the phone memory with its own folder of thumbnails ....

[/quote]

Hi,

Some clarifications for N9 QML Photo Picker:

The N9 QML Photo Picker does NOT generate separate thumbnails for the normal user ("user"). It shares the same exact thumbnails with the native Gallery (if default settings are used)
The reason for the first time slowness when you ran it was most probably the fact that you were running it under "developer" user (deploy & run from QtCreator, right?)
You have not found references to thread because there is no need, libquill used underneath, is asynchronous
I admit I am not satisfied with the performance of the QML picker. More work and thought is needed. Contributions are welcome, it is an open project.

Note: The project has moved to https://github.com/petrumotrescu/N9QmlPhotoPicker

Petru

deion

Multumesc Petru :)

But there shouldn't be a need for these side projects; the QML wrappers in the SDK should just work.

Thanks a lot Petru for the clarifications; if I were to use again a photo-picker in one of my projects I would definitely use n9-qml-photo-picker as a reference, the only downside I see with the project is that it works only for MeeGo and not for Symbian (that's why a common QML wrapper that worked fast on all platforms would have been the better solution).

Thanks & regards,
Ionut