From 2939c9953ad08e659722c2b832f2c35db6de0115 Mon Sep 17 00:00:00 2001 From: Niels Weber Date: Mon, 28 Apr 2014 09:27:03 +0200 Subject: Add missing background for effect selection list. Also remove highlight and fix button text color. Make Menu animation faster. Task-number: QTBUG-38121 Change-Id: I7d5868d370a8dc7925cee5e694ae043970c569d9 Reviewed-by: Sami Makkonen Reviewed-by: Thomas Hartmann --- .../video/qmlvideofx/qml/qmlvideofx/Button.qml | 3 +- .../video/qmlvideofx/qml/qmlvideofx/Main.qml | 36 +++++++++++++--------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Button.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Button.qml index dd7cca602..203352832 100644 --- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Button.qml +++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Button.qml @@ -60,7 +60,6 @@ Rectangle { Rectangle { anchors { fill: parent; margins: 1 } color: mouseArea.pressed ? bgColorSelected : bgColor - radius: 0.1 * height Text { id: text @@ -68,7 +67,7 @@ Rectangle { text: root.text anchors { fill: parent; margins: scaledMargin } font.pixelSize: fontSize - color: mouseArea.pressed ? bgColor : textColor + color: textColor horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Main.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Main.qml index 5ec13750f..e39eeafd7 100644 --- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Main.qml +++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Main.qml @@ -80,7 +80,7 @@ Rectangle { id: parameterPanel anchors { left: parent.left - right: listview.left + right: effectName.left bottom: parent.bottom margins: scaledMargin leftMargin: scaledMargin + itemHeight @@ -88,46 +88,50 @@ Rectangle { 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 + height: itemHeight onClicked: { effectName.visible = false listview.visible = true + lvbg.visible = true } color: "#303030" } + Rectangle { + id: lvbg + width: itemWidth * 2 + color: "black" + opacity: 0.8 + visible: false + + anchors { + right: parent.right + bottom: perfHolder.top + top: parent.top + margins: scaledMargin + } ListView { id: listview width: itemWidth * 2 - anchors { - right: parent.right - bottom: perfHolder.top - top: parent.top - margins: scaledMargin - } + anchors.fill: parent visible: false model: EffectSelectionList {} delegate: effectDelegate - highlight: Rectangle { color: "#14aaff"; radius: 5 } - highlightFollowsCurrentItem: true - highlightRangeMode: ListView.StrictlyEnforceRange clip: true focus: true @@ -139,6 +143,7 @@ Rectangle { onClicked: { content.effectSource = source listview.visible = false + lvbg.visible = false effectName.text = name effectName.visible = true parameterPanel.model = content.effect.parameters @@ -146,6 +151,7 @@ Rectangle { } } } + } } Rectangle { @@ -213,8 +219,8 @@ Rectangle { transitions: [ Transition { - NumberAnimation { target: fileOpen; property: "width"; duration: 400 } - NumberAnimation { target: fileOpen; property: "opacity"; duration: 400 } + NumberAnimation { target: fileOpen; property: "width"; duration: 100 } + NumberAnimation { target: fileOpen; property: "opacity"; duration: 100 } } ] } -- cgit v1.2.1 From c5d184cbe38d8024c6354952d3103423d51638ec Mon Sep 17 00:00:00 2001 From: Niels Weber Date: Mon, 28 Apr 2014 09:39:16 +0200 Subject: Selecting something now closes menu On a closed menu, the text is now hidden. Task-number: QTBUG-38121 Change-Id: I305fd4f24768115ed21495857cce672d8cbd2135 Reviewed-by: Petref Saraci Reviewed-by: Thomas Hartmann --- .../video/qmlvideofx/qml/qmlvideofx/FileOpen.qml | 76 ++++++++++++++-------- 1 file changed, 48 insertions(+), 28 deletions(-) diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml index b0542cb80..a4de2cbb9 100644 --- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml +++ b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/FileOpen.qml @@ -49,28 +49,40 @@ Rectangle { signal openVideo signal close - 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 - } - } - MouseArea { - anchors.fill: parent - onClicked: fileOpen.state == "expanded" ? fileOpen.state = "collapsed" : fileOpen.state = "expanded" + + Rectangle { + id: menuField + 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 } } + MouseArea { + anchors.fill: parent + onClicked: fileOpen.state == "expanded" ? fileOpen.state = "collapsed" : fileOpen.state = "expanded" + } + } + + Column { + anchors { + top: menuField.bottom + right: parent.right + left: parent.left + bottom: parent.bottom + topMargin: 10 + } + + spacing: 10 + visible: fileOpen.state == "expanded" + Rectangle { width: 0.9 * parent.width height: 1 @@ -81,8 +93,10 @@ Rectangle { text: "Start camera" height: itemHeight width: parent.width - onClicked: root.openCamera() - active: fileOpen.state == "expanded" + onClicked: { + fileOpen.state = "collapsed" + root.openCamera() + } } Rectangle { width: 0.9 * parent.width @@ -94,8 +108,10 @@ Rectangle { text: "Open image" height: itemHeight width: parent.width - onClicked: root.openImage() - active: fileOpen.state == "expanded" + onClicked: { + fileOpen.state = "collapsed" + root.openImage() + } } Rectangle { width: 0.9 * parent.width @@ -107,8 +123,10 @@ Rectangle { text: "Open video" height: itemHeight width: parent.width - onClicked: root.openVideo() - active: fileOpen.state == "expanded" + onClicked: { + fileOpen.state = "collapsed" + root.openVideo() + } } Rectangle { width: 0.9 * parent.width @@ -120,8 +138,10 @@ Rectangle { text: "Reset" height: itemHeight width: parent.width - onClicked: root.close() - active: fileOpen.state == "expanded" + onClicked: { + fileOpen.state = "collapsed" + root.close() + } } Rectangle { width: 0.9 * parent.width -- cgit v1.2.1 From 02c0229a058e0779d236bec4c48bdad7d3d78399 Mon Sep 17 00:00:00 2001 From: Niels Weber Date: Mon, 28 Apr 2014 10:52:33 +0200 Subject: Handle resizing of mainwindow better Task-number: QTBUG-38121 Change-Id: I877fd5c626418a91850d43de31e71351c14eef25 Reviewed-by: Sami Makkonen Reviewed-by: Thomas Hartmann --- examples/multimedia/video/qmlvideofx/main.cpp | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/multimedia/video/qmlvideofx/main.cpp b/examples/multimedia/video/qmlvideofx/main.cpp index f221c954a..1b09f7aa4 100644 --- a/examples/multimedia/video/qmlvideofx/main.cpp +++ b/examples/multimedia/video/qmlvideofx/main.cpp @@ -122,7 +122,8 @@ int main(int argc, char *argv[]) viewer.setTitle("qmlvideofx"); viewer.setFlags(Qt::Window | Qt::WindowSystemMenuHint | Qt::WindowTitleHint | Qt::WindowMinMaxButtonsHint | Qt::WindowCloseButtonHint); - viewer.setMinimumSize(QSize(640, 360)); + viewer.setMinimumSize(QSize(1280, 720)); + viewer.setResizeMode(QQuickView::SizeRootObjectToView); viewer.show(); -- cgit v1.2.1 From 82d96105cea1bca034119adf54a2614c67a24c13 Mon Sep 17 00:00:00 2001 From: Niels Weber Date: Tue, 22 Apr 2014 12:13:23 +0200 Subject: Fix documentation of qmlvideofx example Make the documentation fit to the current state of the example. Task-number: QTBUG-38121 Change-Id: I3379e3328d07ef8bcdb35a5e3821ab194c3443c4 Reviewed-by: Leena Miettinen Reviewed-by: Sami Makkonen Reviewed-by: Yoann Lopes --- .../video/doc/images/qmlvideofx-camera-glow.jpg | Bin 0 -> 74914 bytes .../video/doc/images/qmlvideofx-camera-glow.png | Bin 250540 -> 0 bytes .../video/doc/images/qmlvideofx-camera-magnify.png | Bin 204923 -> 0 bytes .../video/doc/images/qmlvideofx-camera-wobble.jpg | Bin 0 -> 62992 bytes .../video/doc/images/qmlvideofx-effects-menu.jpg | Bin 0 -> 84990 bytes .../video/doc/images/qmlvideofx-effects-menu.png | Bin 171257 -> 0 bytes .../video/doc/images/qmlvideofx-source-menu.png | Bin 257292 -> 0 bytes .../doc/images/qmlvideofx-video-edgedetection.jpg | Bin 0 -> 108916 bytes .../doc/images/qmlvideofx-video-edgedetection.png | Bin 279883 -> 0 bytes .../video/doc/images/qmlvideofx-video-pagecurl.jpg | Bin 0 -> 61450 bytes .../video/doc/images/qmlvideofx-video-pagecurl.png | Bin 220606 -> 0 bytes examples/multimedia/video/doc/src/qmlvideofx.qdoc | 27 +++++++-------------- 12 files changed, 9 insertions(+), 18 deletions(-) create mode 100644 examples/multimedia/video/doc/images/qmlvideofx-camera-glow.jpg delete mode 100644 examples/multimedia/video/doc/images/qmlvideofx-camera-glow.png delete mode 100644 examples/multimedia/video/doc/images/qmlvideofx-camera-magnify.png create mode 100644 examples/multimedia/video/doc/images/qmlvideofx-camera-wobble.jpg create mode 100644 examples/multimedia/video/doc/images/qmlvideofx-effects-menu.jpg delete mode 100644 examples/multimedia/video/doc/images/qmlvideofx-effects-menu.png delete mode 100644 examples/multimedia/video/doc/images/qmlvideofx-source-menu.png create mode 100644 examples/multimedia/video/doc/images/qmlvideofx-video-edgedetection.jpg delete mode 100644 examples/multimedia/video/doc/images/qmlvideofx-video-edgedetection.png create mode 100644 examples/multimedia/video/doc/images/qmlvideofx-video-pagecurl.jpg delete mode 100644 examples/multimedia/video/doc/images/qmlvideofx-video-pagecurl.png diff --git a/examples/multimedia/video/doc/images/qmlvideofx-camera-glow.jpg b/examples/multimedia/video/doc/images/qmlvideofx-camera-glow.jpg new file mode 100644 index 000000000..777ed4ffc Binary files /dev/null and b/examples/multimedia/video/doc/images/qmlvideofx-camera-glow.jpg differ diff --git a/examples/multimedia/video/doc/images/qmlvideofx-camera-glow.png b/examples/multimedia/video/doc/images/qmlvideofx-camera-glow.png deleted file mode 100644 index aca874b6c..000000000 Binary files a/examples/multimedia/video/doc/images/qmlvideofx-camera-glow.png and /dev/null differ diff --git a/examples/multimedia/video/doc/images/qmlvideofx-camera-magnify.png b/examples/multimedia/video/doc/images/qmlvideofx-camera-magnify.png deleted file mode 100644 index c3156ce96..000000000 Binary files a/examples/multimedia/video/doc/images/qmlvideofx-camera-magnify.png and /dev/null differ diff --git a/examples/multimedia/video/doc/images/qmlvideofx-camera-wobble.jpg b/examples/multimedia/video/doc/images/qmlvideofx-camera-wobble.jpg new file mode 100644 index 000000000..980ab0d15 Binary files /dev/null and b/examples/multimedia/video/doc/images/qmlvideofx-camera-wobble.jpg differ diff --git a/examples/multimedia/video/doc/images/qmlvideofx-effects-menu.jpg b/examples/multimedia/video/doc/images/qmlvideofx-effects-menu.jpg new file mode 100644 index 000000000..eb5b90321 Binary files /dev/null and b/examples/multimedia/video/doc/images/qmlvideofx-effects-menu.jpg differ diff --git a/examples/multimedia/video/doc/images/qmlvideofx-effects-menu.png b/examples/multimedia/video/doc/images/qmlvideofx-effects-menu.png deleted file mode 100644 index 507fd7384..000000000 Binary files a/examples/multimedia/video/doc/images/qmlvideofx-effects-menu.png and /dev/null differ diff --git a/examples/multimedia/video/doc/images/qmlvideofx-source-menu.png b/examples/multimedia/video/doc/images/qmlvideofx-source-menu.png deleted file mode 100644 index 661aaa73f..000000000 Binary files a/examples/multimedia/video/doc/images/qmlvideofx-source-menu.png and /dev/null differ diff --git a/examples/multimedia/video/doc/images/qmlvideofx-video-edgedetection.jpg b/examples/multimedia/video/doc/images/qmlvideofx-video-edgedetection.jpg new file mode 100644 index 000000000..35b36c036 Binary files /dev/null and b/examples/multimedia/video/doc/images/qmlvideofx-video-edgedetection.jpg differ diff --git a/examples/multimedia/video/doc/images/qmlvideofx-video-edgedetection.png b/examples/multimedia/video/doc/images/qmlvideofx-video-edgedetection.png deleted file mode 100644 index cedb314c5..000000000 Binary files a/examples/multimedia/video/doc/images/qmlvideofx-video-edgedetection.png and /dev/null differ diff --git a/examples/multimedia/video/doc/images/qmlvideofx-video-pagecurl.jpg b/examples/multimedia/video/doc/images/qmlvideofx-video-pagecurl.jpg new file mode 100644 index 000000000..5cd8d2bd2 Binary files /dev/null and b/examples/multimedia/video/doc/images/qmlvideofx-video-pagecurl.jpg differ diff --git a/examples/multimedia/video/doc/images/qmlvideofx-video-pagecurl.png b/examples/multimedia/video/doc/images/qmlvideofx-video-pagecurl.png deleted file mode 100644 index 5f5bdfb53..000000000 Binary files a/examples/multimedia/video/doc/images/qmlvideofx-video-pagecurl.png and /dev/null differ diff --git a/examples/multimedia/video/doc/src/qmlvideofx.qdoc b/examples/multimedia/video/doc/src/qmlvideofx.qdoc index 80f087e7f..edbd369c0 100644 --- a/examples/multimedia/video/doc/src/qmlvideofx.qdoc +++ b/examples/multimedia/video/doc/src/qmlvideofx.qdoc @@ -46,31 +46,25 @@ advanced functionality - in this case, C++ code is used to calculate the QML frame rate. This value is rendered in QML in a semi-transparent item overlaid on the video content. -Finally, this application demonstrates the use of different top-level QML -files to handle different physical screen sizes. On small-screen devices, -menus are by default hidden, and only appear when summoned by a gesture. -Large-screen devices show a more traditional layout in which menus are -displayed around the video content pane. - The following screenshots show shader effects being applied. In each case, the effect is implemented using a fragment shader. Here we see an edge detection algorithm being applied to a video clip -(\l{http://orange.blender.org/}{Elephant's Dream from blender.org}). -\image qmlvideofx-video-edgedetection.png +(\l{http://durian.blender.org/}{Sintel from blender.org}). +\image qmlvideofx-video-edgedetection.jpg This image shows a page curl effect, applied to the same video clip. -\image qmlvideofx-video-pagecurl.png +\image qmlvideofx-video-pagecurl.jpg Here we see a 'glow' effect (edge detection plus colour quantization) being applied to the camera viewfinder. -\image qmlvideofx-camera-glow.png +\image qmlvideofx-camera-glow.jpg -This image shows a 'lens magnification' effect applied to the viewfinder. -\image qmlvideofx-camera-magnify.png +This image shows a 'wobble' effect applied to the viewfinder. +\image qmlvideofx-camera-wobble.jpg The application includes many more effects than the ones shown here - look -for Effect*.qml files in the list above to see the full range. +for Effect*.qml files in the list of files below to see the full range. \section1 Application structure @@ -197,11 +191,8 @@ vertical dividing line, which can be dragged left / right by the user. Finally, a \l{video/qmlvideofx/qml/qmlvideofx/ParameterPanel.qml}{ParameterPanel} item renders the sliders corresponding to each effect parameter. -Here is the source selection menu: -\image qmlvideofx-source-menu.png - -And here is the effect selection menu: -\image qmlvideofx-effects-menu.png +Here is the effect selection menu: +\image qmlvideofx-effects-menu.jpg \section1 Calculating and displaying QML painting rate -- cgit v1.2.1