give the joystick manual test a "case"

The background image is a POV-ray rendering which makes it look a bit
more like an actual joystick (but there's still no tilting stem under
the knob).

Change-Id: I9d130d6fcd72715733678a525c69785e5f1a52ea
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>

3 files changed, 42 insertions, 28 deletions

diff --git a/tests/manual/pointer/joystick.qml b/tests/manual/pointer/joystick.qml
index c932f0b68a..f5be17ddc9 100644
--- a/tests/manual/pointer/joystick.qml
+++ b/tests/manual/pointer/joystick.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2017 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the manual tests of the Qt Toolkit.
@@ -26,38 +26,51 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.8
+import QtQuick 2.10
 import Qt.labs.handlers 1.0
 
-Rectangle {
-    width: 480
-    height: 480
-    color: "black"
-
+Item {
+    width: image.implicitWidth; height: image.implicitHeight
     Image {
-        id: knob
-        source: "resources/redball.png"
-        anchors {
-            horizontalCenter: parent.horizontalCenter
-            verticalCenter: parent.verticalCenter
-        }
-        DragHandler {
-            id: dragHandler
-        }
-        states: [
-            State {
-                when: dragHandler.active
-                AnchorChanges {
-                    target: knob
-                    anchors.horizontalCenter: undefined
-                    anchors.verticalCenter: undefined
+        id: image
+        anchors.centerIn: parent
+        source: "resources/joystick-outer-case-pov.jpg"
+        property real margin: 50
+
+        Image {
+            id: knob
+            source: "resources/redball.png"
+            DragHandler {
+                id: dragHandler
+                xAxis {
+                    minimum: image.margin
+                    maximum: image.width - image.margin - knob.width
+                }
+                yAxis {
+                    minimum: image.margin
+                    maximum: image.height - image.margin - knob.height
                 }
             }
-        ]
-        transitions: [
-            Transition {
-                AnchorAnimation { easing.type: Easing.OutElastic }
+
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                verticalCenter: parent.verticalCenter
             }
-        ]
+            states: [
+                State {
+                    when: dragHandler.active
+                    AnchorChanges {
+                        target: knob
+                        anchors.horizontalCenter: undefined
+                        anchors.verticalCenter: undefined
+                    }
+                }
+            ]
+            transitions: [
+                Transition {
+                    AnchorAnimation { easing.type: Easing.OutElastic }
+                }
+            ]
+        }
     }
 }
diff --git a/tests/manual/pointer/qml.qrc b/tests/manual/pointer/qml.qrc
index 68937a8c4a..4c67e51753 100644
--- a/tests/manual/pointer/qml.qrc
+++ b/tests/manual/pointer/qml.qrc
@@ -26,6 +26,7 @@
         <file>resources/balloon.png</file>
         <file>resources/fighter.png</file>
         <file>resources/grabbing-location.svg</file>
+        <file>resources/joystick-outer-case-pov.jpg</file>
         <file>resources/map.svgz</file>
         <file>resources/missile.png</file>
         <file>resources/mixer-knob.png</file>
diff --git a/tests/manual/pointer/resources/joystick-outer-case-pov.jpg b/tests/manual/pointer/resources/joystick-outer-case-pov.jpg
new file mode 100644
index 0000000000..01cd78fdcf
--- /dev/null
+++ b/tests/manual/pointer/resources/joystick-outer-case-pov.jpg