Capturing image using QML Camera and uploading to Facebook - Revision history

Hamishwillee: Text replace - "`" to ""`


2012-10-11T01:20:11Z
Text replace - "<code cpp>" to "<code cpp-qt>"

			
			
			
			
		
		← Older revision
		Revision as of 01:20, 11 October 2012
		
Line 45:
Line 45:
    
  QML Camera is part of Qt Mobility API, so you need to configure Qt's Project file to to include Qt Mobility package. We also need to use Network, Webkit and Declarative Module. For Symbian we also need to specify capabilities to be able to connect to network and access the camera.   QML Camera is part of Qt Mobility API, so you need to configure Qt's Project file to to include Qt Mobility package. We also need to use Network, Webkit and Declarative Module. For Symbian we also need to specify capabilities to be able to connect to network and access the camera.
− <code cpp> + <code cpp-qt>
  QT += network webkit declarative   QT += network webkit declarative
    
Line 120:
Line 120:
  Following is PreviewImage.qml file. PreviewImage view is enabled when Image is captured, it show captured image and by pressing share button it upload the captured image on Facebook account.   Following is PreviewImage.qml file. PreviewImage view is enabled when Image is captured, it show captured image and by pressing share button it upload the captured image on Facebook account.
    
− <code cpp> + <code cpp-qt>
  import QtQuick 1.1   import QtQuick 1.1
  import QtMultimediaKit 1.1   import QtMultimediaKit 1.1
Line 175:
Line 175:
  Login method will launch facebook login webpage in {{Qapiname|QWebView}}. Once a user enters a valid username and password, it will redirects to https://www.facebook.com/connect/login_success.html url with access token mentioned in query string.   Login method will launch facebook login webpage in {{Qapiname|QWebView}}. Once a user enters a valid username and password, it will redirects to https://www.facebook.com/connect/login_success.html url with access token mentioned in query string.
    
− <code cpp> + <code cpp-qt>
  void FacebookHelper::login( const QString& scope ){   void FacebookHelper::login( const QString& scope ){
       QUrl url("https://www.facebook.com/dialog/oauth");        QUrl url("https://www.facebook.com/dialog/oauth");
Line 206:
Line 206:
  Now we have access token, we are ready to upload photo to facebook. Following code describe the process. uploadPicture method takes absolute path to picture to upload and comment for photo, then it creates form-data request and send that to facebook using HTTP Post method.   Now we have access token, we are ready to upload photo to facebook. Following code describe the process. uploadPicture method takes absolute path to picture to upload and comment for photo, then it creates form-data request and send that to facebook using HTTP Post method.
    
− <code cpp> + <code cpp-qt>
  void FacebookHelper::uploadPicture(const QString& picLocation, const QString& comment) {   void FacebookHelper::uploadPicture(const QString& picLocation, const QString& comment) {



Hamishwillee: Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"
2012-06-13T10:51:35Z
Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

			
			
			
			
		
		← Older revision
		Revision as of 10:51, 13 June 2012
		
Line 1:
Line 1:
− [[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Symbian]][[Category:MeeGo]][[Category:Code Examples]][[Category:Camera]][[Category:Web Services]][[Category:Symbian^3]] + [[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Symbian]][[Category:MeeGo Harmattan]][[Category:Code Examples]][[Category:Camera]][[Category:Web Services]][[Category:Symbian^3]]
  {{Abstract|This article demonstrates how to capture an image using the QML Camera Element and share it to Facebook. }}     {{Abstract|This article demonstrates how to capture an image using the QML Camera Element and share it to Facebook. }}  
    



Hamishwillee: Hamishwillee - Minor subedit
2012-05-09T07:43:48Z
Hamishwillee - Minor subedit

			
			
			
			
		
		← Older revision
		Revision as of 07:43, 9 May 2012
		
Line 243:
Line 243:
    
  Once we received finished signal for this request, Photo should appear on user's account.   Once we received finished signal for this request, Photo should appear on user's account.
  + == Downloads ==
  + The project source is here: [[Media:FacebookHelper.zip]]. In order to test this you will need to remember to put your Facebook app id, in '''main.cpp''' file.
    
  == Summary ==   == Summary ==
    
− By using QML Camera and QNetowkAccessManager we can easily capture and share image to facebook network. + By using QML Camera and {{Icode|QNetwokAccessManager}} we can easily capture and share image to facebook network.
− Hope you enjoy the article. + 
    
− [[:File:FacebookHelper.zip| Here]] is projects's source file, you can use for tyring it out yourself. Remember to put your Facebook's app id, in main.cpp file, before using it. + Hope you enjoy the article.



Hamishwillee: Hamishwillee - Fix categories. Tidy wiki text/subedit
2012-05-09T07:41:30Z
Hamishwillee - Fix categories. Tidy wiki text/subedit

			
			
			
			
		
		← Older revision
		Revision as of 07:41, 9 May 2012
		
Line 1:
Line 1:
− [[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Symbian]][[Category:MeeGo]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Connectivity]] + [[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Symbian]][[Category:MeeGo]][[Category:Code Examples]][[Category:Camera]][[Category:Web Services]][[Category:Symbian^3]]
− {{Abstract|This article explains how to capture image using QML Camera and upload to Facebook }}   + {{Abstract|This article demonstrates how to capture an image using the QML Camera Element and share it to Facebook. }}  
    
  {{ArticleMetaData <!-- v1.2 -->   {{ArticleMetaData <!-- v1.2 -->
  |sourcecode= [[Media:FacebookHelper.zip]]     |sourcecode= [[Media:FacebookHelper.zip]]  
  |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->   |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
− |devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') --> + |devices= Nokia N9
− |sdk= <!-- Qt SDK 1.2  (e.g. [http://linktosdkdownload/ Qt SDK 1.2]) --> + |sdk= Qt SDK 1.2  
− |platform= <!-- Symbian,Meego - e.g. Symbian^1 and later, Qt 4.6 and later --> + |platform= All Qt 4.6 and later
  |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->   |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
  |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->   |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
Line 24:
Line 24:
  |author= [[User:Kunal the one]]   |author= [[User:Kunal the one]]
  }}   }}
− # How to use QML Camera element to capture Image +  
− # How to login to facebook using QNetworkAccessManager + 
− # How to use HTTP Post method to upload capture image to facebook album + 
− '' + 
  {{Note|This is an entry in the [[PureView Imaging Competition 2012Q2]]}}   {{Note|This is an entry in the [[PureView Imaging Competition 2012Q2]]}}
    
  == Introduction ==   == Introduction ==
    
− This article explain how to use QML Camera element to capture image and then how to upload and share captured image to Facebook, using Qt Network Module. Following are snaps from my sample application running on N9. + This article explains how to use QML Camera element to capture an image and then how to upload and share captured image to Facebook. In more detail, it shows how to:
  + # Use [http://doc.qt.nokia.com/qtmobility-1.2/qml-camera.html QML Camera] element to capture an image
  + # Login to facebook using {{Qapiname|QNetworkAccessManager}}
  + # Use HTTP Post method to upload capture image to facebook album
    
− <gallery widths="460px" heights="200"> + Following are snaps from my sample application running on N9.
  + <gallery widths="350px" heights="200">
  File:fbhelper_main.png| Take picture   File:fbhelper_main.png| Take picture
  File:fbhelper_preview.png | Picture   File:fbhelper_preview.png | Picture
− File:fbhelper_login.png | Facebook loging + File:fbhelper_login.png | Facebook login
  File:fbhelper_success.png| Picture uploaded   File:fbhelper_success.png| Picture uploaded
  </gallery>   </gallery>
    
− '''Let's start with How to capture image using QML Camera.''' + == Using the QML Camera Element ==
    
− QML Camera is part of Qt Mobility API,  so you need to configure Qt's Project file to to include Qt Mobility package. We also need to use Network,Webkit and Declarative Module. For symbian we also need to specify capability to be able to connect to network, saving file, accessing camera. + QML Camera is part of Qt Mobility API, so you need to configure Qt's Project file to to include Qt Mobility package. We also need to use Network, Webkit and Declarative Module. For Symbian we also need to specify capabilities to be able to connect to network and access the camera.
  <code cpp>   <code cpp>
  QT += network webkit declarative   QT += network webkit declarative
Line 59:
Line 60:
  </code>   </code>
    
− Now our project file is ready, We can continue with QML code. Following is QML code for main.qml which I launch from main.cpp file. In Following code I am using QML Camera to display camera view and capture image with it. Once image is captured I am hiding Camera element and showing preview view.   + Below is QML code for '''main.qml''' which I launch from '''main.cpp''' file. The codes uses QML Camera to display camera view and capture image with it. Once image is captured the Camera element is hidden and the preview view is displayed.  
    
− PreviewImage view shows captured image and it offer option to share it on Facebook. To avoid QML component dependency I have create a simple custom Button element and using it. + {{Icode|PreviewImage}} view shows captured image and it offers the option to share it on Facebook. To avoid QML component dependency I have create a simple custom button element that will work on all Qt platforms.
    
− <code cpp> + <code javascript>
  import QtQuick 1.1   import QtQuick 1.1
  import QtMultimediaKit 1.1   import QtMultimediaKit 1.1
Line 165:
Line 166:
  </code>   </code>
    
− Now that, image is captured, We need code that allow user to login to his facebook account and upload pohto. + The image is now captured. The following code allows the user to login to their Facebook account and upload a photo.
    
− I have create a post some time back, how to login to facebook and how to post comment on wall. [http://kunalmaemo.blogspot.com/2012/01/posting-on-facebook-wall-from-qt.html Here is link] I will use same code here to login to facebook account using QNetworkAccessManager. + == Facebook helper - log in to facebook and upload photos ==
  + I created a blog [http://kunalmaemo.blogspot.com/2012/01/posting-on-facebook-wall-from-qt.html  here] some time ago, explaining how to login to facebook and how to post comment on wall. I will use same code here to login to facebook account using {{Icode|QNetworkAccessManager}}.
    
− First of all to login on facebook account and posting on wall or uploading photo, we need to create a application on faceook. [https://developers.facebook.com/apps Here] is link where you can create a app. + First of all to login on facebook account and posting on wall or uploading photo, we need to request an application ID from Facebook [https://developers.facebook.com/apps here]. With this id you can request an authorisation token from the Facebook API when you login, and use it to upload photos.
− You will get applicaiton id, using which you request authorization token from facebook, which can be used to upload photo on facebook. Following is code to get authorization token from facebook. + 
    
− Login method will launch facebook login webpage in QWebView, Once user enteres a valid username and password, it will redirects to https://www.facebook.com/connect/login_success.html url with access token mentioned in query string. + Login method will launch facebook login webpage in {{Qapiname|QWebView}}. Once a user enters a valid username and password, it will redirects to https://www.facebook.com/connect/login_success.html url with access token mentioned in query string.
    
  <code cpp>   <code cpp>
  void FacebookHelper::login( const QString& scope ){   void FacebookHelper::login( const QString& scope ){
−  
       QUrl url("https://www.facebook.com/dialog/oauth");        QUrl url("https://www.facebook.com/dialog/oauth");
       url.addQueryItem("client_id",YOUR_APPP_ID);        url.addQueryItem("client_id",YOUR_APPP_ID);




Hamishwillee: Hamishwillee - Bot update - Fix metadata etc
2012-05-09T07:15:53Z
Hamishwillee - Bot update - Fix metadata etc

			
			
			
			
		
		← Older revision
		Revision as of 07:15, 9 May 2012
		
Line 3:
Line 3:
    
  {{ArticleMetaData <!-- v1.2 -->   {{ArticleMetaData <!-- v1.2 -->
− |sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> + |sourcecode= [[Media:FacebookHelper.zip]]  
  |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->   |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
  |devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->   |devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
Line 9:
Line 9:
  |platform= <!-- Symbian,Meego - e.g. Symbian^1 and later, Qt 4.6 and later -->   |platform= <!-- Symbian,Meego - e.g. Symbian^1 and later, Qt 4.6 and later -->
  |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->   |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
− |signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> + |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
− |capabilities= <!-- NetworkServices  (e.g. Location, NetworkServices. --> + |signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
  + |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
  |keywords= <!-- QNetworkAccessManager,QML Camera -->   |keywords= <!-- QNetworkAccessManager,QML Camera -->
− |translated-from-title= <!-- Title only -->   + |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 -->   |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 -->   |review-timestamp= <!-- After re-review: YYYYMMDD -->
  |update-by= <!-- After significant update: [[User:username]]-->   |update-by= <!-- After significant update: [[User:username]]-->
  |update-timestamp= <!-- After significant update: YYYYMMDD -->   |update-timestamp= <!-- After significant update: YYYYMMDD -->
− |creationdate= <!-- Format YYYYMMDD --> + |creationdate= 20120428
− |author= [[User:kunal_the_one]]   + |author= [[User:Kunal the one]]
  }}   }}
  # How to use QML Camera element to capture Image   # How to use QML Camera element to capture Image
Line 29:
Line 32:
  == Introduction ==   == Introduction ==
    
− This article explain how to use QML Camera element to capture image  and then how to upload and share captured image to Facebook, using Qt Network Module. Following are snaps from my sample application running on N9. + This article explain how to use QML Camera element to capture image and then how to upload and share captured image to Facebook, using Qt Network Module. Following are snaps from my sample application running on N9.
    
  <gallery widths="460px" heights="200">   <gallery widths="460px" heights="200">
Line 58:
Line 61:
  Now our project file is ready, We can continue with QML code. Following is QML code for main.qml which I launch from main.cpp file. In Following code I am using QML Camera to display camera view and capture image with it. Once image is captured I am hiding Camera element and showing preview view.     Now our project file is ready, We can continue with QML code. Following is QML code for main.qml which I launch from main.cpp file. In Following code I am using QML Camera to display camera view and capture image with it. Once image is captured I am hiding Camera element and showing preview view.  
    
− PreviewImage view shows captured image and it offer option to share it on Facebook. To avoid QML component dependency I have create a simple custom Button  element and using it. + PreviewImage view shows captured image and it offer option to share it on Facebook. To avoid QML component dependency I have create a simple custom Button element and using it.
    
  <code cpp>   <code cpp>
Line 201:
Line 204:
  </code>   </code>
    
− Now we have access token, we are ready to upload photo to facebook. Following code describe the process. uploadPicture method takes absolute path to picture to upload and comment for photo, then it creates  form-data request and send that to facebook using HTTP Post method. + Now we have access token, we are ready to upload photo to facebook. Following code describe the process. uploadPicture method takes absolute path to picture to upload and comment for photo, then it creates form-data request and send that to facebook using HTTP Post method.
    
  <code cpp>   <code cpp>



Chintandave er: Chintandave er - removed extra spaces/blank lines
2012-05-08T08:56:28Z
Chintandave er - removed extra spaces/blank lines

			
			
			
			
		
		← Older revision
		Revision as of 08:56, 8 May 2012
		
Line 21:
Line 21:
  |author= [[User:kunal_the_one]]     |author= [[User:kunal_the_one]]  
  }}   }}
−  
−  
  # How to use QML Camera element to capture Image   # How to use QML Camera element to capture Image
  # How to login to facebook using QNetworkAccessManager     # How to login to facebook using QNetworkAccessManager  




Chintandave er: Chintandave er - /* Introduction */
2012-05-08T08:48:54Z
Chintandave er - - Introduction

			
			
			
			
		
		← Older revision
		Revision as of 08:48, 8 May 2012
		
Line 35:
Line 35:
  <gallery widths="460px" heights="200">   <gallery widths="460px" heights="200">
  File:fbhelper_main.png| Take picture   File:fbhelper_main.png| Take picture
− File:fbhelper_preview.png | Captured picture + File:fbhelper_preview.png | Picture
  File:fbhelper_login.png | Facebook loging   File:fbhelper_login.png | Facebook loging
  File:fbhelper_success.png| Picture uploaded   File:fbhelper_success.png| Picture uploaded



Chintandave er: Chintandave er - used gallery control for pictures
2012-05-08T08:47:41Z
Chintandave er - used gallery control for pictures

			
			
			
			
		
		← Older revision
		Revision as of 08:47, 8 May 2012
		
Line 33:
Line 33:
  This article explain how to use QML Camera element to capture image  and then how to upload and share captured image to Facebook, using Qt Network Module. Following are snaps from my sample application running on N9.   This article explain how to use QML Camera element to capture image  and then how to upload and share captured image to Facebook, using Qt Network Module. Following are snaps from my sample application running on N9.
    
− [[File:fbhelper_main.png|460x200px]] + <gallery widths="460px" heights="200">
− [[File:fbhelper_preview.png|460x200px]] + File:fbhelper_main.png| Take picture
− [[File:fbhelper_login.png|460x200px]] + File:fbhelper_preview.png | Captured picture
− [[File:fbhelper_success.png|460x200px]] + File:fbhelper_login.png | Facebook loging
  + File:fbhelper_success.png| Picture uploaded
  + </gallery>
    
  '''Let's start with How to capture image using QML Camera.'''   '''Let's start with How to capture image using QML Camera.'''




Kiran10182: moved Capturing Image using QML Camera and Uploading to Facebook to Capturing image using QML Camera and uploading to Facebook
2012-05-07T10:53:38Z
moved Capturing Image using QML Camera and Uploading to Facebook to Capturing image using QML Camera and uploading to Facebook

		
		← Older revision
		Revision as of 10:53, 7 May 2012
		


Croozeus: Croozeus -
2012-05-06T14:20:10Z
Croozeus -

			
			
			
			
		
		← Older revision
		Revision as of 14:20, 6 May 2012
		
Line 1:
Line 1:
  [[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Symbian]][[Category:MeeGo]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Connectivity]]   [[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Symbian]][[Category:MeeGo]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Connectivity]]
− {{Abstract|This article explains how to capture image using QML Camera and upload to Facebook }} ' + {{Abstract|This article explains how to capture image using QML Camera and upload to Facebook }}  
    
  {{ArticleMetaData <!-- v1.2 -->   {{ArticleMetaData <!-- v1.2 -->

← Older revision		Revision as of 10:51, 13 June 2012
Line 1:		Line 1:
−	[[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Symbian]][[Category:MeeGo]][[Category:Code Examples]][[Category:Camera]][[Category:Web Services]][[Category:Symbian^3]]	+	[[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Symbian]][[Category:MeeGo Harmattan]][[Category:Code Examples]][[Category:Camera]][[Category:Web Services]][[Category:Symbian^3]]
	{{Abstract\|This article demonstrates how to capture an image using the QML Camera Element and share it to Facebook. }}		{{Abstract\|This article demonstrates how to capture an image using the QML Camera Element and share it to Facebook. }}

Capturing image using QML Camera and uploading to Facebook - Revision history

Hamishwillee: Text replace - "" to ""

Hamishwillee: Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

Hamishwillee: Hamishwillee - Minor subedit

Hamishwillee: Hamishwillee - Fix categories. Tidy wiki text/subedit

Hamishwillee: Hamishwillee - Bot update - Fix metadata etc

Chintandave er: Chintandave er - removed extra spaces/blank lines

Chintandave er: Chintandave er - /* Introduction */

Chintandave er: Chintandave er - used gallery control for pictures

Kiran10182: moved Capturing Image using QML Camera and Uploading to Facebook to Capturing image using QML Camera and uploading to Facebook

Croozeus: Croozeus -

Hamishwillee: Text replace - "`" to ""`