Rework qmlvideofx example

Task-number: QTBUG-38121 Change-Id: If06ba6ce2c66b4d735baaeb56e004861c62ea533 Reviewed-by: Alessandro Portale <alessandro.portale@digia.com>
author: Niels Weber <niels.weber@digia.com> 2014-04-14 18:36:40 +0200
committer: The Qt Project <gerrit-noreply@qt-project.org> 2014-04-18 20:10:23 +0200
commit: 4c8284de46052970de001c5c9b96c4fa365f89b4 (patch)
tree: 6472dde8f00634b02256bfc0650ee984acc3e3ec
parent: af73d55efffa1dca928038cd4f392eb7def7c7e1 (diff)
download: qtmultimedia-4c8284de46052970de001c5c9b96c4fa365f89b4.tar.gz
47 files changed, 723 insertions, 1037 deletions
diff --git a/examples/multimedia/video/qmlvideofx/Info.plist b/examples/multimedia/video/qmlvideofx/Info.plist
new file mode 100644
index 000000000..8fc242516
--- /dev/null
+++ b/examples/multimedia/video/qmlvideofx/Info.plist
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+       <key>UISupportedInterfaceOrientations</key>
+       <array>
+               <string>UIInterfaceOrientationLandscapeRight</string>
+       </array>
+       <key>UIInterfaceOrientation</key>
+       <string>UIInterfaceOrientationLandscapeRight</string>
+       <key>CFBundleIconFile</key>
+       <string></string>
+       <key>CFBundlePackageType</key>
+       <string>APPL</string>
+       <key>CFBundleSignature</key>
+       <string>????</string>
+       <key>CFBundleExecutable</key>
+       <string>qmlvideofx</string>
+       <key>CFBundleIdentifier</key>
+       <string>com.digia.${PRODUCT_NAME:rfc1034identifier}</string>
+       <key>CFBundleDisplayName</key>
+       <string>${PRODUCT_NAME}</string>
+       <key>CFBundleName</key>
+       <string>${PRODUCT_NAME}</string>
+       <key>CFBundleShortVersionString</key>
+       <string>1.0</string>
+       <key>CFBundleVersion</key>
+       <string>1.0</string>
+</dict>
+</plist>
diff --git a/examples/multimedia/video/qmlvideofx/android/AndroidManifest.xml b/examples/multimedia/video/qmlvideofx/android/AndroidManifest.xml
new file mode 100644
index 000000000..0612d484c
--- /dev/null
+++ b/examples/multimedia/video/qmlvideofx/android/AndroidManifest.xml
@@ -0,0 +1,48 @@
+<?xml version="1.0"?>
+<manifest package="org.qtproject.example.qmlvideofx" xmlns:android="http://schemas.android.com/apk/res/android" android:versionName="1.0" android:versionCode="1" android:installLocation="auto">
+    <application android:hardwareAccelerated="true" android:name="org.qtproject.qt5.android.bindings.QtApplication" android:label="@string/app_name">
+        <activity android:configChanges="orientation|uiMode|screenLayout|screenSize|smallestScreenSize|locale|fontScale|keyboard|keyboardHidden|navigation" android:name="org.qtproject.qt5.android.bindings.QtActivity" android:label="@string/app_name" android:screenOrientation="landscape" android:launchMode="singleTop">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN"/>
+                <category android:name="android.intent.category.LAUNCHER"/>
+            </intent-filter>
+            <meta-data android:name="android.app.lib_name" android:value="-- %%INSERT_APP_LIB_NAME%% --"/>
+            <meta-data android:name="android.app.qt_sources_resource_id" android:resource="@array/qt_sources"/>
+            <meta-data android:name="android.app.repository" android:value="default"/>
+            <meta-data android:name="android.app.qt_libs_resource_id" android:resource="@array/qt_libs"/>
+            <meta-data android:name="android.app.bundled_libs_resource_id" android:resource="@array/bundled_libs"/>
+            <!-- Deploy Qt libs as part of package -->
+            <meta-data android:name="android.app.bundle_local_qt_libs" android:value="-- %%BUNDLE_LOCAL_QT_LIBS%% --"/>
+            <meta-data android:name="android.app.bundled_in_lib_resource_id" android:resource="@array/bundled_in_lib"/>
+            <meta-data android:name="android.app.bundled_in_assets_resource_id" android:resource="@array/bundled_in_assets"/>
+            <!-- Run with local libs -->
+            <meta-data android:name="android.app.use_local_qt_libs" android:value="-- %%USE_LOCAL_QT_LIBS%% --"/>
+            <meta-data android:name="android.app.libs_prefix" android:value="/data/local/tmp/qt/"/>
+            <meta-data android:name="android.app.load_local_libs" android:value="-- %%INSERT_LOCAL_LIBS%% --"/>
+            <meta-data android:name="android.app.load_local_jars" android:value="-- %%INSERT_LOCAL_JARS%% --"/>
+            <meta-data android:name="android.app.static_init_classes" android:value="-- %%INSERT_INIT_CLASSES%% --"/>
+            <!--  Messages maps -->
+            <meta-data android:value="@string/ministro_not_found_msg" android:name="android.app.ministro_not_found_msg"/>
+            <meta-data android:value="@string/ministro_needed_msg" android:name="android.app.ministro_needed_msg"/>
+            <meta-data android:value="@string/fatal_error_msg" android:name="android.app.fatal_error_msg"/>
+            <!--  Messages maps -->
+
+            <!-- Splash screen -->
+            <!--
+            <meta-data android:name="android.app.splash_screen_drawable" android:resource="@drawable/logo"/>
+            -->
+            <!-- Splash screen -->
+        </activity>
+    </application>
+    <uses-sdk android:minSdkVersion="11" android:targetSdkVersion="14"/>
+    <supports-screens android:largeScreens="true" android:normalScreens="true" android:anyDensity="true" android:smallScreens="true"/>
+
+    <!-- The following comment will be replaced upon deployment with default permissions based on the dependencies of the application.
+         Remove the comment if you do not require these default permissions. -->
+    <!-- %%INSERT_PERMISSIONS -->
+
+    <!-- The following comment will be replaced upon deployment with default features based on the dependencies of the application.
+         Remove the comment if you do not require these default features. -->
+    <!-- %%INSERT_FEATURES -->
+
+</manifest>
diff --git a/examples/multimedia/video/qmlvideofx/images/Dropdown_arrows.png b/examples/multimedia/video/qmlvideofx/images/Dropdown_arrows.png
new file mode 100644
index 000000000..0a9e25ce2
--- /dev/null
+++ b/examples/multimedia/video/qmlvideofx/images/Dropdown_arrows.png
diff --git a/examples/multimedia/video/qmlvideofx/images/Slider_bar.png b/examples/multimedia/video/qmlvideofx/images/Slider_bar.png
new file mode 100644
index 000000000..84be50fae
--- /dev/null
+++ b/examples/multimedia/video/qmlvideofx/images/Slider_bar.png
diff --git a/examples/multimedia/video/qmlvideofx/images/Slider_handle.png b/examples/multimedia/video/qmlvideofx/images/Slider_handle.png
new file mode 100644
index 000000000..aebecdf19
--- /dev/null
+++ b/examples/multimedia/video/qmlvideofx/images/Slider_handle.png
diff --git a/examples/multimedia/video/qmlvideofx/images/Triangle_Top.png b/examples/multimedia/video/qmlvideofx/images/Triangle_Top.png
new file mode 100644
index 000000000..5768e9536
--- /dev/null
+++ b/examples/multimedia/video/qmlvideofx/images/Triangle_Top.png
diff --git a/examples/multimedia/video/qmlvideofx/images/Triangle_bottom.png b/examples/multimedia/video/qmlvideofx/images/Triangle_bottom.png
new file mode 100644
index 000000000..509409666
--- /dev/null
+++ b/examples/multimedia/video/qmlvideofx/images/Triangle_bottom.png
diff --git a/examples/multimedia/video/qmlvideofx/images/close.png b/examples/multimedia/video/qmlvideofx/images/close.png
deleted file mode 100644
index 6904df0e4..000000000
--- a/examples/multimedia/video/qmlvideofx/images/close.png
+++ /dev/null
diff --git a/examples/multimedia/video/qmlvideofx/images/folder.png b/examples/multimedia/video/qmlvideofx/images/folder.png
deleted file mode 100644
index e53e2ad46..000000000
--- a/examples/multimedia/video/qmlvideofx/images/folder.png
+++ /dev/null
diff --git a/examples/multimedia/video/qmlvideofx/images/icon_BackArrow.png b/examples/multimedia/video/qmlvideofx/images/icon_BackArrow.png
new file mode 100644
index 000000000..6823de004
--- /dev/null
+++ b/examples/multimedia/video/qmlvideofx/images/icon_BackArrow.png
diff --git a/examples/multimedia/video/qmlvideofx/images/icon_Folder.png b/examples/multimedia/video/qmlvideofx/images/icon_Folder.png
new file mode 100644
index 000000000..62d97004f
--- /dev/null
+++ b/examples/multimedia/video/qmlvideofx/images/icon_Folder.png
diff --git a/examples/multimedia/video/qmlvideofx/images/icon_Menu.png b/examples/multimedia/video/qmlvideofx/images/icon_Menu.png
new file mode 100644
index 000000000..bc078612e
--- /dev/null
+++ b/examples/multimedia/video/qmlvideofx/images/icon_Menu.png
diff --git a/examples/multimedia/video/qmlvideofx/images/titlebar.png b/examples/multimedia/video/qmlvideofx/images/titlebar.png
deleted file mode 100644
index 51c90082d..000000000
--- a/examples/multimedia/video/qmlvideofx/images/titlebar.png
+++ /dev/null
diff --git a/examples/multimedia/video/qmlvideofx/images/titlebar.sci b/examples/multimedia/video/qmlvideofx/images/titlebar.sci
deleted file mode 100644
index 0418d94cd..000000000
--- a/examples/multimedia/video/qmlvideofx/images/titlebar.sci
+++ /dev/null
@@ -1,5 +0,0 @@
-border.left: 10
-border.top: 12
-border.bottom: 12
-border.right: 10
-source: titlebar.png
diff --git a/examples/multimedia/video/qmlvideofx/images/up.png b/examples/multimedia/video/qmlvideofx/images/up.png
deleted file mode 100644
index b05f8025d..000000000
--- a/examples/multimedia/video/qmlvideofx/images/up.png
+++ /dev/null
diff --git a/examples/multimedia/video/qmlvideofx/main.cpp b/examples/multimedia/video/qmlvideofx/main.cpp
index 7465deab8..f221c954a 100644
--- a/examples/multimedia/video/qmlvideofx/main.cpp
+++ b/examples/multimedia/video/qmlvideofx/main.cpp
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
 ** Contact: http://www.qt-project.org/legal
 **
 ** This file is part of the Qt Mobility Components.
