main-smallscreen.qml Example File

 /****************************************************************************
 **
 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
 ** Contact: http://www.qt-project.org/
 **
 ** This file is part of the Qt Mobility Components.
 **
 ** $QT_BEGIN_LICENSE:LGPL$
 ** GNU Lesser General Public License Usage
 ** This file may be used under the terms of the GNU Lesser General Public
 ** License version 2.1 as published by the Free Software Foundation and
 ** appearing in the file LICENSE.LGPL included in the packaging of this
 ** file. Please review the following information to ensure the GNU Lesser
 ** General Public License version 2.1 requirements will be met:
 ** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
 **
 ** In addition, as a special exception, Nokia gives you certain additional
 ** rights. These rights are described in the Nokia Qt LGPL Exception
 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
 **
 ** GNU General Public License Usage
 ** Alternatively, this file may be used under the terms of the GNU General
 ** Public License version 3.0 as published by the Free Software Foundation
 ** and appearing in the file LICENSE.GPL included in the packaging of this
 ** file. Please review the following information to ensure the GNU General
 ** Public License version 3.0 requirements will be met:
 ** http://www.gnu.org/copyleft/gpl.html.
 **
 ** Other Usage
 ** Alternatively, this file may be used in accordance with the terms and
 ** conditions contained in a signed written agreement between you and Nokia.
 **
 **
 **
 **
 **
 **
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/

 import QtQuick 2.0

 Rectangle {
     id: root
     width: 640
     height: 360
     color: "grey"
     property string fileName
     property alias volume: content.volume
     property bool perfMonitorsLogging: false
     property bool perfMonitorsVisible: false

     QtObject {
         id: d
         property bool dialogShown: (fileOpenContainer.state == "shown" ||
                                     effectSelectionPanel.state == "shown" ||
                                     videoFileBrowser.shown ||
                                     imageFileBrowser.shown)
        property real gripSize: 40
     }

     // Create ScreenSaver element via Loader, so this app will still run if the
     // SystemInfo module is not available
     Loader {
         source: "DisableScreenSaver.qml"
     }

     Loader {
         id: performanceLoader

         Connections {
             target: d
             onDialogShownChanged:
                 if (performanceLoader.item)
                     performanceLoader.item.enabled = !d.dialogShown
             ignoreUnknownSignals: true
         }

         function init() {
             console.log("[qmlvideofx] performanceLoader.init logging " + root.perfMonitorsLogging + " visible " + root.perfMonitorsVisible)
             var enabled = root.perfMonitorsLogging || root.perfMonitorsVisible
             source = enabled ? "../performancemonitor/PerformanceItem.qml" : ""
         }

         onLoaded: {
             item.parent = root
             item.anchors.top = root.top
             item.anchors.left = root.left
             item.logging = root.perfMonitorsLogging
             item.displayed = root.perfMonitorsVisible
             item.init()
         }
     }

     Rectangle {
         id: inner
         anchors.fill: parent
         color: "grey"

         Content {
             id: content
             anchors.fill: parent
             gripSize: d.gripSize
             onVideoFramePainted: performanceLoader.item.videoFramePainted()
         }

         ParameterPanel {
             id: parameterPanel
             anchors {
                 left: parent.left;
                 right: parent.right;
                 margins: 10
             }
             y: parent.height
             gripSize: d.gripSize

             states: [
                 State {
                     name: "shown"
                     PropertyChanges {
                         target: parameterPanel
                         y: parent.height - (parameterPanel.height + 10)
                     }
                 }
             ]

             transitions: [
                 Transition {
                     from: "*"
                     to: "*"
                     NumberAnimation {
                         properties: "y"
                         easing.type: Easing.OutQuart
                         duration: 500
                     }
                 }
             ]

             state: (enabled && !d.dialogShown) ? "shown" : "baseState"
         }

         EffectSelectionPanel {
             id: effectSelectionPanel
             anchors {
                 top: parent.top;
                 bottom: parameterPanel.top;
                 margins: 10
             }
             x: parent.width
             width: parent.width - 40
             opacity: 0.75
             radius: 20
             itemHeight: 50

             states: [
                 State {
                     name: "shown"
                     PropertyChanges {
                         target: effectSelectionPanel
                         x: 20
                     }
                 }
             ]

             transitions: [
                 Transition {
                     from: "*"
                     to: "*"
                     NumberAnimation {
                         properties: "x"
                         easing.type: Easing.OutQuart
                         duration: 500
                     }
                 }
             ]

             onEffectSourceChanged: {
                 content.effectSource = effectSource
                 if (content.effect.parameters.count) {
                     parameterPanel.model = content.effect.parameters
                     parameterPanel.enabled = true
                 } else {
                     parameterPanel.enabled = false
                 }
             }

             onClicked: state = "baseState"
         }

         Rectangle {
             id: fileOpenContainer
             anchors {
                 top: parent.top
                 bottom: parameterPanel.top
                 margins: 10
             }
             x: -width
             width: parent.width - 40
             color: "transparent"

             Column {
                 anchors.fill: parent

                 FileOpen {
                     id: fileOpen
                     color: "transparent"
                     width: parent.width
                     height: 200
                     opacity: 0.75
                     radius: 20
                     buttonHeight: 40
                 }

                 MouseArea {
                     width: parent.width
                     height: 250
                     onClicked: fileOpenContainer.state = "baseState"
                 }
             }

             states: [
                 State {
                     name: "shown"
                     PropertyChanges {
                         target: fileOpenContainer
                         x: 20
                     }
                 }
             ]

             transitions: [
                 Transition {
                     from: "*"
                     to: "*"
                     NumberAnimation {
                         properties: "x"
                         easing.type: Easing.OutQuart
                         duration: 500
                     }
                 }
             ]
         }

         Rectangle {
             id: splashScreen
             anchors {
                 horizontalCenter: parent.horizontalCenter
                 verticalCenter: parent.verticalCenter
             }
             width: 300
             height: 200
             radius: 0.1 * height
             color: "white"
             opacity: 0.9
             border { color: "black"; width: 2 }

             Text {
                 anchors {
                     fill: parent
                     margins: 5
                 }
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
                 font.pixelSize: 24
                 text: "Tap on left side to switch between sources.\n\nTap on right side to switch between effects."
                 wrapMode: Text.WordWrap
             }

             MouseArea {
                 anchors.fill: parent
                 onClicked: parent.state = "hidden"
             }

             states: [
                 State {
                     name: "hidden"
                     PropertyChanges {
                         target: splashScreen
                         opacity: 0.0
                     }
                 }
             ]

             transitions: [
                 Transition {
                     from: "*"
                     to: "*"
                     NumberAnimation {
                         properties: "opacity"
                         easing.type: Easing.OutQuart
                         duration: 500
                     }
                 }
             ]
         }

         HintedMouseArea {
             id: fileOpenMouseArea
             anchors {
                 left: parent.left;
                 top: parent.top;
                 bottom: parameterPanel.top;
                 topMargin: 75
             }
             width: 100
             onClicked: {
                 fileOpenMouseArea.hintEnabled = false
                 effectSelectionPanelMouseArea.hintEnabled = false
                 splashScreen.state = "hidden"
                 fileOpenContainer.state = "shown"
             }
             enabled: !d.dialogShown
         }

         HintedMouseArea {
             id: effectSelectionPanelMouseArea
             anchors {
                 right: parent.right;
                 top: parent.top;
                 bottom: parameterPanel.top;
                 topMargin: 75
             }
             width: 100
             onClicked: {
                 fileOpenMouseArea.hintEnabled = false
                 effectSelectionPanelMouseArea.hintEnabled = false
                 splashScreen.state = "hidden"
                 effectSelectionPanel.state = "shown"
             }
             enabled: !d.dialogShown
         }

         Image {
             source: "qrc:/images/close.png"

             anchors {
                 top: parent.top
                 right: parent.right
                 margins: 5
             }

             MouseArea {
                 anchors.fill: parent
                 onClicked: Qt.quit()
             }
         }
     }

     Component.onCompleted: {
         fileOpen.openImage.connect(openImage)
         fileOpen.openVideo.connect(openVideo)
         fileOpen.openCamera.connect(openCamera)
         fileOpen.close.connect(close)
     }

     FileBrowser {
         id: imageFileBrowser
         anchors.fill: root
         Component.onCompleted: fileSelected.connect(content.openImage)
     }

     FileBrowser {
         id: videoFileBrowser
         anchors.fill: root
         Component.onCompleted: fileSelected.connect(content.openVideo)
     }

     // Called from main() once root properties have been set
     function init() {
         console.log("[qmlvideofx] main.init")
         imageFileBrowser.folder = imagePath
         videoFileBrowser.folder = videoPath
         content.init()
         performanceLoader.init()
         if (fileName != "") {
             fileOpenMouseArea.hintEnabled = false
             effectSelectionPanelMouseArea.hintEnabled = false
             splashScreen.state = "hidden"
             content.openVideo(fileName)
         }
     }

     function qmlFramePainted() {
         if (performanceLoader.item)
             performanceLoader.item.qmlFramePainted()
     }

     function openImage() {
         fileOpenContainer.state = "baseState"
         imageFileBrowser.show()
     }

     function openVideo() {
         fileOpenContainer.state = "baseState"
         videoFileBrowser.show()
     }

     function openCamera() {
         fileOpenContainer.state = "baseState"
         content.openCamera()
     }

     function close() {
         fileOpenContainer.state = "baseState"
         content.openImage("qrc:/images/qt-logo.png")
     }
 }