Doc: Add Qt Design Studio example documentation

From Qt Design Studio 1.4. Add .qdoc and .qmlproject files,
quoted .qml files, and .png files.

Edit the files as necessary to reflect changes in version 1.5
and to reduce image file size.

Task-number: QDS-1519
Change-Id: I3bbdec0d3b4acf904c0008d1566dad13707e9851
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>
Reviewed-by: Eike Ziller <eike.ziller@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

57 files changed, 2124 insertions, 0 deletions

diff --git a/doc/qtdesignstudio/examples/clustertutorial/ClusterTutorial.qmlproject b/doc/qtdesignstudio/examples/clustertutorial/ClusterTutorial.qmlproject
new file mode 100644
index 0000000000..94dd80cfdc
--- /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 0000000000..eaeffa83e7
--- /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 0000000000..d2d9e85873
--- /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 0000000000..8a2ecfb6af
--- /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 0000000000..241f78fc47
--- /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 0000000000..ce93c7bae2
--- /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 0000000000..7742b7eba4
--- /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 0000000000..a6d95b07b0
--- /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 0000000000..aa791ccd0e
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/coffee-machine-emptycup.png
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 0000000000..e1977821aa
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/coffee-machine-modify.png
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 0000000000..3a8c069a55
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/coffee-machine-overview.png
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 0000000000..0cff9dbf83
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/coffee-machine-properties.png
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 0000000000..810857ed7b
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/coffee-machine-selection.png
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 0000000000..c21007a43c
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/coffee-machine-states.png
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 0000000000..bf08d8ef73
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/coffee-machine-timeline-settings.png
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 0000000000..3f3d7d9e07
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/coffee-machine-timeline.png
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 0000000000..a215700d6b
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/ebikedesign-states.png
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 0000000000..f0ba42d9c5
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/ebikedesign-timeline-settings.png
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 0000000000..934d874e33
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/ebikedesign-timeline.png
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 0000000000..6c63f3d981
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/ebikedesign-trip-properties.png
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 0000000000..9de59c0132
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/ebikedesign-trip.png
diff --git a/doc/qtdesignstudio/examples/doc/images/ebikedesign.png b/doc/qtdesignstudio/examples/doc/images/ebikedesign.png
new file mode 100644
index 0000000000..c517c4b56b
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/ebikedesign.png
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 0000000000..7a9a9d38a4
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/progressbar-animated.png
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 0000000000..5e891100a6
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/progressbar-bindings-progress.png
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 0000000000..a9c7008a15
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/progressbar-move-component.png
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 0000000000..208e5ffe18
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/progressbar-rectangle.png
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 0000000000..98e07161db
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/progressbar-root-export-property.png
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 0000000000..417e3bb029
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-indicator-color.png
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 0000000000..4466876b7e
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-indicator.png
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 0000000000..64862dbbd0
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline-settings.png
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 0000000000..ad644d4bb5
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/progressbar-timeline.png
diff --git a/doc/qtdesignstudio/examples/doc/images/progressbar.png b/doc/qtdesignstudio/examples/doc/images/progressbar.png
new file mode 100644
index 0000000000..dfae54abc6
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/progressbar.png
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 0000000000..7251ddd051
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/sidemenu-connections.png
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 0000000000..a89921dc8e
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/sidemenu-custombutton-property-bindings.png
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 0000000000..950058c5d8
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/sidemenu-custombutton-states.png
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 0000000000..9e3796fad4
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/sidemenu-effects-stack.png
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 0000000000..bdb3a31471
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/sidemenu-menubar.png
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 0000000000..6a8adb64aa
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/sidemenu-states.png
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 0000000000..236f1f409a
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/sidemenu-timeline-settings.png
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 0000000000..9548ddc087
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/sidemenu-timeline.png
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 0000000000..d99e4e11d9
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/sidemenu-ui.png
diff --git a/doc/qtdesignstudio/examples/doc/images/sidemenu.png b/doc/qtdesignstudio/examples/doc/images/sidemenu.png
new file mode 100644
index 0000000000..d1c1cd750b
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/sidemenu.png
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 0000000000..32a40a8de5
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/webinardemo-blureffect.png
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 0000000000..29d39c8267
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/webinardemo-mainappui.png
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 0000000000..5fd69e6f25
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-fastblur.png
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 0000000000..b7d7b1e114
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-layoutref.png
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 0000000000..3cb90b1a1a
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/webinardemo-qb-stacklayout.png
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 0000000000..83755e876a
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/webinardemo-states.png
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 0000000000..c6c0976eed
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/images/webinardemo-timeline.png
diff --git a/doc/qtdesignstudio/examples/doc/progressbar.qdoc b/doc/qtdesignstudio/examples/doc/progressbar.qdoc
new file mode 100644
index 0000000000..208e97bf8d
--- /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 0000000000..498b017ca3
--- /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 0000000000..1e13961c91
--- /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 0000000000..0165571771
--- /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 0000000000..9f140b69a2
--- /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 0000000000..4649d497e6
--- /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 0000000000..22969ff4d8
--- /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 0000000000..5a19a305ab
--- /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"
+}