diff --git a/doc/qtdesignstudio/examples/clustertutorial/ClusterTutorial.qmlproject b/doc/qtdesignstudio/examples/clustertutorial/ClusterTutorial.qmlproject new file mode 100644 index 00000000000..94dd80cfdc3 --- /dev/null +++ b/doc/qtdesignstudio/examples/clustertutorial/ClusterTutorial.qmlproject @@ -0,0 +1,89 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt 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$ +** +****************************************************************************/ + +import QmlProject 1.1 + +Project { + mainFile: "ClusterTutorial.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + Files { + filter: "*.conf" + files: ["qtquickcontrols2.conf"] + } + + Files { + filter: "qmldir" + directory: "." + } + + Environment { + QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" + QT_AUTO_SCREEN_SCALE_FACTOR: "1" + } + + /* List of plugin directories passed to QML runtime */ + importPaths: [ "imports", "backend"] + + /* Required for deployment */ + targetDirectory: "/opt/ClusterTutorial" +} diff --git a/doc/qtdesignstudio/examples/coffeemachine/ApplicationFlow.qml b/doc/qtdesignstudio/examples/coffeemachine/ApplicationFlow.qml new file mode 100644 index 00000000000..eaeffa83e78 --- /dev/null +++ b/doc/qtdesignstudio/examples/coffeemachine/ApplicationFlow.qml @@ -0,0 +1,91 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt 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$ +** +****************************************************************************/ + +import QtQuick 2.4 +import CoffeeMachine 1.0 + +ApplicationFlowForm { + id: applicationFlow + state: "initial" + + property int animationDuration: 400 + + choosingCoffee.brewButtonSelection.onClicked: { + applicationFlow.state = "to settings" + applicationFlow.choosingCoffee.milkSlider.value = applicationFlow.choosingCoffee.sideBar.currentMilk + applicationFlow.choosingCoffee.sugarSlider.value = 2 + } + + choosingCoffee.sideBar.onCoffeeSelected: { + applicationFlow.state = "selection" + } + + choosingCoffee.backButton.onClicked: { + applicationFlow.state = "back to selection" + } + + choosingCoffee.brewButton.onClicked: { + applicationFlow.state = "to empty cup" + } + + emptyCup.continueButton.onClicked: { + applicationFlow.state = "to brewing" + brewing.coffeeName = choosingCoffee.sideBar.currentCoffee + brewing.foamAmount = choosingCoffee.sideBar.currentFoam + brewing.milkAmount = applicationFlow.choosingCoffee.milkSlider.value + brewing.coffeeAmount = choosingCoffee.sideBar.currentCoffeeAmount + brewing.start() + } + + brewing.onFinished: { + applicationFlow.state = "reset" + } + +} diff --git a/doc/qtdesignstudio/examples/coffeemachine/CoffeeButton.qml b/doc/qtdesignstudio/examples/coffeemachine/CoffeeButton.qml new file mode 100644 index 00000000000..d2d9e858730 --- /dev/null +++ b/doc/qtdesignstudio/examples/coffeemachine/CoffeeButton.qml @@ -0,0 +1,159 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt 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$ +** +****************************************************************************/ + +import QtQuick 2.4 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 +import CoffeeMachine 1.0 + +Image { + id: root + source: "images/icons/coffees/Cappuccino.png" + signal clicked + + property int duration: 250 + property alias text: label.text +//! [0] + MouseArea { + anchors.fill: parent + onClicked: root.clicked() + onPressed: { + glow.visible = true + animation1.start() + animation2.start() + } + } +//! [0] + + Rectangle { + id: glow + visible: false + + width: 250 + height: 250 + color: "#00000000" + radius: 125 + scale: 1.05 + border.color: "#ffffff" + } + + Label { + id: label + x: 292 + y: 252 + text: qsTr("Label") + anchors.horizontalCenter: parent.horizontalCenter + color: "#443224" + font.family: Constants.fontFamily + font.pixelSize: 28 + } + + PropertyAnimation { + target: glow + id: animation1 + duration: root.duration + loops: 1 + from: 1.05 + to: 1.2 + property: "scale" + } + + ParallelAnimation { + id: animation2 + SequentialAnimation { + PropertyAnimation { + target: glow + duration: root.duration + loops: 1 + from: 0.2 + to: 1.0 + property: "opacity" + } + PropertyAnimation { + target: glow + duration: root.duration + loops: 1 + from: 1.0 + to: 0.0 + property: "opacity" + } + + PropertyAction { + target: glow + property: "visible" + value: false + } + } + + SequentialAnimation { + PropertyAction { + target: glow + property: "border.width" + value: 20 + } + + PauseAnimation { + duration: 200 + } + + PropertyAnimation { + target: glow + duration: root.duration + loops: 1 + from: 20 + to: 10 + property: "border.width" + } + } + } + + + +} diff --git a/doc/qtdesignstudio/examples/coffeemachine/CoffeeMachine.qmlproject b/doc/qtdesignstudio/examples/coffeemachine/CoffeeMachine.qmlproject new file mode 100644 index 00000000000..8a2ecfb6afe --- /dev/null +++ b/doc/qtdesignstudio/examples/coffeemachine/CoffeeMachine.qmlproject @@ -0,0 +1,89 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt 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$ +** +****************************************************************************/ + +import QmlProject 1.1 + +Project { + mainFile: "CoffeeMachine.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + Files { + filter: "*.conf" + files: ["qtquickcontrols2.conf"] + } + + Files { + filter: "qmldir" + directory: "." + } + + Environment { + QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" + QT_AUTO_SCREEN_SCALE_FACTOR: "1" + } + + /* List of plugin directories passed to QML runtime */ + importPaths: [ "imports" ] + + /* Required for deployment */ + targetDirectory: "/opt/CoffeeMachine" +} diff --git a/doc/qtdesignstudio/examples/coffeemachine/SideBar.qml b/doc/qtdesignstudio/examples/coffeemachine/SideBar.qml new file mode 100644 index 00000000000..241f78fc47f --- /dev/null +++ b/doc/qtdesignstudio/examples/coffeemachine/SideBar.qml @@ -0,0 +1,100 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt 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$ +** +****************************************************************************/ + +import QtQuick 2.4 + +SideBarForm { + id: sideBar + property string currentCoffee: qsTr("Cappuccino") + signal coffeeSelected + property real currentFoam: 1 + property real currentMilk: 0 + property real currentCoffeeAmount: 4 + + Behavior on currentMilk { + NumberAnimation { duration: 250 } + } + + Behavior on currentCoffeeAmount { + NumberAnimation { duration: 250 } + } + + macchiatoButton.onClicked: { + sideBar.currentCoffee = qsTr("Macchiato") + sideBar.currentFoam = 1 + sideBar.currentMilk = 1 + sideBar.currentCoffeeAmount = 4 + sideBar.coffeeSelected() + } + + latteButton.onClicked: { + sideBar.currentCoffee = qsTr("Latte") + sideBar.currentFoam = 1 + sideBar.currentMilk = 10 + sideBar.currentCoffeeAmount = 3 + sideBar.coffeeSelected() + } + + espressoButton.onClicked: { + sideBar.currentCoffee = qsTr("Espresso") + sideBar.currentFoam = 0 + sideBar.currentMilk = 0 + sideBar.currentCoffeeAmount = 4 + sideBar.coffeeSelected() + } + + cappuccinoButton.onClicked: { + sideBar.currentCoffee = qsTr("Cappuccino") + sideBar.currentFoam = 1 + sideBar.currentMilk = 7 + sideBar.currentCoffeeAmount = 3.5 + sideBar.coffeeSelected() + } +} diff --git a/doc/qtdesignstudio/examples/doc/clustertutorial.qdoc b/doc/qtdesignstudio/examples/doc/clustertutorial.qdoc new file mode 100644 index 00000000000..ce93c7bae2c --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/clustertutorial.qdoc @@ -0,0 +1,50 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt 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. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \example ClusterTutorial + \ingroup studioexamples + \brief Contains sources for the Cluster Tutorial videos. + + \title Cluster Tutorial + + \e {Cluster Tutorial} example contains the source files for a set of + video tutorials that explain how to export designs from Adobe + Photoshop to \QDS and to edit them to create Qt Quick UIs. + + Select the \uicontrol Tutorials tab in the Welcome mode to watch the + following tutorials: + + \list + \li Part 1 provides an introduction to \QDS and \QB Adobe Photoshop + exporter. + \li Part 2 describes adding custom fonts and getting started with the + timeline. + \li Part 3 describes creating animations, applying effects, and using + ISO icons. + \li Part 4 describes using bindings and mock data. + \li Part 5 describes states, animation, and easing curves. + \endlist +*/ diff --git a/doc/qtdesignstudio/examples/doc/coffeemachine.qdoc b/doc/qtdesignstudio/examples/doc/coffeemachine.qdoc new file mode 100644 index 00000000000..7742b7eba46 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/coffeemachine.qdoc @@ -0,0 +1,175 @@ +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt 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. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \example CoffeeMachine + \ingroup studioexamples + + \title Coffee Machine + \brief Illustrates how to use the timeline and states to animate transitions + in a UI. + + \image coffee-machine-overview.png + + \e {Coffee Machine} lets users choose the type of coffee to brew. + They can determine the ratio of coffee, hot milk, and milk foam by using + sliders. The progress of the brewing process is displayed as + an animation. When the coffee is ready, the startup screen appears again. + + The \e {ApplicationFlow.ui.qml} file contains all the screens in the + UI. We use states to display the appropriate screen in the + viewport and the timeline to animate the transitions between and on + the screens. + + \section1 Application Flow + + On the startup screen, \e {AnimationFlowForm.ui.qml}, users can select + from several types of coffee to fill the empty cup. The selection + triggers \c animation1 and \c animation2 in \e {CoffeeButton.qml}. + + \quotefromfile CoffeeMachine/CoffeeButton.qml + \skipto PropertyAnimation + \printuntil } + \printuntil } + \dots + + Selecting the coffee type triggers the respective signal handler in + \e {SideBar.qml}, which sets the default mix for the selected coffee type. + The following code snippet displays the \c {cappuccinoButton.onClicked()} + signal handler: + + \quotefromfile CoffeeMachine/SideBar.qml + \skipto cappuccinoButton.onClicked + \printuntil } + + The \c {sideBar.coffeeSelected()} signal sets \c {applicationFlow.state} + in \e {ApplicationFlow.qml} to \c "selection". We will specify the states + later. + + \quotefromfile CoffeeMachine/ApplicationFlow.qml + \skipto choosingCoffee.sideBar.onCoffeeSelected + \printuntil } + + \image coffee-machine-selection.png + + Clicking \uicontrol {Brew me a cup} triggers the + \c {choosingCoffee.brewButtonSelection.onClicked} + signal handler, which changes the application flow + state to \c {"to settings"}: + + \quotefromfile CoffeeMachine/ApplicationFlow.qml + \skipto choosingCoffee.brewButtonSelection.onClicked + \printuntil } + + Users can use the sliders for the amount of milk and + sugar to change the default values. + + \image coffee-machine-modify.png + + Clicking \uicontrol Brew triggers the + \c {choosingCoffee.brewButton.onClicked()} + signal handler, which sets the application + flow state to \c {"to empty cup"}. + + \skipto choosingCoffee.brewButton.onClicked + \printuntil } + + \image coffee-machine-emptycup.png + + Clicking on \uicontrol Continue triggers the + \c {emptyCup.continueButton.onClicked} signal + handler, which sets the application flow status + to \c {"to brewing"}. + + \skipto emptyCup.continueButton.onClicked + \printuntil } + + When the coffee is ready, the \c {brewing.onFinished} signal handler + is triggered. It sets the application flow status to \c "reset", so + that the application returns to the startup screen. + + \section1 Using Timelines to Animate Transitions + + The Coffee Machine application screens for choosing coffee, empty cup, and + brewing each use custom QML types specified in separate QML files. + + We use the \uicontrol Timeline view to animate the transitions between + the screens during the application flow in \e {ApplicationFlow.ui.qml}. + + \image coffee-machine-timeline.png + + Our viewport contains 200 frames, so we select the + \inlineimage plus.png "Plus button" + button to add a 1200-frame timeline to the root element. + We use the default values for all other fields. + + To start recording the transition from the startup screen to the coffee + selection screen on the timeline, we select \e choosingCoffee in the + \uicontrol Navigator. We check that the playhead is at frame 0, and then + select the \inlineimage recordfill.png + (\uicontrol {Auto Key (K)}) button (or press \key k). + + At frame 0, we set the X coordinate to 0 in \uicontrol Properties > + \uicontrol Geometry > \uicontrol Position. We then move the playhead + to 400 frames and set the X coordinate to a negative value. + + \image coffee-machine-properties.png + + When we deselect the record button to stop recording the timeline, the + new timeline appears in the view. + + For more information about using the timeline, see \l {Creating Animations}. + + \section1 Using States to Move Between Screens + + We use the \uicontrol States view to determine the contents of the + viewport. The animations are run when moving from one state to another. + + \image coffee-machine-states.png + + We create the states by moving from viewport to viewport in + \e ApplicationFlow.ui.qml and clicking \inlineimage plus.png "Add button" + in the \uicontrol States view. + + We also create states for animations that are run when moving to the + \c {"settings"} and \c {"selection"} states. + + We then return to the \uicontrol Timeline view and select + \inlineimage animation.png "Timeline Settings button" + to open the \uicontrol {Timeline Settings} dialog. We select + the \uicontrol Add button to create animations for each part + of the timeline. Therefore, the start and end frame of each + animation are important, whereas their duration is not. + + \image coffee-machine-timeline-settings.png + + We set the start frame for the \c {"selection"} state to 400 and + the end frame to 200, because we are moving back on the timeline to display + the selection sidebar. + + In the \uicontrol {Transitions to states} field, we select the state to + switch to when the animation ends. In the lower part of the dialog, we + bind the states that don't have animations to fixed frames. +*/ diff --git a/doc/qtdesignstudio/examples/doc/ebikedesign.qdoc b/doc/qtdesignstudio/examples/doc/ebikedesign.qdoc new file mode 100644 index 00000000000..a6d95b07b06 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/ebikedesign.qdoc @@ -0,0 +1,129 @@ +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt 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. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \example EBikeDesign + \ingroup studioexamples + + \title E-Bike Design + \brief Illustrates how to use the timeline and states to animate transitions + in an application. + + \image ebikedesign.png "Standard screen" + + \e {E-Bike Design} is a control center application for electric bikes. + The application contains a Standard screen that displays a speedometer, + a Trip screen that displays statistics about the current trip, and a + Navigator screen that displays a map. + + The Trip and Navigator screens display a small animated speedometer that + the users can select to move back to the Standard screen. + + \image ebikedesign-trip.png "Trip screen" + + In the \e {Screen01.ui.qml} file, we place the screens in a row in the + following order from left to right: Trip, Standard, Navigator. We will + use states to show the appropriate screen in the viewport, and the timeline + to animate the transitions between and on the screens. + + \section1 Using Timelines to Animate Transitions + + We use the \uicontrol Timeline view to animate the transitions between + the screens in \e {Screen01.ui.qml}. + + Our viewport contains 1000 frames, so we select the + \inlineimage plus.png "Plus button" + button to add a 5000-frame timeline to the root element. + We use the default values for all other fields. + + To start recording the transitions between the Standard screen and the + Trip and Navigator screens on the timeline, we select \e screenCanvas in + the Design mode \uicontrol Navigator view. We check that the playhead is at + frame 0, and then select the \inlineimage recordfill.png + (\uicontrol {Auto Key (K)}) button (or press \key k). + + \image ebikedesign-timeline.png "Timeline view" + + At frame 0, we set the X coordinate to 0 in \uicontrol Properties > + \uicontrol Geometry > \uicontrol Position to display the Trip screen. + We then move the playhead to frame 1000 and set the X coordinate to + -1286 to display the Standard screen. We continue by moving the playhead + to frame 2000 and setting the X coordinate to -2560 to display the + Navigator screen. At frame 3000, we set the X coordinate back to -1268 + to return to the Standard screen. Finally, at frame 4000, we set the X + coordinate to -19 to return to the Trip screen. + + When we deselect the record button to stop recording the timeline, the + new timeline appears in the view. + + When we select \e tripScreen in the \uicontrol Navigator, we can see the + properties of the TripScreen QML type that we can animate in the + \uicontrol Properties view. + + \image ebikedesign-trip-properties.png "Properties view of the Trip type" + + We set values for the \uicontrol Visibility, + \uicontrol Opacity, \uicontrol currentFrame, and \uicontrol Scale properties + to fade out the current screen when moving to another one and to make the + speedometer grow and shrink in size depending on its current position. + + For more information about using the timeline, see \l {Creating Animations}. + + \section1 Using States to Move Between Screens + + We use the \uicontrol States view to determine the contents of the viewport. + The animations are run in a particular state or when moving from one state + to another. + + \image ebikedesign-states.png "States view" + + We create the states for displaying the Trip, Standard, and Navigation + screens by moving from viewport to viewport in \e Screen01.ui.qml and + clicking \inlineimage plus.png "Add button" in the \uicontrol States view + when the appropriate screen is displayed in the viewport. + + We then create states for animations that are run when moving between the + screens: TripToStandard, StandardToNavigation, NavigationToStandard, and + StandardToTrip. + + Finally, we create states for enlarging and shrinking the speedometer: Big, + ToBig, and FromBig. + + We then return to the \uicontrol Timeline view and select + \inlineimage animation.png "Timeline Settings button" + to open the \uicontrol {Timeline Settings} dialog. We select + the \uicontrol Add button to create animations for each part + of the timeline. Therefore, the start and end frame of each + animation are important, whereas their duration is not. + + \image ebikedesign-timeline-settings.png "Timeline Settings dialog" + + We set the start and end frames for the transitions to states to match the + values of the X coordinate we set on the timeline. + + In the \uicontrol {Transitions to states} field, we select the state to + switch to when the animation ends. In the lower part of the dialog, we + bind the states that don't have animations to fixed frames. +*/ diff --git a/doc/qtdesignstudio/examples/doc/images/coffee-machine-emptycup.png b/doc/qtdesignstudio/examples/doc/images/coffee-machine-emptycup.png new file mode 100644 index 00000000000..aa791ccd0e2 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/coffee-machine-emptycup.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/coffee-machine-modify.png b/doc/qtdesignstudio/examples/doc/images/coffee-machine-modify.png new file mode 100644 index 00000000000..e1977821aaf Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/coffee-machine-modify.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/coffee-machine-overview.png b/doc/qtdesignstudio/examples/doc/images/coffee-machine-overview.png new file mode 100644 index 00000000000..3a8c069a557 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/coffee-machine-overview.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/coffee-machine-properties.png b/doc/qtdesignstudio/examples/doc/images/coffee-machine-properties.png new file mode 100644 index 00000000000..0cff9dbf835 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/coffee-machine-properties.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/coffee-machine-selection.png b/doc/qtdesignstudio/examples/doc/images/coffee-machine-selection.png new file mode 100644 index 00000000000..810857ed7b9 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/coffee-machine-selection.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/coffee-machine-states.png b/doc/qtdesignstudio/examples/doc/images/coffee-machine-states.png new file mode 100644 index 00000000000..c21007a43ce Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/coffee-machine-states.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/coffee-machine-timeline-settings.png b/doc/qtdesignstudio/examples/doc/images/coffee-machine-timeline-settings.png new file mode 100644 index 00000000000..bf08d8ef73a Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/coffee-machine-timeline-settings.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/coffee-machine-timeline.png b/doc/qtdesignstudio/examples/doc/images/coffee-machine-timeline.png new file mode 100644 index 00000000000..3f3d7d9e07e Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/coffee-machine-timeline.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/ebikedesign-states.png b/doc/qtdesignstudio/examples/doc/images/ebikedesign-states.png new file mode 100644 index 00000000000..a215700d6bf Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/ebikedesign-states.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/ebikedesign-timeline-settings.png b/doc/qtdesignstudio/examples/doc/images/ebikedesign-timeline-settings.png new file mode 100644 index 00000000000..f0ba42d9c53 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/ebikedesign-timeline-settings.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/ebikedesign-timeline.png b/doc/qtdesignstudio/examples/doc/images/ebikedesign-timeline.png new file mode 100644 index 00000000000..934d874e337 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/ebikedesign-timeline.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/ebikedesign-trip-properties.png b/doc/qtdesignstudio/examples/doc/images/ebikedesign-trip-properties.png new file mode 100644 index 00000000000..6c63f3d981f Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/ebikedesign-trip-properties.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/ebikedesign-trip.png b/doc/qtdesignstudio/examples/doc/images/ebikedesign-trip.png new file mode 100644 index 00000000000..9de59c0132e Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/ebikedesign-trip.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/ebikedesign.png b/doc/qtdesignstudio/examples/doc/images/ebikedesign.png new file mode 100644 index 00000000000..c517c4b56b9 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/ebikedesign.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/progressbar-animated.png b/doc/qtdesignstudio/examples/doc/images/progressbar-animated.png new file mode 100644 index 00000000000..7a9a9d38a40 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/progressbar-animated.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/progressbar-bindings-progress.png b/doc/qtdesignstudio/examples/doc/images/progressbar-bindings-progress.png new file mode 100644 index 00000000000..5e891100a63 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/progressbar-bindings-progress.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/progressbar-move-component.png b/doc/qtdesignstudio/examples/doc/images/progressbar-move-component.png new file mode 100644 index 00000000000..a9c7008a156 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/progressbar-move-component.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/progressbar-rectangle.png b/doc/qtdesignstudio/examples/doc/images/progressbar-rectangle.png new file mode 100644 index 00000000000..208e5ffe18a Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/progressbar-rectangle.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/progressbar-root-export-property.png b/doc/qtdesignstudio/examples/doc/images/progressbar-root-export-property.png new file mode 100644 index 00000000000..98e07161db1 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/progressbar-root-export-property.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-indicator-color.png b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-indicator-color.png new file mode 100644 index 00000000000..417e3bb0291 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-indicator-color.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-indicator.png b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-indicator.png new file mode 100644 index 00000000000..4466876b7ed Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-indicator.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-settings.png b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-settings.png new file mode 100644 index 00000000000..64862dbbd0e Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-settings.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/progressbar-timeline.png b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline.png new file mode 100644 index 00000000000..ad644d4bb5d Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/progressbar.png b/doc/qtdesignstudio/examples/doc/images/progressbar.png new file mode 100644 index 00000000000..dfae54abc69 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/progressbar.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/sidemenu-connections.png b/doc/qtdesignstudio/examples/doc/images/sidemenu-connections.png new file mode 100644 index 00000000000..7251ddd0512 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/sidemenu-connections.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/sidemenu-custombutton-property-bindings.png b/doc/qtdesignstudio/examples/doc/images/sidemenu-custombutton-property-bindings.png new file mode 100644 index 00000000000..a89921dc8ee Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/sidemenu-custombutton-property-bindings.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/sidemenu-custombutton-states.png b/doc/qtdesignstudio/examples/doc/images/sidemenu-custombutton-states.png new file mode 100644 index 00000000000..950058c5d82 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/sidemenu-custombutton-states.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/sidemenu-effects-stack.png b/doc/qtdesignstudio/examples/doc/images/sidemenu-effects-stack.png new file mode 100644 index 00000000000..9e3796fad46 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/sidemenu-effects-stack.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/sidemenu-menubar.png b/doc/qtdesignstudio/examples/doc/images/sidemenu-menubar.png new file mode 100644 index 00000000000..bdb3a314715 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/sidemenu-menubar.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/sidemenu-states.png b/doc/qtdesignstudio/examples/doc/images/sidemenu-states.png new file mode 100644 index 00000000000..6a8adb64aa7 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/sidemenu-states.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/sidemenu-timeline-settings.png b/doc/qtdesignstudio/examples/doc/images/sidemenu-timeline-settings.png new file mode 100644 index 00000000000..236f1f409a5 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/sidemenu-timeline-settings.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/sidemenu-timeline.png b/doc/qtdesignstudio/examples/doc/images/sidemenu-timeline.png new file mode 100644 index 00000000000..9548ddc087e Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/sidemenu-timeline.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/sidemenu-ui.png b/doc/qtdesignstudio/examples/doc/images/sidemenu-ui.png new file mode 100644 index 00000000000..d99e4e11d92 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/sidemenu-ui.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/sidemenu.png b/doc/qtdesignstudio/examples/doc/images/sidemenu.png new file mode 100644 index 00000000000..d1c1cd750be Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/sidemenu.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/webinardemo-blureffect.png b/doc/qtdesignstudio/examples/doc/images/webinardemo-blureffect.png new file mode 100644 index 00000000000..32a40a8de52 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/webinardemo-blureffect.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/webinardemo-mainappui.png b/doc/qtdesignstudio/examples/doc/images/webinardemo-mainappui.png new file mode 100644 index 00000000000..29d39c82678 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/webinardemo-mainappui.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-fastblur.png b/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-fastblur.png new file mode 100644 index 00000000000..5fd69e6f250 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-fastblur.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-layoutref.png b/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-layoutref.png new file mode 100644 index 00000000000..b7d7b1e1148 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-layoutref.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-stacklayout.png b/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-stacklayout.png new file mode 100644 index 00000000000..3cb90b1a1a1 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-stacklayout.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/webinardemo-states.png b/doc/qtdesignstudio/examples/doc/images/webinardemo-states.png new file mode 100644 index 00000000000..83755e876a5 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/webinardemo-states.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/webinardemo-timeline.png b/doc/qtdesignstudio/examples/doc/images/webinardemo-timeline.png new file mode 100644 index 00000000000..c6c0976eeda Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/webinardemo-timeline.png differ diff --git a/doc/qtdesignstudio/examples/doc/progressbar.qdoc b/doc/qtdesignstudio/examples/doc/progressbar.qdoc new file mode 100644 index 00000000000..208e97bf8df --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/progressbar.qdoc @@ -0,0 +1,237 @@ +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt 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. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \example ProgressBar + \ingroup studioexamples + + \title Progress Bar + \brief Illustrates how to use timelines to create an animated progress bar. + + \image progressbar.png "Progress Bar example application" + + \e {Progress Bar} animates rectangles and numbers using timelines. + + \section1 Creating the Progress Bar + + First, we create an empty Qt Quick project, as described in + \l {Creating Projects}. For the purposes of this example, + we call the project \e progressbar. + + In this example, we use two overlapping rectangles and a text label to + create the progress bar. For another example of a progress bar, see the + \l [QtQuickControls2] {ProgressBar} in Qt Quick Controls. + + In the Design mode, we drag and drop a \uicontrol Rectangle from the + \uicontrol Library to the \uicontrol {Form Editor} and modify its size + to create the background for the progress bar. We change its id to + \e background in the \uicontrol Properties view. + + We want to be able to control the background rectangle and the text label + that was added by the project wizard, so we will use an \uicontrol Item + for that. We drag and drop the item from the \uicontrol Library to the + \uicontrol {Form Editor} and change its id to \e root in the + \uicontrol Properties view. + + To make the background and text children of the item, we drag and drop them + to the item in the \uicontrol Navigator view. This enables us to use the anchor + buttons in \uicontrol Properties > \uicontrol Layout to anchor them to their + parent. We anchor the background to its parent on all edges, with a 30-pixel + margin at the top to leave space for the text. We then anchor the text to + the top of the item. + + \image progressbar-rectangle.png "Progress bar background in the Form Editor" + + We now drag and drop another rectangle on top of the background rectangle in + the \uicontrol Navigator and change its id to \e indicator in the properties. + We then anchor the left, top, and bottom of the indicator to its parent with + 5-pixel margins. We leave the right side free, because its value needs to + change for the animation. + + For more information about creating and positioning components, see + \l {Creating Components}. + + \section1 Animating Progress Bar Elements + + The text label will indicate the progress in numbers and changing color, + while the indicator rectangle will indicate it by getting wider and + changing color. To animate the label and indicator, we'll add timelines + in the \uicontrol Timeline view. + + For more information about using the timeline, see \l {Creating Animations}. + + \section2 Adding Color Animation + + First, we add a color animation to the \e root item. We select the + \inlineimage plus.png + button to add a 100-frame timeline to root. You can use the default + values for all other fields. + + \image progressbar-timeline-settings.png "Timeline settings" + + To start recording a color animation on the timeline, we check that the + playhead is at frame 0 and then select the \inlineimage recordfill.png + (\uicontrol {Auto Key (K)}) button (or press \key k). + + \image progressbar-timeline.png "Color animation timeline" + + We then set the color at frame 0 to green (\e {#8de98d}) in + \uicontrol Properties > \uicontrol Text > \uicontrol {Text Color}. + We can either pick a color from the color selector or use the + \uicontrol {Set Binding} command in the \inlineimage submenu.png + (\uicontrol Settings) menu to open the \uicontrol {Binding Editor}. + + We then move the playhead to frame 50 and set the text color to red + (\e {#de4f4f}). Finally, we move the playhead to frame 100 and set + the color to yellow (\e {#f0c861}). + + When we deselect the record button to stop recording the timeline, the + new timeline appears in the view. + + We can drag the playhead along the timeline to see the color animation. + + \section2 Animating the Indicator + + We select \e indicator in \uicontrol Navigator and then select the record + button again to animate the width of the indicator. At frame 0, we set the + width to 0 in \uicontrol Properties > \uicontrol Geometry > \uicontrol Size. + We then move the playhead to 100 frames and set the width to 590. + + \image progressbar-timeline-indicator.png "Indicator timeline" + + We will now copy the color animation from the text label to the indicator. + First, we right-click the text item in the \uicontrol Timeline view to open + a context menu and select \uicontrol {Copy All Keyframes from Item} to copy + the keyframe values we specified for the text label. + + Next, we select the indicator in the \uicontrol Navigator, and then select + \uicontrol {Insert Keyframes for Item} to paste the keyframe + values to the indicator. + + \image progressbar-timeline-indicator-color.png "Indicator timeline with color animation" + + When we move the playhead, we can see that the color animation is also + applied to the indicator. + + \section1 Creating a Reusable Component + + We want the progress bar to be reusable, so we'll move it to a separate + QML file. To make sure that the component will contain the timeline, we + select \uicontrol {Filter Tree} in the \uicontrol Navigator, and then + deselect the \uicontrol {Show Only Visible Items} check box to show the + timeline item in the \uicontrol Navigator. We then move the timeline item + to \e root to have it moved as a part of the root component. + + Now we can right-click root to open a context menu and select + \uicontrol {Move Component into Separate File}. We can see the + properties that will be available from outside of the component. + + \image progressbar-move-component.png "Move Component into Separate File dialog" + + \section1 Exporting Properties + + We now select the root component in the \uicontrol Navigator, and + then select \uicontrol {Go into Component} in the context menu to + open \e Root.qml in the \uicontrol {Form Editor}. + + We want to be able to use the keyframe value as the value of the text label, + so we will export it as a property alias. We select \e timeline in the + \uicontrol Navigator and then \uicontrol Properties > \uicontrol Timeline > + \uicontrol {Current frame} > \uicontrol Settings > + \uicontrol {Export Property as Alias}. + + \image progressbar-root-export-property.png "Export keyframe group as a property" + + When we select \e root in the \uicontrol Navigator, we can see the + \e timelineCurrentFrame property in \uicontrol Connections + > \uicontrol Bindings. We double-click it to change its name + to \e progress. + + \image progressbar-bindings-progress.png "Connections view Bindings tab" + + We will bind some JavaScript to the value of the text label to turn + it into a running number that reflects the number of the keyframe on the + timeline. We select the text label in the \uicontrol Navigator, and then + select \uicontrol Properties > \uicontrol Text > \uicontrol {Set Binding} + to open the \uicontrol {Binding Editor}. We set + \c {Math.round(root.progress)} as the value of the text label. + + When we move back to the top-level file, we can see that the number of the + current keyframe (0) is displayed as the value of the text label. + + \section1 Animating Progress Bar Instances + + We want to experiment with different start and end values and easing curves, + so we copy-paste the progress bar instance twice in the top-level file. We + use a column layout to lay out the progress bar instances. + + We can now add timelines for each progress bar instance, with different + settings. We select the \inlineimage plus.png + button to add a 4000-frame timeline to the first progress bar instance + (\e root). We select the \uicontrol Continuous check box, so that the + animation will loop. + + In \uicontrol Properties > \uicontrol Root, we can see the + \uicontrol progress property that we can animate. If we had + called the component and property something else, we would + see the names we gave them here. + + With the playhead in the first frame, we select the record button and + give the \uicontrol progress property the initial value of \e 5. We then + move the playhead to frame 2000 and give it the value of \e 95. We + continue to the last frame and set the value back to \e 5 to have a + smooth looping animation. + + When we select the \uicontrol {Show Live Preview} button on the + \uicontrol {Form Editor} toolbar, we see a running number and moving + progress indicator of the animated progress bar instance. + + \image progressbar-animated.png + + We now change the settings of the other two progress bar instances. We + make one of the indicators move from right to left by starting from frame + 100. When all our progress bar instances have been animated, we'll continue + by specifying easing curves for them. + + For more information about previewing UIs, see \l {Previewing}. + + \section1 Specifying Easing Curves + + We can add custom easing curves to every keyframe in the animations. First, + we select the keyframe to add the easing curve to, and then select + \uicontrol {Edit Easing Curve} in the context menu. We can select several + keyframes simultaneously if we want to use the same easing curve for them. + + We select the easing curve in the \uicontrol {Easing Curve Editor}. + + \image studio-easing-curve-editor.png "Easing Curve Editor" + + When we apply easing curves to animations, the shape of the keyframe + marker changes from \inlineimage keyframe_linear_inactive.png + to \inlineimage keyframe_manualbezier_inactive.png + . + + For more information, see \l{Editing Easing Curves}. +*/ diff --git a/doc/qtdesignstudio/examples/doc/sidemenu.qdoc b/doc/qtdesignstudio/examples/doc/sidemenu.qdoc new file mode 100644 index 00000000000..498b017ca34 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/sidemenu.qdoc @@ -0,0 +1,235 @@ +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt 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. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \example SideMenu + \ingroup studioexamples + + \title Side Menu + \brief Illustrates how to create reusable components and an animated menu + for applying effects. + + \image sidemenu.png "Side menu example application" + + \e {Side Menu} displays a menu bar and a side menu that slides open when + users click the menu icon. The appearance of the menu bar buttons changes + when users hover the cursor over them or select them. + + Each button opens an image file. The side menu can be used to apply + \l {Qt Graphical Effects}{graphical effects}, such as hue, saturation, + and blur, to the images. + + \section1 Creating Reusable Buttons + + We select \uicontrol File > \uicontrol {New File or Project} > + \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls} > + \uicontrol {Custom Button} to create a reusable menu bar button + that we call \e CustomButton. + + The button can have the following states: checked, hover, pressed, and + normal. We construct the button using different images for the button + background, frame, and front. We then add states in the \uicontrol States + view for each of the button states. In each state, we turn the visibility + of the appropriate images on or off in the button properties, to change + the appearance of the button. + + \image sidemenu-custombutton-states.png "CustomButton QML type states" + + To change the button text when the button state changes, we bind the + text property to the state of the button in the \uicontrol Properties view. + When \e control is selected in the \uicontrol Navigator, we select the + \uicontrol Settings menu for the \uicontrol Text property, and then select + \uicontrol {Set Binding}. In the \uicontrol {Binding Editor}, we set the + binding to \c control.state. + + \image sidemenu-custombutton-property-bindings.png + + We want the buttons to be checkable, so we set the + \l {AbstractButton::}{checkable} property to \c true. + + We now select \uicontrol {Set when Condition} in the \uicontrol Settings menu + for the states to bind the properties to the states using \c when + conditions. First, we specify that a button instance enters the \e checked + state when the \l {AbstractButton::}{checked} property is set to \c true. + This is how the code will look in the \uicontrol {Text Editor}: + + \quotefromfile SideMenu/CustomButton.qml + \skipto states: [ + \printuntil when + + We then bind the \e hover state to the \l {Control::}{hovered} property + being set to \c true, while the \c checked and + \l {AbstractButton::}{pressed} properties are set to \c false: + + \dots + \skipto State { + \printuntil when + + Finally, the button state is set to \e normal, when all the properties are + set to \c false: + + \dots + \skipto State { + \printuntil when + + We can now use CustomButton instances to create a menu bar. + + \section1 Constructing a Menu Bar + + We construct the menu bar in the \e {MainFile.ui.qml} file using the + \uicontrol {Form Editor}. The CustomButton type is listed in + \uicontrol Library > \uicontrol {QML Types} > + \uicontrol {My QML Components}. We drag and drop several instances of + the type to the \uicontrol {Form Editor} and enclose them in a RowLayout + type to lay them out as a menu bar. + + \image sidemenu-menubar.png + + We can change the properties of each CustomButton instance separately in + the \uicontrol Properties view. We want only one of the menu bar buttons + to be checked at any time, so that checking another button automatically + unchecks the previously checked one. Therefore, we set the + \l {AbstractButton::}{autoExclusive} property to \c true for all + button instances. + + In addition, we set the \uicontrol Checked property to \c true for the + first button instance on the menu bar to make it appear selected. + + We can now select the \inlineimage run_small.png "Run button" + (\uicontrol Run) button to run the application and test our menu bar. + + \section1 Creating a Side Menu + + We can now continue to create a side menu that slides open when users + click the burger menu. In the \uicontrol {Form Editor}, we use the + \l Text and \l Slider components to create separate submenus for each + set of effects we want to apply to the images. We use a background image + for the menu background and a BurgerMenu custom QML type for the burger + menu icon. + + \image sidemenu-ui.png "SliderMenu type" + + We add states to the \e {SideMenu.qml} file in the \uicontrol {Form Editor}. + When the application starts, the side menu is in the \e closed state, which + means that it is hidden. When users click the burger menu, the \c onClicked + signal handler triggers the transition to the \e opening state and runs an + animation. When the animation finishes, the side menu state changes to + \e open and the side menu is fully visible. + + When users click the burger menu again, the state changes to \e closing and + another animation is run that closes the side menu. When the animation + finishes, the side menu returns to the \e closed state. + + We select the \inlineimage plus.png + (\uicontrol Add) button in the \uicontrol States view to add the states: + + \image sidemenu-states.png "Side menu states" + + We then select the \inlineimage plus.png + button in the \uicontrol Timeline view to add animation + for transitions to the \e open and \e close states: + + \image sidemenu-timeline-settings.png "Side menu timeline settings" + + The closing animation is just the opening animation played backwards to + hide the side menu. We want the opening animation to be slower than the + closing animation, so we specify a shorter duration for the closing + animation. This does not affect the duration of the timeline itself. + + We want to change the position of the outline and background images. To + start recording the transition from the closed state to the open state, + we select \e imageOutline in \uicontrol Navigator. We check that the + playhead is at frame 0, and then select the \inlineimage recordfill.png + (\uicontrol {Auto Key (K)}) button (or press \key k). + + At frame 0, we set the X coordinate to -423 in \uicontrol Properties > + \uicontrol Geometry > \uicontrol Position. We then move the playhead + to frame 1000 and set the X coordinate to 0. + + When we deselect the record button to stop recording the timeline, the + new timeline appears in the view. + + \image sidemenu-timeline.png "Timeline view" + + We then record the transition of the \e imageBackground image. At frame + 0, we set the X coordinate to -424 again. We then move the playhead to + frame 400 and select \uicontrol {Insert Keyframe} in the \uicontrol Settings + menu of the X coordinate. We keep the value of the X coordinate -424. We + then move the playhead to frame 1000 and set the X coordinate to 0. + + We select \inlineimage animation.png "Timeline Settings button" + to open the \uicontrol {Timeline Settings} dialog. In the + \uicontrol {Transitions to states} field, we select the state to + switch to when the animation finishes. In the lower part of the + dialog, we bind the states that don't have animations to fixed frames. + + For more information about using the timeline, see \l {Creating Animations}. + + \section1 Connecting the Burger Menu to Actions + + In \e {SideMenu.qml}, we use connections to bind the action of clicking + the burger menu to the signal handler for triggering the opening or + closing animation, depending on the current state. We create the connections + in the \uicontrol Connections view. + + \image sidemenu-connections.png + + We use property changes to disable the burger menu until the animation + finishes and to hide and show the side menu: + + \quotefromfile SideMenu/SideMenu.qml + \skipto State { + \printuntil }, + + The side menu is fully visible and accepts input only in the \e open state. + + For more information about connecting objects to signals, see + \l {Connecting Objects to Signals}. + + \section1 Applying Effects + + We nest the effects in an effects stack and bind them to the \l Slider type + instances. The effects apply to all the images in the example application, + not just the currently open one. + + We use property bindings to connect the controls in the slider menu to + \l {Qt Graphical Effects}{graphical effects}. To have access to the + properties from all the slider type instances, we export them as aliases + in \e SliderMenu.ui.qml. We select \uicontrol {Export Property as Alias} + in the \uicontrol Settings menu of the \uicontrol Value property in + \uicontrol Properties > \uicontrol Slider. + + We use the \uicontrol {Form Editor} to create the effect stack in the + \e {EffectStack.qml} file: + + \image sidemenu-effects-stack.png "Effects stack in the Navigator" + + We use the \l Image type as the last item in the stack to display images + that we apply the effects to. We export the image source property as an + alias to be able to switch the image inside the stack. + + For more information about the available Qt graphical effects, see + \l {Applying Visual Effects}. +*/ diff --git a/doc/qtdesignstudio/examples/doc/webinardemo.qdoc b/doc/qtdesignstudio/examples/doc/webinardemo.qdoc new file mode 100644 index 00000000000..1e13961c917 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/webinardemo.qdoc @@ -0,0 +1,196 @@ +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt 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. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \example WebinarDemo + \ingroup studioexamples + \brief Contains sources for the From Photoshop to Prototype video tutorial. + + \title Webinar Demo + + \e {Webinar Demo} contains the source files for the + \e {From Photoshop to Prototype with Qt Design Studio} + webinar that shows how to export designs from Adobe Photoshop + to \QDS and to edit them to create a UI. + + The following sections describe some of the main points of the webinar. + Select the \uicontrol Tutorials tab to watch the webinar video for the + full details. + + \section1 Exporting from Adobe Photoshop + + We use Adobe Photoshop to design our application and \QB to export our + artwork to \QDS as PNG images and custom QML types. + + Before we can begin, we must set up \QB as instructed in + \l{Exporting Designs from Adobe Photoshop}. + + We organize our artwork in Photoshop using artboards as instructed in + \l{Organizing Assets}. + + \QB automatically proposes identifiers for all groups and layers. The ids + will be used as filenames in \QDS. We want to change some of them in the + \uicontrol {QML ID} field, so that we can easily find them in \QDS. We + must keep in mind that the ids must be unique, that they must begin with + a lower-case letter or an underscore character, and that only letters, + numbers, and underscore characters are allowed. + + Each artboard is exported automatically as a component. That is, a separate + QML file that contains all the artwork on the artboard. We determine whether + each group or layer is exported as a component or a child item. Child items + will be exported as PNG files, with references to them in the component file + that contains them. + + We can export some components as QML types that provide the functionality + that we want. To use the types in \QDS, we need to add import statements + that pull in the modules that contain the types. We can even specify + properties for the types to export, so that we won't have to do that in + \QDS. + + \section2 Creating a Reference Image + + \image webinardemo-qb-layoutref.png "Settings for exporting stackLayout artboard" + + We want to create a reference image of the UI that has no + functionality, but shows all the UI controls as we designed them in + Adobe Photoshop. We design all the controls visible on the + \e layoutReference separately on other artboards, and therefore we can + select \uicontrol Merged in the \uicontrol {Export As} field to merge + them all into one image when this artboard is exported. + + \section2 Creating the UI Main Page + + We want to use the \e backgroundGradient artboard as the main page of + the UI. Initially, it will contain a gradient image that we + will build the UI on in \QDS. + + We set the gradient image on the artboard to \uicontrol Child in the + \uicontrol {Export As} field to export it as a PNG file that is referred + to from the main page. + + \section2 Using Stack Layout + + \image webinardemo-qb-stacklayout.png "Settings for exporting stackLayout artboard" + + For the stackLayoutFrame layer, we want to use a \l StackLayout QML type, + which provides a stack of items where only one item is visible at a time. + In the \uicontrol {QML Type} field, we enter \e StackLayout. + + To be able to use the type, we enter the statement that imports the + Qt Quick Layouts module, which contains the type, in the + \uicontrol {Add Imports} field: \c {QtQuick.Layouts 1.3}. + + We will add content to the stack layout in \QDS. + + \section2 Using Qt Studio Effects + + \image webinardemo-qb-fastblur.png "Settings for exporting blurEffect layer" + + We want to apply the \l {FastBlur} effect to the smallPopup UI control. + In the artboard, we have a blurEffect layer that we want to export as a + FastBlurItem QML type. In the \uicontrol {QML Type} field, we enter + \e FastBlurItem. + + To be able to use the type, we added the statement that imports the + Qt Quick Studio Effects module: \c {QtQuick.Studio.Effects 1.0}. + + We specify that the artwork to which we want to apply the effect is a + child of the effect. We then specify the radius property for the effect, + in the \uicontrol {QML Properties} field. We can modify the property in + \QDS. + + \image webinardemo-blureffect.png "FastBlurItem QML item in Design mode" + + \section2 Creating a Menu with Reusable Buttons + + The \e miniMenu artboard contains menu buttons that we will use to toggle + popup dialogs in the UI. We want to be able to reuse the buttons + and to change their appearance depending on whether they are on or off. + Therefore, we select \uicontrol Component in the \uicontrol {Export As} + field for each button to export them as separate components that we can + modify in \QDS. + + Within the artboard, we export each icon as a child and the background as + merged. This merges the background art together while it keeps the icons + separate, so that we can switch the icons depending on the state of the + button. We will implement this functionality in \QDS. + + \section2 Preparing for Animation + + We want to animate the contents of the \e largePopup artboard in \QDS, so + we export each group and layer as a child. + + \section2 Exporting Artwork + + When we have specified settings for all the artboards and the groups and + layers in them, we select \uicontrol Export to copy the assets and metadata + to the export path we specified. + + \section1 Importing Artwork + + After using \QB in Adobe Photoshop to export our artwork, we import it into + a project that we create in \QDS, as instructed in \l{Importing Designs}. + + If we need to make changes in Photoshop later and export our artwork again, + \QDS will try to merge our changes during the import, so that none of the + changes we mage in \QDS are lost. + + \section1 Using Imported Components + + The \e {LayoutReference.ui.qml} file contains a reference image of the + UI we will create. We use the imported components to create the + UI in the \e {MainApp.ui.qml} file. The imported components are + listed in \uicontrol Library > \uicontrol {QML Types} > + \uicontrol {My QML Components}, and we can drag and drop them to the + \uicontrol {Form Editor}. + + \image webinardemo-mainappui.png "Main app UI in Design mode" + + To view the structure of a particular component, we right-click it in the + \uicontrol {Form Editor} and select \uicontrol {Go into Component} in the + context menu. Any changes we make to a component are immediately visible in + all the other components where it appears. + + We can view the QML code for each component in the \uicontrol {Text Editor}. + + We can now use states and the timeline to animate the components in the UI. + + \section2 Animating Components + + We open the \e {Largepopup.ui.qml} file in the Design mode to add animation + to it. In the \uicontrol States view, we add the \e opening, \e open, + \e closing, and \e closed states for the popup. + + \image webinardemo-states.png "Popup states in the States view" + + For more information about using states, see \l {Creating Animations}. + + We then use the \uicontrol Timeline view to add animations that are run + when moving from one state to another. + + \image webinardemo-timeline.png "Popup animations in the Timeline view" + + For more information about using the timeline, see \l {Creating Animations}. +*/ diff --git a/doc/qtdesignstudio/examples/ebikedesign/EBikeDesign.qmlproject b/doc/qtdesignstudio/examples/ebikedesign/EBikeDesign.qmlproject new file mode 100644 index 00000000000..01655717717 --- /dev/null +++ b/doc/qtdesignstudio/examples/ebikedesign/EBikeDesign.qmlproject @@ -0,0 +1,44 @@ +import QmlProject 1.1 + +Project { + mainFile: "EBikeDesign.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + Files { + filter: "*.conf" + files: ["qtquickcontrols2.conf"] + } + + Files { + filter: "qmldir" + directory: "." + } + + Files { + filter: "*.ttf" + directory: "." + } + + Environment { + QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" + QT_AUTO_SCREEN_SCALE_FACTOR: "1" + } + + /* List of plugin directories passed to QML runtime */ + importPaths: [ "imports", "backend"] + + /* Required for deployment */ + targetDirectory: "/opt/ebikeDesign" +} diff --git a/doc/qtdesignstudio/examples/sidemenu/CustomButton.qml b/doc/qtdesignstudio/examples/sidemenu/CustomButton.qml new file mode 100644 index 00000000000..9f140b69a22 --- /dev/null +++ b/doc/qtdesignstudio/examples/sidemenu/CustomButton.qml @@ -0,0 +1,214 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt 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$ +** +****************************************************************************/ + +import QtQuick 2.10 +import QtQuick.Templates 2.1 as T +import SideMenu 1.0 + +T.Button { + id: control + width: 180 + height: 70 + + font: Constants.font + implicitWidth: Math.max(background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + leftPadding: 4 + rightPadding: 4 + + text: control.state + property alias text1Text: text1.text + autoExclusive: false + checkable: true + + + Image { + id: background + x: 15 + y: 17 + source: "assets/inactive_button.png" + } + + Image { + id: contentItem + x: -1 + y: 0 + visible: true + source: "assets/hover_button.png" + } + + Image { + id: image2 + x: 0 + y: -1 + visible: true + source: "assets/active_button.png" + } + + Text { + id: text1 + x: -1 + y: 16 + width: 163 + height: 16 + color: "#ffffff" + text: "PRESSED" + horizontalAlignment: Text.AlignHCenter + font.weight: Font.ExtraLight + font.family: "IBM Plex Sans" + font.pixelSize: 12 + } + + states: [ + State { + name: "checked" + when: control.checked + + PropertyChanges { + target: background + x: 16 + y: 16 + width: 156 + visible: false + } + + PropertyChanges { + target: contentItem + visible: false + } + + PropertyChanges { + target: image2 + x: 0 + y: 0 + visible: true + } + + PropertyChanges { + target: text1 + x: 0 + y: 16 + width: 162 + height: 16 + text: "CHECKED" + horizontalAlignment: Text.AlignHCenter + } + + }, + State { + name: "hover" + when: control.hovered && !control.checked && !control.pressed + + PropertyChanges { + target: image2 + x: 0 + visible: false + } + + PropertyChanges { + target: background + x: 16 + y: 16 + visible: false + } + + PropertyChanges { + target: contentItem + visible: true + } + + PropertyChanges { + target: text1 + x: -1 + y: 16 + width: 162 + height: 16 + color: "#d07533" + text: "HOVER" + horizontalAlignment: Text.AlignHCenter + } + + + }, + State { + name: "normal" + when: !control.pressed && !control.checked &&!control.hovered + + + PropertyChanges { + target: image2 + visible: false + } + + PropertyChanges { + target: contentItem + visible: false + } + + PropertyChanges { + target: background + visible: true + } + + PropertyChanges { + target: text1 + x: 15 + y: 33 + width: 163 + height: 16 + color: "#d07533" + text: "NORMAL" + horizontalAlignment: Text.AlignHCenter + } + } + ] +} diff --git a/doc/qtdesignstudio/examples/sidemenu/SideMenu.qml b/doc/qtdesignstudio/examples/sidemenu/SideMenu.qml new file mode 100644 index 00000000000..4649d497e6c --- /dev/null +++ b/doc/qtdesignstudio/examples/sidemenu/SideMenu.qml @@ -0,0 +1,234 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt 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$ +** +****************************************************************************/ + +import QtQuick 2.8 +import QtQuick.Timeline 1.0 +import QtQuick.Controls 2.3 + +Item { + id: root + width: 350 + height: 1080 + property alias slidermenuSlider_4BValue: slidermenu.slider_4BValue + property alias slidermenuSlider_4AValue: slidermenu.slider_4AValue + property alias slidermenuSlider_3CValue: slidermenu.slider_3CValue + property alias slidermenuSlider_3BValue: slidermenu.slider_3BValue + property alias slidermenuSlider_3AValue: slidermenu.slider_3AValue + property alias slidermenuSlider_1BValue: slidermenu.slider_1BValue + property alias slidermenuSlider_1CValue: slidermenu.slider_1CValue + property alias slidermenuSlider_2BValue: slidermenu.slider_2BValue + property alias slidermenuSlider_2AValue: slidermenu.slider_2AValue + property alias slidermenuSlider_1AValue: slidermenu.slider_1AValue + + state: "closed" + + Image { + id: sideMenuAsset + x: 0 + y: 0 + visible: false + source: "assets/rectangle_3_195_205.png" + } + + Image { + id: imageOutline + x: -423 + y: 0 + height: 1079 + source: "assets/empty_rect.png" + } + + Image { + id: imageBackground + x: 0 + y: 0 + source: "assets/rectangle_3_195_205.png" + + SliderMenu { + id: slidermenu + width: 349 + height: 1079 + slider_1AValue: -0.3 + } + } + + BurgerMenu { + id: burger_menu + x: 22 + y: 20 + } + + Timeline { + id: timeline + enabled: true + animations: [ + TimelineAnimation { + id: timelineAnimation + property: "currentFrame" + pingPong: false + duration: 300 + from: 0 + loops: 1 + to: 1000 + //alwaysRunToEnd: true + running: false + onFinished: root.state = "open" + }, + TimelineAnimation { + id: timelineAnimation2 + property: "currentFrame" + pingPong: false + duration: 700 + from: 1000 + loops: 1 + to: 0 + //alwaysRunToEnd: true + running: false + onFinished: root.state = "closed" + } + ] + endFrame: 1000 + startFrame: 0 + + KeyframeGroup { + target: imageOutline + property: "x" + Keyframe { + easing.bezierCurve: [0.337, 0.229, 0.758, 0.282, 1, 1] + frame: 1000 + value: 0 + } + + Keyframe { + frame: 1 + value: -348 + } + } + + KeyframeGroup { + target: imageBackground + property: "x" + Keyframe { + frame: 402 + value: -423 + } + + Keyframe { + frame: 0 + value: -424 + } + + Keyframe { + easing.bezierCurve: [0.337, 0.229, 0.758, 0.282, 1, 1] + frame: 1000 + value: 0 + } + } + } + + Connections { + target: burger_menu + onClicked: { + root.state = "opening" + } + enabled: root.state === "closed" + } + + Connections { + target: burger_menu + onClicked: { + root.state = "closing" + } + enabled: root.state === "open" + } + + states: [ + State { + name: "opening" + + PropertyChanges { + target: timelineAnimation + running: true + } + + PropertyChanges { + target: burger_menu + enabled: false + } + + PropertyChanges { + target: slidermenu + visible: false + } + }, + State { + name: "open" + }, + State { + name: "closing" + PropertyChanges { + target: timelineAnimation2 + running: true + } + + PropertyChanges { + target: burger_menu + enabled: false + } + }, + State { + name: "closed" + PropertyChanges { + target: slidermenu + visible: false + } + } + ] +} diff --git a/doc/qtdesignstudio/examples/sidemenu/SideMenu.qmlproject b/doc/qtdesignstudio/examples/sidemenu/SideMenu.qmlproject new file mode 100644 index 00000000000..22969ff4d8a --- /dev/null +++ b/doc/qtdesignstudio/examples/sidemenu/SideMenu.qmlproject @@ -0,0 +1,41 @@ +/* File generated by Qt Creator */ + +import QmlProject 1.1 + +Project { + mainFile: "MainFile.ui.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + Files { + filter: "*.conf" + files: ["qtquickcontrols2.conf"] + } + + Files { + filter: "qmldir" + directory: "." + } + + Environment { + QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" + QT_AUTO_SCREEN_SCALE_FACTOR: "1" + } + + /* List of plugin directories passed to QML runtime */ + importPaths: [ "imports" ] + + /* Required for deployment */ + targetDirectory: "/tmp/SideMenu" +} diff --git a/doc/qtdesignstudio/examples/webinardemo/WebinarDemo.qmlproject b/doc/qtdesignstudio/examples/webinardemo/WebinarDemo.qmlproject new file mode 100644 index 00000000000..5a19a305abd --- /dev/null +++ b/doc/qtdesignstudio/examples/webinardemo/WebinarDemo.qmlproject @@ -0,0 +1,41 @@ +/* File generated by Qt Creator */ + +import QmlProject 1.1 + +Project { + mainFile: "MainApp.ui.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + Files { + filter: "*.conf" + files: ["qtquickcontrols2.conf"] + } + + Files { + filter: "qmldir" + directory: "." + } + + Environment { + QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" + QT_AUTO_SCREEN_SCALE_FACTOR: "1" + } + + /* List of plugin directories passed to QML runtime */ + importPaths: [ "imports" ] + + /* Required for deployment */ + targetDirectory: "/opt/WebinarDemo" +}