MultiPointTouchArea.TouchPoint: add rotation, uniqueId and ellipseDiameters

So far uniqueId and rotation are mainly applicable to TUIO.
Deprecate the area property in favor of ellipseDiameters.
Also improve the mpta-crosshairs manual test to show this information.

Change-Id: I16ea6618ae21ce66dac45638d6e2bb3c0a3b1818
Reviewed-by: Jan Arve Sæther <jan-arve.saether@qt.io>

1 files changed, 63 insertions, 21 deletions

diff --git a/tests/manual/touch/mpta-crosshairs.qml b/tests/manual/touch/mpta-crosshairs.qml
index a55dfc7799..d1dbd0f188 100644
--- a/tests/manual/touch/mpta-crosshairs.qml
+++ b/tests/manual/touch/mpta-crosshairs.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2015 The Qt Company Ltd.
+** Copyright (C) 2017 The Qt Company Ltd.
 ** Contact: http://www.qt.io/licensing/
 **
 ** This file is part of the manual tests of the Qt Toolkit.
@@ -38,11 +38,13 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.4
+import QtQuick 2.9
 import QtQuick.Window 2.2
 
 Rectangle {
     id: root
+    width: 480
+    height: 480
     color: "black"
 
     MultiPointTouchArea {
@@ -51,11 +53,11 @@ Rectangle {
         touchPoints: [
             TouchPoint { property color color: "red" },
             TouchPoint { property color color: "orange" },
-            TouchPoint { property color color: "yellow" },
+            TouchPoint { property color color: "lightsteelblue" },
             TouchPoint { property color color: "green" },
             TouchPoint { property color color: "blue" },
             TouchPoint { property color color: "violet" },
-            TouchPoint { property color color: "cyan" },
+            TouchPoint { property color color: "steelblue" },
             TouchPoint { property color color: "magenta" },
             TouchPoint { property color color: "goldenrod" },
             TouchPoint { property color color: "darkgray" }
@@ -65,40 +67,80 @@ Rectangle {
         model: 10
 
         Item {
-            anchors.fill: parent
+            id: crosshairs
             property TouchPoint touchPoint
+            x: touchPoint.x - width / 2
+            y: touchPoint.y - height / 2
+            width: 300; height: 300
             visible: touchPoint.pressed
+            rotation: touchPoint.rotation
 
             Rectangle {
                 color: touchPoint.color
-                anchors.top: parent.top
-                anchors.bottom: parent.bottom
-                width: 2
-                x: touchPoint.x - 1
+                anchors.centerIn: parent
+                width: 2; height: parent.height
+                antialiasing: true
             }
             Rectangle {
                 color: touchPoint.color
-                anchors.left: parent.left
-                anchors.right: parent.right
-                height: 2
-                y: touchPoint.y - 1
+                anchors.centerIn: parent
+                width: parent.width; height: 2
+                antialiasing: true
             }
             Rectangle {
                 color: touchPoint.color
-                width: 50 * touchPoint.pressure
-                height: width
+                implicitWidth: label.implicitWidth + 8
+                implicitHeight: label.implicitHeight + 16
                 radius: width / 2
-                x: touchPoint.x - width / 2
-                y: touchPoint.y - width / 2
+                anchors.centerIn: parent
+                antialiasing: true
+                Rectangle {
+                    color: "black"
+                    opacity: 0.35
+                    width: (parent.width - 8) * touchPoint.pressure
+                    height: width
+                    radius: width / 2
+                    anchors.centerIn: parent
+                    antialiasing: true
+                }
+                Rectangle {
+                    color: "transparent"
+                    border.color: "white"
+                    border.width: 2
+                    opacity: 0.75
+                    visible: width > 0
+                    width: touchPoint.ellipseDiameters.width
+                    height: touchPoint.ellipseDiameters.height
+                    radius: Math.min(width, height) / 2
+                    anchors.centerIn: parent
+                    antialiasing: true
+                }
+                Text {
+                    id: label
+                    anchors.centerIn: parent
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    property string uid: touchPoint.uniqueId === undefined || touchPoint.uniqueId.numericId === -1 ?
+                                             "" : "\nUID " + touchPoint.uniqueId.numericId
+                    text: "x " + touchPoint.x.toFixed(1) +
+                          "\ny " + touchPoint.y.toFixed(1) + uid +
+                          "\nID " + touchPoint.pointId.toString(16) +
+                          "\n∡" + touchPoint.rotation.toFixed(1) + "°"
+                }
             }
             Rectangle {
                 id: velocityVector
                 visible: width > 0
                 width: touchPoint.velocity.length()
-                height: 1
-                x: touchPoint.x
-                y: touchPoint.y
-                rotation: width > 0 ? Math.atan2(touchPoint.velocity.y, touchPoint.velocity.x) * 180 / Math.PI : 0
+                height: 4
+                Behavior on width { SmoothedAnimation { duration: 200 } }
+                radius: height / 2
+                antialiasing: true
+                color: "gray"
+                x: crosshairs.width / 2
+                y: crosshairs.height / 2
+                rotation: width > 0 ? Math.atan2(touchPoint.velocity.y, touchPoint.velocity.x) * 180 / Math.PI - crosshairs.rotation : 0
                 Behavior on rotation { SmoothedAnimation { duration: 20 } }
                 transformOrigin: Item.BottomLeft
             }