FlickrUp - Flickr app for Symbian & MeeGo Harmattan devices
FlickrUp is a Flickr app for Symbian & MeeGo Harmattan devices. This article explains the most important aspects of the design and implementation of this app.
Article Metadata
Code Example
Tested with
Article
Contents |
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
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 again 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 functionality 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
Screenshots
Authorization View
User View
Contacts
Explore View
Photo Grid
Photo List
Large Image View
Large ImageView with Details
People View
Upload View with marking
Upload Photoset additon
Upload editor
Settings-1
Settings-2
Photo Details & Comments-1
Photo Details & Comments-2
Video Demo
Video demo of FlickrUp v2.0.0 at Youtube The media player is loading...
Icon
Source code
Source code : FlickrUp - Google Code
Installation File
You can download this app from Nokia store from this link: FlickrUp
For more detail, please visit Webpage of this app: ShowStopper - FlickrUp
Contents
Chintandave er - nice article and source code !
Hi ShwStppr, Nice article.
I want to request you to create Nokia Project to store the source code like you did on Google Code. So It would be good if you create Nokia Project for this app and upload source code via SVN.
Also I modified this article a bit and also embedded YouTube Video rather than just Video Link.
Thanks.
Chintan.Chintandave er 11:34, 13 March 2012 (EET)
ShwStppr - Nokia project
Hi Chintan,
Will try to create a project but it will be little difficult to maintain source code at two different hosts.ShwStppr 12:03, 13 March 2012 (EET)
Chintandave er - Re: Nokia project
Hi, Well There you don't need to maintain anything. Nobody will update your code there and also you can show your app in Nokia Project. As after all , it is for Nokia dev. related Section. Also It would be good for your contest.
Anyway, It is just my request.
Chintan.Chintandave er 12:47, 13 March 2012 (EET)
ShwStppr - Re: Re: Nokia project
Here you go,
https://projects.developer.nokia.com/flickrupShwStppr 16:49, 13 March 2012 (EET)
Chintandave er - Re: Nokia project
Thanks,
Chintan.Chintandave er 20:33, 13 March 2012 (EET)
Babylongreece - open source
Is "flickup" no longer open source because all the link to the project source is broken?babylongreece 15:18, 14 April 2013 (EEST)
Hamishwillee - You might want to private message the author
This was written last year and they might not be monitoring the article.hamishwillee 07:55, 15 April 2013 (EEST)