Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Implementing custom orientation changes animation with QML

From Wiki
Jump to: navigation, search
kratsan (Talk | contribs)
(Lock the orientation to Portrait in Symbian.)
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
 
(19 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]]
+
[[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Code Examples]][[Category:Symbian]]
{{KBCS}}
+
{{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].}}  
{{CodeSnippet
+
 
|id=
+
{{ArticleMetaData <!-- v1.2 -->
|platform=Maemo
+
|sourcecode= [[Media:ImplementingOrientationChangeAnimationWithQMLSources.zip]]
|devices=Nokia 900
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|category=Qt
+
|devices= Nokia E7, Nokia N8, Nokia N900
|subcategory=Qt Quick
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|creationdate=
+
|platform= Maemo, Symbian
|keywords=QML, Orientation, Qt Mobility
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
 +
|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]]
 
}}
 
}}
  
 
==Overview==
 
==Overview==
This snippet shows how to implement nice orientation change animation with QML. In order to detect when the orientation changes we use Qt Mobility <tt>QOrientationSensor</tt> to access the accelerometer data of the device.
 
  
To prevent devices built-in orientation change to occur we lock the orientation to landscape 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.
+
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.
 +
 
 +
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.
  
'''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.
+
Pros and cons of this approach:
 +
: + Nice animation to the orientation change
 +
: + No black screen during the orientation change
 +
: - 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
 +
: - Qt Mobility libraries are required to detect the orientation
  
 
Download the sources of this snippet [[media:ImplementingOrientationChangeAnimationWithQMLSources.zip|here]].
 
Download the sources of this snippet [[media:ImplementingOrientationChangeAnimationWithQMLSources.zip|here]].
Line 57: Line 77:
  
 
==main.cpp==
 
==main.cpp==
The <tt>main.cpp</tt> creates the <tt>QOrientationSensor</tt> and the self-implemented <tt>OrientationFilter</tt> 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 <tt>view.rootObject()</tt>.
+
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 <tt>QDeclarativeViews</tt> sizes with the code <tt>view.setResizeMode(QDeclarativeView::SizeRootObjectToView)</tt>.
+
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 111: Line 131:
  
 
==orientationfilter.h==
 
==orientationfilter.h==
The self-implemented <tt>OrientationFilter</tt> is derived from <tt>QObject</tt> to get the possibility to emit signals and from <tt>QOrientationFilter</tt> to read the values of the sensor. The sensor reading is placed to <tt>QVariant</tt> 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
Line 140: Line 160:
  
 
==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>
Line 213: 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 <tt>QRotationSensor</tt> 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.
  
[[Category:Code Examples]][[Category:Code Snippet]]
+
{{SeeAlso|
 +
[http://doc.qt.nokia.com/qt-components-symbian/qt-components-scalability-guidelines-orientation-specific-layouts.html Orientation specific layouts]
 +
}}

Latest revision as of 01:17, 11 October 2012

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 QOrientationSensor.

Article Metadata
Code ExampleTested with
Devices(s): Nokia E7, Nokia N8, Nokia N900
Compatibility
Platform(s): Maemo, Symbian
Symbian
Article
Keywords: QML, Orientation, Qt Mobility
Created: kratsan (17 Nov 2010)
Last edited: hamishwillee (11 Oct 2012)

Contents

[edit] Overview

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 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.

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 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:

+ Nice animation to the orientation change
+ No black screen during the orientation change
- 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
- Qt Mobility libraries are required to detect the orientation

Download the sources of this snippet here.

[edit] Preconditions

  • Qt 4.7 or higher is installed on your platform
  • QtMobility 1.0.2 or higher is installed on your platform

[edit] orientation.pro

The declarative module is used, as well as the Qt Mobility sensors. QML code will be placed inside Qt resource system for easier deployment to the devices.

QT          += core gui declarative
 
TARGET = orientation
TEMPLATE = app
 
SOURCES += main.cpp
HEADERS += orientationfilter.h
OTHER_FILES += Orientation.qml
RESOURCES = resources.qrc
 
CONFIG += mobility
MOBILITY += sensors
 
symbian {
# To lock the application to landscape orientation
LIBS += -lcone -leikcore -lavkon
}
 
unix:!symbian {
maemo5 {
target.path = /opt/usr/bin
} else {
target.path = /usr/local/bin
}
INSTALLS += target
}

[edit] main.cpp

The main.cpp creates the QOrientationSensor and the self-implemented OrientationFilter which will signal the changes of the orientation. This signal is connected to the QML documents root elements function orientationChanged. The root element is retrieved by using code view.rootObject().

The width and height of the root element are set to be resized to QDeclarativeViews sizes with the code view.setResizeMode(QDeclarativeView::SizeRootObjectToView).

#include <QApplication>
#include <QDeclarativeView>
#include <QGraphicsObject>
#include <QDesktopWidget>
#include <QOrientationSensor>
#include "orientationfilter.h"
 
QTM_USE_NAMESPACE
 
#ifdef Q_OS_SYMBIAN
// Lock orientation in Symbian
#include <eikenv.h>
#include <eikappui.h>
#include <aknenv.h>
#include <aknappui.h>
#endif
 
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
 
#ifdef Q_OS_SYMBIAN
// Lock orientation in Symbian
CAknAppUi* appUi = dynamic_cast<CAknAppUi*> (CEikonEnv::Static()->AppUi());
TRAP_IGNORE( if(appUi) { appUi->SetOrientationL(CAknAppUi::EAppUiOrientationPortrait); } );
#endif
 
QDeclarativeView view;
view.setSource(QUrl("qrc:/Orientation.qml"));
view.setResizeMode(QDeclarativeView::SizeRootObjectToView);
 
QOrientationSensor sensor;
OrientationFilter filter;
sensor.addFilter(&filter);
 
// Connect the Qt signal to QML function
QObject::connect(&filter, SIGNAL(orientationChanged(const QVariant&)), view.rootObject(), SLOT(orientationChanged(const QVariant&)));
 
sensor.start();
 
// Show application in full screen on all platforms with corresponding device resolution
view.setGeometry(QApplication::desktop()->screenGeometry());
view.showFullScreen();
 
return app.exec();
}

[edit] orientationfilter.h

The self-implemented OrientationFilter] is derived from QObject to get the possibility to emit signals and from QOrientationFilter to read the values of the sensor. The sensor reading is placed to QVariant so that the value can be passed to JavaScript function in QML code.

#ifndef ORIENTATIONFILTER_H
#define ORIENTATIONFILTER_H
 
#include <QOrientationFilter>
 
QTM_USE_NAMESPACE
 
class OrientationFilter : public QObject, public QOrientationFilter
{
Q_OBJECT
public:
bool filter(QOrientationReading *reading) {
emit orientationChanged(reading->orientation());
 
// don't store the reading in the sensor
return false;
}
 
signals:
void orientationChanged(const QVariant &orientation);
};
 
#endif // ORIENTATIONFILTER_H

[edit] Orientation.qml

The UI holds six Text elements inside a 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 rotation property of the view. Also the width and height of the view are updated to match the corresponding orientation.

import Qt 4.7
 
Item {
id: base
 
function orientationChanged(orientation) {
highlightindex(orientation)
 
if(orientation == 1) {
view.rotation = 0
view.width = base.width; view.height = base.height
}
else if(orientation == 2) {
view.rotation = 180
view.width = base.width; view.height = base.height
}
else if(orientation == 3) {
view.rotation = 270
view.width = base.height; view.height = base.width
}
else if(orientation == 4) {
view.rotation = 90
view.width = base.height; view.height = base.width
}
}
 
function highlightindex(orientation) {
var count = texts.children.length
 
for(var i=0; i<count; i++) {
if(i == (orientation - 1)) {
texts.children[i].color = "white"
texts.children[i].font.bold = true
}
else {
texts.children[i].color = "black"
texts.children[i].font.bold = false
}
}
}
 
Rectangle {
id: view
 
Behavior on rotation { RotationAnimation { direction: RotationAnimation.Shortest; duration: 500; easing.type: Easing.OutBounce } }
Behavior on width { NumberAnimation { duration: 500 } }
Behavior on height { NumberAnimation { duration: 500 } }
 
anchors.centerIn: parent
width: base.width; height: base.height
color: "blue"
 
Column {
id: texts
 
anchors.centerIn: parent
spacing: 10
 
Text { text: "Top up" }
Text { text: "Top Down" }
Text { text: "Left Up" }
Text { text: "Right Up" }
Text { text: "Face Up" }
Text { text: "Face Down" }
}
}
}

[edit] Postconditions

The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys QOrientationSensor class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized.

This page was last modified on 11 October 2012, at 01:17.
197 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×