summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorGareth Stockwell <ext-gareth.stockwell@nokia.com>2012-02-10 15:25:14 +0000
committerQt by Nokia <qt-info@nokia.com>2012-02-13 01:30:57 +0100
commita93be80d33ab4af20f10de946b0aa3785fc2d843 (patch)
tree156dbd23ca92fc33c1198f0981350ef54b580a02
parent2d188bdb3f6fe4f84f28cee8e7f44840078c82bd (diff)
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>
-rw-r--r--examples/video/qmlvideofx/qml/qmlvideofx/Divider.qml55
-rw-r--r--examples/video/qmlvideofx/qml/qmlvideofx/ParameterPanel.qml1
-rw-r--r--examples/video/qmlvideofx/qml/qmlvideofx/Slider.qml42
-rw-r--r--examples/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml7
-rw-r--r--examples/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml5
5 files changed, 60 insertions, 50 deletions
diff --git a/examples/video/qmlvideofx/qml/qmlvideofx/Divider.qml b/examples/video/qmlvideofx/qml/qmlvideofx/Divider.qml
index 7303797c..92c1518f 100644
--- a/examples/video/qmlvideofx/qml/qmlvideofx/Divider.qml
+++ b/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
-
- 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
- }
- }
- }
+ property alias gripSize: slider.gripSize
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
+ }
+ }
}
diff --git a/examples/video/qmlvideofx/qml/qmlvideofx/ParameterPanel.qml b/examples/video/qmlvideofx/qml/qmlvideofx/ParameterPanel.qml
index b58a7315..2571b6e6 100644
--- a/examples/video/qmlvideofx/qml/qmlvideofx/ParameterPanel.qml
+++ b/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)
}
diff --git a/examples/video/qmlvideofx/qml/qmlvideofx/Slider.qml b/examples/video/qmlvideofx/qml/qmlvideofx/Slider.qml
index b1f301c5..93c976c6 100644
--- a/examples/video/qmlvideofx/qml/qmlvideofx/Slider.qml
+++ b/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 alias enabled: mouseArea.enabled
+ property color gripColor: "white"
+ 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() {
- var tint = Qt.rgba(fillColor.r, fillColor.g, fillColor.b, 0.25)
- return enabled ? lineColor : Qt.tint(fillColor, tint)
+ function displayedColor(c) {
+ var tint = Qt.rgba(c.r, c.g, c.b, 0.25)
+ return enabled ? c : Qt.tint(c, tint)
}
}
diff --git a/examples/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml b/examples/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml
index 83a8dbe0..010ceba0 100644
--- a/examples/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml
+++ b/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 {
diff --git a/examples/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml b/examples/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml
index 91bdefe7..d7f2ccfc 100644
--- a/examples/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml
+++ b/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 {