@@ -48,12 +48,6 @@
 #include "filereader.h"
 #include "trace.h"
 
-#ifdef SMALL_SCREEN_LAYOUT
-    static const QLatin1String MainQmlFile("main-smallscreen.qml");
-#else
-    static const QLatin1String MainQmlFile("main-largescreen.qml");
-#endif
-
 #ifdef PERFORMANCEMONITOR_SUPPORT
 #include "performancemonitordeclarative.h"
 #endif
@@ -99,7 +93,7 @@ int main(int argc, char *argv[])
 
     QQuickView viewer;
 
-    viewer.setSource(QLatin1String("qrc:///qml/qmlvideofx/") + MainQmlFile);
+    viewer.setSource(QUrl(QLatin1String("qrc:///qml/qmlvideofx/Main.qml")));
     QQuickItem *rootObject = viewer.rootObject();
     rootObject->setProperty("fileName", fileName);
     viewer.rootObject()->setProperty("volume", volume);
@@ -128,13 +122,9 @@ int main(int argc, char *argv[])
     viewer.setTitle("qmlvideofx");
     viewer.setFlags(Qt::Window | Qt::WindowSystemMenuHint | Qt::WindowTitleHint |
                           Qt::WindowMinMaxButtonsHint | Qt::WindowCloseButtonHint);
-    viewer.setMinimumSize(QSize(600, 400));
+    viewer.setMinimumSize(QSize(640, 360));
 
-#ifdef SMALL_SCREEN_PHYSICAL
-    viewer.showFullScreen();
-#else
     viewer.show();
-#endif
 
     // Delay invocation of init until the event loop has started, to work around
     // a GL context issue on Harmattan: without this, we get the following error
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Button.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Button.qml
index eb82aceed..dd7cca602 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Button.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Button.qml
@@ -43,29 +43,33 @@ import QtQuick 2.0
 
 Rectangle {
     id: root
-    color: textColor
-    radius: 0.25 * height
+    color: "transparent"
+    height: itemHeight
+    width: itemWidth
 
     property string text
-    property color bgColor: "white"
-    property color bgColorSelected: "red"
-    property color textColor: "black"
+    property color bgColor: "transparent"
+    property color bgColorSelected: "#14aaff"
+    property color textColor: "white"
     property alias enabled: mouseArea.enabled
+    property bool active: true
+    property alias horizontalAlign: text.horizontalAlignment
 
     signal clicked
 
     Rectangle {
         anchors { fill: parent; margins: 1 }
         color: mouseArea.pressed ? bgColorSelected : bgColor
-        radius: 0.25 * height
+        radius: 0.1 * height
 
         Text {
             id: text
-            anchors.centerIn: parent
+            clip: true
             text: root.text
-            font.pixelSize: 0.5 * parent.height
+            anchors { fill: parent; margins: scaledMargin }
+            font.pixelSize: fontSize
             color: mouseArea.pressed ? bgColor : textColor
-            horizontalAlignment: Text.AlignHCenter
+            horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
         }
 
@@ -75,6 +79,7 @@ Rectangle {
             onClicked: {
                 root.clicked()
             }
+            enabled: active
         }
     }
 }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Content.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Content.qml
