examples/declarative/screenorientation/screenorientation.qml
changeset 37 758a864f9613
equal deleted inserted replaced
36:ef0373b55136 37:758a864f9613
       
     1 /****************************************************************************
       
     2 **
       
     3 ** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
       
     4 ** All rights reserved.
       
     5 ** Contact: Nokia Corporation (qt-info@nokia.com)
       
     6 **
       
     7 ** This file is part of the QtDeclarative module of the Qt Toolkit.
       
     8 **
       
     9 ** $QT_BEGIN_LICENSE:LGPL$
       
    10 ** No Commercial Usage
       
    11 ** This file contains pre-release code and may not be distributed.
       
    12 ** You may use this file in accordance with the terms and conditions
       
    13 ** contained in the Technology Preview License Agreement accompanying
       
    14 ** this package.
       
    15 **
       
    16 ** GNU Lesser General Public License Usage
       
    17 ** Alternatively, this file may be used under the terms of the GNU Lesser
       
    18 ** General Public License version 2.1 as published by the Free Software
       
    19 ** Foundation and appearing in the file LICENSE.LGPL included in the
       
    20 ** packaging of this file.  Please review the following information to
       
    21 ** ensure the GNU Lesser General Public License version 2.1 requirements
       
    22 ** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
       
    23 **
       
    24 ** In addition, as a special exception, Nokia gives you certain additional
       
    25 ** rights.  These rights are described in the Nokia Qt LGPL Exception
       
    26 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
       
    27 **
       
    28 ** If you have questions regarding the use of this file, please contact
       
    29 ** Nokia at qt-info@nokia.com.
       
    30 **
       
    31 **
       
    32 **
       
    33 **
       
    34 **
       
    35 **
       
    36 **
       
    37 **
       
    38 ** $QT_END_LICENSE$
       
    39 **
       
    40 ****************************************************************************/
       
    41 
       
    42 import Qt 4.7
       
    43 import "Core"
       
    44 import "Core/screenorientation.js" as ScreenOrientation
       
    45 
       
    46 Rectangle {
       
    47     id: window
       
    48     width: 360  
       
    49     height: 640
       
    50     color: "white"
       
    51 
       
    52     Rectangle {
       
    53         id: main
       
    54         clip: true
       
    55         property variant selectedOrientation: Orientation.UnknownOrientation
       
    56         property variant activeOrientation: selectedOrientation == Orientation.UnknownOrientation ? runtime.orientation : selectedOrientation
       
    57         state: "orientation " + activeOrientation
       
    58         property bool inPortrait: (activeOrientation == Orientation.Portrait || activeOrientation == Orientation.PortraitInverted);
       
    59 
       
    60         // rotation correction for landscape devices like N900
       
    61         property bool landscapeWindow: window.width > window.height 
       
    62         property variant rotationDelta: landscapeWindow ? -90 : 0
       
    63         rotation: rotationDelta
       
    64 
       
    65         // initial state is portrait
       
    66         property real baseWidth: landscapeWindow ? window.height-10 : window.width-10
       
    67         property real baseHeight: landscapeWindow ? window.width-10 : window.height-10
       
    68 
       
    69         width: baseWidth
       
    70         height: baseHeight
       
    71         anchors.centerIn: parent
       
    72 
       
    73         color: "black"
       
    74         gradient: Gradient {
       
    75             GradientStop { position: 0.0; color: Qt.rgba(0.5,0.5,0.5,0.5) }
       
    76             GradientStop { position: 0.8; color: "black" }
       
    77             GradientStop { position: 1.0; color: "black" }
       
    78         }
       
    79         Item {
       
    80             id: bubbles
       
    81             property bool rising: false
       
    82             anchors.fill: parent
       
    83             property variant gravityPoint: ScreenOrientation.calculateGravityPoint(main.activeOrientation, runtime.orientation)
       
    84             Repeater {
       
    85                 model: 24
       
    86                 Bubble {
       
    87                     rising: bubbles.rising
       
    88                     verticalRise: ScreenOrientation.parallel(main.activeOrientation, runtime.orientation)
       
    89                     xAttractor: parent.gravityPoint.x
       
    90                     yAttractor: parent.gravityPoint.y
       
    91                 }
       
    92             }
       
    93             Component.onCompleted: bubbles.rising = true;
       
    94         }
       
    95 
       
    96         Column {
       
    97             width: centeredText.width
       
    98             anchors.verticalCenter: parent.verticalCenter
       
    99             anchors.horizontalCenter: parent.horizontalCenter 
       
   100             anchors.verticalCenterOffset: 30
       
   101             Text {
       
   102                 text: "Orientation"
       
   103                 color: "white"
       
   104                 font.pixelSize: 22
       
   105                 anchors.horizontalCenter: parent.horizontalCenter
       
   106             }
       
   107             Text {
       
   108                 id: centeredText
       
   109                 text: ScreenOrientation.printOrientation(main.activeOrientation)
       
   110                 color: "white"
       
   111                 font.pixelSize: 40
       
   112                 anchors.horizontalCenter: parent.horizontalCenter
       
   113             }
       
   114             Text {
       
   115                 text: "sensor: " + ScreenOrientation.printOrientation(runtime.orientation)
       
   116                 color: "white"
       
   117                 font.pixelSize: 14
       
   118                 anchors.horizontalCenter: parent.horizontalCenter
       
   119             }
       
   120         }
       
   121         Flow {
       
   122             anchors.top: parent.top
       
   123             anchors.left: parent.left
       
   124             anchors.right: parent.right
       
   125             anchors.margins: 10
       
   126             spacing: 4
       
   127             Button {
       
   128                 width: main.inPortrait ? (parent.width-4)/2 : (parent.width-8)/3
       
   129                 text: "Portrait"
       
   130                 onClicked: main.selectedOrientation = Orientation.Portrait
       
   131                 toggled: main.selectedOrientation == Orientation.Portrait
       
   132             }
       
   133             Button {
       
   134                 width: main.inPortrait ? (parent.width-4)/2 : (parent.width-8)/3
       
   135                 text: "Portrait inverted"
       
   136                 onClicked: main.selectedOrientation = Orientation.PortraitInverted
       
   137                 toggled: main.selectedOrientation == Orientation.PortraitInverted
       
   138             }
       
   139             Button {
       
   140                 width: main.inPortrait ? (parent.width-4)/2 : (parent.width-8)/3
       
   141                 text: "Landscape"
       
   142                 onClicked: main.selectedOrientation = Orientation.Landscape
       
   143                 toggled: main.selectedOrientation == Orientation.Landscape
       
   144             }
       
   145             Button {
       
   146                 width: main.inPortrait ? (parent.width-4)/2 : (parent.width-8)/3
       
   147                 text: "Landscape inverted"
       
   148                 onClicked: main.selectedOrientation = Orientation.LandscapeInverted
       
   149                 toggled: main.selectedOrientation == Orientation.LandscapeInverted
       
   150             }
       
   151             Button {
       
   152                 width: main.inPortrait ? parent.width : 2*(parent.width-2)/3
       
   153                 text: "From runtime.orientation"
       
   154                 onClicked: main.selectedOrientation = Orientation.UnknownOrientation
       
   155                 toggled: main.selectedOrientation == Orientation.UnknownOrientation
       
   156             }
       
   157         }
       
   158         states: [
       
   159             State {
       
   160                 name: "orientation " + Orientation.Landscape
       
   161                 PropertyChanges { 
       
   162                     target: main
       
   163                     rotation: ScreenOrientation.getAngle(Orientation.Landscape)+rotationDelta
       
   164                     width: baseHeight
       
   165                     height: baseWidth
       
   166                 }
       
   167             },
       
   168             State {
       
   169                 name: "orientation " + Orientation.PortraitInverted
       
   170                 PropertyChanges { 
       
   171                     target: main
       
   172                     rotation: ScreenOrientation.getAngle(Orientation.PortraitInverted)+rotationDelta
       
   173                     width: baseWidth
       
   174                     height: baseHeight
       
   175                 }
       
   176             },
       
   177             State {
       
   178                 name: "orientation " + Orientation.LandscapeInverted
       
   179                 PropertyChanges { 
       
   180                     target: main
       
   181                     rotation: ScreenOrientation.getAngle(Orientation.LandscapeInverted)+rotationDelta
       
   182                     width: baseHeight
       
   183                     height: baseWidth
       
   184                 }
       
   185             }
       
   186         ]
       
   187         transitions: Transition {
       
   188             ParallelAnimation {
       
   189                 RotationAnimation { 
       
   190                     direction: RotationAnimation.Shortest
       
   191                     duration: 300
       
   192                     easing.type: Easing.InOutQuint 
       
   193                 }
       
   194                 NumberAnimation { 
       
   195                     properties: "x,y,width,height"
       
   196                     duration: 300
       
   197                     easing.type: Easing.InOutQuint 
       
   198                 }
       
   199             }
       
   200         }
       
   201     }
       
   202 }