slapin/qtmultimedia
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Express qmlvideofx effect parameters declaratively

Browse Source 
Each effect item now exposes a ListModel property which describes the
set of user-controllable parameters.  This model is used by the
ParameterPanel component to generate a ListView whose delegate displays
the parameter name and a slider.

Change-Id: Ib26877fe434d8b746ef621e0b4adbcbe1ed9aaa8
Reviewed-by: Michael Goddard <michael.goddard@nokia.com>
This commit is contained in:
Gareth Stockwell
2011-12-20 13:51:34 +00:00
committed by Qt by Nokia
parent febe398400
commit 9092b1ae46
29 changed files with 225 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/video/qmlvideofx/qml/qmlvideofx/Content.qml
View File

@@ -90,7 +90,7 @@ Rectangle {
effectLoader.item.targetHeight = root.height
updateSource()
effectLoader.item.source = theSource
divider.visible = effectLoader.item.supportsDivider
divider.visible = effectLoader.item.divider
updateDivider()
}
@@ -101,7 +101,7 @@ Rectangle {
}
function updateDivider() {
if (effectLoader.item && effectLoader.item.supportsDivider)
if (effectLoader.item && effectLoader.item.divider)
effectLoader.item.dividerValue = divider.value
}

5
examples/video/qmlvideofx/qml/qmlvideofx/Effect.qml
View File

@@ -43,8 +43,9 @@ import QtQuick 2.0
ShaderEffect {
property variant source
property int numParameters: 0
property bool supportsDivider: false
property ListModel parameters: ListModel { }
property bool divider: true
property real dividerValue: 0.5
property real targetWidth: 0
property real targetHeight: 0
property string fragmentShaderFilename

14
examples/video/qmlvideofx/qml/qmlvideofx/EffectBillboard.qml
View File

@@ -42,13 +42,15 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: true
parameters: ListModel {
ListElement {
name: "grid spacing"
value: 0.5
}
}
property real param1Value: 0.5
property real dividerValue: 0.5
property real grid: 10.0 * param1Value
// Transform slider values, and bind result to shader uniforms
property real grid: parameters.get(0).value * 10
property real step_x: 0.0015625
property real step_y: targetHeight ? (step_x * targetWidth / targetHeight) : 0.0

13
examples/video/qmlvideofx/qml/qmlvideofx/EffectBlackAndWhite.qml
View File

@@ -42,12 +42,15 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: true
parameters: ListModel {
ListElement {
name: "threshold"
value: 0.5
}
}
property real param1Value: 0.5
property real dividerValue: 0.5
// Transform slider values, and bind result to shader uniforms
property real threshold: parameters.get(0).value
fragmentShaderFilename: "shaders/blackandwhite.fsh"
}

6
examples/video/qmlvideofx/qml/qmlvideofx/EffectEmboss.qml
View File

@@ -42,11 +42,5 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 0
property bool supportsDivider: true
property real dividerValue: 0.5
fragmentShaderFilename: "shaders/emboss.fsh"
}

22
examples/video/qmlvideofx/qml/qmlvideofx/EffectGaussianBlur.qml
View File

@@ -44,23 +44,25 @@
import QtQuick 2.0
Item {
id: root
id: root
property bool divider: true
property real dividerValue: 0.5
property ListModel parameters: ListModel {
ListElement {
name: "radius"
value: 0.5
}
}
property alias targetWidth: verticalShader.targetWidth
property alias targetHeight: verticalShader.targetHeight
property alias source: verticalShader.source
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: true
property real param1Value: 0.5
property real dividerValue: 0.5
Effect {
id: verticalShader
anchors.fill: parent
property real dividerValue: parent.dividerValue
property real blurSize: 4.0 * parent.param1Value / targetHeight
property real blurSize: 4.0 * parent.parameters.get(0).value / targetHeight
fragmentShaderFilename: "shaders/gaussianblur_v.fsh"
}
@@ -68,7 +70,7 @@ id: root
id: horizontalShader
anchors.fill: parent
property real dividerValue: parent.dividerValue
property real blurSize: 4.0 * parent.param1Value / targetWidth
property real blurSize: 4.0 * parent.parameters.get(0).value / targetWidth
fragmentShaderFilename: "shaders/gaussianblur_h.fsh"
source: horizontalShaderSource

6
examples/video/qmlvideofx/qml/qmlvideofx/EffectGlow.qml
View File

@@ -42,11 +42,5 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 0
property bool supportsDivider: true
property real dividerValue: 0.5
fragmentShaderFilename: "shaders/glow.fsh"
}

