From beecd8388bc5f3f95c221027318642429f1902cb Mon Sep 17 00:00:00 2001 From: Alan Alpert Date: Tue, 28 Feb 2012 13:20:56 +1000 Subject: [PATCH] Update ImageElement examples Now more consistently formed. Required a UI redesign for border image, you now view one at a time, with a selector control. Change-Id: Idf64119b644c1a79779ea0a46412247d6d013cb1 Reviewed-by: Alan Alpert Reviewed-by: Yann Bodson --- doc/src/examples/examples-groups.qdoc | 10 --- examples/qtquick/imageelements/animatedsprite.qml | 8 +- examples/qtquick/imageelements/borderimage.qml | 28 +++++-- .../imageelements/content/BorderImageSelector.qml | 96 ++++++++++++++++++++++ .../imageelements/content/MyBorderImage.qml | 2 +- examples/qtquick/imageelements/image.qml | 34 ++++---- examples/qtquick/imageelements/imageelements.pro | 10 +++ examples/qtquick/imageelements/imageelements.qml | 25 +++++- examples/qtquick/imageelements/main.cpp | 41 +++++++++ .../{spriteimage.qml => spritesequence.qml} | 6 +- 10 files changed, 214 insertions(+), 46 deletions(-) create mode 100644 examples/qtquick/imageelements/content/BorderImageSelector.qml create mode 100644 examples/qtquick/imageelements/imageelements.pro create mode 100644 examples/qtquick/imageelements/main.cpp rename examples/qtquick/imageelements/{spriteimage.qml => spritesequence.qml} (97%) diff --git a/doc/src/examples/examples-groups.qdoc b/doc/src/examples/examples-groups.qdoc index a346794..0ecd117 100644 --- a/doc/src/examples/examples-groups.qdoc +++ b/doc/src/examples/examples-groups.qdoc @@ -40,16 +40,6 @@ This example demonstrates the positioners and some of their animations. */ /*! - \title QML Examples - Image Elements - \example declarative/imageelements - \brief This is a collection of QML examples - \image qml-imageelements-example.png - - This is a collection of small QML examples relating to image elements. Each example is - a small QML file, usually containing or emphasizing a particular element or - feature. You can run and observe the behavior of each example. -*/ -/*! \title QML Examples - Models and Views \example declarative/modelviews \brief This is a collection of QML examples diff --git a/examples/qtquick/imageelements/animatedsprite.qml b/examples/qtquick/imageelements/animatedsprite.qml index 3a597bb..337456f 100644 --- a/examples/qtquick/imageelements/animatedsprite.qml +++ b/examples/qtquick/imageelements/animatedsprite.qml @@ -40,15 +40,17 @@ import QtQuick 2.0 Item { - width: 400 - height: 400 + width: 320 + height: 480 Rectangle { anchors.fill: parent color: "white" } AnimatedSprite { id: sprite - anchors.fill: parent + width: 170 + height: 170 + anchors.centerIn: parent source: "content/speaker.png" frameCount: 60 frameSync: true diff --git a/examples/qtquick/imageelements/borderimage.qml b/examples/qtquick/imageelements/borderimage.qml index 7e13249..30120fe 100644 --- a/examples/qtquick/imageelements/borderimage.qml +++ b/examples/qtquick/imageelements/borderimage.qml @@ -46,32 +46,48 @@ Rectangle { width: 320 height: 480 + BorderImageSelector { + id: selector + curIdx: 0 + maxIdx: 3 + gridWidth: 240 + flickable: mainFlickable + width: parent.width + height: 64 + } + Flickable { - anchors.fill: parent + id: mainFlickable + width: parent.width + anchors.bottom: parent.bottom + anchors.top: selector.bottom + interactive: false //Animated through selector control + contentX: -120 + Behavior on contentX { NumberAnimation {}} contentWidth: 1030 - contentHeight: 540 + contentHeight: 420 Grid { anchors.centerIn: parent; spacing: 20 MyBorderImage { - minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240 + minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200 source: "content/colors.png"; margin: 30 } MyBorderImage { - minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240 + minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200 source: "content/colors.png"; margin: 30 horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat } MyBorderImage { - minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240 + minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200 source: "content/colors.png"; margin: 30 horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat } MyBorderImage { - minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240 + minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200 source: "content/colors.png"; margin: 30 horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round } diff --git a/examples/qtquick/imageelements/content/BorderImageSelector.qml b/examples/qtquick/imageelements/content/BorderImageSelector.qml new file mode 100644 index 0000000..f3a534b --- /dev/null +++ b/examples/qtquick/imageelements/content/BorderImageSelector.qml @@ -0,0 +1,96 @@ +/**************************************************************************** +** +** 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 + +Item { + id: selector + property int curIdx: 0 + property int maxIdx: 3 + property int gridWidth: 240 + property Flickable flickable + width: parent.width + height: 64 + function advance(steps) { + var nextIdx = curIdx + steps + if (nextIdx < 0 || nextIdx > maxIdx) + return; + flickable.contentX += gridWidth * steps; + curIdx += steps; + } + Image { + source: "../../../shared/images/back.png" + MouseArea{ + anchors.fill: parent + onClicked: selector.advance(-1) + } + anchors.left: parent.left + anchors.leftMargin: 8 + anchors.verticalCenter: parent.verticalCenter + opacity: selector.curIdx == 0 ? 0.2 : 1.0 + Behavior on opacity {NumberAnimation{}} + } + Image { + source: "../../../shared/images/back.png" + mirror: true + MouseArea{ + anchors.fill: parent + onClicked: selector.advance(1) + } + opacity: selector.curIdx == selector.maxIdx ? 0.2 : 1.0 + Behavior on opacity {NumberAnimation{}} + anchors.right: parent.right + anchors.rightMargin: 8 + anchors.verticalCenter: parent.verticalCenter + } + Repeater { + model: [ "Scale", "Repeat", "Scale/Repeat", "Round" ] + delegate: Text { + text: model.modelData + anchors.verticalCenter: parent.verticalCenter + + x: (index - selector.curIdx) * 80 + 140 + Behavior on x { NumberAnimation{} } + + opacity: selector.curIdx == index ? 1.0 : 0.0 + Behavior on opacity { NumberAnimation{} } + } + } +} diff --git a/examples/qtquick/imageelements/content/MyBorderImage.qml b/examples/qtquick/imageelements/content/MyBorderImage.qml index 178e370..93880f1 100644 --- a/examples/qtquick/imageelements/content/MyBorderImage.qml +++ b/examples/qtquick/imageelements/content/MyBorderImage.qml @@ -53,7 +53,7 @@ Item { property int maxHeight property int margin - width: 240; height: 240 + width: 240; height: 200 BorderImage { id: image; anchors.centerIn: parent diff --git a/examples/qtquick/imageelements/image.qml b/examples/qtquick/imageelements/image.qml index 1595589..ccefaf6 100644 --- a/examples/qtquick/imageelements/image.qml +++ b/examples/qtquick/imageelements/image.qml @@ -44,29 +44,23 @@ import "content" Rectangle { width: 320 height: 480 - Flickable { - anchors.fill: parent - contentWidth: 490 - contentHeight: 285 - - Grid { - property int cellWidth: (width - (spacing * (columns - 1))) / columns - property int cellHeight: (height - (spacing * (rows - 1))) / rows + Grid { + property int cellWidth: (width - (spacing * (columns - 1))) / columns + property int cellHeight: (height - (spacing * (rows - 1))) / rows - anchors.fill: parent - anchors.margins: 30 + anchors.fill: parent + anchors.margins: 30 - columns: 3 - rows: 2 - spacing: 30 + columns: 2 + rows: 3 + spacing: 30 - ImageCell { mode: Image.Stretch; caption: "Stretch" } - ImageCell { mode: Image.PreserveAspectFit; caption: "PreserveAspectFit" } - ImageCell { mode: Image.PreserveAspectCrop; caption: "PreserveAspectCrop" } + ImageCell { mode: Image.Stretch; caption: "Stretch" } + ImageCell { mode: Image.PreserveAspectFit; caption: "PreserveAspectFit" } + ImageCell { mode: Image.PreserveAspectCrop; caption: "PreserveAspectCrop" } - ImageCell { mode: Image.Tile; caption: "Tile" } - ImageCell { mode: Image.TileHorizontally; caption: "TileHorizontally" } - ImageCell { mode: Image.TileVertically; caption: "TileVertically" } - } + ImageCell { mode: Image.Tile; caption: "Tile" } + ImageCell { mode: Image.TileHorizontally; caption: "TileHorizontally" } + ImageCell { mode: Image.TileVertically; caption: "TileVertically" } } } diff --git a/examples/qtquick/imageelements/imageelements.pro b/examples/qtquick/imageelements/imageelements.pro new file mode 100644 index 0000000..5300cbd --- /dev/null +++ b/examples/qtquick/imageelements/imageelements.pro @@ -0,0 +1,10 @@ +TEMPLATE = app + +QT += quick declarative +SOURCES += main.cpp + +target.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/imageelements +qml.files = borderimage.qml content imageelements.qml image.qml shadows.qml simplesprite.qml spriteimage.qml +qml.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/imageelements +INSTALLS += target qml + diff --git a/examples/qtquick/imageelements/imageelements.qml b/examples/qtquick/imageelements/imageelements.qml index f4075ec..bb23ef6 100644 --- a/examples/qtquick/imageelements/imageelements.qml +++ b/examples/qtquick/imageelements/imageelements.qml @@ -41,9 +41,28 @@ import QtQuick 2.0 import "../../shared" +/*! + \title QML Examples - Image Elements + \example declarative/imageelements + \brief This is a collection of QML examples + \image qml-imageelements-example.png + + This is a collection of small QML examples relating to image elements. + + BorderImage shows off the various scaling modes of the BorderImage item. + + Image shows off the various tiling modes of the Image item. + + Shadows shows how to create a drop shadow for a rectangle using a BorderImage. + + AnimatedSprite shows a simple use for the AnimatedSprite element. + + SpriteSequence demonstrates using the SpriteSequence element to draw an animated and slightly interactive bear. +*/ + Item { height: 480 - width: 640 + width: 320 LauncherList { id: ll anchors.fill: parent @@ -51,8 +70,8 @@ Item { addExample("BorderImage", "An image with scaled borders", Qt.resolvedUrl("borderimage.qml")); addExample("Image", "A showcase of the options available to Image", Qt.resolvedUrl("image.qml")); addExample("Shadows", "Rectangles with a drop-shadow effect", Qt.resolvedUrl("shadows.qml")); - addExample("Simple Sprite", "A simple sprite-based animation", Qt.resolvedUrl("simplesprite.qml")); - addExample("Sprite Image", "A sprite-based animation with complex transitions", Qt.resolvedUrl("spriteimage.qml")); + addExample("AnimatedSprite", "A simple sprite-based animation", Qt.resolvedUrl("animatedsprite.qml")); + addExample("SpriteSequence", "A sprite-based animation with complex transitions", Qt.resolvedUrl("spritesequence.qml")); } } } diff --git a/examples/qtquick/imageelements/main.cpp b/examples/qtquick/imageelements/main.cpp new file mode 100644 index 0000000..72850f9 --- /dev/null +++ b/examples/qtquick/imageelements/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(imageelements) diff --git a/examples/qtquick/imageelements/spriteimage.qml b/examples/qtquick/imageelements/spritesequence.qml similarity index 97% rename from examples/qtquick/imageelements/spriteimage.qml rename to examples/qtquick/imageelements/spritesequence.qml index 372970d..01f34e5 100644 --- a/examples/qtquick/imageelements/spriteimage.qml +++ b/examples/qtquick/imageelements/spritesequence.qml @@ -40,8 +40,8 @@ import QtQuick 2.0 Item { - width: 480 - height: 1280 + width: 320 + height: 480 MouseArea { onClicked: anim.start(); anchors.fill: parent @@ -49,7 +49,7 @@ Item { SequentialAnimation { id: anim ScriptAction { script: image.goalSprite = "falling"; } - NumberAnimation { target: image; property: "y"; to: 1480; duration: 12000; } + NumberAnimation { target: image; property: "y"; to: 480; duration: 12000; } ScriptAction { script: {image.goalSprite = ""; image.jumpTo("still");} } PropertyAction { target: image; property: "y"; value: 0 } } -- 2.7.4