Fix for disallowed property bindings in qml effect files

According to the documentation of ListModel.get, "The returned object
is not guaranteed to remain valid. It should not be used in property
bindings." So the property bindings have been removed, and a js function
has been introduced to update the properties upon list change.

Task-number: QTBUG-49221
Change-Id: Idaed746ca237198b52a3aff0234076331e1512c1
Reviewed-by: Yoann Lopes <yoann.lopes@theqtcompany.com>
Reviewed-by: Eskil Abrahamsen Blomfeldt <eskil.abrahamsen-blomfeldt@theqtcompany.com>

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectBillboard.qml

@@ -39,10 +39,16 @@ Effect {
             name: "Grid Spacing"
             value: 0.5
         }
+        onDataChanged: updateGrid()
+    }
+
+    function updateGrid()
+    {
+            grid = parameters.get(0).value * 10;
     }
 
     // Transform slider values, and bind result to shader uniforms
-    property real grid: parameters.get(0).value * 10
+    property real grid: 5.0
 
     property real step_x: 0.0015625
     property real step_y: targetHeight ? (step_x * targetWidth / targetHeight) : 0.0

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectBlackAndWhite.qml

@@ -39,10 +39,15 @@ Effect {
             name: "Threshold"
             value: 0.5
         }
+        onDataChanged: updateThreshold()
     }
 
+    function updateThreshold()
+    {
+            threshold = parameters.get(0).value;
+    }
     // Transform slider values, and bind result to shader uniforms
-    property real threshold: parameters.get(0).value
+    property real threshold: 0.5
 
     fragmentShaderFilename: "blackandwhite.fsh"
 }

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectGaussianBlur.qml

@@ -44,17 +44,37 @@ Item {
             name: "Radius"
             value: 0.5
         }
+        onDataChanged: updateBlurSize()
+    }
+
+    function updateBlurSize()
+    {
+        if ((targetHeight > 0) && (targetWidth > 0))
+        {
+            verticalBlurSize = 4.0 * parameters.get(0).value / targetHeight;
+            horizontalBlurSize = 4.0 * parameters.get(0).value / targetWidth;
+        }
     }
 
     property alias targetWidth: verticalShader.targetWidth
     property alias targetHeight: verticalShader.targetHeight
     property alias source: verticalShader.source
+    property alias horizontalBlurSize: horizontalShader.blurSize
+    property alias verticalBlurSize: verticalShader.blurSize
+
 
     Effect {
         id: verticalShader
         anchors.fill:  parent
         dividerValue: parent.dividerValue
-        property real blurSize: 4.0 * parent.parameters.get(0).value / targetHeight
+        property real blurSize: 0.0
+
+        onTargetHeightChanged: {
+            updateBlurSize()
+        }
+        onTargetWidthChanged: {
+            updateBlurSize()
+        }
         fragmentShaderFilename: "gaussianblur_v.fsh"
     }
 
@@ -62,7 +82,7 @@ Item {
         id: horizontalShader
         anchors.fill: parent
         dividerValue: parent.dividerValue
-        property real blurSize: 4.0 * parent.parameters.get(0).value / parent.targetWidth
+        property real blurSize: 0.0
         fragmentShaderFilename: "gaussianblur_h.fsh"
         source: horizontalShaderSource
 

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectIsolate.qml

@@ -43,11 +43,18 @@ Effect {
             name: "Width"
             value: 0.5
         }
+        onDataChanged: updateParameters()
+    }
+
+    function updateParameters()
+    {
+        targetHue   = parameters.get(0).value * 360
+        windowWidth = parameters.get(1).value * 60
     }
 
     // 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
+    property real targetHue: 0.5 * 360
+    property real windowWidth: 0.5 * 60
 
     fragmentShaderFilename: "isolate.fsh"
 }

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectMagnify.qml

@@ -46,6 +46,13 @@ Effect {
             name: "Diffraction"
             value: 0.5
         }
