Tidy up frame rate display in video examples

* Use a Column element to position QML and video frame rate counters.
* When using small-screen layouts, hide frame rate counters when dialogs
  or menus are displayed.
* Do not display instantaneous frame rate.  If changes in this rate
  trigger a repaint, then the rate itself is changed.  If the repaint
  occurs in less time than the QElapsedTimer resolution, the displayed
  instantaneous rate is always zero.
* Add a label, so it is clear which is the QML repaint rate, and which
  is the video frame rate.

Change-Id: Ie58ab162ab44bd7f1c4b297eed929b9baa73552c
Reviewed-by: Jonas Rabbe <jonas.rabbe@nokia.com>

examples/video/qmlvideofx/qml/qmlvideofx/FileBrowser.qml

@@ -47,6 +47,7 @@ Rectangle {
     color: "transparent"
 
     property string folder
+    property bool shown: loader.sourceComponent
 
     signal fileSelected(string file)
 

examples/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml

@@ -45,6 +45,7 @@ Rectangle {
     id: root
     color: "white"
     property int buttonHeight: 35
+    property int topMargin: 0
 
     signal openImage
     signal openVideo
@@ -53,9 +54,8 @@ Rectangle {
 
     Rectangle {
         anchors {
-            topMargin: 10
-            bottomMargin: 10
             top: parent.top;
+            topMargin: root.topMargin
             bottom: parent.bottom;
             horizontalCenter: parent.horizontalCenter
         }

examples/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml

@@ -79,8 +79,6 @@ Rectangle {
                 item.anchors.top = content.top
                 item.anchors.left = content.left
                 item.anchors.right = content.right
-                item.height = 100
-                item.anchors.margins = 5
                 item.logging = root.perfMonitorsLogging
                 item.displayed = root.perfMonitorsVisible
                 item.init()
@@ -123,6 +121,7 @@ Rectangle {
                 margins: 5
             }
             buttonHeight: 32
+            topMargin: 10
         }
     }
 

examples/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml

@@ -51,6 +51,14 @@ Rectangle {
     property bool perfMonitorsLogging: false
     property bool perfMonitorsVisible: false
 
+    QtObject {
+        id: d
+        property bool dialogShown: (fileOpenContainer.state == "shown" ||
+                                    effectSelectionPanel.state == "shown" ||
+                                    videoFileBrowser.shown ||
+                                    imageFileBrowser.shown)
+    }
+
     // Create ScreenSaver element via Loader, so this app will still run if the
     // SystemInfo module is not available
     Loader {
@@ -59,18 +67,25 @@ Rectangle {
 
     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.topMargin = 100
             item.anchors.left = root.left
-            item.anchors.right = root.right
-            item.anchors.bottom = root.verticalCenter
             item.logging = root.perfMonitorsLogging
             item.displayed = root.perfMonitorsVisible
             item.init()
@@ -121,8 +136,7 @@ Rectangle {
                 }
             ]
 
-            enabled: false
-            state: enabled ? "shown" : "baseState"
+            state: (enabled && !d.dialogShown) ? "shown" : "baseState"
         }
 
         EffectSelectionPanel {
@@ -295,7 +309,7 @@ Rectangle {
                 splashScreen.state = "hidden"
                 fileOpenContainer.state = "shown"
             }
-            enabled: (fileOpenContainer.state != "shown" && effectSelectionPanel.state != "shown")
+            enabled: !d.dialogShown
         }
 
         HintedMouseArea {
@@ -313,7 +327,7 @@ Rectangle {
                 splashScreen.state = "hidden"
                 effectSelectionPanel.state = "shown"
             }
-            enabled: (fileOpenContainer.state != "shown" && effectSelectionPanel.state != "shown")
+            enabled: !d.dialogShown
         }
 
         Image {