FlickrUp - Flickr app for Symbian & MeeGo Harmattan devices

Jump to: navigation, search

Revision as of 06:43, 20 April 2012

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

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: hamishwillee (20 Apr 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 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

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

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

@@ Line 1: / Line 1: @@
-[[Category:Symbian]][[Category:Qt Quick]][[Category:Qt]]
+[[Category:Symbian]][[Category:Qt Quick]][[Category:Qt]][[Category:3rdPartyProducts]]
-{{Note|This is an entry in the [[Symbian Qt Quick Components Competition 2012Q1]]}}
+{{Abstract|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.}}
 {{ArticleMetaData <!-- v1.2 -->
-|sourcecode= [http://code.google.com/p/flickrup/ FlickrUp - Google Code]
+|sourcecode= [http://code.google.com/p/flickrup/ FlickrUp - Google Code], [https://projects.developer.nokia.com/flickrup FlickrUp]
 |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 |devices= 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
@@ Line 9: / Line 9: @@
 |platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
-|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 |keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 |translated-by= <!-- [[User:XXXX]] -->
 |translated-from-title= <!-- Title only -->
 |translated-from-id= <!-- Id of translated revision -->
-|review-by=<!-- After re-review: [[User:username]] -->
+|review-by= <!-- After re-review: [[User:username]] -->
 |review-timestamp= <!-- After re-review: YYYYMMDD -->
-|update-by= [[User:ShwStppr]]
+|update-by= <!-- After significant update: [[User:username]]-->
-|update-timestamp= 20120313
+|update-timestamp= <!-- After significant update: YYYYMMDD -->
 |creationdate= 20120313
 |author= [[User:ShwStppr]]
@@ Line 27: / Line 27: @@
 == 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.
-<br />
 FlickrUp is developed with QML & Qt/C++ using [http://qtflickr.com/ QtFlickr] API (a Qt/C++ based Flickr API by Evgeni Gordejev).
-<br />
-FlickrUp is an open-source application and hosted on Google Code. 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.
+FlickrUp is an open-source application and hosted on Google Code. Version 2.1.1 source can also be found on Nokia Project, [https://projects.developer.nokia.com/flickrup 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 or default Symbian icons.<br />
+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.<br />
 <gallery widths=288px>
 File:FlickrUp - Metro Icons.jpg|Metro icons
 File:FlickrUp - Belle Icons.jpg|Belle style icons
 </gallery><br />
-{{Note|FlickrUp v2.1.1 is under QA process currently for Nokia Store. However, an unsigned version can be downloaded from [http://flickrup.googlecode.com/files/FlickrUp%20v2.1.1.sis here] }}
+{{Note|FlickrUp v2.1.1 is now available on Nokia Store. }}
+'''Logical and consistent navigation structure'''
+<br />
+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.
+<br />
+<gallery widths=252px heights=448px>
+File:FlickrUp - Help View.jpg|Help view
+</gallery>
+<br />
+'''App icon consistent with Symbian style'''
+<br />
+FlickrUp app icon attached with the article is clearly having a consistent design with Symbian style.
+<br />
+'''Correct use of the components'''
+<br />
+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.
+<br />
+'''Non-threatening interface - don't ask the user for confirmation or passwords unless necessary'''
+<br />
+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.
+<br />
+'''Good use of screen real estate'''
+<br />
+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.
+<br />
+'''Utilising the toolbar where appropriate.'''
+<br />
+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.
+<br />
+<gallery widths=288px>
+File:FlickrUp - Toolbar.jpg
+File:FlickrUp - Belle Icons.jpg
+File:FlickrUp - Custom Menu.jpg|Custom tool menu used
+</gallery>
 == Problems & Solutions ==
 '''<big>Problem working with QtQuick 1.0 and QtQuick 1.1 simultaneously</big>'''
 <br />
-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:
+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.
-:'''InfoBanner'''
-:My code for a custom InfoBanner can be found here http://code.google.com/p/flickrup/source/browse/qml/symbian/flickrup.qml
+I have to write custom components for few of these unavailable but necessary components, like<br />
+'''InfoBanner:'''
+Code for a custom InfoBanner can be found here https://projects.developer.nokia.com/flickrup/browser/qml/symbian/flickrup.qml#L743
 <br />
 <br />
 '''<big>Absence & discontinuation of GestureArea Component</big>'''
 <br />
-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 [http://doc.qt.nokia.com/4.7-snapshot/qml-gesturearea.html GestureArea] component provided by Qt.labs.gestures 1.0 and [http://doc.qt.nokia.com/4.7-snapshot/qml-pincharea.html PinchArea] is not available in QtQuick 1.0. Also using [http://doc.qt.nokia.com/4.7-snapshot/qml-pincharea.html PinchArea] and [http://doc.qt.nokia.com/4.7-snapshot/qml-mousearea.html MouseArea] together is a little tricky due to with it is difficult to implement pinch-zoom with [http://doc.qt.nokia.com/4.7-snapshot/qml-listview.html ListView]. I have tried to implement a custom GestureArea-like component using [http://doc.qt.nokia.com/4.7-snapshot/qml-mousearea.html MouseArea] element which can be found here http://code.google.com/p/flickrup/source/browse/qml/symbian/FavoritesImageViewerPage.qml
+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 [http://doc.qt.nokia.com/4.7-snapshot/qml-gesturearea.html GestureArea] component provided by Qt.labs.gestures 1.0 and [http://doc.qt.nokia.com/4.7-snapshot/qml-pincharea.html PinchArea] is not available in QtQuick 1.0. Also using [http://doc.qt.nokia.com/4.7-snapshot/qml-pincharea.html PinchArea] and [http://doc.qt.nokia.com/4.7-snapshot/qml-mousearea.html MouseArea] together is a little tricky due to with it is difficult to implement pinch-zoom with [http://doc.qt.nokia.com/4.7-snapshot/qml-listview.html ListView]. I have tried to implement a custom GestureArea-like component using [http://doc.qt.nokia.com/4.7-snapshot/qml-mousearea.html 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
+<br />
+https://projects.developer.nokia.com/flickrup/browser/qml/symbian/PhotostreamPage.qml#L182
 <br />
 <br />
@@ Line 58: / Line 98: @@
 <br />
 Using fullscreen [http://doc.qt.nokia.com/4.7-snapshot/qml-listview.html ListView] element changes current item if orientation is changed. To implement a picture gallery like view it becomes impossible(for me) to use [http://doc.qt.nokia.com/4.7-snapshot/qml-listview.html 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 [http://doc.qt.nokia.com/4.7-snapshot/qml-mousearea.html MouseArea] drag and [http://doc.qt.nokia.com/4.7-snapshot/qml-numberanimation.html NumberAnimation]
+<br />
+https://projects.developer.nokia.com/flickrup/browser/qml/symbian/FavoritesImageViewerPage.qml#L73
 <br />
 <br />
@@ Line 64: / Line 106: @@
 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.
 <br />
-http://code.google.com/p/flickrup/source/browse/src/main.cpp
+https://projects.developer.nokia.com/flickrup/browser/src/main.cpp#L36
 == Screenshots ==
@@ Line 86: / Line 128: @@
 </gallery>
-== Screenshots ==
+== Video Demo ==
+Video demo of FlickrUp v2.0.0 at Youtube {{#ev:youtube|MBVMDopzuMM}}
+== Icon ==
 [[File:Flickrup.png]]
-== Links ==
+== Source code ==
 Source code : [http://code.google.com/p/flickrup FlickrUp - Google Code]
-<br />
-Nokia Store: [http://store.ovi.com/content/212824 FlickrUp]
+== Installation File ==
-<br />
+You can download this app from Nokia store from this link: [http://store.ovi.com/content/212824 FlickrUp]
-Test Video for FlickrUp v2.0.0: [http://www.youtube.com/watch?v=MBVMDopzuMM YouTube]
-<br />
+For more detail, please visit Webpage of this app: [http://theshowstopper.in/flickrup ShowStopper - FlickrUp]
-Webpage: [http://theshowstopper.in/flickrup ShowStopper - FlickrUp]
+{{Note|This is an entry in the [[Symbian Qt Quick Components Competition 2012Q1]]}}
+[[Category:Code Examples]]

Wiki

Wiki Resources

Main Platforms

Other

Natural Languages

Toolbox

Namespaces

Variants

Views

Actions

Contents