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

Improve usability of qmlvideofx example on small touchscreens

Browse Source 
* 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>
This commit is contained in:
Gareth Stockwell
2012-02-10 15:25:14 +00:00
committed by Qt by Nokia
parent 2d188bdb3f
commit a93be80d33
5 changed files with 60 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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)
}
}