From 386e56ff336fe956f4d44946edab275b7244a4ca Mon Sep 17 00:00:00 2001 From: Alan Alpert Date: Mon, 5 Mar 2012 15:02:09 +1000 Subject: Update touchinteraction examples to new guidelines Includes adding flickable examples Change-Id: Ie1a47882bcb8b671f162b2b778dad33ce105407b Reviewed-by: Alan Alpert --- .../touchinteraction/flickable/basic-flickable.qml | 68 +++++++++ .../touchinteraction/flickable/content/Day.qml | 153 --------------------- .../touchinteraction/flickable/content/Panel.qml | 153 +++++++++++++++++++++ .../touchinteraction/flickable/corkboards.qml | 51 ++----- examples/quick/touchinteraction/main.cpp | 41 ++++++ .../touchinteraction/multipointtouch/bearwhack.qml | 2 +- .../multipointtouch/content/title.png | Bin 81252 -> 76246 bytes .../quick/touchinteraction/touchinteraction.pro | 10 ++ .../quick/touchinteraction/touchinteraction.qml | 21 +++ 9 files changed, 305 insertions(+), 194 deletions(-) create mode 100644 examples/quick/touchinteraction/flickable/basic-flickable.qml delete mode 100644 examples/quick/touchinteraction/flickable/content/Day.qml create mode 100644 examples/quick/touchinteraction/flickable/content/Panel.qml create mode 100644 examples/quick/touchinteraction/main.cpp create mode 100644 examples/quick/touchinteraction/touchinteraction.pro (limited to 'examples/quick/touchinteraction') diff --git a/examples/quick/touchinteraction/flickable/basic-flickable.qml b/examples/quick/touchinteraction/flickable/basic-flickable.qml new file mode 100644 index 0000000000..58650d7334 --- /dev/null +++ b/examples/quick/touchinteraction/flickable/basic-flickable.qml @@ -0,0 +1,68 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Rectangle { + width: 320 + height: 480 + Flickable { + anchors.fill: parent + contentWidth: 1200 + contentHeight: 1200 + Rectangle { + width: 1000 + height: 1000 + x: 100 + y: 100 + radius: 128 + border.width: 4 + border.color: "black" + gradient: Gradient { + GradientStop { position: 0.0; color: "#000000" } + GradientStop { position: 0.2; color: "#888888" } + GradientStop { position: 0.4; color: "#FFFFFF" } + GradientStop { position: 0.6; color: "#FFFFFF" } + GradientStop { position: 0.8; color: "#888888" } + GradientStop { position: 1.0; color: "#000000" } + } + } + } +} diff --git a/examples/quick/touchinteraction/flickable/content/Day.qml b/examples/quick/touchinteraction/flickable/content/Day.qml deleted file mode 100644 index 7fe625c305..0000000000 --- a/examples/quick/touchinteraction/flickable/content/Day.qml +++ /dev/null @@ -1,153 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/ -** -** This file is part of the examples of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:BSD$ -** You may use this file under the terms of the BSD license as follows: -** -** "Redistribution and use in source and binary forms, with or without -** modification, are permitted provided that the following conditions are -** met: -** * Redistributions of source code must retain the above copyright -** notice, this list of conditions and the following disclaimer. -** * Redistributions in binary form must reproduce the above copyright -** notice, this list of conditions and the following disclaimer in -** the documentation and/or other materials provided with the -** distribution. -** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor -** the names of its contributors may be used to endorse or promote -** products derived from this software without specific prior written -** permission. -** -** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -import QtQuick 2.0 - -Component { - Item { - property variant stickies - - id: page - width: ListView.view.width+40; height: ListView.view.height - - - Image { - source: "cork.jpg" - width: page.ListView.view.width - height: page.ListView.view.height - fillMode: Image.PreserveAspectCrop - clip: true - } - - MouseArea { - anchors.fill: parent - onClicked: page.focus = false; - } - - Text { - text: name; x: 15; y: 8; height: 40; width: 370 - font.pixelSize: 18; font.bold: true; color: "white" - style: Text.Outline; styleColor: "black" - } - - Repeater { - model: notes - Item { - id: stickyPage - - property int randomX: Math.random() * (page.ListView.view.width-0.5*stickyImage.width) +100 - property int randomY: Math.random() * (page.ListView.view.height-0.5*stickyImage.height) +50 - - x: randomX; y: randomY - - rotation: -flickable.horizontalVelocity / 100; - Behavior on rotation { - SpringAnimation { spring: 2.0; damping: 0.15 } - } - - Item { - id: sticky - scale: 0.7 - - Image { - id: stickyImage - x: 8 + -width * 0.6 / 2; y: -20 - source: "note-yellow.png" - scale: 0.6; transformOrigin: Item.TopLeft - smooth: true - } - - TextEdit { - id: myText - x: -104; y: 36; width: 215; height: 200 - smooth: true - font.pixelSize: 24 - readOnly: false - rotation: -8 - text: noteText - } - - Item { - x: stickyImage.x; y: -20 - width: stickyImage.width * stickyImage.scale - height: stickyImage.height * stickyImage.scale - - MouseArea { - id: mouse - anchors.fill: parent - drag.target: stickyPage - drag.axis: Drag.XandYAxis - drag.minimumY: 0 - drag.maximumY: page.height - 80 - drag.minimumX: 100 - drag.maximumX: page.width - 140 - onClicked: { myText.focus = true; myText.openSoftwareInputPanel(); } - } - } - } - - Image { - x: -width / 2; y: -height * 0.5 / 2 - source: "tack.png" - scale: 0.7; transformOrigin: Item.TopLeft - } - - states: State { - name: "pressed" - when: mouse.pressed - PropertyChanges { target: sticky; rotation: 8; scale: 1 } - PropertyChanges { target: page; z: 8 } - } - - transitions: Transition { - NumberAnimation { properties: "rotation,scale"; duration: 200 } - } - } - } - } -} - - - - - - - - diff --git a/examples/quick/touchinteraction/flickable/content/Panel.qml b/examples/quick/touchinteraction/flickable/content/Panel.qml new file mode 100644 index 0000000000..3a402bbc06 --- /dev/null +++ b/examples/quick/touchinteraction/flickable/content/Panel.qml @@ -0,0 +1,153 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Component { + Item { + property variant stickies + + id: page + width: ListView.view.width+40; height: ListView.view.height + + + Image { + source: "cork.jpg" + width: page.ListView.view.width + height: page.ListView.view.height + fillMode: Image.PreserveAspectCrop + clip: true + } + + MouseArea { + anchors.fill: parent + onClicked: page.focus = false; + } + + Text { + text: name; x: 15; y: 8; height: 40; width: 370 + font.pixelSize: 18; font.bold: true; color: "white" + style: Text.Outline; styleColor: "black" + } + + Repeater { + model: notes + Item { + id: stickyPage + + property int randomX: Math.random() * (page.ListView.view.width-0.5*stickyImage.width) +100 + property int randomY: Math.random() * (page.ListView.view.height-0.5*stickyImage.height) +50 + + x: randomX; y: randomY + + rotation: -flickable.horizontalVelocity / 100; + Behavior on rotation { + SpringAnimation { spring: 2.0; damping: 0.15 } + } + + Item { + id: sticky + scale: 0.7 + + Image { + id: stickyImage + x: 8 + -width * 0.6 / 2; y: -20 + source: "note-yellow.png" + scale: 0.6; transformOrigin: Item.TopLeft + smooth: true + } + + TextEdit { + id: myText + x: -104; y: 36; width: 215; height: 200 + smooth: true + font.pixelSize: 24 + readOnly: false + rotation: -8 + text: noteText + } + + Item { + x: stickyImage.x; y: -20 + width: stickyImage.width * stickyImage.scale + height: stickyImage.height * stickyImage.scale + + MouseArea { + id: mouse + anchors.fill: parent + drag.target: stickyPage + drag.axis: Drag.XandYAxis + drag.minimumY: 0 + drag.maximumY: page.height - 80 + drag.minimumX: 100 + drag.maximumX: page.width - 140 + onClicked: { myText.focus = true; myText.openSoftwareInputPanel(); } + } + } + } + + Image { + x: -width / 2; y: -height * 0.5 / 2 + source: "tack.png" + scale: 0.7; transformOrigin: Item.TopLeft + } + + states: State { + name: "pressed" + when: mouse.pressed + PropertyChanges { target: sticky; rotation: 8; scale: 1 } + PropertyChanges { target: page; z: 8 } + } + + transitions: Transition { + NumberAnimation { properties: "rotation,scale"; duration: 200 } + } + } + } + } +} + + + + + + + + diff --git a/examples/quick/touchinteraction/flickable/corkboards.qml b/examples/quick/touchinteraction/flickable/corkboards.qml index dc3aa6b378..85c62f1538 100644 --- a/examples/quick/touchinteraction/flickable/corkboards.qml +++ b/examples/quick/touchinteraction/flickable/corkboards.qml @@ -42,62 +42,33 @@ import QtQuick 2.0 import "content" Rectangle { - width: 800; height: 480 + width: 320; height: 480 color: "#464646" ListModel { id: list ListElement { - name: "Sunday" + name: "Panel One" notes: [ - ListElement { noteText: "Lunch" }, - ListElement { noteText: "Birthday Party" } + ListElement { noteText: "Tap to edit" }, + ListElement { noteText: "Drag to move" }, + ListElement { noteText: "Flick to scroll" } ] } ListElement { - name: "Monday" + name: "Panel Two" notes: [ - ListElement { noteText: "Pickup kids from\nschool\n4.30pm" }, - ListElement { noteText: "Checkout Qt" }, ListElement { noteText: "Read email" } + ListElement { noteText: "Note One" }, + ListElement { noteText: "Note Two" } ] } ListElement { - name: "Tuesday" + name: "Panel Three" notes: [ - ListElement { noteText: "Walk dog" }, - ListElement { noteText: "Buy newspaper" } - ] - } - - ListElement { - name: "Wednesday" - notes: [ ListElement { noteText: "Cook dinner" } ] - } - - ListElement { - name: "Thursday" - notes: [ - ListElement { noteText: "Meeting\n5.30pm" }, - ListElement { noteText: "Weed garden" } - ] - } - - ListElement { - name: "Friday" - notes: [ - ListElement { noteText: "More work" }, - ListElement { noteText: "Grocery shopping" } - ] - } - - ListElement { - name: "Saturday" - notes: [ - ListElement { noteText: "Drink" }, - ListElement { noteText: "Download Qt\nPlay with QML" } + ListElement { noteText: "Note Three" } ] } } @@ -111,6 +82,6 @@ Rectangle { orientation: ListView.Horizontal snapMode: ListView.SnapOneItem model: list - delegate: Day { } + delegate: Panel { } } } diff --git a/examples/quick/touchinteraction/main.cpp b/examples/quick/touchinteraction/main.cpp new file mode 100644 index 0000000000..02b249dace --- /dev/null +++ b/examples/quick/touchinteraction/main.cpp @@ -0,0 +1,41 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +#include "../../shared/shared.h" +DECLARATIVE_EXAMPLE_MAIN(touchinteraction) diff --git a/examples/quick/touchinteraction/multipointtouch/bearwhack.qml b/examples/quick/touchinteraction/multipointtouch/bearwhack.qml index db46473c05..e2910a3c5d 100644 --- a/examples/quick/touchinteraction/multipointtouch/bearwhack.qml +++ b/examples/quick/touchinteraction/multipointtouch/bearwhack.qml @@ -43,7 +43,7 @@ import "content" Item { id: root - height: 640 + height: 480 width: 320 Item { id: startScreen diff --git a/examples/quick/touchinteraction/multipointtouch/content/title.png b/examples/quick/touchinteraction/multipointtouch/content/title.png index d630ea2643..c370ee9990 100644 Binary files a/examples/quick/touchinteraction/multipointtouch/content/title.png and b/examples/quick/touchinteraction/multipointtouch/content/title.png differ diff --git a/examples/quick/touchinteraction/touchinteraction.pro b/examples/quick/touchinteraction/touchinteraction.pro new file mode 100644 index 0000000000..c56e5c8206 --- /dev/null +++ b/examples/quick/touchinteraction/touchinteraction.pro @@ -0,0 +1,10 @@ +TEMPLATE = app + +QT += quick declarative +SOURCES += main.cpp + +target.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/quick/touchinteraction +qml.files = flickable multipointtouch pincharea touchinteraction.qml +qml.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/quick/touchinteraction +INSTALLS += target qml + diff --git a/examples/quick/touchinteraction/touchinteraction.qml b/examples/quick/touchinteraction/touchinteraction.qml index b4a930c495..0be625a160 100644 --- a/examples/quick/touchinteraction/touchinteraction.qml +++ b/examples/quick/touchinteraction/touchinteraction.qml @@ -41,6 +41,25 @@ import QtQuick 2.0 import "../../shared" +/*! + \title QtQuick Examples - Touch Interaction + \example qtquick/touchinteraction + \brief This is a collection of QML Touch Interaction examples. + \image qml-touchinteraction-example.png + + This is a collection of small QML examples relating to touch interaction methods. + + Multipoint Flames demonstrates distinguishing different fingers in a MultiPointTouchArea, by assignning a different colored flame to each touch point. + + Bear-Whack demonstrates using a MultiPointTouchArea to add multiple finger support to a simple game. + + Flick Resize uses a PinchArea to allow Pinch-to-Resize behavior. + + Flickable is a simple example demonstrating the Flickable element. + + Corkboards shows a more complex Flickable usecase, with elements on the flickable that respond to mouse and keyboard interaction. +*/ + Item { height: 480 width: 320 @@ -51,6 +70,8 @@ Item { addExample("Multipoint Flames", "Create multiple flames with multiple fingers", Qt.resolvedUrl("multipointtouch/multiflame.qml")); addExample("Bear-Whack", "Use multiple touches to knock all the bears down", Qt.resolvedUrl("multipointtouch/bearwhack.qml")); addExample("Flick Resize", "Manipulate images using pinch gestures", Qt.resolvedUrl("pincharea/flickresize.qml")); + addExample("Flickable", "A viewport you can move with touch gestures", Qt.resolvedUrl("flickable/basic-flickable.qml")); + addExample("Corkboards", "Uses touch input on items inside a Flickable", Qt.resolvedUrl("flickable/corkboards.qml")); } } } -- cgit v1.2.3