+        onDataChanged: updateParameters()
+    }
+
+    function updateParameters()
+    {
+        radius   = parameters.get(0).value * 100;
+        diffractionIndex = parameters.get(1).value;
     }
 
     property real posX: -1
@@ -59,8 +66,8 @@ Effect {
     }
 
     // Transform slider values, and bind result to shader uniforms
-    property real radius: parameters.get(0).value * 100
-    property real diffractionIndex: parameters.get(1).value
+    property real radius: 0.5 * 100
+    property real diffractionIndex: 0.5
 
     onTargetWidthChanged: {
         if (posX == -1)

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPageCurl.qml

@@ -40,10 +40,16 @@ Effect {
             name: "Extent"
             value: 0.5
         }
+        onDataChanged: updateParameters()
+    }
+
+    function updateParameters()
+    {
+            curlExtent = 1.0 - parameters.get(0).value;
     }
 
     // Transform slider values, and bind result to shader uniforms
-    property real curlExtent: 1.0 - parameters.get(0).value
+    property real curlExtent: 0.5
 
     fragmentShaderFilename: "pagecurl.fsh"
 }

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPixelate.qml

@@ -39,10 +39,16 @@ Effect {
             name: "Granularity"
             value: 0.5
         }
+        onDataChanged: updateParameters()
+    }
+
+    function updateParameters()
+    {
+            granularity = parameters.get(0).value * 20.0;
     }
 
     // Transform slider values, and bind result to shader uniforms
-    property real granularity: parameters.get(0).value * 20
+    property real granularity: 0.5 * 20
 
     fragmentShaderFilename: "pixelate.fsh"
 }

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectPosterize.qml

@@ -39,10 +39,16 @@ Effect {
             name: "Gamma"
             value: 0.5
         }
+        onDataChanged: updateParameters()
+    }
+
+    function updateParameters()
+    {
+            gamma = parameters.get(0).value;
     }
 
     // Transform slider values, and bind result to shader uniforms
-    property real gamma: parameters.get(0).value
+    property real gamma: 0.5
 
     property real numColors: 8.0
 

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectRipple.qml

@@ -44,11 +44,18 @@ Effect {
             name: "Frequency"
             value: 0.5
         }
+        onDataChanged: updateParameters()
+    }
+
+    function updateParameters()
+    {
+        amplitude = parameters.get(0).value * 0.03;
+        n = parameters.get(1).value * 7;
     }
 
     // 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 amplitude: 0.5 * 0.03
+    property real n: 0.5 * 7
     property real pixDens: Screen.pixelDensity
 
     property real time: 0

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSharpen.qml

@@ -39,10 +39,16 @@ Effect {
             name: "Sharpness"
             value: 0.5
         }
+        onDataChanged: updateParameters()
+    }
+
+    function updateParameters()
+    {
+        amount = parameters.get(0).value * 18;
     }
 
     // Transform slider values, and bind result to shader uniforms
-    property real amount: parameters.get(0).value * 18
+    property real amount: 0.5 * 18
 
     fragmentShaderFilename: "sharpen.fsh"
 }

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectShockwave.qml

@@ -40,11 +40,18 @@ Effect {
             name: "Amplitude"
             value: 0.5
         }
+        onDataChanged: updateParameters()
+    }
+
+    function updateParameters()
+    {
+        granularity = parameters.get(0).value * 20;
+        weight = parameters.get(0).value;
     }
 
     // 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 granularity: 0.5 * 20
+    property real weight: 0.5
 
     property real centerX
     property real centerY

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/EffectSobelEdgeDetection1.qml

@@ -39,10 +39,16 @@ Effect {
             name: "Threshold"
             value: 0.5
         }
+        onDataChanged: updateMixLevel()
+    }
+
+    function updateMixLevel()
+    {
+            mixLevel = parameters.get(0).value;
     }
 
     // Transform slider values, and bind result to shader uniforms
-    property real mixLevel: parameters.get(0).value
+    property real mixLevel: 0.5
     property real targetSize: 250 - (200 * mixLevel) // TODO: fix ...
     property real resS: targetSize
     property real resT: targetSize