22
examples/video/qmlvideofx/qml/qmlvideofx/EffectIsolate.qml
View File

@@ -42,16 +42,20 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 2
property bool supportsDivider: true
parameters: ListModel {
ListElement {
name: "hue"
value: 0.5
}
ListElement {
name: "width"
value: 0.5
}
}
property real param1Value: 0.5
property real param2Value: 0.5
property real dividerValue: 0.5
property real targetHue: 360.0 * param1Value
property real windowWidth: 60.0 * param2Value
// Transform slider values, and bind result to shader uniforms
property real targetHue: parameters.get(0).value * 360
property real windowWidth: parameters.get(1).value * 60
fragmentShaderFilename: "shaders/isolate.fsh"
}

25
examples/video/qmlvideofx/qml/qmlvideofx/EffectMagnify.qml
View File

@@ -43,20 +43,25 @@ import QtQuick 2.0
Effect {
id: root
// Constant properties which must be supported by every effect
property int numParameters: 2
property bool supportsDivider: false
property real param1Value: 0.5
property real radius: 200 * param1Value
property real param2Value: 0.5
property real diffractionIndex: param2Value
divider: false
parameters: ListModel {
ListElement {
name: "radius"
value: 0.5
}
ListElement {
name: "diffraction"
value: 0.5
}
}
property real posX: -1
property real posY: -1
// Transform slider values, and bind result to shader uniforms
property real radius: parameters.get(0).value * 100
property real diffractionIndex: parameters.get(1).value
onTargetWidthChanged: if (posX == -1) posX = targetWidth / 2
onTargetHeightChanged: if (posY == -1) posY = targetHeight / 2

16
examples/video/qmlvideofx/qml/qmlvideofx/EffectPageCurl.qml
View File

@@ -42,14 +42,16 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: false
divider: false
parameters: ListModel {
ListElement {
name: "extent"
value: 0.5
}
}
property real param1Value: 0.5
property real dividerValue: 0.5
property real curlExtent: 1.0 - param1Value
// Transform slider values, and bind result to shader uniforms
property real curlExtent: 1.0 - parameters.get(0).value
fragmentShaderFilename: "shaders/pagecurl.fsh"
}

2
examples/video/qmlvideofx/qml/qmlvideofx/EffectPassThrough.qml
View File

@@ -42,5 +42,5 @@
import QtQuick 2.0
Effect {
divider: false
}

15
examples/video/qmlvideofx/qml/qmlvideofx/EffectPixelate.qml
View File

@@ -42,14 +42,15 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: true
parameters: ListModel {
ListElement {
name: "granularity"
value: 0.5
}
}
property real param1Value: 0.5
property real dividerValue: 0.5
property real granularity: param1Value * 20
// Transform slider values, and bind result to shader uniforms
property real granularity: parameters.get(0).value * 20
fragmentShaderFilename: "shaders/pixelate.fsh"
}

14
examples/video/qmlvideofx/qml/qmlvideofx/EffectPosterize.qml
View File

@@ -42,14 +42,16 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: true
parameters: ListModel {
ListElement {
name: "gamma"
value: 0.5
}
}
property real param1Value: 0.5
property real dividerValue: 0.5
// Transform slider values, and bind result to shader uniforms
property real gamma: parameters.get(0).value
property real gamma: param1Value
property real numColors: 8.0
fragmentShaderFilename: "shaders/posterize.fsh"

