FlickrUp - Flickr app for Symbian & MeeGo Harmattan devices
(ShwStppr - - →Problems & Solutions) |
(ShwStppr - - →Problems & Solutions) |
||
| Line 52: | Line 52: | ||
'''<big>Absence & discontinuation of GestureArea Component</big>''' | '''<big>Absence & discontinuation of GestureArea Component</big>''' | ||
<br /> | <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 | + | 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 | Now, I'm planning to use GestureArea component's code to implement a custom plugin for FlickrUp | ||
<br /> | <br /> | ||
| Line 59: | Line 59: | ||
<br /> | <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] | 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 | ||
<br /> | <br /> | ||
<br /> | <br /> | ||
| Line 65: | Line 67: | ||
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. | 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 /> | <br /> | ||
| − | + | https://projects.developer.nokia.com/flickrup/browser/src/main.cpp | |
== Screenshots == | == Screenshots == | ||
Revision as of 18:18, 13 March 2012
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. 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
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:
My code for a custom InfoBanner can be found here https://projects.developer.nokia.com/flickrup/browser/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 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
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
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
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