index d3a2e9f42..72b7cca7e 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Content.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Content.qml
@@ -39,11 +39,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.1
 
 Rectangle {
     id: root
-    color: "black"
     property alias effect: effectLoader.item
     property alias gripSize: divider.gripSize
     property string effectSource
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ContentImage.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ContentImage.qml
index 0fa047bb1..2bce20bf0 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ContentImage.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ContentImage.qml
@@ -39,7 +39,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.1
 
 Image {
     fillMode: Image.PreserveAspectFit
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ContentVideo.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ContentVideo.qml
index be09f7ea5..6491ceff2 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ContentVideo.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ContentVideo.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
 ** Contact: http://www.qt-project.org/legal
 **
 ** This file is part of the Qt Mobility Components.
@@ -39,13 +39,14 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.1
 import QtMultimedia 5.0
 
 VideoOutput {
     source: mediaPlayer
     property alias mediaSource: mediaPlayer.source
     property alias volume: mediaPlayer.volume
+    property bool isRunning: true
 
     MediaPlayer {
         id: mediaPlayer
@@ -55,5 +56,21 @@ VideoOutput {
     }
 
     function play() { mediaPlayer.play() }
+    function pause() { mediaPlayer.pause() }
     function stop() { mediaPlayer.stop() }
+
+    function toggleplay() {
+        if (isRunning) {
+            pause()
+            isRunning = false
+        } else {
+            play()
+            isRunning = true
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: toggleplay()
+    }
 }
diff --git a/examples/multimedia/video/qmlvideofx/shaders/sobeledgedetection2.fsh b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Curtain.qml
index 039a567d2..253e3c397 100644
--- a/examples/multimedia/video/qmlvideofx/shaders/sobeledgedetection2.fsh
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Curtain.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
 ** Contact: http://www.qt-project.org/legal
 **
 ** This file is part of the Qt Mobility Components.
@@ -39,39 +39,56 @@
 **
 ****************************************************************************/
 
-// Based on http://rastergrid.com/blog/downloads/frei-chen-edge-detector/
+import QtQuick 2.0
 
-#version 130
-uniform sampler2D source;
-uniform float dividerValue;
-uniform float weight;
-mat3 G[2] = mat3[](
-    mat3( 1.0, 2.0, 1.0, 0.0, 0.0, 0.0, -1.0, -2.0, -1.0 ),
-    mat3( 1.0, 0.0, -1.0, 2.0, 0.0, -2.0, 1.0, 0.0, -1.0 )
-);
-uniform lowp float qt_Opacity;
-in vec2 qt_TexCoord0;
-out vec4 FragmentColor;
-void main() {
-    vec2 uv = qt_TexCoord0.xy;
-    vec4 c = vec4(0.0);
-    if (uv.x < dividerValue) {
-        mat3 intensity;
-        float conv[2];
-        vec3 sample;
-        for (int i=0; i<3; ++i) {
-            for (int j=0; j<3; ++j) {
-                sample = texelFetch(source, ivec2(gl_FragCoord) + ivec2(i-1, j-1), 0).rgb;
-                intensity[i][j] = length(sample) * weight;
-            }
+Rectangle {
+    id: root
+    color: "transparent"
+    radius: 5
+    property alias value: grip.value
+    property color gripColor: "transparent"
+    property real gripSize: 20
+    property real gripTolerance: 3.0
+    property real increment: 0.1
+    property bool enabled: true
+    property string imageSource: "qrc:/images/Triangle_Top.png"
+
+    Rectangle {
+        id: grip
+        property real value: 0.5
+        x: (value * parent.width) - width/2
+        anchors.verticalCenter: parent.verticalCenter
+        width: root.gripTolerance * root.gripSize
+        height: width
+        radius: width/2
+        color: "transparent"
+
+        Image {
+            id: sliderhandleimage
+            source: imageSource
+            anchors.centerIn: parent
         }
-        for (int i=0; i<2; ++i) {
-            float dp3 = dot(G[i][0], intensity[0]) + dot(G[i][1], intensity[1]) + dot(G[i][2], intensity[2]);
-            conv[i] = dp3 * dp3;
+
+        MouseArea {
+            id: mouseArea
+            enabled: root.enabled
+            anchors.fill:  parent
+            drag {
+                target: grip
+                axis: Drag.XAxis
+                minimumX: -parent.width/2
+                maximumX: root.width - parent.width/2
+            }
+            onPositionChanged:  {
+                if (drag.active)
+                    updatePosition()
+            }
+            onReleased: {
+                updatePosition()
+            }
+            function updatePosition() {
+                value = (grip.x + grip.width/2) / grip.parent.width
+            }
         }
-        c = vec4(0.5 * sqrt(conv[0]*conv[0] + conv[1]*conv[1]));
-    } else {
-        c = texture2D(source, qt_TexCoord0);
     }
-    FragmentColor = qt_Opacity * c;
 }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Divider.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Divider.qml
index 390818bbc..45c2606f9 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Divider.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Divider.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
 ** Contact: http://www.qt-project.org/legal
 **
 ** This file is part of the Qt Mobility Components.
@@ -39,7 +39,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.1
 
 Rectangle {
     id: root
@@ -53,21 +53,34 @@ Rectangle {
         id: line
         anchors { top: parent.top; bottom: parent.bottom }
         x: parent.value * parent.width - (width / 2)
-        width: 2
-        color: "red"
+        width: 4
+        color: "#14aaff"
     }
 
-    Slider {
+    // topgrip
+    Curtain {
         id: slider
         increment: 0.0
-        lineColor: "transparent"
-        fillColor: "transparent"
-        gripColor: "red"
         anchors {
             top: parent.top
-            topMargin: gripSize / 2
+            topMargin: (gripSize / 2) + 5
             left: parent.left
             right: parent.right
         }
+        onValueChanged: slider2.value = slider.value
+    }
+
+    // bottomgrip
+    Curtain {
+        id: slider2
+        increment: 0.0
+        anchors {
+            bottom: parent.bottom
+            bottomMargin: (gripSize / 2) + 5
+            left: parent.left
+            right: parent.right
+        }
+        imageSource: "qrc:/images/Triangle_bottom.png"
+        onValueChanged: slider.value = slider2.value
     }
 }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectBillboard.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectBillboard.qml
index 4e3adc3e2..1e2077246 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectBillboard.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectBillboard.qml
@@ -44,7 +44,7 @@ import QtQuick 2.0
 Effect {
     parameters: ListModel {
         ListElement {
-            name: "grid spacing"
+            name: "Grid Spacing"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectBlackAndWhite.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectBlackAndWhite.qml
index 5e37c70ce..85f2abc7d 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectBlackAndWhite.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectBlackAndWhite.qml
@@ -44,7 +44,7 @@ import QtQuick 2.0
 Effect {
     parameters: ListModel {
         ListElement {
-            name: "threshold"
+            name: "Threshold"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectGaussianBlur.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectGaussianBlur.qml
index 00fab0448..f0cad5288 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectGaussianBlur.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectGaussianBlur.qml
@@ -49,7 +49,7 @@ Item {
     property real dividerValue: 0.5
     property ListModel parameters: ListModel {
         ListElement {
-            name: "radius"
+            name: "Radius"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectIsolate.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectIsolate.qml
index f3650419c..80c7ccaed 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectIsolate.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectIsolate.qml
@@ -44,11 +44,11 @@ import QtQuick 2.0
 Effect {
     parameters: ListModel {
         ListElement {
-            name: "hue"
+            name: "Hue"
             value: 0.5
         }
         ListElement {
-            name: "width"
+            name: "Width"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectMagnify.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectMagnify.qml
index d93e72c9e..3fd35eaae 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectMagnify.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectMagnify.qml
@@ -46,11 +46,11 @@ Effect {
     divider: false
     parameters: ListModel {
         ListElement {
-            name: "radius"
+            name: "Radius"
             value: 0.5
         }
         ListElement {
-            name: "diffraction"
+            name: "Diffraction"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPageCurl.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPageCurl.qml
index e4fc1f78f..c035b9b62 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPageCurl.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPageCurl.qml
@@ -45,7 +45,7 @@ Effect {
     divider: false
     parameters: ListModel {
         ListElement {
-            name: "extent"
+            name: "Extent"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPixelate.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPixelate.qml
index 002a74a46..7a0f21984 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPixelate.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPixelate.qml
@@ -44,7 +44,7 @@ import QtQuick 2.0
 Effect {
     parameters: ListModel {
         ListElement {
-            name: "granularity"
+            name: "Granularity"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPosterize.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPosterize.qml
index bda473764..084b28c17 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPosterize.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPosterize.qml
@@ -44,7 +44,7 @@ import QtQuick 2.0
 Effect {
     parameters: ListModel {
         ListElement {
-            name: "gamma"
+            name: "Gamma"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectRipple.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectRipple.qml
index 7932b4c12..e0a2b0227 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectRipple.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectRipple.qml
@@ -44,11 +44,11 @@ import QtQuick 2.0
 Effect {
     parameters: ListModel {
         ListElement {
-            name: "amplitude"
+            name: "Amplitude"
             value: 0.5
         }
         ListElement {
-            name: "frequency"
+            name: "Frequency"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSobelEdgeDetection2.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSelectionList.qml
index 33336537f..fa92bb7ca 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSobelEdgeDetection2.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSelectionList.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
 ** Contact: http://www.qt-project.org/legal
 **
 ** This file is part of the Qt Mobility Components.
@@ -41,16 +41,27 @@
 
 import QtQuick 2.0
 
-Effect {
-    parameters: ListModel {
-        ListElement {
-            name: "threshold"
-            value: 0.5
-        }
-    }
-
-    // Transform slider values, and bind result to shader uniforms
-    property real weight: parameters.get(0).value
-
-    fragmentShaderFilename: "sobeledgedetection2.fsh"
+ListModel {
+    id: sources
+    ListElement { name: "No effect"; source: "EffectPassThrough.qml" }
+    ListElement { name: "Billboard"; source: "EffectBillboard.qml" }
+    ListElement { name: "Black & white"; source: "EffectBlackAndWhite.qml" }
+    ListElement { name: "Blur"; source: "EffectGaussianBlur.qml" }
+    ListElement { name: "Edge detection"; source: "EffectSobelEdgeDetection1.qml" }
+    ListElement { name: "Emboss"; source: "EffectEmboss.qml" }
+    ListElement { name: "Glow"; source: "EffectGlow.qml" }
+    ListElement { name: "Isolate"; source: "EffectIsolate.qml" }
+    //ListElement { name: "Magnify"; source: "EffectMagnify.qml" }
+    ListElement { name: "Page curl"; source: "EffectPageCurl.qml" }
+    ListElement { name: "Pixelate"; source: "EffectPixelate.qml" }
+    ListElement { name: "Posterize"; source: "EffectPosterize.qml" }
+    ListElement { name: "Ripple"; source: "EffectRipple.qml" }
+    ListElement { name: "Sepia"; source: "EffectSepia.qml" }
+    ListElement { name: "Sharpen"; source: "EffectSharpen.qml" }
+    ListElement { name: "Shockwave"; source: "EffectShockwave.qml" }
+    ListElement { name: "Tilt shift"; source: "EffectTiltShift.qml" }
+    ListElement { name: "Toon"; source: "EffectToon.qml" }
+    ListElement { name: "Warhol"; source: "EffectWarhol.qml" }
+    ListElement { name: "Wobble"; source: "EffectWobble.qml" }
+    ListElement { name: "Vignette"; source: "EffectVignette.qml" }
 }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSelectionPanel.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSelectionPanel.qml
deleted file mode 100644
index 948a4e888..000000000
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSelectionPanel.qml
+++ /dev/null
@@ -1,154 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the Qt Mobility Components.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and Digia.  For licensing terms and
-** conditions see http://qt.digia.com/licensing.  For further information
-** use the contact form at http://qt.digia.com/contact-us.
-**
-** GNU Lesser General Public License Usage
-** Alternatively, 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, Digia gives you certain additional
-** rights.  These rights are described in the Digia 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.
-**
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-
-Rectangle {
-    id: root
-    property int itemHeight: 25
-    property string effectSource: ""
-
-    signal clicked
-
-    QtObject {
-        id: d
-        property Item selectedItem
-    }
-
-    ListModel {
-        id: sources
-        ListElement { name: "No effect"; source: "EffectPassThrough.qml" }
-        ListElement { name: "Billboard"; source: "EffectBillboard.qml" }
-        ListElement { name: "Black & white"; source: "EffectBlackAndWhite.qml" }
-        ListElement { name: "Blur"; source: "EffectGaussianBlur.qml" }
-        ListElement { name: "Edge detection"; source: "EffectSobelEdgeDetection1.qml" }
-        //ListElement { name: "Edge detection (Sobel, #2)"; source: "EffectSobelEdgeDetection2.qml" }
-        ListElement { name: "Emboss"; source: "EffectEmboss.qml" }
-        ListElement { name: "Glow"; source: "EffectGlow.qml" }
-        ListElement { name: "Isolate"; source: "EffectIsolate.qml" }
-        ListElement { name: "Magnify"; source: "EffectMagnify.qml" }
-        ListElement { name: "Page curl"; source: "EffectPageCurl.qml" }
-        ListElement { name: "Pixelate"; source: "EffectPixelate.qml" }
-        ListElement { name: "Posterize"; source: "EffectPosterize.qml" }
-        ListElement { name: "Ripple"; source: "EffectRipple.qml" }
-        ListElement { name: "Sepia"; source: "EffectSepia.qml" }
-        ListElement { name: "Sharpen"; source: "EffectSharpen.qml" }
-        ListElement { name: "Shockwave"; source: "EffectShockwave.qml" }
-        ListElement { name: "Tilt shift"; source: "EffectTiltShift.qml" }
-        ListElement { name: "Toon"; source: "EffectToon.qml" }
-        ListElement { name: "Warhol"; source: "EffectWarhol.qml" }
-        ListElement { name: "Wobble"; source: "EffectWobble.qml" }
-        ListElement { name: "Vignette"; source: "EffectVignette.qml" }
-    }
-
-    Component {
-        id: sourceDelegate
-        Item {
-            id: sourceDelegateItem
-            width: root.width
-            height: itemHeight
-
-            Button {
-                id: sourceSelectorItem
-                anchors.centerIn: parent
-                width: 0.9 * parent.width
-                height: 0.8 * itemHeight
-                text: name
-                onClicked: {
-                    if (d.selectedItem)
-                        d.selectedItem.state = "baseState"
-                    d.selectedItem = sourceDelegateItem
-                    d.selectedItem.state = "selected"
-                    effectSource = source
-                    root.clicked()
-                }
-            }
-
-            states: [
-                State {
-                    name: "selected"
-                    PropertyChanges {
-                        target: sourceSelectorItem
-                        bgColor: "#ff8888"
-                    }
-                }
-            ]
-
-            Component.onCompleted: {
-                if (name == "No effect") {
-                    state = "selected"
-                    d.selectedItem = sourceDelegateItem
-                }
-            }
-
-            transitions: [
-                Transition {
-                    from: "*"
-                    to: "*"
-                    ColorAnimation {
-                        properties: "color"
-                        easing.type: Easing.OutQuart
-                        duration: 500
-                    }
-                }
-            ]
-        }
-    }
-
-    Flickable {
-        anchors.fill: parent
-        contentHeight: (itemHeight * sources.count) + layout.anchors.topMargin + layout.spacing
-        clip: true
-
-        Column {
-            id: layout
-
-            anchors {
-                fill: parent
-                topMargin: 10
-            }
-
-            Repeater {
-                model: sources
-                delegate: sourceDelegate
-            }
-        }
-    }
-}
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSharpen.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSharpen.qml
index 25215980d..f59544dc9 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSharpen.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSharpen.qml
@@ -44,7 +44,7 @@ import QtQuick 2.0
 Effect {
     parameters: ListModel {
         ListElement {
-            name: "sharpness"
+            name: "Sharpness"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectShockwave.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectShockwave.qml
index 0e1b1785f..746445b46 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectShockwave.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectShockwave.qml
@@ -45,7 +45,7 @@ Effect {
     id: root
     parameters: ListModel {
         ListElement {
-            name: "amplitude"
+            name: "Amplitude"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSobelEdgeDetection1.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSobelEdgeDetection1.qml
index 6724a8449..7b03dbfdb 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSobelEdgeDetection1.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSobelEdgeDetection1.qml
@@ -44,7 +44,7 @@ import QtQuick 2.0
 Effect {
     parameters: ListModel {
         ListElement {
-            name: "threshold"
+            name: "Threshold"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectToon.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectToon.qml
index ff985e563..ecba40623 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectToon.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectToon.qml
@@ -44,7 +44,7 @@ import QtQuick 2.0
 Effect {
     parameters: ListModel {
         ListElement {
-            name: "threshold"
+            name: "Threshold"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectWobble.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectWobble.qml
index 97e7c061c..aa07c1a68 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectWobble.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectWobble.qml
@@ -44,7 +44,7 @@ import QtQuick 2.0
 Effect {
     parameters: ListModel {
         ListElement {
-            name: "amplitude"
+            name: "Amplitude"
             value: 0.5
         }
     }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileBrowser.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileBrowser.qml
index 7c8610361..c75b6f255 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileBrowser.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileBrowser.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
 ** Contact: http://www.qt-project.org/legal
 **
 ** This file is part of the Qt Mobility Components.
@@ -39,12 +39,13 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
-import Qt.labs.folderlistmodel 2.0
+import QtQuick 2.1
+import Qt.labs.folderlistmodel 2.1
 
 Rectangle {
     id: fileBrowser
     color: "transparent"
+    z: 4
 
     property string folder
     property bool shown: loader.sourceComponent
@@ -75,12 +76,12 @@ Rectangle {
 
         Rectangle {
             id: root
-            color: "white"
+            color: "black"
             property bool showFocusHighlight: false
             property variant folders: folders1
             property variant view: view1
             property alias folder: folders1.folder
-            property color textColor: "black"
+            property color textColor: "white"
 
             FolderListModel {
                 id: folders1
@@ -112,7 +113,7 @@ Rectangle {
                             fileBrowser.selectFile(path)
                     }
                     width: root.width
-                    height: 52
+                    height: itemHeight
                     color: "transparent"
 
                     Rectangle {
@@ -126,10 +127,12 @@ Rectangle {
                     }
 
                     Item {
-                        width: 48; height: 48
+                        width: itemHeight; height: itemHeight
                         Image {
-                            source: "qrc:/images/folder.png"
-                            anchors.centerIn: parent
+                            source: "qrc:/images/icon_Folder.png"
+                            fillMode: Image.PreserveAspectFit
+                            anchors.fill: parent
+                            anchors.margins: scaledMargin
                             visible: folders.isFolder(index)
                         }
                     }
@@ -138,8 +141,8 @@ Rectangle {
                         id: nameText
                         anchors.fill: parent; verticalAlignment: Text.AlignVCenter
                         text: fileName
-                        anchors.leftMargin: 54
-                        font.pixelSize: 32
+                        anchors.leftMargin: itemHeight + scaledMargin
+                        font.pixelSize: fontSize
                         color: (wrapper.ListView.isCurrentItem && root.showFocusHighlight) ? palette.highlightedText : textColor
                         elide: Text.ElideRight
                     }
@@ -262,56 +265,45 @@ Rectangle {
                 Keys.onPressed: root.keyPressed(event.key)
             }
 
-            Rectangle {
+            Button {
                 id: cancelButton
-                width: 100
-                height: titleBar.height - 7
-                color: "black"
-                anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
-
-                Text {
-                    anchors { fill: parent; margins: 4 }
-                    text: "Cancel"
-                    color: "white"
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    font.pixelSize: 20
-                }
-
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: fileBrowser.selectFile("")
-                }
+                width: itemWidth
+                height: itemHeight
+                color: "#353535"
+                anchors { bottom: parent.bottom; right: parent.right; margins: 5 * scaledMargin }
+                text: "Cancel"
+                horizontalAlign: Text.AlignHCenter
+                onClicked: fileBrowser.selectFile("")
             }
 
             Keys.onPressed: {
                 root.keyPressed(event.key);
-                if (event.key == Qt.Key_Return || event.key == Qt.Key_Select || event.key == Qt.Key_Right) {
+                if (event.key === Qt.Key_Return || event.key === Qt.Key_Select || event.key === Qt.Key_Right) {
                     view.currentItem.launch();
                     event.accepted = true;
-                } else if (event.key == Qt.Key_Left) {
+                } else if (event.key === Qt.Key_Left) {
                     up();
                 }
             }
 
-            BorderImage {
-                source: "qrc:/images/titlebar.sci";
+            // titlebar
+            Rectangle {
+                color: "black"
                 width: parent.width;
-                height: 52
-                y: -7
+                height: itemHeight
                 id: titleBar
 
                 Rectangle {
                     id: upButton
-                    width: 48
-                    height: titleBar.height - 7
+                    width: titleBar.height
+                    height: titleBar.height
                     color: "transparent"
-                    Image { anchors.centerIn: parent; source: "qrc:/images/up.png" }
-                    MouseArea { id: upRegion; anchors.centerIn: parent
-                        width: 56
-                        height: 56
-                        onClicked: up()
-                    }
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.margins: scaledMargin
+
+                    Image { anchors.fill: parent; anchors.margins: scaledMargin; source: "qrc:/images/icon_BackArrow.png" }
+                    MouseArea { id: upRegion; anchors.fill: parent; onClicked: up() }
                     states: [
                         State {
                             name: "pressed"
@@ -321,23 +313,23 @@ Rectangle {
                     ]
                 }
 
-                Rectangle {
-                    color: "gray"
-                    x: 48
-                    width: 1
-                    height: 44
-                }
-
                 Text {
                     anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
-                    anchors.leftMargin: 4; anchors.rightMargin: 4
+                    anchors.leftMargin: 10; anchors.rightMargin: 4
                     text: folders.folder
                     color: "white"
-                    elide: Text.ElideLeft; horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter
-                    font.pixelSize: 32
+                    elide: Text.ElideLeft; horizontalAlignment: Text.AlignLeft; verticalAlignment: Text.AlignVCenter
+                    font.pixelSize: fontSize
                 }
             }
 
+            Rectangle {
+                color: "#353535"
+                width: parent.width
+                height: 1
+                anchors.top: titleBar.bottom
+            }
+
             function down(path) {
                 if (folders == folders1) {
                     view = view2
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml
index 716f4165b..b0542cb80 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
 ** Contact: http://www.qt-project.org/legal
 **
 ** This file is part of the Qt Mobility Components.
@@ -39,56 +39,95 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.1
 
 Rectangle {
     id: root
-    color: "white"
-    property int buttonHeight: 35
-    property int topMargin: 0
-
+    color: "#151515"
+    signal openCamera
     signal openImage
     signal openVideo
-    signal openCamera
     signal close
 
-    Rectangle {
-        anchors {
-            top: parent.top;
-            topMargin: root.topMargin
-            bottom: parent.bottom;
-            horizontalCenter: parent.horizontalCenter
-        }
-        width: 0.9 * parent.width
-        color: "transparent"
-
-        Column {
-            anchors.fill: parent
-            spacing: 5
-            Button {
-                text: "Open image"
-                height: buttonHeight
-                width: parent.width
-                onClicked: root.openImage()
-            }
-            Button {
-                text: "Open video"
-                height: buttonHeight
-                width: parent.width
-                onClicked: root.openVideo()
+    Column {
+        anchors.fill: parent
+        spacing: 10
+        Rectangle {
+            height: itemHeight
+            width: itemHeight
+            color: "transparent"
+            anchors.right: parent.right
+            Image {
+                id: menu
+                source: "qrc:///images/icon_Menu.png"
+                anchors {
+                    right: parent.right
+                    top: parent.top
+                    margins: scaledMargin
+                }
             }
-            Button {
-                text: "Start camera"
-                height: buttonHeight
-                width: parent.width
-                onClicked: root.openCamera()
-            }
-            Button {
-                text: "Reset"
-                height: buttonHeight
-                width: parent.width
-                onClicked: root.close()
+            MouseArea {
+                anchors.fill: parent
+                onClicked: fileOpen.state == "expanded" ? fileOpen.state = "collapsed" : fileOpen.state = "expanded"
             }
         }
+        Rectangle {
+            width: 0.9 * parent.width
+            height: 1
+            color: "#353535"
+            anchors.left: parent.left
+        }
+        Button {
+            text: "Start camera"
+            height: itemHeight
+            width: parent.width
+            onClicked: root.openCamera()
+            active: fileOpen.state == "expanded"
+        }
+        Rectangle {
+            width: 0.9 * parent.width
+            height: 1
+            color: "#353535"
+            anchors.left: parent.left
+        }
+        Button {
+            text: "Open image"
+            height: itemHeight
+            width: parent.width
+            onClicked: root.openImage()
+            active: fileOpen.state == "expanded"
+        }
+        Rectangle {
+            width: 0.9 * parent.width
+            height: 1
+            color: "#353535"
+            anchors.left: parent.left
+        }
+        Button {
+            text: "Open video"
+            height: itemHeight
+            width: parent.width
+            onClicked: root.openVideo()
+            active: fileOpen.state == "expanded"
+        }
+        Rectangle {
+            width: 0.9 * parent.width
+            height: 1
+            color: "#353535"
+            anchors.left: parent.left
+        }
+        Button {
+            text: "Reset"
+            height: itemHeight
+            width: parent.width
+            onClicked: root.close()
+            active: fileOpen.state == "expanded"
+        }
+        Rectangle {
+            width: 0.9 * parent.width
+            height: 1
+            color: "#353535"
+            anchors.left: parent.left
+        }
     }
 }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Main.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Main.qml
new file mode 100644
index 000000000..5ec13750f
--- /dev/null
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Main.qml
@@ -0,0 +1,287 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt Mobility Components.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, 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, Digia gives you certain additional
+** rights.  These rights are described in the Digia 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.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.Window 2.1
+
+Rectangle {
+    id: root
+    color: "black"
+    property string fileName
+    property alias volume: content.volume
+    property bool perfMonitorsLogging: false
+    property bool perfMonitorsVisible: false
+    property int pixDens: Math.ceil(Screen.pixelDensity)
+    property int itemWidth: 25 * pixDens
+    property int itemHeight: 10 * pixDens
+    property int windowWidth: Screen.desktopAvailableWidth
+    property int windowHeight: Screen.desktopAvailableHeight
+    property int scaledMargin: 2 * pixDens
+    property int fontSize: 5 * pixDens
+
+    QtObject {
+        id: d
+        property real gripSize: 20
+    }
+
+    Content {
+        id: content
+        color: "transparent"
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+            bottom: parameterPanel.top
+            margins: scaledMargin
+            leftMargin: scaledMargin + itemHeight
+        }
+        gripSize: d.gripSize
+    }
+
+    ParameterPanel {
+        id: parameterPanel
+        anchors {
+            left: parent.left
+            right: listview.left
+            bottom: parent.bottom
+            margins: scaledMargin
+            leftMargin: scaledMargin + itemHeight
+        }
+        gripSize: d.gripSize
+        height: root.itemHeight * 2.5
+        width: root.itemWidth * 3
+
+    }
+
+
+    Button {
+        id: effectName
+        anchors {
+                    right: parent.right
+                    bottom: perfHolder.top
+                    top: content.bottom
+                    margins: scaledMargin
+                }
+
+        text: "No effect"
+        width: itemWidth * 2
+        onClicked: {
+            effectName.visible = false
+            listview.visible = true
+        }
+        color: "#303030"
+    }
+
+
+        ListView {
+            id: listview
+            width: itemWidth * 2
+            anchors {
+                        right: parent.right
+                        bottom: perfHolder.top
+                        top: parent.top
+                        margins: scaledMargin
+                    }
+            visible: false
+
+            model: EffectSelectionList {}
+            delegate: effectDelegate
+
+            highlight: Rectangle { color: "#14aaff"; radius: 5 }
+            highlightFollowsCurrentItem: true
+            highlightRangeMode: ListView.StrictlyEnforceRange
+            clip: true
+            focus: true
+
+            Component {
+                id: effectDelegate
+                Button {
+                    text: name
+                    width: itemWidth * 2
+                    onClicked: {
+                        content.effectSource = source
+                        listview.visible = false
+                        effectName.text = name
+                        effectName.visible = true
+                        parameterPanel.model = content.effect.parameters
+
+                    }
+                }
+            }
+    }
+
+    Rectangle {
+        id: perfHolder
+        color: "transparent"
+        anchors {
+            right: parent.right
+            bottom: parent.bottom
+            margins: scaledMargin
+        }
+        height: root.itemHeight * 1.5
+        width: root.itemWidth
+
+        Loader {
+            id: performanceLoader
+            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 = perfHolder
+                item.anchors.top = perfHolder.top
+                item.anchors.bottom = perfHolder.bottom
+                item.anchors.left = perfHolder.left
+                item.anchors.right = perfHolder.right
+                item.logging = root.perfMonitorsLogging
+                item.displayed = root.perfMonitorsVisible
+                item.init()
+            }
+        }
+    }
+
+    FileOpen {
+        id: fileOpen
+        state: "collapsed"
+        anchors {
+            left: parent.left
+            top: parent.top
+            bottom: parent.bottom
+            margins: scaledMargin
+        }
+        width: itemHeight + scaledMargin
+        z: 2
+        opacity: 0.9
+
+        states: [
+            State {
+                name: "expanded"
+                PropertyChanges {
+                    target: fileOpen
+                    width: itemWidth * 1.5
+                    opacity: 0.8
+                }
+            },
+            State {
+                name: "collapsed"
+                PropertyChanges {
+                    target: fileOpen
+                    width: itemHeight + scaledMargin
+                    opacity: 0.9
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                NumberAnimation { target: fileOpen; property: "width"; duration: 400 }
+                NumberAnimation { target: fileOpen; property: "opacity"; duration: 400 }
+            }
+        ]
+    }
+
+    FileBrowser {
+        id: imageFileBrowser
+        anchors.fill: root
+        Component.onCompleted: fileSelected.connect(content.openImage)
+    }
+
+    FileBrowser {
+        id: videoFileBrowser
+        anchors.fill: root
+        Component.onCompleted: fileSelected.connect(content.openVideo)
+    }
+
+    Component.onCompleted: {
+        fileOpen.openImage.connect(openImage)
+        fileOpen.openVideo.connect(openVideo)
+        fileOpen.openCamera.connect(openCamera)
+        fileOpen.close.connect(close)
+    }
+
+    function init() {
+        if (Qt.platform.os === "linux" || Qt.platform.os === "windows" || Qt.platform.os === "osx" || Qt.platform.os === "unix") {
+            if (Screen.desktopAvailableWidth > 1280) {
+                windowWidth = 1280
+            }
+            if (Screen.desktopAvailableHeight > 720) {
+                windowHeight = 720
+            }
+        }
+
+        height = windowHeight
+        width = windowWidth
+
+        console.log("[qmlvideofx] root.init")
+        console.log("Height: ", Screen.desktopAvailableHeight)
+        console.log("Width: ", Screen.desktopAvailableWidth)
+        console.log("Pixels per mm: ", Math.ceil(Screen.pixelDensity))
+        console.log("Orientation: ", Screen.orientation)
+        imageFileBrowser.folder = imagePath
+        videoFileBrowser.folder = videoPath
+        content.init()
+        performanceLoader.init()
+        if (fileName != "")
+            content.openVideo(fileName)
+    }
+
+    function qmlFramePainted() {
+        if (performanceLoader.item)
+            performanceLoader.item.qmlFramePainted()
+    }
+
+    function openImage() {
+        imageFileBrowser.show()
+    }
+
+    function openVideo() {
+        videoFileBrowser.show()
+    }
+
+    function openCamera() {
+        content.openCamera()
+    }
+
+    function close() {
+        content.init()
+    }
+}
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ParameterPanel.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ParameterPanel.qml
index 83c0d4c8d..aa4315c9d 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ParameterPanel.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ParameterPanel.qml
@@ -47,17 +47,12 @@ Rectangle {
     height: view.model.count * sliderHeight
     property color lineColor: "black"
     property real gripSize: 25
-    property real spacing: 10
-    property real sliderHeight: 40
+    property real spacing: 20
+    property real sliderHeight: 60
 
     property ListModel model: ListModel { }
 
-    Rectangle {
-        anchors.fill: parent
-        color: "black"
-        opacity: 0.5
-        radius: 10
-    }
+    anchors.topMargin: 10
 
     Component {
         id: editDelegate
@@ -77,10 +72,10 @@ Rectangle {
                     bottom: parent.bottom
                     left: parent.left
                 }
-                font.pixelSize: 0.5 * parent.height
+                font.pixelSize: fontSize
                 horizontalAlignment: Text.AlignRight
                 verticalAlignment: Text.AlignVCenter
-                width: 150
+                width: 8 * fontSize
             }
 
             Slider {
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Slider.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Slider.qml
index c12537022..97b52c87b 100644
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Slider.qml
+++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Slider.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
 ** Contact: http://www.qt-project.org/legal
 **
 ** This file is part of the Qt Mobility Components.
@@ -39,91 +39,84 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.1
 
 Rectangle {
     id: root
     color: "transparent"
     radius: 5
     property alias value: grip.value
-    property color fillColor: "white"
-    property color lineColor: "black"
-    property color gripColor: "white"
-    property real gripSize: 20
+    property color fillColor: "#14aaff"
+    property real gripSize: 40
     property real gripTolerance: 3.0
     property real increment: 0.1
     property bool enabled: true
 
     Rectangle {
-        anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter }
-        height: 3
-        color: displayedColor(root.lineColor)
+        id: slider
+        anchors {
+            left: parent.left
+            right: parent.right
+            verticalCenter: parent.verticalCenter
+        }
+        height: 10
+        color: "transparent"
 
+        BorderImage {
+           id: sliderbarimage
+           source: "qrc:/images/Slider_bar.png"
+           anchors { fill: parent; margins: 1 }
+           border.right: 5
+           border.left: 5
+        }
         Rectangle {
-            anchors { fill: parent; margins: 1 }
+            height: parent.height -2
+            anchors.left: parent.left
+            anchors.right: grip.horizontalCenter
             color: root.fillColor
+            radius: 3
+            border.width: 1
+            border.color: Qt.darker(color, 1.3)
+            opacity: 0.8
         }
-    }
+        Rectangle {
+            id: grip
+            property real value: 0.5
+            x: (value * parent.width) - width/2
+            anchors.verticalCenter: parent.verticalCenter
+            width: root.gripTolerance * root.gripSize
+            height: width
+            radius: width/2
+            color: "transparent"
 
-    MouseArea {
-        anchors.fill: parent
-        enabled: root.enabled
-        onClicked: {
-            if (parent.width) {
-                var newValue = mouse.x / parent.width
-                if (Math.abs(newValue - parent.value) > parent.increment) {
-                    if (newValue > parent.value)
-                        parent.value = Math.min(1.0, parent.value + parent.increment)
-                    else
-                        parent.value = Math.max(0.0, parent.value - parent.increment)
-                }
+            Image {
+                id: sliderhandleimage
+                source: "qrc:/images/Slider_handle.png"
+                anchors.centerIn: parent
             }
-        }
-    }
-
-    Rectangle {
-        id: grip
-        property real value: 0.5
-        x: (value * parent.width) - width/2
-        anchors.verticalCenter: parent.verticalCenter
-        width: root.gripTolerance * root.gripSize
-        height: width
-        radius: width/2
-        color: "transparent"
 
-        MouseArea {
-            id: mouseArea
-            enabled: root.enabled
-            anchors.fill:  parent
-            drag {
-                target: grip
-                axis: Drag.XAxis
-                minimumX: -parent.width/2
-                maximumX: root.width - parent.width/2
-            }
-            onPositionChanged:  {
-                if (drag.active)
+            MouseArea {
+                id: mouseArea
+                enabled: root.enabled
+                anchors.fill:  parent
+                drag {
+                    target: grip
+                    axis: Drag.XAxis
+                    minimumX: -parent.width/2
+                    maximumX: root.width - parent.width/2
+                }
+                onPositionChanged:  {
+                    if (drag.active)
+                        updatePosition()
+                }
+                onReleased: {
                     updatePosition()
-            }
-            onReleased: {
-                updatePosition()
-            }
-            function updatePosition() {
-                value = (grip.x + grip.width/2) / grip.parent.width
+                }
+                function updatePosition() {
+                    value = (grip.x + grip.width/2) / slider.width
+                }
             }
         }
 
-        Rectangle {
-            anchors.centerIn: parent
-            width: root.gripSize
-            height: width
-            radius: width/2
-            color: root.gripColor
-        }
-    }
-
-    function displayedColor(c) {
-        var tint = Qt.rgba(c.r, c.g, c.b, 0.25)
-        return enabled ? c : Qt.tint(c, tint)
     }
 }
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml
deleted file mode 100644
index 63a0a01ac..000000000
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml
+++ /dev/null
@@ -1,186 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the Qt Mobility Components.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and Digia.  For licensing terms and
-** conditions see http://qt.digia.com/licensing.  For further information
-** use the contact form at http://qt.digia.com/contact-us.
-**
-** GNU Lesser General Public License Usage
-** Alternatively, 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, Digia gives you certain additional
-** rights.  These rights are described in the Digia 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.
-**
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Rectangle {
-    id: root
-    width: 900
-    height: 600
-    color: "grey"
-    property string fileName
-    property alias volume: content.volume
-    property bool perfMonitorsLogging: false
-    property bool perfMonitorsVisible: false
-
-    QtObject {
-        id: d
-        property real gripSize: 20
-    }
-
-    Rectangle {
-        id: inner
-        anchors.fill: parent
-        color: "grey"
-
-        Content {
-            id: content
-            anchors {
-                top: parent.top
-                bottom: parent.bottom
-                left: parent.left
-                right: effectSelectionPanel.left
-                margins: 5
-            }
-            gripSize: d.gripSize
-            width: 600
-            height: 600
-        }
-
-        Loader {
-            id: performanceLoader
-            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 = content
-                item.anchors.top = content.top
-                item.anchors.left = content.left
-                item.anchors.right = content.right
-                item.logging = root.perfMonitorsLogging
-                item.displayed = root.perfMonitorsVisible
-                item.init()
-            }
-        }
-
-        ParameterPanel {
-            id: parameterPanel
-            anchors {
-                left: parent.left
-                bottom: parent.bottom
-                right: effectSelectionPanel.left
-                margins: 20
-            }
-            gripSize: d.gripSize
-        }
-
-        EffectSelectionPanel {
-            id: effectSelectionPanel
-            anchors {
-                top: parent.top
-                bottom: fileOpen.top
-                right: parent.right
-                margins: 5
-            }
-            width: 300
-            itemHeight: 40
-             onEffectSourceChanged: {
-                content.effectSource = effectSource
-                parameterPanel.model = content.effect.parameters
-            }
-        }
-
-        FileOpen {
-            id: fileOpen
-            anchors {
-                right: parent.right
-                bottom: parent.bottom
-                margins: 5
-            }
-            width: effectSelectionPanel.width
-            height: 165
-            buttonHeight: 32
-            topMargin: 10
-        }
-    }
-
-    FileBrowser {
-        id: imageFileBrowser
-        anchors.fill: root
-        Component.onCompleted: fileSelected.connect(content.openImage)
-    }
-
-    FileBrowser {
-        id: videoFileBrowser
-        anchors.fill: root
-        Component.onCompleted: fileSelected.connect(content.openVideo)
-    }
-
-    Component.onCompleted: {
-        fileOpen.openImage.connect(openImage)
-        fileOpen.openVideo.connect(openVideo)
-        fileOpen.openCamera.connect(openCamera)
-        fileOpen.close.connect(close)
-    }
-
-    function init() {
-        console.log("[qmlvideofx] main.init")
-        imageFileBrowser.folder = imagePath
-        videoFileBrowser.folder = videoPath
-        content.init()
-        performanceLoader.init()
-        if (fileName != "")
-            content.openVideo(fileName)
-    }
-
-    function qmlFramePainted() {
-        if (performanceLoader.item)
-            performanceLoader.item.qmlFramePainted()
-    }
-
-    function openImage() {
-        imageFileBrowser.show()
-    }
-
-    function openVideo() {
-        videoFileBrowser.show()
-    }
-
-    function openCamera() {
-        content.openCamera()
-    }
-
-    function close() {
-        content.openImage("qrc:/images/qt-logo.png")
-    }
-}
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml
deleted file mode 100644
index f715dc8c1..000000000
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml
+++ /dev/null
@@ -1,408 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the Qt Mobility Components.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and Digia.  For licensing terms and
-** conditions see http://qt.digia.com/licensing.  For further information
-** use the contact form at http://qt.digia.com/contact-us.
-**
-** GNU Lesser General Public License Usage
-** Alternatively, 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, Digia gives you certain additional
-** rights.  These rights are described in the Digia 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.
-**
-**
-** $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")
-    }
-}
diff --git a/examples/multimedia/video/qmlvideofx/qmlvideofx.pro b/examples/multimedia/video/qmlvideofx/qmlvideofx.pro
index 563444903..e9633954c 100644
--- a/examples/multimedia/video/qmlvideofx/qmlvideofx.pro
+++ b/examples/multimedia/video/qmlvideofx/qmlvideofx.pro
@@ -10,10 +10,12 @@ RESOURCES += qmlvideofx.qrc
 
 include($$PWD/../snippets/performancemonitor/performancemonitordeclarative.pri)
 
-maemo6: {
-    DEFINES += SMALL_SCREEN_LAYOUT
-    DEFINES += SMALL_SCREEN_PHYSICAL
-}
-
 target.path = $$[QT_INSTALL_EXAMPLES]/multimedia/video/qmlvideofx
 INSTALLS += target
+
+ANDROID_PACKAGE_SOURCE_DIR = $$PWD/android
+
+OTHER_FILES += \
+    android/AndroidManifest.xml
+
+QMAKE_INFO_PLIST = Info.plist
diff --git a/examples/multimedia/video/qmlvideofx/qmlvideofx.qrc b/examples/multimedia/video/qmlvideofx/qmlvideofx.qrc
index 93cb4f1f5..e7a361246 100644
--- a/examples/multimedia/video/qmlvideofx/qmlvideofx.qrc
+++ b/examples/multimedia/video/qmlvideofx/qmlvideofx.qrc
@@ -1,10 +1,5 @@
 <RCC>
     <qresource prefix="/">
-        <file>images/close.png</file>
-        <file>images/folder.png</file>
-        <file>images/titlebar.png</file>
-        <file>images/titlebar.sci</file>
-        <file>images/up.png</file>
         <file>images/qt-logo.png</file>
         <file>qml/qmlvideofx/Button.qml</file>
         <file>qml/qmlvideofx/Content.qml</file>
@@ -26,12 +21,10 @@
         <file>qml/qmlvideofx/EffectPixelate.qml</file>
         <file>qml/qmlvideofx/EffectPosterize.qml</file>
         <file>qml/qmlvideofx/EffectRipple.qml</file>
-        <file>qml/qmlvideofx/EffectSelectionPanel.qml</file>
         <file>qml/qmlvideofx/EffectSepia.qml</file>
         <file>qml/qmlvideofx/EffectSharpen.qml</file>
         <file>qml/qmlvideofx/EffectShockwave.qml</file>
         <file>qml/qmlvideofx/EffectSobelEdgeDetection1.qml</file>
-        <file>qml/qmlvideofx/EffectSobelEdgeDetection2.qml</file>
         <file>qml/qmlvideofx/EffectTiltShift.qml</file>
         <file>qml/qmlvideofx/EffectToon.qml</file>
         <file>qml/qmlvideofx/EffectVignette.qml</file>
@@ -40,8 +33,6 @@
         <file>qml/qmlvideofx/FileBrowser.qml</file>
         <file>qml/qmlvideofx/FileOpen.qml</file>
         <file>qml/qmlvideofx/HintedMouseArea.qml</file>
-        <file>qml/qmlvideofx/main-largescreen.qml</file>
-        <file>qml/qmlvideofx/main-smallscreen.qml</file>
         <file>qml/qmlvideofx/ParameterPanel.qml</file>
         <file>qml/qmlvideofx/Slider.qml</file>
         <file>shaders/billboard.fsh</file>
@@ -61,11 +52,21 @@
         <file>shaders/sharpen.fsh</file>
         <file>shaders/shockwave.fsh</file>
         <file>shaders/sobeledgedetection1.fsh</file>
-        <file>shaders/sobeledgedetection2.fsh</file>
         <file>shaders/tiltshift.fsh</file>
         <file>shaders/toon.fsh</file>
         <file>shaders/vignette.fsh</file>
         <file>shaders/warhol.fsh</file>
         <file>shaders/wobble.fsh</file>
+        <file>images/Slider_handle.png</file>
+        <file>images/Slider_bar.png</file>
+        <file>qml/qmlvideofx/Curtain.qml</file>
+        <file>images/Triangle_bottom.png</file>
+        <file>images/Triangle_Top.png</file>
+        <file>images/Dropdown_arrows.png</file>
+        <file>images/icon_Folder.png</file>
+        <file>images/icon_BackArrow.png</file>
+        <file>qml/qmlvideofx/Main.qml</file>
+        <file>images/icon_Menu.png</file>
+        <file>qml/qmlvideofx/EffectSelectionList.qml</file>
     </qresource>
 </RCC>
author	Niels Weber <niels.weber@digia.com>	2014-04-14 18:36:40 +0200
committer	The Qt Project <gerrit-noreply@qt-project.org>	2014-04-18 20:10:23 +0200
commit	4c8284de46052970de001c5c9b96c4fa365f89b4 (patch)
tree	6472dde8f00634b02256bfc0650ee984acc3e3ec
parent	af73d55efffa1dca928038cd4f392eb7def7c7e1 (diff)
download	qtmultimedia-4c8284de46052970de001c5c9b96c4fa365f89b4.tar.gz