23
examples/video/qmlvideofx/qml/qmlvideofx/EffectRipple.qml
View File

@@ -42,20 +42,23 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 2
property bool supportsDivider: true
parameters: ListModel {
ListElement {
name: "amplitude"
value: 0.5
}
ListElement {
name: "frequency"
value: 0.5
}
}
property real param1Value: 0.5
property real param2Value: 0.5
property real dividerValue: 0.5
// Transform slider values, and bind result to shader uniforms
property real amplitude: parameters.get(0).value * 0.03
property real n: parameters.get(1).value * 7
property real time: 0
NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 }
property real amplitude: param1Value * 0.03
property real n: param2Value * 7
fragmentShaderFilename: "shaders/ripple.fsh"
}

6
examples/video/qmlvideofx/qml/qmlvideofx/EffectSepia.qml
View File

@@ -42,11 +42,5 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 0
property bool supportsDivider: true
property real dividerValue: 0.5
fragmentShaderFilename: "shaders/sepia.fsh"
}

15
examples/video/qmlvideofx/qml/qmlvideofx/EffectSharpen.qml
View File

@@ -42,14 +42,15 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: true
parameters: ListModel {
ListElement {
name: "sharpness"
value: 0.5
}
}
property real param1Value: 0.5
property real dividerValue: 0.5
property real amount: 18.0 * param1Value
// Transform slider values, and bind result to shader uniforms
property real amount: parameters.get(0).value * 18
fragmentShaderFilename: "shaders/sharpen.fsh"
}

19
examples/video/qmlvideofx/qml/qmlvideofx/EffectShockwave.qml
View File

@@ -43,15 +43,16 @@ import QtQuick 2.0
Effect {
id: root
parameters: ListModel {
ListElement {
name: "amplitude"
value: 0.5
}
}
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: true
property real param1Value: 0.5
property real dividerValue: 0.5
property real granularity: param1Value * 20
// Transform slider values, and bind result to shader uniforms
property real granularity: parameters.get(0).value * 20
property real weight: parameters.get(0).value
property real centerX
property real centerY
@@ -75,7 +76,5 @@ Effect {
}
}
property real weight: param1Value
fragmentShaderFilename: "shaders/shockwave.fsh"
}

17
examples/video/qmlvideofx/qml/qmlvideofx/EffectSobelEdgeDetection1.qml
View File

@@ -42,15 +42,16 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: true
parameters: ListModel {
ListElement {
name: "threshold"
value: 0.5
}
}
property real param1Value: 0.5
property real dividerValue: 0.5
property real mixLevel: param1Value
property real targetSize: 250 - (200 * param1Value) // TODO: fix ...
// Transform slider values, and bind result to shader uniforms
property real mixLevel: parameters.get(0).value
property real targetSize: 250 - (200 * mixLevel) // TODO: fix ...
property real resS: targetSize
property real resT: targetSize

15
examples/video/qmlvideofx/qml/qmlvideofx/EffectSobelEdgeDetection2.qml
View File

@@ -42,14 +42,15 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: true
parameters: ListModel {
ListElement {
name: "threshold"
value: 0.5
}
}
property real param1Value: 0.5
property real dividerValue: 0.5
property real weight: param1Value
// Transform slider values, and bind result to shader uniforms
property real weight: parameters.get(0).value
fragmentShaderFilename: "shaders/sobeledgedetection2.fsh"
}

6
examples/video/qmlvideofx/qml/qmlvideofx/EffectTiltShift.qml
View File

@@ -42,11 +42,5 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 0
property bool supportsDivider: true
property real dividerValue: 0.5
fragmentShaderFilename: "shaders/tiltshift.fsh"
}

17
examples/video/qmlvideofx/qml/qmlvideofx/EffectToon.qml
View File

