diff options
author | Daniel d'Andrada <daniel.dandrada@luxoft.com> | 2018-07-25 11:36:18 +0200 |
---|---|---|
committer | Robert Griebl <robert.griebl@pelagicore.com> | 2018-07-27 13:31:53 +0000 |
commit | 580e5eac4dadfd96b591b81e4af3bf072bcb461a (patch) | |
tree | f5bc749cc1554643c619399045ddc0a5095608b0 /examples/applicationmanager/animated-windows/system-ui | |
parent | d3c84382386ffbae0a24b1b09727abf03e6f779e (diff) |
Example on animating appearance and disappearance of windows
Change-Id: Ie4bac7ca24513666ff52f5967d00e845e7cfbe00
Reviewed-by: Robert Griebl <robert.griebl@pelagicore.com>
Diffstat (limited to 'examples/applicationmanager/animated-windows/system-ui')
-rw-r--r-- | examples/applicationmanager/animated-windows/system-ui/main.qml | 212 |
1 files changed, 212 insertions, 0 deletions
diff --git a/examples/applicationmanager/animated-windows/system-ui/main.qml b/examples/applicationmanager/animated-windows/system-ui/main.qml new file mode 100644 index 00000000..3f0cafc3 --- /dev/null +++ b/examples/applicationmanager/animated-windows/system-ui/main.qml @@ -0,0 +1,212 @@ +/**************************************************************************** +** +** Copyright (C) 2018 Pelagicore AG +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Pelagicore Application Manager. +** +** $QT_BEGIN_LICENSE:BSD-QTAS$ +** Commercial License Usage +** Licensees holding valid commercial Qt Automotive Suite licenses may use +** this file in accordance with the commercial license agreement provided +** with the Software or, alternatively, in accordance with the terms +** contained in a written agreement between you and The Qt Company. For +** licensing terms and conditions see https://www.qt.io/terms-conditions. +** For further information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, 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 The Qt Company Ltd 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$ +** +** SPDX-License-Identifier: BSD-3-Clause +** +****************************************************************************/ + +import QtQuick 2.4 +import QtQuick.Layouts 1.11 +import QtApplicationManager 1.0 + +Rectangle { + width: 1024 + height: 640 + color: "linen" + + // Application icons. + // Click on an icon to start its application and click on it again to stop it. + ColumnLayout { + anchors.left: parent.left + anchors.top: parent.top + anchors.margins: 10 + spacing: 15 + Repeater { + model: ApplicationManager + ColumnLayout { + Layout.alignment: Qt.AlignHCenter + Rectangle { + Layout.alignment: Qt.AlignHCenter + width: 100; height: 100; radius: width/4 + color: model.isRunning ? "darkgrey" : "lightgrey" + Image { + anchors.fill: parent + source: icon + sourceSize.width: 100 + sourceSize.height: 100 + } + MouseArea { + anchors.fill: parent + onClicked: { + if (model.isRunning) + application.stop(); + else + application.start(); + } + } + } + Text { + Layout.alignment: Qt.AlignHCenter + text: model.name + " application" + horizontalAlignment: Text.AlignHCenter + } + } + } + } + + // Application windows. + // Each WindowObject is put in a WindowItem decorated with a border and a title bar. + Repeater { + model: ListModel { id: windowsModel } + + delegate: Rectangle { + id: winChrome + + width: 400; height: 320 + z: model.index + color: "tan" + + // Title bar text + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: model.window.application.name("en") + " application window" + } + + // Raises the window when the title bar is clicked and moves it around when dragged. + MouseArea { + anchors.fill: parent + drag.target: parent + onPressed: windowsModel.move(model.index, windowsModel.count-1, 1); + } + + // Close button + Rectangle { + width: 25; height: 25 + color: "chocolate" + Text { + anchors.fill: parent + fontSizeMode: Text.Fit; minimumPixelSize: 10; font.pixelSize: 25 + horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter + text: "x" + } + + MouseArea { + anchors.fill: parent + onClicked: model.window.close() + } + } + + // The window itself + WindowItem { + id: windowItem + anchors.fill: parent + anchors.margins: 3 + anchors.topMargin: 25 + window: model.window + } + + Component.onCompleted: { + winChrome.x = 300 + model.index * 50; + winChrome.y = 10 + model.index * 30; + } + + // Its default state represents a closed window. It's the starting point for + // an open animation and the end point for a close animation. + opacity: 0.25 + scale: 0.50 + visible: false + + // Animation code from here on + states: [ + State { + name: "open" + when: model.window && model.window.contentState === WindowObject.SurfaceWithContent + PropertyChanges { + target: winChrome + opacity: 1 + scale: 1 + visible: true + } + } + ] + + // true when the window is not being shown on the screen anymore. + // + // When the state changes away from "open", the visible property momentarily turns to false + // before being put back to true again for the disappearance animation. Hence the need for + // a more stable property. + property bool fullyDisappeared: true + + transitions: [ + Transition { // window appears + to: "open" + PropertyAction { target: winChrome; property: "fullyDisappeared"; value: false } + NumberAnimation { target: winChrome; properties: "opacity,scale"; duration: 500; easing.type: Easing.OutQuad} + }, + Transition { // window disappears + id: disappearTransition + from: "open" + SequentialAnimation { + PropertyAction { target: winChrome; property: "visible"; value: true } // we wanna see the window during the closing animation + NumberAnimation { target: winChrome; properties: "opacity,scale"; duration: 500; easing.type: Easing.InQuad} + PropertyAction { target: winChrome; property: "fullyDisappeared"; value: true } + } + } + ] + + readonly property bool safeToRemove: fullyDisappeared && model.window && model.window.contentState === WindowObject.NoSurface + onSafeToRemoveChanged: if (safeToRemove) windowsModel.remove(model.index, 1) + } + } + + // Populates the windowsModel + Connections { + target: WindowManager + onWindowAdded: windowsModel.append({"window":window}) + } +} |