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>
2012-02-06 15:40:49 +00:00
parent b6f54c8833
commit c1ec175b24
7 changed files with 112 additions and 54 deletions
--- a/examples/video/qmlvideo/qml/qmlvideo/main.qml
+++ b/examples/video/qmlvideo/qml/qmlvideo/main.qml
@@ -69,16 +69,27 @@ Rectangle {

    Loader {
        id: performanceLoader
+
+        Connections {
+            target: inner
+            onVisibleChanged:
+                if (performanceLoader.item)
+                    performanceLoader.item.enabled = !inner.visible
+            ignoreUnknownSignals: true
+        }
+
        function init() {
            console.log("[qmlvideo] 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.fill = root
            item.logging = root.perfMonitorsLogging
            item.displayed = root.perfMonitorsVisible
+            item.enabled = false
            item.init()
        }
    }
--- a/examples/video/qmlvideofx/qml/qmlvideofx/FileBrowser.qml
+++ b/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)

--- a/examples/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml
+++ b/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
        }
--- a/examples/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml
+++ b/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
        }
    }

--- a/examples/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml
+++ b/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 {
--- a/examples/video/snippets/frequencymonitor/qml/frequencymonitor/FrequencyItem.qml
+++ b/examples/video/snippets/frequencymonitor/qml/frequencymonitor/FrequencyItem.qml
@@ -55,7 +55,7 @@ Rectangle {

    border.width: 1
    border.color: "yellow"
-    width: 3.5 * root.textSize
+    width: 5.5 * root.textSize
    height: 3.0 * root.textSize
    color: "black"
    opacity: 0.5
@@ -74,20 +74,22 @@ Rectangle {
        samplingInterval: root.enabled ? root.samplingInterval : 0
        onAverageFrequencyChanged: {
            if (root.logging) trace()
-            instantaneousFrequencyText.text = monitor.instantaneousFrequency.toFixed(2)
            averageFrequencyText.text = monitor.averageFrequency.toFixed(2)
        }
    }

    Text {
-        id: instantaneousFrequencyText
+        id: labelText
        anchors {
-            right: parent.right
+            left: parent.left
            top: parent.top
            margins: 10
        }
        color: root.textColor
-        font.pixelSize: root.textSize
+        font.pixelSize: 0.6 * root.textSize
+        text: root.label
+        width: root.width - 2*anchors.margins
+        elide: Text.ElideRight
    }

    Text {
--- a/examples/video/snippets/performancemonitor/qml/performancemonitor/PerformanceItem.qml
+++ b/examples/video/snippets/performancemonitor/qml/performancemonitor/PerformanceItem.qml
@@ -46,65 +46,96 @@ Rectangle {
    property bool logging: true
    property bool displayed: true
    property bool videoActive
-    property int samplingInterval: 500
-    property color textColor: "yellow"
-    property int textSize: 28
    property int margins: 5
+    property bool enabled: true

    color: "transparent"

    // This should ensure that the monitor is on top of all other content
    z: 999

-    Loader {
-        id: videoFrameRateItemLoader
-        function init() {
-            source = "../frequencymonitor/FrequencyItem.qml"
-            item.label = "videoFrameRate"
-            item.parent = root
-            item.anchors.left = root.left
-            item.anchors.top = root.top
-            item.anchors.margins = root.margins
-            item.logging = root.logging
-            item.displayed = root.displayed
-            videoFrameRateActiveConnections.target = item
-        }
-
-        Connections {
-            id: videoFrameRateActiveConnections
-            ignoreUnknownSignals: true
-            onActiveChanged: root.videoActive = videoFrameRateActiveConnections.target.active
+    Column {
+        id: column
+        anchors {
+            fill: root
+            margins: 10
        }
+        spacing: 10
    }

-    Loader {
-        id: qmlFrameRateItemLoader
-        function init() {
-            source = "../frequencymonitor/FrequencyItem.qml"
-            item.label = "qmlFrameRate"
-            item.parent = root
-            item.anchors.left = root.left
-            item.anchors.bottom = root.bottom
-            item.anchors.margins = root.margins
-            item.logging = root.logging
-            item.displayed = root.displayed
-        }
+    QtObject {
+        id: d
+        property Item qmlFrameRateItem: null
+        property Item videoFrameRateItem: null
    }

+    Connections {
+        id: videoFrameRateActiveConnections
+        ignoreUnknownSignals: true
+        onActiveChanged: root.videoActive = videoFrameRateActiveConnections.target.active
+    }
+
+    states: [
+        State {
+            name: "hidden"
+            PropertyChanges {
+                target: root
+                opacity: 0
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "*"
+            to: "*"
+            NumberAnimation {
+                properties: "opacity"
+                easing.type: Easing.OutQuart
+                duration: 500
+            }
+        }
+    ]
+
+    state: enabled ? "baseState" : "hidden"
+
+    function createQmlFrameRateItem() {
+        var component = Qt.createComponent("../frequencymonitor/FrequencyItem.qml")
+        if (component.status == Component.Ready)
+            d.qmlFrameRateItem = component.createObject(column, { label: "QML frame rate",
+                                                                   displayed: root.displayed,
+                                                                  logging: root.logging
+                                                                })
+    }
+
+    function createVideoFrameRateItem() {
+        var component = Qt.createComponent("../frequencymonitor/FrequencyItem.qml")
+        if (component.status == Component.Ready)
+            d.videoFrameRateItem = component.createObject(column, { label: "Video frame rate",
+                                                                     displayed: root.displayed,
+                                                                    logging: root.logging
+                                                                  })
+        videoFrameRateActiveConnections.target = d.videoFrameRateItem
+    }
+
+
    function init() {
-        videoFrameRateItemLoader.init()
-        qmlFrameRateItemLoader.init()
+        createQmlFrameRateItem()
+        createVideoFrameRateItem()
    }

    function videoFramePainted() {
-        videoFrameRateItemLoader.item.notify()
+        if (d.videoFrameRateItem)
+            d.videoFrameRateItem.notify()
    }

    function qmlFramePainted() {
-        qmlFrameRateItemLoader.item.notify()
+        if (d.qmlFrameRateItem)
+            d.qmlFrameRateItem.notify()
    }

    onVideoActiveChanged: {
-        videoFrameRateItemLoader.item.active = root.videoActive
+        if (d.videoFrameRateItem)
+            d.videoFrameRateItem.active = root.videoActive
    }
 }