@@ -42,15 +42,16 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: true
parameters: ListModel {
ListElement {
name: "threshold"
value: 0.5
}
}
property real param1Value: 0.5
property real dividerValue: 0.5
property real threshold: param1Value
property real targetSize: 250 - (200 * param1Value) // TODO: fix ...
// Transform slider values, and bind result to shader uniforms
property real threshold: parameters.get(0).value
property real targetSize: 250 - (200 * threshold) // TODO: fix ...
property real resS: targetSize
property real resT: targetSize

6
examples/video/qmlvideofx/qml/qmlvideofx/EffectVignette.qml
View File

@@ -42,11 +42,5 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 0
property bool supportsDivider: true
property real dividerValue: 0.5
fragmentShaderFilename: "shaders/vignette.fsh"
}

6
examples/video/qmlvideofx/qml/qmlvideofx/EffectWarhol.qml
View File

@@ -42,11 +42,5 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 0
property bool supportsDivider: true
property real dividerValue: 0.5
fragmentShaderFilename: "shaders/warhol.fsh"
}

14
examples/video/qmlvideofx/qml/qmlvideofx/EffectWobble.qml
View File

@@ -42,14 +42,16 @@
import QtQuick 2.0
Effect {
// Constant properties which must be supported by every effect
property int numParameters: 1
property bool supportsDivider: true
parameters: ListModel {
ListElement {
name: "amplitude"
value: 0.5
}
}
property real param1Value: 0.5
property real dividerValue: 0.5
// Transform slider values, and bind result to shader uniforms
property real amplitude: parameters.get(0).value * 0.05
property real amplitude: param1Value * 0.05
property real frequency: 20
property real time: 0

82
examples/video/qmlvideofx/qml/qmlvideofx/ParameterPanel.qml
View File

@@ -44,44 +44,64 @@ import QtQuick 2.0
Rectangle {
id: root
color: "transparent"
height: numParameters * sliderHeight + (numParameters + 1) * spacing
visible: numParameters > 0
height: view.model.count * sliderHeight
property color lineColor: "black"
property int numParameters: 1
property alias param1Value: slider1.value
property alias param2Value: slider2.value
property bool enabled: true
property real gripSize: 25
property real spacing: 10
property real sliderHeight: 40
Slider {
id: slider1
color: "white"
enabled: parent.enabled
gripSize: root.gripSize
height: sliderHeight
visible: enabled
anchors {
left: parent.left
right: parent.right
bottom: (root.numParameters == 1) ? root.bottom : slider2.top
margins: root.spacing
property ListModel model: ListModel { }
Rectangle {
anchors.fill: parent
color: "black"
opacity: 0.5
radius: 10
}
Component {
id: editDelegate
Rectangle {
id: delegate
width: parent.width
height: root.sliderHeight
color: "transparent"
Text {
id: text
text: name
color: "white"
anchors {
top: parent.top
bottom: parent.bottom
left: parent.left
}
font.pixelSize: 0.5 * parent.height
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
width: 150
}
Slider {
anchors {
top: parent.top
bottom: parent.bottom
left: text.right
leftMargin: 20
right: parent.right
rightMargin: 20
}
value: model.value
onValueChanged: view.model.setProperty(index, "value", value)
}
}
}
Slider {
id: slider2
color: "white"
enabled: parent.enabled && root.numParameters >= 2
gripSize: root.gripSize
height: sliderHeight
visible: enabled
anchors {
left: parent.left
right: parent.right
bottom: root.bottom
margins: root.spacing
}
ListView {
id: view
anchors.fill: parent
model: root.model
delegate: editDelegate
}
}

11
examples/video/qmlvideofx/qml/qmlvideofx/Slider.qml
View File

@@ -43,9 +43,10 @@ import QtQuick 2.0
Rectangle {
id: root
color: "white"
color: "transparent"
radius: 5
property alias value: grip.value
property color fillColor: "white"
property color lineColor: "black"
property alias gripSize: grip.width
property alias enabled: mouseArea.enabled
@@ -57,7 +58,7 @@ Rectangle {
Rectangle {
anchors { fill: parent; margins: 1 }
color: root.color
color: root.fillColor
}
}
@@ -95,12 +96,12 @@ Rectangle {
Rectangle {
anchors { fill: parent; margins: 1 }
radius: width/2
color: root.color
color: root.fillColor
}
}
function displayedColor() {
var tint = Qt.rgba(color.r, color.g, color.b, 0.25)
return enabled ? lineColor : Qt.tint(color, tint)
var tint = Qt.rgba(fillColor.r, fillColor.g, fillColor.b, 0.25)
return enabled ? lineColor : Qt.tint(fillColor, tint)
}
}

14
examples/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml
View File

@@ -94,15 +94,12 @@ Rectangle {
ParameterPanel {
id: parameterPanel
enabled: numParameters >= 1
numParameters: content.effect ? content.effect.numParameters : 0
anchors {
top: content.bottom
left: parent.left
bottom: parent.bottom
right: effectSelectionPanel.left
margins: 20
}
width: content.width
onParam1ValueChanged: updateParameters()
}
EffectSelectionPanel {
@@ -117,7 +114,7 @@ Rectangle {
itemHeight: 40
onEffectSourceChanged: {
content.effectSource = effectSource
updateParameters()
parameterPanel.model = content.effect.parameters
}
}
@@ -160,11 +157,6 @@ Rectangle {
performanceLoader.item.qmlFramePainted()
}
function updateParameters() {
if (content.effect.numParameters >= 1)
content.effect.param1Value = parameterPanel.param1Value
}
function openImage() {
d.openFileType = "image"
showFileBrowser("../../images")

28
examples/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml
View File

@@ -71,7 +71,11 @@ Rectangle {
}
onLoaded: {
item.parent = root
item.anchors.fill = 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()
@@ -92,15 +96,12 @@ Rectangle {
ParameterPanel {
id: parameterPanel
anchors {
left: parent.left;
right: parent.right;
margins: 10
}
numParameters: content.effect.numParameters
y: parent.height
opacity: 0.75
gripSize: 40
states: [
@@ -125,10 +126,8 @@ Rectangle {
}
]
enabled: content.effect.numParameters >= 1 && effectSelectionPanel.state != "shown"
enabled: false
state: enabled ? "shown" : "baseState"
onParam1ValueChanged: updateParameters()
onParam2ValueChanged: updateParameters()
}
EffectSelectionPanel {
@@ -168,8 +167,12 @@ Rectangle {
onEffectSourceChanged: {
content.effectSource = effectSource
parameterPanel.numParameters = content.effect.numParameters
updateParameters()
if (content.effect.parameters.count) {
parameterPanel.model = content.effect.parameters
parameterPanel.enabled = true
} else {
parameterPanel.enabled = false
}
}
onClicked: state = "baseState"
@@ -364,13 +367,6 @@ Rectangle {
performanceLoader.item.qmlFramePainted()
}
function updateParameters() {
if (content.effect.numParameters >= 1)
content.effect.param1Value = parameterPanel.param1Value
if (content.effect.numParameters >= 2)
content.effect.param2Value = parameterPanel.param2Value
}
function openImage() {
fileOpenContainer.state = "baseState"
d.openFileType = "image"

4
examples/video/qmlvideofx/shaders/blackandwhite.fsh
View File

@@ -41,7 +41,7 @@
// Based on http://kodemongki.blogspot.com/2011/06/kameraku-custom-shader-effects-example.html
uniform float param1Value;
uniform float threshold;
uniform float dividerValue;
uniform sampler2D source;
@@ -54,7 +54,7 @@ void main()
vec4 orig = texture2D(source, uv);
vec3 col = orig.rgb;
float y = 0.3 *col.r + 0.59 * col.g + 0.11 * col.b;
y = y < param1Value ? 0.0 : 1.0;
y = y < threshold ? 0.0 : 1.0;
if (uv.x < dividerValue)
gl_FragColor = qt_Opacity * vec4(y, y, y, 1.0);
else