From c1ec175b24bde1523fcbd7e33d0f46f3bbc1def9 Mon Sep 17 00:00:00 2001 From: Gareth Stockwell Date: Mon, 6 Feb 2012 15:40:49 +0000 Subject: 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 --- examples/video/qmlvideo/qml/qmlvideo/main.qml | 11 +++ .../qmlvideofx/qml/qmlvideofx/FileBrowser.qml | 1 + .../video/qmlvideofx/qml/qmlvideofx/FileOpen.qml | 4 +- .../qmlvideofx/qml/qmlvideofx/main-largescreen.qml | 3 +- .../qmlvideofx/qml/qmlvideofx/main-smallscreen.qml | 28 ++++-- .../qml/frequencymonitor/FrequencyItem.qml | 12 ++- .../qml/performancemonitor/PerformanceItem.qml | 103 ++++++++++++++------- 7 files changed, 110 insertions(+), 52 deletions(-) diff --git a/examples/video/qmlvideo/qml/qmlvideo/main.qml b/examples/video/qmlvideo/qml/qmlvideo/main.qml index 261a3357b..a2dc29ed6 100644 --- 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() } } diff --git a/examples/video/qmlvideofx/qml/qmlvideofx/FileBrowser.qml b/examples/video/qmlvideofx/qml/qmlvideofx/FileBrowser.qml index 6467ba085..abaa3b4ed 100644 --- 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) diff --git a/examples/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml b/examples/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml index 7347f7da3..39f18ff23 100644 --- 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 } diff --git a/examples/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml b/examples/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml index d7e1b12f1..246616db2 100644 --- 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 } } diff --git a/examples/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml b/examples/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml index e9cf44678..91bdefe73 100644 --- 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 { diff --git a/examples/video/snippets/frequencymonitor/qml/frequencymonitor/FrequencyItem.qml b/examples/video/snippets/frequencymonitor/qml/frequencymonitor/FrequencyItem.qml index f12b67788..b4d43443e 100644 --- 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 { diff --git a/examples/video/snippets/performancemonitor/qml/performancemonitor/PerformanceItem.qml b/examples/video/snippets/performancemonitor/qml/performancemonitor/PerformanceItem.qml index dd38aaeca..5bdfa3e8b 100644 --- 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 + Column { + id: column + anchors { + fill: root + margins: 10 } + spacing: 10 + } - Connections { - id: videoFrameRateActiveConnections - ignoreUnknownSignals: true - onActiveChanged: root.videoActive = videoFrameRateActiveConnections.target.active - } + QtObject { + id: d + property Item qmlFrameRateItem: null + property Item videoFrameRateItem: null + } + + Connections { + id: videoFrameRateActiveConnections + ignoreUnknownSignals: true + onActiveChanged: root.videoActive = videoFrameRateActiveConnections.target.active } - 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 + 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 } } -- cgit v1.2.3