FlickrUp - Flickr app for Symbian & MeeGo Harmattan devices

Jump to: navigation, search

Note: This is an entry in the Symbian Qt Quick Components Competition 2012Q1

Article Metadata

Code Example

Source file: FlickrUp - Google Code

Tested with

Devices(s): Nokia C6-01, Nokia C7 Astound, Nokia C7-00, Nokia E6-00, Nokia E7-00, Nokia N8-00, Nokia X7-00, Nokia 700, Nokia 701

Article

Created: ShwStppr (13 Mar 2012)

Updated: ShwStppr (13 Mar 2012)

Last edited: ShwStppr (13 Mar 2012)

Introduction

FlickrUp is an easy way to browse & upload photos on Flickr® website. FlickrUp is a QML based Flickr app available for free on Nokia store for Symbian S^3 or later and MeeGo Harmattan devices. FlickrUp enables users to browse and search photos from Fickr as well as batch upload photos from their cell to their Flickr account.
FlickrUp is developed with QML & Qt/C++ using QtFlickr API (a Qt/C++ based Flickr API by Evgeni Gordejev).
FlickrUp is an open-source application and hosted on Google Code. It was started in mid-2010 for an entry for Calling All Innovator Challenge 2010 with Qt widget UI for Symbian devices but after seeing some QtQuick demo apps I decided to work on QML user interface as it helped creating much beautiful and fluid UI and more importantly it helped me port my application for MeeGo Harmattan devices. And since Oct 2011, FlickrUp is available on Nokia store and already crossed 10k downloads mark in over 150 countries.

Qt-Quick UI & Design Guidelines Compliance

Using built-in QtQuick components prevents us developers to worry about keeping up with Symbian Design Guidelines and due this reason FlickrUp complies with most design guidelines. Using available components made it really easy to design mobile applications. FlickrUp uses a host of QtQuick components from PageStack to InfoBanner and Dialogs to Animation classes. Ony designing issue is related to icons, as it is little difficult for people like me design icons, FlickrUp 1.0.0 used custom metro icons but with version 2.1.1 there is an option in application settings to switch between metro icons or default Symbian icons.

Metro icons
Belle style icons

Note: FlickrUp v2.1.1 is under QA process currently for Nokia Store. However, an unsigned version can downloaded from here

Problem areas

Problem working with QtQuick 1.0 and QtQuick 1.1 simultaneously
As I started with QtQuick 1.0 for Symbian and simultaneously working with QtQuick 1.1 for MeeGo so initially it was difficult to maintain a similar UI as few components are not available in QtQuick 1.0. I have to write custom components for few of these unavailable but necessary components, like:

InfoBanner

My code for a custom InfoBanner can be found here http://code.google.com/p/flickrup/source/browse/qml/symbian/flickrup.qml

Absence & discontinuation of GestureArea Component
With FlickrUp v2.1.0, there are some gestures to perform respective operations in list items but sadly they don't work that well as I was not able to use GestureArea component provided by Qt.labs.gestures 1.0. Also using PinchArea and MouseArea together is a little tricky due to with it is difficult to implement pinch-zoom with ListView. I have tried to implement a custom GestureArea-like component using MouseArea element which can be found here http://code.google.com/p/flickrup/source/browse/qml/symbian/FavoritesImageViewerPage.qml Now, I'm planning to use GestureArea component's code to implement a custom plugin for FlickrUp

Cache buffer with full screen ListView and Orientation change
Using fullscreen ListView element changes current item if orientation is changed. To implement a picture gallery like view it becomes impossible(for me) to use ListView with cache for the purpose. To over come this initially I tried to set cacheBuffer = 0 and used cached NetwrokAccessManager to cache images but having too many elements in List degraded the performance of application. With version 2.1.0, I have used a custom component with a single Image element using MouseArea drag and NumberAnimation

Image element with hi-res images
On Symbian devices QtQuick Image element sometimes fails to load hi-res images, therefore I implemented a custom image provider using QDeclarativeImageProvider(with QImageReader,QImageWriter) that provides resized images to load hi-res images.