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, FlickrUp

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)

Last edited: ShwStppr (24 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. Version 2.1.1 source can also be found on Nokia Project, FlicrkUp. It was started in mid-2010 for an entry in 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 with downloads form over150 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 and default Symbian icons.

Metro icons
Belle style icons

Note: FlickrUp v2.1.1 is now available on Nokia Store.

Logical and consistent navigation structure
FlickrUp provide a consistent navigation for easy operation. Every view uses a back button to traverse to previous view apart from authorization view where a close button is used for proper understanding. FlickrUp tries to use best possible icons for representing respective functionality and for prevent any confusion is user's mind it also have help view where a table of icons and their functionality is shown. Within less than 6 months download count of >15k and 4 star rating on Nokia store signifies that maximum users find FlickrUp easy and efficient to operate. For making further improvements to the interface user reviews are being always noted.

Help view

App icon consistent with Symbian style
FlickrUp app icon attached with the article is clearly having a consistent design with Symbian style.
Correct use of the components
FlickrUp is based on QtQuick 1.0 and QtQuick components for Symbian & MeeGo for corresponding platforms. Therefore, it is tried best to use QML components properly for consistent functioning.
Non-threatening interface - don't ask the user for confirmation or passwords unless necessary
Being a client for a social networking site it is important that user enjoys smooth working on the application. To prevent user from logging in again and agin FlickrUp asks only one time login at first start uses QSettings class to store user data.
Good use of screen real estate
Attached screenshots aptly shows proper use of screen dimensions. FlickrUp tries to provide maximum details that can be shown with limited screen size. In cases where it was impossible to show required information with the give screen size, animation components are used to show/hide information on touch gestures.
Utilising the toolbar where appropriate.
With limited screen size on mobile devices it becomes important for apps to show fuctionality on toolbars judiciously. FlickrUp tries to maximize utilization of toolbar. And when the number of functions become more than items that can be accommodated custom menus are also used.

Custom tool menu used

Problems & Solutions

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: Code for a custom InfoBanner can be found here https://projects.developer.nokia.com/flickrup/browser/qml/symbian/flickrup.qml#L743

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 and PinchArea is not available in QtQuick 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 https://projects.developer.nokia.com/flickrup/browser/qml/symbian/FavoritesImageViewerPage.qml Now, I'm planning to use GestureArea component's code to implement a custom plugin for FlickrUp
https://projects.developer.nokia.com/flickrup/browser/qml/symbian/PhotostreamPage.qml#L182

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
https://projects.developer.nokia.com/flickrup/browser/qml/symbian/FavoritesImageViewerPage.qml#L73

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.
https://projects.developer.nokia.com/flickrup/browser/src/main.cpp#L36