Implementing custom orientation changes animation with QML - Revision history

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


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

			
			
			
			
		
		← Older revision
		Revision as of 01:17, 11 October 2012
		
Line 81:
Line 81:
  The width and height of the root element are set to be resized to {{Icode|QDeclarativeViews}} sizes with the code {{Icode|view.setResizeMode(QDeclarativeView::SizeRootObjectToView).}}   The width and height of the root element are set to be resized to {{Icode|QDeclarativeViews}} sizes with the code {{Icode|view.setResizeMode(QDeclarativeView::SizeRootObjectToView).}}
    
− <code cpp> + <code cpp-qt>
  #include <QApplication>   #include <QApplication>
  #include <QDeclarativeView>   #include <QDeclarativeView>
Line 133:
Line 133:
  The self-implemented [http://doc.qt.nokia.com/qtmobility-1.2/qorientationfilter.html OrientationFilter]] is derived from [http://doc.qt.nokia.com/4.7/qobject.html QObject] to get the possibility to emit signals and from [http://doc.qt.nokia.com/qtmobility-1.2/qorientationfilter.html QOrientationFilter] to read the values of the sensor. The sensor reading is placed to [http://doc.qt.nokia.com/4.7/qvariant.html QVariant] so that the value can be passed to JavaScript function in QML code.   The self-implemented [http://doc.qt.nokia.com/qtmobility-1.2/qorientationfilter.html OrientationFilter]] is derived from [http://doc.qt.nokia.com/4.7/qobject.html QObject] to get the possibility to emit signals and from [http://doc.qt.nokia.com/qtmobility-1.2/qorientationfilter.html QOrientationFilter] to read the values of the sensor. The sensor reading is placed to [http://doc.qt.nokia.com/4.7/qvariant.html QVariant] so that the value can be passed to JavaScript function in QML code.
    
− <code cpp> + <code cpp-qt>
  #ifndef ORIENTATIONFILTER_H   #ifndef ORIENTATIONFILTER_H
  #define ORIENTATIONFILTER_H   #define ORIENTATIONFILTER_H



Kratsan: Kratsan -
2012-02-27T06:15:29Z
Kratsan -

			
			
			
			
		
		← Older revision
		Revision as of 06:15, 27 February 2012
		
Line 233:
Line 233:
    
  ===Postconditions===   ===Postconditions===
− The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys [http://doc.qt.nokia.com/qtmobility-1.2/qrotationsensor.html QRotationSensor] class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized. + The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys [http://doc.qt.nokia.com/qtmobility-1.2/qorientationsensor.html QOrientationSensor] class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized.
    
  {{SeeAlso|   {{SeeAlso|
  [http://doc.qt.nokia.com/qt-components-symbian/qt-components-scalability-guidelines-orientation-specific-layouts.html Orientation specific layouts]   [http://doc.qt.nokia.com/qt-components-symbian/qt-components-scalability-guidelines-orientation-specific-layouts.html Orientation specific layouts]
  }}   }}




Hamishwillee: moved Implementing orientation change animation with QML to Implementing custom orientation changes animation with QML: Custom is more precise
2012-02-27T02:14:21Z
moved Implementing orientation change animation with QML to Implementing custom orientation changes animation with QML: Custom is more precise

		
		← Older revision
		Revision as of 02:14, 27 February 2012
		


Hamishwillee: Hamishwillee - Add SeeAlso
2012-02-27T02:09:25Z
Hamishwillee - Add SeeAlso

			
			
			
			
		
		← Older revision
		Revision as of 02:09, 27 February 2012
		
Line 1:
Line 1:
− [[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Code Examples]][[Category:Code Snippet]][[Category:Symbian]] + [[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Code Examples]][[Category:Symbian]]
  {{Abstract|This code example shows how to override the default QML orientation change animation with your own ''custom'' orientation change. The orientation change is detected with [http://doc.qt.nokia.com/qtmobility-1.2/qorientationsensor.html QOrientationSensor].}}     {{Abstract|This code example shows how to override the default QML orientation change animation with your own ''custom'' orientation change. The orientation change is detected with [http://doc.qt.nokia.com/qtmobility-1.2/qorientationsensor.html QOrientationSensor].}}  
    
Line 234:
Line 234:
  ===Postconditions===   ===Postconditions===
  The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys [http://doc.qt.nokia.com/qtmobility-1.2/qrotationsensor.html QRotationSensor] class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized.   The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys [http://doc.qt.nokia.com/qtmobility-1.2/qrotationsensor.html QRotationSensor] class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized.
  + 
  + {{SeeAlso|
  + [http://doc.qt.nokia.com/qt-components-symbian/qt-components-scalability-guidelines-orientation-specific-layouts.html Orientation specific layouts]
  + }}




Hamishwillee: Hamishwillee - Update Abstract
2012-02-27T02:05:50Z
Hamishwillee - Update Abstract

			
			
			
			
		
		← Older revision
		Revision as of 02:05, 27 February 2012
		
Line 1:
Line 1:
− [[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Code Examples]][[Category:Code Snippet]][[Category:MeeGo]][[Category:Symbian]] + [[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Code Examples]][[Category:Code Snippet]][[Category:Symbian]]
− {{ArticleNeedsUpdate|timestamp=20111005000740|user=[[User:Hamishwillee|&lt;br /&gt;----]]|This article pre-dates Qt Quick Components and should be re-written. Note that some of the information in this topic may still be useful. + {{Abstract|This code example shows how to override the default QML orientation change animation with your own ''custom'' orientation change. The orientation change is detected with [http://doc.qt.nokia.com/qtmobility-1.2/qorientationsensor.html QOrientationSensor].}} 
    
− The right way to do this is to use the {{Icode|Window}} component from the new Qt Quick Components. If you use Window as the parent element, you can query the {{Icode|inPortrait}} property to get the orientation. It handles the E7 keyboard open -scenario correctly.  
−  
− * [http://doc.qt.nokia.com/qt-components-symbian-1.0/qml-window.html QML Window Element] (reference library)  
− * [http://doc.qt.nokia.com/qt-components-symbian-1.0/index.html Qt Quick Components]  
− ** [http://doc.qt.nokia.com/qt-components-symbian-1.0/qt-components-scalability-guidelines-contents.html Scalability Guidelines Contents]  
−  
− This text was taken from Comment by [[User:Korva|Korva]] 13:02, 29 September 2011 (EEST)  
− }}  
  {{ArticleMetaData <!-- v1.2 -->   {{ArticleMetaData <!-- v1.2 -->
  |sourcecode= [[Media:ImplementingOrientationChangeAnimationWithQMLSources.zip]]     |sourcecode= [[Media:ImplementingOrientationChangeAnimationWithQMLSources.zip]]  
Line 34:
Line 26:
    
  ==Overview==   ==Overview==
− {{Abstract|This snippet shows how to implement nice custom orientation change animation with QML.}}  
−  
− There are two ways to detect the orientation of the device:  
− * by observing the width and height of the main window and seeing which one is the greatest (works if the orientation is not locked) or  
− * by using the device's sensors to detect the orientation  
    
− In this snippet we use the latter technique and utilize Qt Mobility [http://doc.qt.nokia.com/qtmobility-1.2/qorientationsensor.html QOrientationSensor] to access the accelerometer data of the device. + Qt Quick Components provide a standard animation between orientations on Symbian (in Maemo the orientation is already locked to the landscape mode). If the orientation is not locked, QML apps can monitor the change through the [http://doc.qt.nokia.com/qt-components-symbian/qml-window.html QML Window] element, or by observing the width and height of the main window and seeing which one is the greatest. This approach should be perfectly acceptable for almost all Qt apps.
    
− To prevent devices built-in orientation change to occur we lock the orientation to portrait mode and simulate the orientation change in QML code. This concerns only Symbian devices as in Maemo the orientation is already locked to the landscape mode. The orientation data is provided to QML code via Qt Signals and Slots. + This code example shows how you can change the default animation if you need to. This is achieved by first locking the orientation to portrait mode to prevent the default animation occurring. We then use the [http://doc.qt.nokia.com/qtmobility-1.2/qorientationsensor.html QOrientationSensor] to detect when the orientation has changed, provide this data to QML using Signals and Slots, and perform the animation in QML.
    
  Pros and cons of this approach:   Pros and cons of this approach:
−  + Nice animation to the orientation change + : + Nice animation to the orientation change
−  + No black screen during the orientation change + : + No black screen during the orientation change
−  - Custom implementation is required to switch to landscape orientation when HW-keyboard is used + : - Custom implementation is required to switch to landscape orientation when HW-keyboard is used
−  - Additional (though user-grantable) capability ReadDeviceData is required to allow reading of sensors on Symbian + : - Additional (though user-grantable) capability ReadDeviceData is required to allow reading of sensors on Symbian
−  - Qt Mobility libraries are required to detect the orientation + : - Qt Mobility libraries are required to detect the orientation
− {{Note | This snippet is valid for Symbian^3 and Symbian Anna. In Symbian Belle there will be a nice orientation change animation working out-of-the-box.}} + 
− {{Note| This snippet is likely to be deprecated when the Qt Mobility 1.1 will be available in Nokia Qt SDK. The orientation information can then be accessed directly via appropriate QML elements and the Qt code in this snippet will not be required, although it should still be valid code.}} + 
    
  Download the sources of this snippet [[media:ImplementingOrientationChangeAnimationWithQMLSources.zip|here]].   Download the sources of this snippet [[media:ImplementingOrientationChangeAnimationWithQMLSources.zip|here]].




Hamishwillee: Hamishwillee - Tidy wiki text
2012-02-23T03:11:23Z
Hamishwillee - Tidy wiki text

			
			
			
			
		
		← Older revision
		Revision as of 03:11, 23 February 2012
		
Line 1:
Line 1:
− [[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Code Examples]][[Category:Code Snippet]] + [[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Code Examples]][[Category:Code Snippet]][[Category:MeeGo]][[Category:Symbian]]
− {{KBDC}} + 
−   + 
  {{ArticleNeedsUpdate|timestamp=20111005000740|user=[[User:Hamishwillee|&lt;br /&gt;----]]|This article pre-dates Qt Quick Components and should be re-written. Note that some of the information in this topic may still be useful.   {{ArticleNeedsUpdate|timestamp=20111005000740|user=[[User:Hamishwillee|&lt;br /&gt;----]]|This article pre-dates Qt Quick Components and should be re-written. Note that some of the information in this topic may still be useful.
    
  The right way to do this is to use the {{Icode|Window}} component from the new Qt Quick Components. If you use Window as the parent element, you can query the {{Icode|inPortrait}} property to get the orientation. It handles the E7 keyboard open -scenario correctly.   The right way to do this is to use the {{Icode|Window}} component from the new Qt Quick Components. If you use Window as the parent element, you can query the {{Icode|inPortrait}} property to get the orientation. It handles the E7 keyboard open -scenario correctly.
    
− Documentation: http://doc.qt.nokia.com/qt-components-symbian-1.0/qml-window.html + * [http://doc.qt.nokia.com/qt-components-symbian-1.0/qml-window.html QML Window Element] (reference library)
− Taking Qt Quick components into use: http://doc.qt.nokia.com/qt-components-symbian-1.0/index.html + * [http://doc.qt.nokia.com/qt-components-symbian-1.0/index.html Qt Quick Components]
  + ** [http://doc.qt.nokia.com/qt-components-symbian-1.0/qt-components-scalability-guidelines-contents.html Scalability Guidelines Contents]
    
  This text was taken from Comment by [[User:Korva|Korva]] 13:02, 29 September 2011 (EEST)   This text was taken from Comment by [[User:Korva|Korva]] 13:02, 29 September 2011 (EEST)
Line 249:
Line 248:
    
  ===Postconditions===   ===Postconditions===
− The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys [http://doc.qt.nokia.com/qtmobility-1.2/qrotationsensor.html QRotationSensor] class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized.[[Category:MeeGo]] [[Category:Symbian]] + The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys [http://doc.qt.nokia.com/qtmobility-1.2/qrotationsensor.html QRotationSensor] class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized.




Hamishwillee: Hamishwillee - Bot update - Fix Article Metadata and other minor issues
2012-02-23T00:31:35Z
Hamishwillee - Bot update - Fix Article Metadata and other minor issues

			
			
			
			
		
		← Older revision
		Revision as of 00:31, 23 February 2012
		
Line 11:
Line 11:
  This text was taken from Comment by [[User:Korva|Korva]] 13:02, 29 September 2011 (EEST)   This text was taken from Comment by [[User:Korva|Korva]] 13:02, 29 September 2011 (EEST)
  }}   }}
− {{ArticleMetaData + {{ArticleMetaData <!-- v1.2 -->
− |id= + |sourcecode= [[Media:ImplementingOrientationChangeAnimationWithQMLSources.zip]]  
− |platform=Maemo, Symbian + 
− |devices=Nokia E7, Nokia N8, Nokia N900 + 
− |creationdate=17 November 2010 + 
− |keywords=QML, Orientation, Qt Mobility + 
− |sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.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]]) -->
− |sdk=<!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) --> + |devices= Nokia E7, Nokia N8, Nokia N900
− |devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) --> + |sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
− |signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer --> + |platform= Maemo, Symbian
− |capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) --> + |devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
− |author=[[User:Kratsan]] + |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
  + |signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
  + |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
  + |keywords= QML, Orientation, Qt Mobility
  + |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-timestamp= <!-- After re-review: YYYYMMDD -->
  + |update-by= <!-- After significant update: [[User:username]]-->
  + |update-timestamp= <!-- After significant update: YYYYMMDD -->
  + |creationdate= 20101117
  + |author= [[User:Kratsan]]
  }}   }}
    
Line 85:
Line 93:
    
  ==main.cpp==   ==main.cpp==
− The <tt>main.cpp</tt> creates the [http://doc.qt.nokia.com/qtmobility-1.2/qorientationsensor.html QOrientationSensor] and the self-implemented [http://doc.qt.nokia.com/qtmobility-1.2/qorientationfilter.html OrientationFilter]  which will signal the changes of the orientation. This signal is connected to the QML documents root elements function <tt>orientationChanged</tt>. The root element is retrieved by using code {{Icode|view.rootObject()}}. + The {{Icode|main.cpp}} creates the [http://doc.qt.nokia.com/qtmobility-1.2/qorientationsensor.html QOrientationSensor] and the self-implemented [http://doc.qt.nokia.com/qtmobility-1.2/qorientationfilter.html OrientationFilter]  which will signal the changes of the orientation. This signal is connected to the QML documents root elements function {{Icode|orientationChanged}}. The root element is retrieved by using code {{Icode|view.rootObject()}}.
    
  The width and height of the root element are set to be resized to {{Icode|QDeclarativeViews}} sizes with the code {{Icode|view.setResizeMode(QDeclarativeView::SizeRootObjectToView).}}   The width and height of the root element are set to be resized to {{Icode|QDeclarativeViews}} sizes with the code {{Icode|view.setResizeMode(QDeclarativeView::SizeRootObjectToView).}}
Line 168:
Line 176:
    
  ==Orientation.qml==   ==Orientation.qml==
− The UI holds six <tt>Text</tt> elements inside a <tt>Column</tt> representing orientations of the device. Current orientation text will be shown as bold and white color as the others are shown in black without bold. The view will be rotated to the current orientation by altering the <tt>rotation</tt> property of the <tt>view</tt>. Also the <tt>width</tt> and <tt>height</tt> of the <tt>view</tt> are updated to match the corresponding orientation. + The UI holds six {{Icode|Text}} elements inside a {{Icode|Column}} representing orientations of the device. Current orientation text will be shown as bold and white color as the others are shown in black without bold. The view will be rotated to the current orientation by altering the {{Icode|rotation}} property of the {{Icode|view}}. Also the {{Icode|width}} and {{Icode|height}} of the {{Icode|view}} are updated to match the corresponding orientation.
    
  <code>   <code>




Hamishwillee: Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)
2012-02-15T05:44:50Z
Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)

			
			
			
			
		
		← Older revision
		Revision as of 05:44, 15 February 2012
		
Line 241:
Line 241:
    
  ===Postconditions===   ===Postconditions===
− The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys [http://doc.qt.nokia.com/qtmobility-1.2/qrotationsensor.html QRotationSensor] class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized. + The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys [http://doc.qt.nokia.com/qtmobility-1.2/qrotationsensor.html QRotationSensor] class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized.[[Category:MeeGo]] [[Category:Symbian]]




Hamishwillee: Hamishwillee - Add ArticleNeedsUpdate template
2011-10-05T00:07:40Z
Hamishwillee - Add ArticleNeedsUpdate template

			
			
			
			
		
		← Older revision
		Revision as of 00:07, 5 October 2011
		
Line 1:
Line 1:
  [[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Code Examples]][[Category:Code Snippet]]   [[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Code Examples]][[Category:Code Snippet]]
  {{KBDC}}   {{KBDC}}
  + 
  + {{ArticleNeedsUpdate|timestamp=20111005000740|user=[[User:Hamishwillee|&lt;br /&gt;----]]|This article pre-dates Qt Quick Components and should be re-written. Note that some of the information in this topic may still be useful.
  + 
  + The right way to do this is to use the {{Icode|Window}} component from the new Qt Quick Components. If you use Window as the parent element, you can query the {{Icode|inPortrait}} property to get the orientation. It handles the E7 keyboard open -scenario correctly.
  + 
  + Documentation: http://doc.qt.nokia.com/qt-components-symbian-1.0/qml-window.html
  + Taking Qt Quick components into use: http://doc.qt.nokia.com/qt-components-symbian-1.0/index.html
  + 
  + This text was taken from Comment by [[User:Korva|Korva]] 13:02, 29 September 2011 (EEST)
  + }}
  {{ArticleMetaData   {{ArticleMetaData
  |id=   |id=
  |platform=Maemo, Symbian   |platform=Maemo, Symbian
  |devices=Nokia E7, Nokia N8, Nokia N900   |devices=Nokia E7, Nokia N8, Nokia N900
− |category=Qt  
− |subcategory=Qt Quick  
  |creationdate=17 November 2010   |creationdate=17 November 2010
  |keywords=QML, Orientation, Qt Mobility   |keywords=QML, Orientation, Qt Mobility




Kratsan: Kratsan -
2011-09-12T06:45:01Z
Kratsan -

			
			
			
			
		
		← Older revision
		Revision as of 06:45, 12 September 2011
		
Line 35:
Line 35:
    - Additional (though user-grantable) capability ReadDeviceData is required to allow reading of sensors on Symbian     - Additional (though user-grantable) capability ReadDeviceData is required to allow reading of sensors on Symbian
    - Qt Mobility libraries are required to detect the orientation     - Qt Mobility libraries are required to detect the orientation
−   + {{Note | This snippet is valid for Symbian^3 and Symbian Anna. In Symbian Belle there will be a nice orientation change animation working out-of-the-box.}}
−   + 
  {{Note| This snippet is likely to be deprecated when the Qt Mobility 1.1 will be available in Nokia Qt SDK. The orientation information can then be accessed directly via appropriate QML elements and the Qt code in this snippet will not be required, although it should still be valid code.}}   {{Note| This snippet is likely to be deprecated when the Qt Mobility 1.1 will be available in Nokia Qt SDK. The orientation information can then be accessed directly via appropriate QML elements and the Qt code in this snippet will not be required, although it should still be valid code.}}

← Older revision		Revision as of 05:44, 15 February 2012
Line 241:		Line 241:

	===Postconditions===		===Postconditions===
−	The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys [http://doc.qt.nokia.com/qtmobility-1.2/qrotationsensor.html QRotationSensor] class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized.	+	The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys [http://doc.qt.nokia.com/qtmobility-1.2/qrotationsensor.html QRotationSensor] class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized.[[Category:MeeGo]] [[Category:Symbian]]

Implementing custom orientation changes animation with QML - Revision history

Hamishwillee: Text replace - "" to ""

Kratsan: Kratsan -

Hamishwillee: moved Implementing orientation change animation with QML to Implementing custom orientation changes animation with QML: Custom is more precise

Hamishwillee: Hamishwillee - Add SeeAlso

Hamishwillee: Hamishwillee - Update Abstract

Hamishwillee: Hamishwillee - Tidy wiki text

Hamishwillee: Hamishwillee - Bot update - Fix Article Metadata and other minor issues

Hamishwillee: Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)

Hamishwillee: Hamishwillee - Add ArticleNeedsUpdate template

Kratsan: Kratsan -

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