Improve usability of qmlvideofx example on small touchscreens

* Add tolerance to mouse press detection on divider and slider grips,
  so that clicks just outside of the grip radius are treated as if the
  click was inside the grip.
* When slider bar outside of grip radius is clicked, increment slider
  position by a fixed amount, towards the click position.

Change-Id: Iefb0b274ee5a97ed5cb789596bf6b3c07a7fc8b8
Reviewed-by: Jonas Rabbe <jonas.rabbe@nokia.com>

examples/video/qmlvideofx/qml/qmlvideofx/Divider.qml

@@ -45,50 +45,29 @@ Rectangle {
     id: root
     anchors.fill: parent
     color: "transparent"
-    property alias value: grip.value
+    property alias value: slider.value
     property alias lineWidth: line.width
-    property alias gripSize: grip.width
+    property alias gripSize: slider.gripSize
-
-    Rectangle {
-        id: grip
-        property real value: 0.5
-        x: (value * parent.width) - width/2
-        anchors.top: parent.top
-        width: 20
-        height: width
-        radius: width/2
-        color: "red"
-
-        MouseArea {
-            anchors.fill:  parent
-
-            drag {
-                target: grip
-                axis: Drag.XAxis
-                minimumX: -parent.width/2
-                maximumX: root.width - parent.width/2
-            }
-
-            onPositionChanged:  {
-                if (drag.active)
-                    updatePosition()
-            }
-
-            onReleased: {
-                updatePosition()
-            }
-
-            function updatePosition() {
-                value = (grip.x + grip.width/2) / grip.parent.width
-            }
-        }
-    }
 
     Rectangle {
         id: line
         anchors { top: parent.top; bottom: parent.bottom }
-        x: value * parent.width - (width / 2)
+        x: parent.value * parent.width - (width / 2)
         width: 2
         color: "red"
     }
+
+    Slider {
+        id: slider
+        increment: 0.0
+        lineColor: "transparent"
+        fillColor: "transparent"
+        gripColor: "red"
+        anchors {
+            top: parent.top
+            topMargin: gripSize / 2
+            left: parent.left
+            right: parent.right
+        }
+    }
 }

examples/video/qmlvideofx/qml/qmlvideofx/ParameterPanel.qml

@@ -92,6 +92,7 @@ Rectangle {
                     right: parent.right
                     rightMargin: 20
                 }
+                gripSize: root.gripSize
                 value: model.value
                 onValueChanged: view.model.setProperty(index, "value", value)
             }

examples/video/qmlvideofx/qml/qmlvideofx/Slider.qml

@@ -48,13 +48,16 @@ Rectangle {
     property alias value: grip.value
     property color fillColor: "white"
     property color lineColor: "black"
-    property alias gripSize: grip.width
+    property color gripColor: "white"
-    property alias enabled: mouseArea.enabled
+    property real gripSize: 20
+    property real gripTolerance: 3.0
+    property real increment: 0.1
+    property bool enabled: true
 
     Rectangle {
         anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter }
         height: 3
-        color: displayedColor()
+        color: displayedColor(root.lineColor)
 
         Rectangle {
             anchors { fill: parent; margins: 1 }
@@ -62,18 +65,35 @@ Rectangle {
         }
     }
 
+    MouseArea {
+        anchors.fill: parent
+        enabled: root.enabled
+        onClicked: {
+            if (parent.width) {
+                var newValue = mouse.x / parent.width
+                if (Math.abs(newValue - parent.value) > parent.increment) {
+                    if (newValue > parent.value)
+                        parent.value = Math.min(1.0, parent.value + parent.increment)
+                    else
+                        parent.value = Math.max(0.0, parent.value - parent.increment)
+                }
+            }
+        }
+    }
+
     Rectangle {
         id: grip
         property real value: 0.5
         x: (value * parent.width) - width/2
         anchors.verticalCenter: parent.verticalCenter
-        width: 20
+        width: root.gripTolerance * root.gripSize
         height: width
         radius: width/2
-        color: displayedColor()
+        color: "transparent"
 
         MouseArea {
             id: mouseArea
+            enabled: root.enabled
             anchors.fill:  parent
             drag {
                 target: grip
@@ -94,14 +114,16 @@ Rectangle {
         }
 
         Rectangle {
-            anchors { fill: parent; margins: 1 }
+            anchors.centerIn: parent
+            width: root.gripSize
+            height: width
             radius: width/2
-            color: root.fillColor
+            color: root.gripColor
         }
     }
 
-    function displayedColor() {
+    function displayedColor(c) {
-        var tint = Qt.rgba(fillColor.r, fillColor.g, fillColor.b, 0.25)
+        var tint = Qt.rgba(c.r, c.g, c.b, 0.25)
-        return enabled ? lineColor : Qt.tint(fillColor, tint)
+        return enabled ? c : Qt.tint(c, tint)
     }
 }

examples/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml

@@ -51,6 +51,11 @@ Rectangle {
     property bool perfMonitorsLogging: false
     property bool perfMonitorsVisible: false
 
+    QtObject {
+        id: d
+        property real gripSize: 20
+    }
+
     Rectangle {
         id: inner
         anchors.fill: parent
@@ -65,6 +70,7 @@ Rectangle {
                 right: effectSelectionPanel.left
                 margins: 5
             }
+            gripSize: d.gripSize
             width: 600
             height: 600
         }
@@ -95,6 +101,7 @@ Rectangle {
                 right: effectSelectionPanel.left
                 margins: 20
             }
+            gripSize: d.gripSize
         }
 
         EffectSelectionPanel {

examples/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml

@@ -57,6 +57,7 @@ Rectangle {
                                     effectSelectionPanel.state == "shown" ||
                                     videoFileBrowser.shown ||
                                     imageFileBrowser.shown)
+       property real gripSize: 40
     }
 
     // Create ScreenSaver element via Loader, so this app will still run if the
@@ -100,7 +101,7 @@ Rectangle {
         Content {
             id: content
             anchors.fill: parent
-            gripSize: 40
+            gripSize: d.gripSize
             onVideoFramePainted: performanceLoader.item.videoFramePainted()
         }
 
@@ -112,7 +113,7 @@ Rectangle {
                 margins: 10
             }
             y: parent.height
-            gripSize: 40
+            gripSize: d.gripSize
 
             states: [
                 State {