Merge remote-tracking branch 'origin/4.12' into qds-1.50

Change-Id: I831e9d65be0009d0fd98c19aa38fa6fb69eed421

doc/qtcreator/src/qtquick/qtquick-uis.qdoc

@@ -52,9 +52,10 @@
 
     While it is useful to learn the basics of Qt Quick, you can also rely on
     \QMLD to write the code for you when you drag-and-drop the ready-made
-    components to the working area and change them to your liking by modifying
-    their properties in the Design mode. You can always check up details in
-    the extensive Qt Quick documentation by pressing \key F1.
+    components to the \uicontrol {Form Editor} view and change them to your
+    liking by modifying their properties in the \uicontrol Properties view in
+    the Design mode. You can always check up details in the extensive Qt Quick
+    documentation by pressing \key F1.
 
     \list
 

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"
+}

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"
+    }
+
+}

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"
+            }
+        }
+    }
+
+
+
+}

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"
+}

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()
+    }
+}

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
+*/

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.
+*/

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.
+*/

doc/qtdesignstudio/examples/doc/loginui1.qdoc

@@ -78,9 +78,8 @@
     \section2 Learn Qt Quick - Projects and Files
 
     \QDS creates a set of boilerplate files and folders that you need to create
-    a UI using Qt Quick and QML. The files are listed in the \uicontrol Project
-    tab in the \uicontrol Navigator and in the \uicontrol Projects view. For
-    more information, see \l {Viewing Project Files}.
+    a UI using Qt Quick and QML. The files are listed in the \uicontrol Projects
+    view. For more information, see \l {Viewing Project Files}.
 
     \image loginui1-project-files.png
 
@@ -108,9 +107,8 @@
     QML files define a hierarchy of objects with a highly-readable, structured
     layout. Every QML file consists of two parts: an imports section and an
     object declaration section. The QML types and functionality most common to
-    UIs are provided in the QtQuick import. Select the \uicontrol {Text Editor}
-    tab in the Design mode or press \key F4 to view the QML code of an ui.qml
-    file.
+    UIs are provided in the QtQuick import. You can view the QML code of an
+    ui.qml file in the \uicontrol {Text Editor} view.
 
     For more information about creating a QML file from scratch, see
     \l{First Steps with QML}.
@@ -127,17 +125,21 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    view toolbar or press \key {Alt+P}.
 
     The \e Screen01.ui.qml file that the wizard created for you should be
     open in the Design mode. If it is not, you can double-click it in the
-    \uicontrol Project sidebar view to open it.
+    \uicontrol Projects view to open it.
 
-    To modify \e Screen01.ui.qml in the \uicontrol {Form Editor} tab:
+    \note The visibility of views depends on the selected workspace. To open
+    hidden views, select \uicontrol Window > \uicontrol Views in the Design
+    mode. For more information, see \l {Managing Workspaces}.
+
+    To modify \e Screen01.ui.qml in the \uicontrol {Form Editor}:
 
     \list 1
-       \li Select \e Rectangle in the \uicontrol Navigator to display its
+       \li Select \e Rectangle in the \uicontrol Navigator view to display its
             properties in the \uicontrol Properties view.
         \li In the \uicontrol Color field, select the
             \inlineimage icons/action-icon-binding.png
@@ -182,7 +184,7 @@
     \skipto import
     \printuntil loginui1 1.0
 
-    The \uicontrol Library lists the QML types in each Qt module that are
+    The \uicontrol Library view lists the QML types in each Qt module that are
     supported by \QDS. You can use the basic types to create your own QML
     types, and they will be listed in the \uicontrol {My QML Components} tab.
     The tab is only visible if you have created custom QML components.
@@ -196,8 +198,8 @@
     You can use another wizard to create a push button and to add it to the
     project. The wizard creates a reusable button component that appears in
     the \uicontrol {My QML Components} tab in the \uicontrol Library. You can
-    drag and drop it to the canvas and modify its properties to change its
-    appearance and functionality.
+    drag and drop it to the \uicontrol {Form Editor} and modify its properties
+    in the \uicontrol Properties view to change its appearance and functionality.
 
     If you find that you cannot use the wizard to create the kind of push
     button that you want, you can create your button from scratch using basic
@@ -269,8 +271,8 @@
         \li On the toolbar, select \uicontrol Master >
             \uicontrol buttonBackground to move into the button background
             component.
-        \li Select the button background on the canvas or in the
-            \uicontrol Navigator to display its properties in the
+        \li Select the button background in the \uicontrol {Form Editor} or
+            in the \uicontrol Navigator to display its properties in the
             \uicontrol Properties view.
         \li In the \uicontrol Color field, select
             \inlineimage icons/action-icon.png
@@ -290,14 +292,15 @@
             to save your changes.
     \endlist
 
-    To move back to the top level PushButton type on the canvas, select
+    To move back to the top level PushButton type in the
+    \uicontrol {Form Editor}, select
     \uicontrol PushButton.ui.qml on the breadcrumb bar (1):
 
     \image loginui1-breadcrumb-bar.png "Breadcrumb bar in the Design mode."
 
     Your button should now look something like this:
 
-    \image loginui1-button-styled.png "Modified button in the Design mode."
+    \image loginui1-button-styled.png "Modified button in the Form Editor"
 
     \section2 Learn Qt Quick - Property Bindings
 
@@ -327,11 +330,11 @@
     You will now add two button instances to the UI and modify their labels.
 
     \list 1
-        \li Double-click \e Screen01.ui.qml in the \uicontrol Project sidebar
-            view to open it on the canvas.
+        \li Double-click \e Screen01.ui.qml in the \uicontrol Projects
+            view to open it in the \uicontrol {Form Editor}.
         \li Drag and drop two instances of the PushButton type from the
-            \uicontrol Library to the canvas.
-            \image loginui1-library.png "Library sidebar view"
+            \uicontrol Library to the \uicontrol {Form Editor}.
+            \image loginui1-library.png "Library view"
         \li Select one of the buttons in the \uicontrol Navigator to modify
             its id and text label in the \uicontrol Properties view.
         \li In the \uicontrol Id field, enter \e loginButton.
@@ -347,9 +350,9 @@
             buttons so that the text fits comfortably on the button background.
             In this example, the button width is set to 120 pixels.
         \li Move the cursor on the selected button to make the selection icon
-            appear. You can now drag the button to another position on the
-            canvas. Use the guidelines to align the buttons below the page
-            title:
+            appear. You can now drag the button to another position in the
+            \uicontrol {Form Editor}. Use the guidelines to align the buttons
+            below the page title:
             \image loginui1-align-buttons.png
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.

doc/qtdesignstudio/examples/doc/loginui2.qdoc

@@ -53,8 +53,8 @@
 
     \section1 Anchoring UI Components
 
-    First, you will add a new rectangle to the canvas and move all the
-    current UI components to it to create a new page. Then, you will
+    First, you will add a new rectangle to the \uicontrol {Form Editor} and move
+    all the current UI components to it to create a new page. Then, you will
     \l {Setting Anchors and Margins}{anchor} the static elements on the
     page, that is the logo image (\e logo) and page title (\e pageTitle),
     to the page. When you created the project using the new project wizard
@@ -65,20 +65,20 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    toolbar or press \key {Alt+P}.
 
     To anchor components on a page:
 
     \list 1
         \li Open \e {Screen01.ui.qml} for editing in the Design mode
-            \uicontrol {Form Editor} tab.
+            \uicontrol {Form Editor}.
         \li Select the rectangle that forms the UI background in the
             \uicontrol Navigator, and change its id to \e root in the
             \uicontrol Properties view.
         \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library
             to \e root, and change its id to \e loginPage.
-        \li In the \uicontrol Layout tab, select the \inlineimage anchor-fill.png
+        \li In the \uicontrol Layout view, select the \inlineimage anchor-fill.png
             (\uicontrol {Fill Parent Item}) button to anchor the page to the root
             item on all sides.
         \li Select all the other UI elements below \e root in the
@@ -132,7 +132,7 @@
             \l {Qt Quick Controls 2} types in the tab:
             \image loginui2-imports.png
         \li Drag and drop two instances of the \uicontrol {Text Field} type
-            to the canvas.
+            to the \uicontrol {Form Editor}.
         \li Select one of the text fields in the \uicontrol Navigator, and
             change its id to \e usernameField in the \uicontrol Properties view.
         \li In the \uicontrol Geometry group, \uicontrol Size field, set the
@@ -141,8 +141,8 @@
             \uicontrol tr to mark the text translatable.
             \image loginui2-field-properties.png "Text field properties"
         \li In the \uicontrol Text field, delete the default text to make the
-            placeholder text visible on the canvas. The text value always takes
-            precedence over the placeholder text value.
+            placeholder text visible on the \uicontrol {Form Editor}. The text
+            value always takes precedence over the placeholder text value.
         \li Select the other text field, and change its id to
             \e passwordField, placeholder text to \e Password,
             and width to \e 300 pixels. Also remove the default text.
@@ -155,7 +155,8 @@
             \uicontrol Navigator, and right-click on either item
             to open a context menu.
         \li Select \uicontrol Position > \uicontrol {Position in Column}
-            to position the fields on top of each other on the canvas.
+            to position the fields on top of each other in the
+            \uicontrol {Form Editor}.
         \li Select the column in the \uicontrol Navigator and change its id
             to \e fieldColumn in \uicontrol Properties.
         \li In the \uicontrol Spacing field, set the spacing between the

doc/qtdesignstudio/examples/doc/loginui3.qdoc

@@ -63,8 +63,8 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    toolbar or press \key {Alt+P}.
 
     To add the text field and a back button needed on the registration page:
 
@@ -81,7 +81,7 @@
         \li In the \uicontrol Placeholder field, set the placeholder text to
             \e {Verify password}.
         \li In the \uicontrol Text field, delete the default text to make the
-            placeholder text visible on the canvas.
+            placeholder text visible in the \uicontrol {Form Editor}.
         \li Drag and drop a PushButton type from the \uicontrol Library,
             \uicontrol {My QML Components} tab, to \e loginPage in the
             \uicontrol Navigator.
@@ -114,7 +114,7 @@
     \section1 Using States to Simulate Page Changes
 
     You will now add \l{Adding States}{states} to the UI to show and hide UI
-    components on the canvas:
+    components in the \uicontrol {Form Editor}:
 
     \list 1
         \li In the \uicontrol States view, select the \inlineimage plus.png
@@ -250,7 +250,7 @@
         \li Right-click \e loginButton in the \uicontrol Navigator and select
             \uicontrol {Go into Component} to open \e PushButton.ui.qml for
             editing in the Design mode.
-        \li Open the \uicontrol {Text Editor} tab.
+        \li Open the \uicontrol {Text Editor}.
         \li Edit the property values for the \e down state, to set the button
             text color to white and the background and border colors to
             darker shades of green by using the \c {Qt.darker()} function:

doc/qtdesignstudio/examples/doc/loginui4.qdoc

@@ -76,8 +76,8 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    toolbar or press \key {Alt+P}.
 
     \section2 Replacing Columns with Anchors
 

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}.
+*/

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}.
+*/

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}.
+*/

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"
+}

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
+        }
+        }
+    ]
+}

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
+            }
+        }
+    ]
+}

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"
+}

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"
+}

doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc

@@ -81,8 +81,8 @@
 
     Place different parts of the UI, such as menus and pop-ups, on separate
     artboards to be able to export them as components or children and to
-    import them as QML and PNG files that you can drag and drop to the working
-    area in \QDS Design mode while creating a UI.
+    import them as QML and PNG files that you can drag and drop to the
+    \uicontrol {Form Editor} in \QDS Design mode while creating a UI.
 
     \QDS offers predefined sets of UI controls that you can modify according
     to your needs. You can export your own controls as QML types, Qt Quick

doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc

@@ -93,7 +93,7 @@
     Place different parts of the UI, such as menus and pop-ups, on separate
     artboards to be able to export them as components or children and to
     import them as QML files and images that you can drag and drop to the
-    working area in \QDS Design mode while creating a UI.
+    \uicontrol {Form Editor} in \QDS Design mode while creating a UI.
 
     \section2 Using Layers and Groups
 

doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc

@@ -35,7 +35,8 @@
     \l {Qt Quick Shapes QML Types}, with some additional properties.
 
     You can drag-and-drop the following studio components from the
-    \uicontrol Library to the canvas or the \uicontrol Navigator:
+    \uicontrol Library to the \uicontrol {Form Editor} or the
+    \uicontrol Navigator:
 
     \list
         \li \l Arc adds an arc that begins and ends at given positions.

doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc

@@ -87,12 +87,11 @@
     The imported assets are displayed in the \uicontrol Assets tab in the
     \uicontrol Library as PNG images. The components that you specified in
     the design tool are displayed in the \uicontrol {My QML Components} tab,
-    as well as in the \uicontrol Project tab of the \uicontrol Navigator as
-    separate QML files.
+    as well as in the \uicontrol Projects view as separate QML files.
 
     \note The layer that was the bottom layer in the design tool becames the top
     layer in the \uicontrol Navigator to reflect the QML code model. You
-    can view the QML code in the \uicontrol {Text Editor} tab.
+    can view the QML code in the \uicontrol {Text Editor}.
 
     If asset importer conflicts, warnings, and errors are displayed in the
     \uicontrol {Asset Import} dialog while importing, fix the issues in

doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc

@@ -93,7 +93,7 @@
             \code
             singleton Values 1.0 Values.qml
             \endcode
-        \li Open \e Values.qml in the \uicontrol {Text Editor} tab for editing.
+        \li Open \e Values.qml in the \uicontrol {Text Editor} for editing.
         \li Add the following code to the top of the file to register the
             QObject-derived class that you will use to expose the global
             properties as a singleton type:

doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc

@@ -31,9 +31,10 @@
     \QDS provides a set of Qt Quick Studio effects that inherit the types in the
     \l {Qt Graphical Effects} module. To apply a visual effect to a component,
     you must place the component inside the effect. First drag-and-drop an
-    effect from \uicontrol Library > \uicontrol Effects to the the canvas or
-    the \uicontrol Navigator, and then drag-and-drop the component to the
-    effect. For some effects, you need two source components.
+    effect from \uicontrol Library > \uicontrol Effects to the the
+    \uicontrol {Form Editor} or the \uicontrol Navigator, and then drag-and-drop
+    the component to the effect. For some effects, you need two source
+    components.
 
     The following table summarizes the available effects and contains links to
     the documentation of the inherited QML type.

doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Design Studio documentation.
@@ -54,8 +54,8 @@
     \endcode
 
     To select an icon in the \uicontrol {ISO Icon Browser} in \QDS, select
-    the ISO icon in the \uicontrol Navigator or on the canvas, and then
-    select \uicontrol {Choose Icon} in the context menu.
+    the ISO icon in the \uicontrol Navigator or \uicontrol {Form Editor},
+    and then select \uicontrol {Choose Icon} in the context menu.
 
     \image iso-icon-browser.png
 */

share/qtcreator/debugger/dumper.py

@@ -1658,7 +1658,7 @@ class DumperBase():
             #with self.timer('metaObjectType-' + self.currentIName):
             metaObjectPtr = extractStaticMetaObjectPtrFromType(typeobj)
 
-        if not metaObjectPtr:
+        if not metaObjectPtr and not self.isWindowsTarget():
             # measured: 200 ms (example had one level of inheritance)
             #with self.timer('metaObjectCall-' + self.currentIName):
             metaObjectPtr = extractMetaObjectPtrFromAddress()

share/qtcreator/themes/design-dark.creatortheme

@@ -0,0 +1,406 @@
+[General]
+ThemeName=Design Dark
+PreferredStyles=Fusion
+DefaultTextEditorColorScheme=creator-dark.xml
+
+[Palette]
+shadowBackground=ff191919
+text=ffdadada
+textDisabled=60a4a6a8
+selectedBackgroundText=aa1f75cc
+toolBarItem=ffb3b3b3
+toolBarItemDisabled=ff686868
+fancyBarsNormalTextColor=ffd0d0d0
+fancyBarsBoldTextColor=b6fbfdff
+hoverBackground=ff404244
+selectedBackground=ff111111
+normalBackground=ff262728
+alternateBackground=ff353637
+error=ffdf4f4f
+warning=ffecbc1c
+splitter=ff474747
+textColorLink=ff007af4
+textColorLinkVisited=ffa57aff
+backgroundColorDisabled=ff444444
+
+
+
+
+[Colors]
+;DS controls theme START
+DScontrolBackground=ff242424
+DScontrolOutline=ff404040
+DStextColor=ffffffff
+DSdisabledTextColor=ff909090
+DSpanelBackground=ff2a2a2a
+DShoverHighlight=ff313131
+DScolumnBackground=ff363636
+DSfocusEdit=ff444444
+DSfocusDrag=ff565656
+DScontrolBackgroundPressed=ff606060
+DScontrolBackgroundChecked=ff565656
+DSinteraction=ff0492c9
+DSsliderActiveTrack=ff606060
+DSsliderInactiveTrack=ff404040
+DSsliderHandle=ff505050
+DSsliderActiveTrackHover=ff7f7f7f
+DSsliderInactiveTrackHover=ff505050
+DSsliderHandleHover=ff606060
+DSsliderActiveTrackFocus=ffaaaaaa
+DSsliderInactiveTrackFocus=ff606060
+DSsliderHandleFocus=ff0492c9
+DSerrorColor=ffdf3a3a
+DScontrolBackgroundDisabled=ff363636
+DScontrolOutlineDisabled=ff404040
+DStextColorDisabled=ff606060
+DStextSelectionColor=ff0492c9
+DStextSelectedTextColor=ffffffff
+DSscrollBarTrack=ff404040
+DSscrollBarHandle=ff505050
+DScontrolBackgroundInteraction=ff404040
+DStranslationIndicatorBorder=ff7f7f7f
+DSsectionHeadBackground=ff191919
+DSchangedStateText=ff99ccff
+;DS controls theme END
+
+BackgroundColorAlternate=alternateBackground
+BackgroundColorDark=shadowBackground
+BackgroundColorHover=hoverBackground
+BackgroundColorNormal=normalBackground
+BackgroundColorDisabled=backgroundColorDisabled
+BackgroundColorSelected=selectedBackground
+BadgeLabelBackgroundColorChecked=ffe0e0e0
+BadgeLabelBackgroundColorUnchecked=ff808080
+BadgeLabelTextColorChecked=ff606060
+BadgeLabelTextColorUnchecked=ffffffff
+CanceledSearchTextColor=ff0000
+ComboBoxArrowColor=toolBarItem
+ComboBoxArrowColorDisabled=toolBarItemDisabled
+ComboBoxTextColor=fancyBarsNormalTextColor
+DetailsButtonBackgroundColorHover=22ffffff
+DetailsWidgetBackgroundColor=18ffffff
+DockWidgetResizeHandleColor=splitter
+DoubleTabWidget1stSeparatorColor=splitter
+DoubleTabWidget1stTabActiveTextColor=text
+DoubleTabWidget1stTabBackgroundColor=ff505050
+DoubleTabWidget1stTabInactiveTextColor=text
+DoubleTabWidget2ndSeparatorColor=toolBarItemDisabled
+DoubleTabWidget2ndTabActiveTextColor=text
+DoubleTabWidget2ndTabBackgroundColor=selectedBackground
+DoubleTabWidget2ndTabInactiveTextColor=text
+EditorPlaceholderColor=normalBackground
+FancyToolBarSeparatorColor=toolBarItemDisabled
+FancyTabBarBackgroundColor=shadowBackground
+FancyTabBarSelectedBackgroundColor=ff000000
+FancyTabWidgetDisabledSelectedTextColor=toolBarItemDisabled
+FancyTabWidgetDisabledUnselectedTextColor=toolBarItemDisabled
+FancyTabWidgetEnabledSelectedTextColor=fancyBarsBoldTextColor
+FancyTabWidgetEnabledUnselectedTextColor=fancyBarsBoldTextColor
+FancyToolButtonHoverColor=hoverBackground
+FancyToolButtonSelectedColor=selectedBackground
+FutureProgressBackgroundColor=shadowBackground
+IconsBaseColor=toolBarItem
+IconsDisabledColor=toolBarItemDisabled
+IconsInfoColor=ff3099dc
+IconsInfoToolBarColor=ff71b2db
+IconsWarningColor=warning
+IconsWarningToolBarColor=fff2d76e
+IconsErrorColor=error
+IconsErrorToolBarColor=ffdb6f71
+IconsRunColor=ff6da838
+IconsRunToolBarColor=ff93be6c
+IconsStopColor=ffee6969
+IconsStopToolBarColor=ffe27f7f
+IconsInterruptColor=ff587ff7
+IconsInterruptToolBarColor=ff6a7bc3
+IconsDebugColor=toolBarItem
+IconsNavigationArrowsColor=ffebc322
+IconsBuildHammerHandleColor=ffb06112
+IconsBuildHammerHeadColor=ff828384
+IconsModeWelcomeActiveColor=ff1f6c97
+IconsModeEditActiveColor=ff99aaef
+IconsModeDesignActiveColor=ffbb6000
+IconsModeDebugActiveColor=ff99aaef
+IconsModeProjectActiveColor=ff1f6c97
+IconsModeAnalyzeActiveColor=ff43adee
+IconsModeHelpActiveColor=fff4be04
+IconsCodeModelKeywordColor=ff777777
+IconsCodeModelClassColor=ffc0b550
+IconsCodeModelStructColor=ff53b053
+IconsCodeModelFunctionColor=ffd34373
+IconsCodeModelVariableColor=ff2bbbcc
+IconsCodeModelEnumColor=ffc0b550
+IconsCodeModelMacroColor=ff476ba0
+IconsCodeModelAttributeColor=ff316511
+IconsCodeModelUniformColor=ff994899
+IconsCodeModelVaryingColor=ffa08833
+IconsCodeModelOverlayBackgroundColor=70000000
+IconsCodeModelOverlayForegroundColor=ffd0d0d0
+InfoBarBackground=ff505000
+InfoBarText=text
+MenuBarEmptyAreaBackgroundColor=shadowBackground
+MenuBarItemBackgroundColor=shadowBackground
+MenuBarItemTextColorDisabled=textDisabled
+MenuBarItemTextColorNormal=text
+MenuItemTextColorDisabled=textDisabled
+MenuItemTextColorNormal=text
+MiniProjectTargetSelectorBackgroundColor=shadowBackground
+MiniProjectTargetSelectorBorderColor=shadowBackground
+MiniProjectTargetSelectorSummaryBackgroundColor=shadowBackground
+MiniProjectTargetSelectorTextColor=fancyBarsNormalTextColor
+PanelStatusBarBackgroundColor=shadowBackground
+PanelsWidgetSeparatorLineColor=000000
+PanelTextColorDark=text
+PanelTextColorMid=ffa0a0a0
+PanelTextColorLight=text
+ProgressBarColorError=error
+ProgressBarColorFinished=dda4d576
+ProgressBarColorNormal=ff999999
+ProgressBarTitleColor=fancyBarsBoldTextColor
+ProgressBarBackgroundColor=a0606060
+SplitterColor=splitter
+TextColorDisabled=textDisabled
+TextColorError=ffff4040
+TextColorHighlight=ffff0000
+TextColorHighlightBackground=8a7f2c
+TextColorLink=textColorLink
+TextColorLinkVisited=textColorLinkVisited
+TextColorNormal=text
+ToggleButtonBackgroundColor=shadowBackground
+ToolBarBackgroundColor=shadowBackground
+TreeViewArrowColorNormal=hoverBackground
+TreeViewArrowColorSelected=text
+
+OutputPanes_DebugTextColor=text
+OutputPanes_ErrorMessageTextColor=ffff6c6c
+OutputPanes_MessageOutput=ff008787
+OutputPanes_NormalMessageTextColor=ff008787
+OutputPanes_StdErrTextColor=ffff6666
+OutputPanes_StdOutTextColor=text
+OutputPanes_WarningMessageTextColor=fff3c300
+OutputPanes_TestPassTextColor=ff00b400
+OutputPanes_TestFailTextColor=ffcf4848
+OutputPanes_TestXFailTextColor=ff28dc28
+OutputPanes_TestXPassTextColor=ffdc2828
+OutputPanes_TestSkipTextColor=ff828282
+OutputPanes_TestWarnTextColor=ffc8c800
+OutputPanes_TestFatalTextColor=ffc82828
+OutputPanes_TestDebugTextColor=ff329696
+OutputPaneButtonFlashColor=error
+OutputPaneToggleButtonTextColorChecked=fancyBarsNormalTextColor
+OutputPaneToggleButtonTextColorUnchecked=fancyBarsNormalTextColor
+
+Debugger_LogWindow_LogInput=ff00acac
+Debugger_LogWindow_LogStatus=ff00875a
+Debugger_LogWindow_LogTime=ffbf0303
+
+Debugger_WatchItem_ValueNormal=text
+Debugger_WatchItem_ValueInvalid=textDisabled
+Debugger_WatchItem_ValueChanged=ffff6666
+
+Debugger_Breakpoint_TextMarkColor=ffff4040
+
+Welcome_TextColor=text
+Welcome_ForegroundPrimaryColor=ff999999
+Welcome_ForegroundSecondaryColor=ff808080
+Welcome_BackgroundColor=normalBackground
+Welcome_ButtonBackgroundColor=normalBackground
+Welcome_DividerColor=ff555555
+Welcome_HoverColor=ff444444
+Welcome_LinkColor=ff7fc63c
+Welcome_DisabledLinkColor=textDisabled
+
+Timeline_TextColor=text
+Timeline_BackgroundColor1=normalBackground
+Timeline_BackgroundColor2=ff444444
+Timeline_DividerColor=ff555555
+Timeline_HighlightColor=ff3099dc
+Timeline_PanelBackgroundColor=ff808080
+Timeline_PanelHeaderColor=alternateBackground
+Timeline_HandleColor=alternateBackground
+Timeline_RangeColor=selectedBackground
+
+VcsBase_FileStatusUnknown_TextColor=text
+VcsBase_FileAdded_TextColor=ff00ff00
+VcsBase_FileModified_TextColor=ff8ee0ff
+VcsBase_FileDeleted_TextColor=fffff6c6c
+VcsBase_FileRenamed_TextColor=ffffa500
+VcsBase_FileUnmerged_TextColor=ffff4040
+
+Bookmarks_TextMarkColor=ff8080ff
+
+TextEditor_SearchResult_ScrollBarColor=ff00c000
+TextEditor_CurrentLine_ScrollBarColor=ffffffff
+
+ProjectExplorer_TaskError_TextMarkColor=error
+ProjectExplorer_TaskWarn_TextMarkColor=warning
+
+CodeModel_Error_TextMarkColor=error
+CodeModel_Warning_TextMarkColor=warning
+
+
+;Designer Main colors
+
+; Design View panel backgrounds - Library, Form Viewer, Properties, States, Timeline & Connections. - lOOKS LIKE IS NO LONGER USED.
+QmlDesigner_BackgroundColor=ff4c4e50
+;QmlDesigner_BackgroundColor=ffd3299a
+
+
+; Design View selected items - Navigator Selection, Timeline Property Selection, TImeline bar, property text highlighted
+QmlDesigner_HighlightColor=ff0492c9
+
+
+
+; live selection color for the form editors smart guides.
+;QmlDesigner_FormEditorSelectionColor=ff4ba2ff
+QmlDesigner_FormEditorSelectionColor=ffd3299a
+
+
+;color for lable text in form editor
+QmlDesigner_FormEditorForegroundColor=ffdadada
+;QmlDesigner_FormEditorForegroundColor=ffd3299a
+
+
+
+
+;new colors
+
+;background color for main form view, library, navigator, properties, connections
+;QmlDesigner_BackgroundColorDarkAlternate=ff4c4e50
+QmlDesigner_BackgroundColorDarkAlternate=ff262626
+
+;filter outlines, override W/H outlines, properties spinbox background, timeline separators.
+;QmlDesigner_BackgroundColorDarker=ff262728
+QmlDesigner_BackgroundColorDarker=ff191919
+
+;properties outlines, states thumbnail outlines, add state button outlines.
+;QmlDesigner_BorderColor=splitter
+QmlDesigner_BorderColor=ff353535
+
+;background sqaures for components, effects, etc. Handles for scrollbars, type background in properties.
+;QmlDesigner_ButtonColor=ff595b5c
+QmlDesigner_ButtonColor=ff353535
+
+
+;non - selected tabs, text color for selected tabs.
+;QmlDesigner_TabDark=shadowBackground
+QmlDesigner_TabDark=ff111111
+
+
+;active tab backgrounds and non selected tab text.
+QmlDesigner_TabLight=text
+;QmlDesigner_TabLight=ff262626
+
+;extra_new_colors
+
+
+QmlDesigner_FormeditorBackgroundColor=ff000000
+
+QmlDesigner_AlternateBackgroundColor=ffc14fc1
+
+QmlDesigner_ScrollBarHandleColor=ff595b5c
+
+
+
+;palette colors
+
+;outline colors on the combo box, zoom slider, flowtag button, dialog outlines, on loading project the whole screen flashes this color
+;PaletteWindow=normalBackground
+PaletteWindow=ff262626
+
+
+
+; item text for search results panel and application output panel, twirl down triangles in edit mode, text editor.
+PaletteWindowText=text
+;PaletteWindowText=ffd3299a
+
+
+;Search bar background, edit view project list background, style combo box background
+PaletteBase=normalBackground
+;PaletteBase=ff191919
+
+
+
+;can't see where this is used.
+PaletteAlternateBase=alternateBackground
+;PaletteAlternateBase=ffd3299a
+
+
+
+;flow tag backgrounds, import combobox background, edit mode scrollbars
+;PaletteButton=shadowBackground
+PaletteButton=ff262626
+
+
+
+;alternate text in the search and application output panel - NO LONGER SEEMS TO DO ANYTHING
+PaletteBrightText=ffff3333
+;PaletteBrightText=ffd3299a
+
+
+; text inside dropdown combo boxes, styles, connections.
+PaletteText=text
+;PaletteText=ffd3299a
+
+
+
+;text for flowtags, import dropdown, ticks for tick boxes.
+PaletteButtonText=text
+;PaletteButtonText=ffd3299a
+
+
+PaletteButtonTextDisabled=textDisabled
+
+
+;background color for the tool tip hover background
+PaletteToolTipBase=selectedBackground
+;PaletteToolTipBase=ffd3299a
+
+
+;the selection highlight on the dropdown combo box in the file selection top menu and connections panel and tab mode selector dropdowns
+PaletteHighlight=selectedBackgroundText
+
+
+; outline of warning in editor mode, underline of "open a document" page in the edit mode
+PaletteDark=shadowBackground
+;PaletteDark=ffd3299a
+
+
+;selected text highlight in edit and design studio modes
+PaletteHighlightedText=ffffffff
+;PaletteHighlightedText=ffd3299a
+
+
+; text for for floating tool tips
+PaletteToolTipText=text
+;PaletteToolTipText=ffd3299a
+
+
+PaletteLink=textColorLink
+PaletteLinkVisited=textColorLinkVisited
+PaletteWindowDisabled=backgroundColorDisabled
+PaletteWindowTextDisabled=textDisabled
+PaletteBaseDisabled=backgroundColorDisabled
+PaletteTextDisabled=textDisabled
+
+[Flags]
+ComboBoxDrawTextShadow=false
+DerivePaletteFromTheme=true
+DrawIndicatorBranch=true
+DrawSearchResultWidgetFrame=false
+DrawTargetSelectorBottom=false
+DrawToolBarHighlights=false
+DrawToolBarBorders=false
+ApplyThemePaletteGlobally=true
+FlatToolBars=true
+FlatSideBarIcons=true
+FlatProjectsMode=true
+FlatMenuBar=true
+ToolBarIconShadow=true
+WindowColorAsBase=false
+DarkUserInterface=true
+
+[Gradients]
+DetailsWidgetHeaderGradient\1\color=00000000
+DetailsWidgetHeaderGradient\1\pos=1
+DetailsWidgetHeaderGradient\size=1

share/qtcreator/themes/design-light.creatortheme

@@ -0,0 +1,305 @@
+[General]
+ThemeName=Design Light
+PreferredStyles=Fusion
+
+
+[Palette]
+shadowBackground=ffd1cfcf
+text=ff000000
+textDisabled=55000000
+selectedBackgroundText=aa1f75cc
+toolBarItem=a0010508
+toolBarItemDisabled=38000000
+fancyBarsNormalTextColor=ff000000
+fancyBarsBoldTextColor=a0010508
+hoverBackground=1a000000
+selectedBackground=ffffffff
+normalBackground=ffffffff
+alternateBackground=ff515151
+stop_error=ffec7373
+run_success=ff52c23b
+error=ffdf4f4f
+warning=ffecbc1c
+splitter=ffbdbebf
+qmlDesignerButtonColor=fff8f8f8
+textColorLink=ff007af4
+textColorLinkVisited=ffa57aff
+backgroundColorDisabled=ff444444
+
+[Colors]
+;DS controls theme START
+DScontrolBackground=ffffffff
+DScontrolOutline=ff777777
+DStextColor=ff242424
+DSdisabledTextColor=ff505050
+DSpanelBackground=fff2f2f2
+DShoverHighlight=ffe6e6e6
+DScolumnBackground=ffaaaaaa
+DSfocusEdit=ffeaeaea
+DSfocusDrag=ffd1d1d1
+DScontrolBackgroundPressed=ff505050
+DScontrolBackgroundChecked=ff5e5e5e
+DSinteraction=ff0492c9
+DSsliderActiveTrack=ff363636
+DSsliderInactiveTrack=ffe6e6e6
+DSsliderHandle=ff777777
+DSsliderActiveTrackHover=ff7f7f7f
+DSsliderInactiveTrackHover=ff5e5e5e
+DSsliderHandleHover=ff505050
+DSsliderActiveTrackFocus=ff363636
+DSsliderInactiveTrackFocus=ff505050
+DSsliderHandleFocus=ff0492c9
+DSerrorColor=ffdf3a3a
+DScontrolBackgroundDisabled=ffaaaaaa
+DScontrolOutlineDisabled=ff777777
+DStextColorDisabled=ff505050
+DStextSelectionColor=ff0492c9
+DStextSelectedTextColor=ffffffff
+DSscrollBarTrack=ff777777
+DSscrollBarHandle=ff505050
+DScontrolBackgroundInteraction=ff777777
+DStranslationIndicatorBorder=ffebebeb
+DSsectionHeadBackground=ffebebeb
+DSchangedStateText=ff99ccff
+;DS controls theme END
+
+BackgroundColorAlternate=alternateBackground
+BackgroundColorDark=shadowBackground
+BackgroundColorHover=hoverBackground
+BackgroundColorNormal=normalBackground
+BackgroundColorDisabled=ff444444
+BackgroundColorSelected=selectedBackground
+BadgeLabelBackgroundColorChecked=ffe0e0e0
+BadgeLabelBackgroundColorUnchecked=ff808080
+BadgeLabelTextColorChecked=ff606060
+BadgeLabelTextColorUnchecked=ffffffff
+CanceledSearchTextColor=ff0000
+ComboBoxArrowColor=toolBarItem
+ComboBoxArrowColorDisabled=toolBarItemDisabled
+ComboBoxTextColor=fancyBarsNormalTextColor
+DetailsButtonBackgroundColorHover=b4ffffff
+DetailsWidgetBackgroundColor=28ffffff
+DockWidgetResizeHandleColor=splitter
+DoubleTabWidget1stSeparatorColor=ffff0000
+DoubleTabWidget1stTabActiveTextColor=ff000000
+DoubleTabWidget1stTabBackgroundColor=ffff0000
+DoubleTabWidget1stTabInactiveTextColor=ff555555
+DoubleTabWidget2ndSeparatorColor=ffff0000
+DoubleTabWidget2ndTabActiveTextColor=ffffffff
+DoubleTabWidget2ndTabBackgroundColor=ffff0000
+DoubleTabWidget2ndTabInactiveTextColor=ff000000
+EditorPlaceholderColor=fff4f4f4
+FancyToolBarSeparatorColor=toolBarItemDisabled
+FancyTabBarBackgroundColor=shadowBackground
+FancyTabBarSelectedBackgroundColor=selectedBackground
+FancyTabWidgetDisabledSelectedTextColor=toolBarItemDisabled
+FancyTabWidgetDisabledUnselectedTextColor=toolBarItemDisabled
+FancyTabWidgetEnabledSelectedTextColor=fancyBarsBoldTextColor
+FancyTabWidgetEnabledUnselectedTextColor=fancyBarsBoldTextColor
+FancyToolButtonHoverColor=hoverBackground
+FancyToolButtonSelectedColor=selectedBackground
+FutureProgressBackgroundColor=shadowBackground
+IconsBaseColor=toolBarItem
+IconsDisabledColor=toolBarItemDisabled
+IconsInfoColor=ff3099dc
+IconsInfoToolBarColor=ff3099dc
+IconsWarningColor=warning
+IconsWarningToolBarColor=ffecbc1c
+IconsErrorColor=error
+IconsErrorToolBarColor=ffdf4f4f
+IconsRunColor=run_success
+IconsRunToolBarColor=run_success
+IconsStopColor=stop_error
+IconsStopToolBarColor=stop_error
+IconsInterruptColor=ff587ff7
+IconsInterruptToolBarColor=ff6a7bc3
+IconsDebugColor=toolBarItem
+IconsNavigationArrowsColor=ff3dabe6
+IconsBuildHammerHandleColor=ffc26b14
+IconsBuildHammerHeadColor=ff868687
+IconsModeWelcomeActiveColor=ff5caa15
+IconsModeEditActiveColor=ff6a6add
+IconsModeDesignActiveColor=ffbb6000
+IconsModeDebugActiveColor=ff6a6add
+IconsModeProjectActiveColor=ff5caa15
+IconsModeAnalyzeActiveColor=ff43adee
+IconsModeHelpActiveColor=fffaa838
+IconsCodeModelKeywordColor=ff777777
+IconsCodeModelClassColor=ffc0b550
+IconsCodeModelStructColor=ff53b053
+IconsCodeModelFunctionColor=ffd34373
+IconsCodeModelVariableColor=ff2bbbcc
+IconsCodeModelEnumColor=ffc0b550
+IconsCodeModelMacroColor=ff476ba0
+IconsCodeModelAttributeColor=ff316511
+IconsCodeModelUniformColor=ff994899
+IconsCodeModelVaryingColor=ffa08833
+IconsCodeModelOverlayBackgroundColor=70ffffff
+IconsCodeModelOverlayForegroundColor=ff232425
+InfoBarBackground=ffffffe1
+InfoBarText=text
+MenuBarEmptyAreaBackgroundColor=shadowBackground
+MenuBarItemBackgroundColor=shadowBackground
+MenuBarItemTextColorDisabled=textDisabled
+MenuBarItemTextColorNormal=text
+MenuItemTextColorDisabled=textDisabled
+MenuItemTextColorNormal=text
+MiniProjectTargetSelectorBackgroundColor=shadowBackground
+MiniProjectTargetSelectorBorderColor=shadowBackground
+MiniProjectTargetSelectorSummaryBackgroundColor=shadowBackground
+MiniProjectTargetSelectorTextColor=fancyBarsNormalTextColor
+PanelStatusBarBackgroundColor=shadowBackground
+PanelsWidgetSeparatorLineColor=000000
+PanelTextColorDark=text
+PanelTextColorMid=ff666666
+PanelTextColorLight=fancyBarsNormalTextColor
+ProgressBarColorError=error
+ProgressBarColorFinished=run_success
+ProgressBarColorNormal=ff888888
+ProgressBarTitleColor=fancyBarsBoldTextColor
+ProgressBarBackgroundColor=28000000
+SplitterColor=splitter
+TextColorDisabled=textDisabled
+TextColorError=ffff4040
+TextColorHighlight=ffff0000
+TextColorHighlightBackground=ffef0b
+TextColorLink=ff007af4
+TextColorLinkVisited=ffa57aff
+TextColorNormal=text
+ToggleButtonBackgroundColor=shadowBackground
+ToolBarBackgroundColor=shadowBackground
+TreeViewArrowColorNormal=hoverBackground
+TreeViewArrowColorSelected=text
+
+OutputPanes_DebugTextColor=text
+OutputPanes_ErrorMessageTextColor=ffaa0000
+OutputPanes_MessageOutput=ff0000aa
+OutputPanes_NormalMessageTextColor=ff0000aa
+OutputPanes_StdErrTextColor=ffaa0000
+OutputPanes_StdOutTextColor=ff000000
+OutputPanes_WarningMessageTextColor=ff808000
+OutputPanes_TestPassTextColor=ff009900
+OutputPanes_TestFailTextColor=ffa00000
+OutputPanes_TestXFailTextColor=ff28f028
+OutputPanes_TestXPassTextColor=fff02828
+OutputPanes_TestSkipTextColor=ff787878
+OutputPanes_TestWarnTextColor=ffd0bb00
+OutputPanes_TestFatalTextColor=ff640000
+OutputPanes_TestDebugTextColor=ff329696
+OutputPaneButtonFlashColor=ffff0000
+OutputPaneToggleButtonTextColorChecked=fancyBarsNormalTextColor
+OutputPaneToggleButtonTextColorUnchecked=fancyBarsNormalTextColor
+
+Debugger_LogWindow_LogInput=ff00acac
+Debugger_LogWindow_LogStatus=ff00875a
+Debugger_LogWindow_LogTime=ffbf0303
+
+Debugger_WatchItem_ValueNormal=text
+Debugger_WatchItem_ValueInvalid=textDisabled
+Debugger_WatchItem_ValueChanged=ffbf0303
+
+Debugger_Breakpoint_TextMarkColor=ffff4040
+
+Welcome_TextColor=ff000000
+Welcome_ForegroundPrimaryColor=ff404244
+Welcome_ForegroundSecondaryColor=ff727476
+Welcome_BackgroundColor=normalBackground
+Welcome_ButtonBackgroundColor=normalBackground
+Welcome_DividerColor=ffd6d6d6
+Welcome_HoverColor=fff6f6f6
+Welcome_LinkColor=ff5caa15
+Welcome_DisabledLinkColor=textDisabled
+
+Timeline_TextColor=text
+Timeline_BackgroundColor1=normalBackground
+Timeline_BackgroundColor2=fff6f6f6
+Timeline_DividerColor=ffd6d6d6
+Timeline_HighlightColor=ff3099dc
+Timeline_PanelBackgroundColor=ffd6d6d6
+Timeline_PanelHeaderColor=ff888888
+Timeline_HandleColor=ff888888
+Timeline_RangeColor=selectedBackground
+
+VcsBase_FileStatusUnknown_TextColor=ff000000
+VcsBase_FileAdded_TextColor=ff00aa00
+VcsBase_FileModified_TextColor=ff0000ee
+VcsBase_FileDeleted_TextColor=ff800000
+VcsBase_FileRenamed_TextColor=ffd77d00
+VcsBase_FileUnmerged_TextColor=ffee0000
+
+Bookmarks_TextMarkColor=ffa0a0ff
+
+TextEditor_SearchResult_ScrollBarColor=ff00c000
+TextEditor_CurrentLine_ScrollBarColor=ff404040
+
+ProjectExplorer_TaskError_TextMarkColor=error
+ProjectExplorer_TaskWarn_TextMarkColor=warning
+
+CodeModel_Error_TextMarkColor=error
+CodeModel_Warning_TextMarkColor=warning
+
+;new colors
+QmlDesigner_BackgroundColor=qmlDesignerButtonColor
+QmlDesigner_HighlightColor=ff0492c9
+QmlDesigner_FormEditorSelectionColor=ffd3299a
+QmlDesigner_FormEditorForegroundColor=ffffffff
+QmlDesigner_BackgroundColorDarkAlternate=qmlDesignerButtonColor
+QmlDesigner_BackgroundColorDarker=fff5f5f5
+QmlDesigner_BorderColor=splitter
+QmlDesigner_ButtonColor=f0f0f0
+QmlDesigner_TabDark=ff63676b
+QmlDesigner_TabLight=ffffffff
+QmlDesigner_FormeditorBackgroundColor=qmlDesignerButtonColor
+QmlDesigner_AlternateBackgroundColor=qmlDesignerButtonColor
+
+;extra_new_colors
+QmlDesigner_FormeditorBackgroundColor=ff000000
+QmlDesigner_AlternateBackgroundColor=ffc14fc1
+QmlDesigner_ScrollBarHandleColor=ff8b8e8f
+
+;palette colors
+
+PaletteWindow=selectedBackground
+PaletteWindowText=text
+PaletteBase=normalBackground
+PaletteAlternateBase=alternateBackground
+PaletteButton=selectedBackground
+PaletteBrightText=selectedBackgroundText
+PaletteText=text
+PaletteButtonText=text
+PaletteButtonTextDisabled=textDisabled
+PaletteToolTipBase=selectedBackground
+
+PaletteHighlight=ff0492c9
+
+PaletteDark=shadowBackground
+PaletteHighlightedText=ffffffff
+PaletteToolTipText=text
+PaletteLink=textColorLink
+PaletteLinkVisited=textColorLinkVisited
+PaletteWindowDisabled=backgroundColorDisabled
+PaletteWindowTextDisabled=textDisabled
+PaletteBaseDisabled=backgroundColorDisabled
+PaletteTextDisabled=textDisabled
+
+[Flags]
+ComboBoxDrawTextShadow=false
+DerivePaletteFromTheme=true
+DrawIndicatorBranch=true
+DrawSearchResultWidgetFrame=false
+DrawTargetSelectorBottom=false
+DrawToolBarHighlights=false
+DrawToolBarBorders=true
+ApplyThemePaletteGlobally=true
+FlatToolBars=true
+FlatSideBarIcons=true
+FlatProjectsMode=false
+FlatMenuBar=true
+ToolBarIconShadow=false
+WindowColorAsBase=false
+DarkUserInterface=false
+
+[Gradients]
+DetailsWidgetHeaderGradient\1\color=00000000
+DetailsWidgetHeaderGradient\1\pos=1
+DetailsWidgetHeaderGradient\size=1

share/qtcreator/themes/design.creatortheme

@@ -4,85 +4,65 @@ PreferredStyles=Fusion
 DefaultTextEditorColorScheme=creator-dark.xml
 
 [Palette]
-
-;color for the mode toolbar, un-selected tabs, toolbars for each panel, scroll bar backgrounds and active tab panels, text for the non selected tabs.
-;shadowBackground=ff404244
 shadowBackground=ff191919
-
-
-;main text color
-;text=ffd0d0d0
 text=ffdadada
-
-;disabled text
 textDisabled=60a4a6a8
-
-;background for selected text
 selectedBackgroundText=aa1f75cc
-
-;icons, spinbox ticks,
-;toolBarItem=b6fbfdff
 toolBarItem=ffb3b3b3
-
-
-; all disabled icons and the separators between icons
-;toolBarItemDisabled=60a4a6a8
 toolBarItemDisabled=ff686868
-
-
-
-;text for dropdown selectors in the panel menus, file selection and text for all pop out panels such as issues, search results, etc.
 fancyBarsNormalTextColor=ffd0d0d0
-;fancyBarsNormalTextColor=ffd3299a
-
-
-
-;text for the mode sidebar menu.
 fancyBarsBoldTextColor=b6fbfdff
-;fancyBarsBoldTextColor=b6d3299a
-
-
-
-;also the color for the scroll bar handles and inside rectangle for the Type text box, and the working area timeline ruler.
-;also the background selection rectangle for icons and selection highlight for bounding box.
-;hoverBackground=22ffffff
 hoverBackground=ff404244
-
-
-
-;blended background color for controls 1 spinboxes, background selection square for snapping modes, publish as alias icon.
-;color for filter background and overwrite width and height boxes
-;selectedBackground=66000000
 selectedBackground=ff111111
-
-
-;background for default "open a document" screen in the edit mode,
-;normalBackground=ff2E2F30
 normalBackground=ff262728
-
-
-
-;not used anywhere i can see
 alternateBackground=ff353637
-
-
 error=ffdf4f4f
 warning=ffecbc1c
-
-
-;dividng lines between all the panels
-;splitter=ff06080A
 splitter=ff474747
-
-
-
-
-
 textColorLink=ff007af4
 textColorLinkVisited=ffa57aff
 backgroundColorDisabled=ff444444
 
+
+
+
 [Colors]
+;DS controls theme START
+DScontrolBackground=ff242424
+DScontrolOutline=ff404040
+DStextColor=ffffffff
+DSdisabledTextColor=ff909090
+DSpanelBackground=ff2a2a2a
+DShoverHighlight=ff313131
+DScolumnBackground=ff363636
+DSfocusEdit=ff444444
+DSfocusDrag=ff565656
+DScontrolBackgroundPressed=ff606060
+DScontrolBackgroundChecked=ff565656
+DSinteraction=ff0492c9
+DSsliderActiveTrack=ff606060
+DSsliderInactiveTrack=ff404040
+DSsliderHandle=ff505050
+DSsliderActiveTrackHover=ff7f7f7f
+DSsliderInactiveTrackHover=ff505050
+DSsliderHandleHover=ff606060
+DSsliderActiveTrackFocus=ffaaaaaa
+DSsliderInactiveTrackFocus=ff606060
+DSsliderHandleFocus=ff0492c9
+DSerrorColor=ffdf3a3a
+DScontrolBackgroundDisabled=ff363636
+DScontrolOutlineDisabled=ff404040
+DStextColorDisabled=ff606060
+DStextSelectionColor=ff0492c9
+DStextSelectedTextColor=ffffffff
+DSscrollBarTrack=ff404040
+DSscrollBarHandle=ff505050
+DScontrolBackgroundInteraction=ff404040
+DStranslationIndicatorBorder=ff7f7f7f
+DSsectionHeadBackground=ff191919
+DSchangedStateText=ff99ccff
+;DS controls theme END
+
 BackgroundColorAlternate=alternateBackground
 BackgroundColorDark=shadowBackground
 BackgroundColorHover=hoverBackground
@@ -267,8 +247,7 @@ QmlDesigner_BackgroundColor=ff4c4e50
 
 
 ; Design View selected items - Navigator Selection, Timeline Property Selection, TImeline bar, property text highlighted
-QmlDesigner_HighlightColor=ff3f91c4
-;QmlDesigner_HighlightColor=ffd3299a
+QmlDesigner_HighlightColor=ff0492c9
 
 
 
@@ -314,11 +293,9 @@ QmlDesigner_TabLight=text
 
 ;extra_new_colors
 
-; color for the form editor background
-;QmlDesigner_FormeditorBackgroundColor=qmlDesignerButtonColor
+
 QmlDesigner_FormeditorBackgroundColor=ff000000
 
-;QmlDesigner_AlternateBackgroundColor=qmlDesignerButtonColor
 QmlDesigner_AlternateBackgroundColor=ffc14fc1
 
 QmlDesigner_ScrollBarHandleColor=ff595b5c
@@ -361,7 +338,6 @@ PaletteBrightText=ffff3333
 ;PaletteBrightText=ffd3299a
 
 
-;
 ; text inside dropdown combo boxes, styles, connections.
 PaletteText=text
 ;PaletteText=ffd3299a
@@ -383,7 +359,6 @@ PaletteToolTipBase=selectedBackground
 
 ;the selection highlight on the dropdown combo box in the file selection top menu and connections panel and tab mode selector dropdowns
 PaletteHighlight=selectedBackgroundText
-;PaletteHighlight=ffd3299a
 
 
 ; outline of warning in editor mode, underline of "open a document" page in the edit mode

src/libs/clangsupport/CMakeLists.txt

@@ -153,13 +153,10 @@ add_custom_target(copy_clang_to_builddir ALL
 
 # For the developer build directory
 add_custom_command(TARGET copy_clang_to_builddir POST_BUILD
-  COMMAND "${CMAKE_COMMAND}"
-    -E make_directory
-      "${PROJECT_BINARY_DIR}/${IDE_LIBEXEC_PATH}/clang/lib/clang/${CLANG_VERSION}"
   COMMAND "${CMAKE_COMMAND}"
     -E copy_directory
       "${LLVM_LIBRARY_DIR}/clang/${CLANG_VERSION}/include"
-      "${PROJECT_BINARY_DIR}/${IDE_LIBEXEC_PATH}/clang/lib/clang/${CLANG_VERSION}"
+      "${PROJECT_BINARY_DIR}/${IDE_LIBEXEC_PATH}/clang/lib/clang/${CLANG_VERSION}/include"
   VERBATIM
 )
 

src/plugins/cpptools/cpptoolsplugin.cpp

@@ -80,10 +80,9 @@ static QHash<QString, QString> m_headerSourceMapping;
 class CppToolsPluginPrivate
 {
 public:
-    CppToolsPluginPrivate()
-    {
-        m_codeModelSettings.fromSettings(ICore::settings());
-    }
+    CppToolsPluginPrivate() {}
+
+    void initialize() { m_codeModelSettings.fromSettings(ICore::settings()); }
 
     ~CppToolsPluginPrivate()
     {
@@ -165,6 +164,7 @@ bool CppToolsPlugin::initialize(const QStringList &arguments, QString *error)
     Q_UNUSED(error)
 
     d = new CppToolsPluginPrivate;
+    d->initialize();
 
     JsExpander::registerGlobalObject<CppToolsJsExtension>("Cpp");
     ExtensionSystem::PluginManager::addObject(&d->m_cppProjectUpdaterFactory);

src/plugins/mcusupport/mcusupportconstants.h

@@ -38,6 +38,7 @@ const char KIT_MCUTARGET_MODEL_KEY[] = "McuSupport.McuTargetModel";
 const char KIT_MCUTARGET_SDKVERSION_KEY[] = "McuSupport.McuTargetSdkVersion";
 const char KIT_MCUTARGET_KITVERSION_KEY[] = "McuSupport.McuTargetKitVersion";
 const char KIT_MCUTARGET_COLORDEPTH_KEY[] = "McuSupport.McuTargetColorDepth";
+const char KIT_MCUTARGET_OS_KEY[] = "McuSupport.McuTargetOs";
 
 const char SETTINGS_GROUP[] = "McuSupport";
 const char SETTINGS_KEY_PACKAGE_PREFIX[] = "Package_";

src/plugins/mcusupport/mcusupportoptions.cpp

@@ -61,7 +61,7 @@
 namespace McuSupport {
 namespace Internal {
 
-static const int KIT_VERSION = 2; // Bumps up whenever details in Kit creation change
+static const int KIT_VERSION = 3; // Bumps up whenever details in Kit creation change
 
 static QString packagePathFromSettings(const QString &settingsKey, const QString &defaultPath = {})
 {
@@ -320,11 +320,12 @@ QVariant McuToolChainPackage::debuggerId() const
     return debuggerId;
 }
 
-McuTarget::McuTarget(const QString &vendor, const QString &platform,
+McuTarget::McuTarget(const QString &vendor, const QString &platform, OS os,
                      const QVector<McuPackage *> &packages,
                      const McuToolChainPackage *toolChainPackage)
     : m_vendor(vendor)
     , m_qulPlatform(platform)
+    , m_os(os)
     , m_packages(packages)
     , m_toolChainPackage(toolChainPackage)
 {
@@ -345,6 +346,11 @@ const McuToolChainPackage *McuTarget::toolChainPackage() const
     return m_toolChainPackage;
 }
 
+McuTarget::OS McuTarget::os() const
+{
+    return m_os;
+}
+
 QString McuTarget::qulPlatform() const
 {
     return m_qulPlatform;
@@ -477,6 +483,7 @@ static void setKitProperties(const QString &kitName, ProjectExplorer::Kit *k,
     k->setValue(KIT_MCUTARGET_COLORDEPTH_KEY, mcuTarget->colorDepth());
     k->setValue(KIT_MCUTARGET_SDKVERSION_KEY, McuSupportOptions::supportedQulVersion().toString());
     k->setValue(KIT_MCUTARGET_KITVERSION_KEY, KIT_VERSION);
+    k->setValue(KIT_MCUTARGET_OS_KEY, static_cast<int>(mcuTarget->os()));
     k->setAutoDetected(true);
     k->makeSticky();
     if (mcuTarget->toolChainPackage()->type() == McuToolChainPackage::TypeDesktop)
@@ -576,6 +583,8 @@ static void setKitCMakeOptions(ProjectExplorer::Kit *k, const McuTarget* mcuTarg
                                   (qulDir + "/lib/cmake/Qul/QulGenerators.cmake").toUtf8()));
     config.append(CMakeConfigItem("QUL_PLATFORM",
                                   mcuTarget->qulPlatform().toUtf8()));
+    if (mcuTarget->os() == McuTarget::OS::FreeRTOS)
+        config.append(CMakeConfigItem("OS", "FreeRTOS"));
     if (mcuTarget->colorDepth() >= 0)
         config.append(CMakeConfigItem("QUL_COLOR_DEPTH",
                                       QString::number(mcuTarget->colorDepth()).toLatin1()));
@@ -594,7 +603,8 @@ static void setKitQtVersionOptions(ProjectExplorer::Kit *k)
 
 QString McuSupportOptions::kitName(const McuTarget *mcuTarget)
 {
-    // TODO: get version from qulSdkPackage and insert into name
+    const QString os = QLatin1String(mcuTarget->os()
+                                     == McuTarget::OS::FreeRTOS ? " FreeRTOS" : "");
     const QString colorDepth = mcuTarget->colorDepth() > 0
             ? QString::fromLatin1(" %1bpp").arg(mcuTarget->colorDepth())
             : "";
@@ -603,8 +613,8 @@ QString McuSupportOptions::kitName(const McuTarget *mcuTarget)
             mcuTarget->toolChainPackage()->type() == McuToolChainPackage::TypeDesktop
             ? "Desktop"
             : mcuTarget->qulPlatform();
-    return QString::fromLatin1("Qt for MCUs %1 - %2%3")
-            .arg(supportedQulVersion().toString(), targetName, colorDepth);
+    return QString::fromLatin1("Qt for MCUs %1 - %2%3%4")
+            .arg(supportedQulVersion().toString(), targetName, os, colorDepth);
 }
 
 QList<ProjectExplorer::Kit *> McuSupportOptions::existingKits(const McuTarget *mcuTarget)
@@ -620,6 +630,8 @@ QList<ProjectExplorer::Kit *> McuSupportOptions::existingKits(const McuTarget *m
                         kit->value(KIT_MCUTARGET_VENDOR_KEY) == mcuTarget->vendor()
                         && kit->value(KIT_MCUTARGET_MODEL_KEY) == mcuTarget->qulPlatform()
                         && kit->value(KIT_MCUTARGET_COLORDEPTH_KEY) == mcuTarget->colorDepth()
+                        && kit->value(KIT_MCUTARGET_OS_KEY).toInt()
+                           == static_cast<int>(mcuTarget->os())
                         ));
     });
 }

src/plugins/mcusupport/mcusupportoptions.h

@@ -131,13 +131,20 @@ class McuTarget : public QObject
     Q_OBJECT
 
 public:
-    McuTarget(const QString &vendor, const QString &platform, const QVector<McuPackage *> &packages,
-              const McuToolChainPackage *toolChainPackage);
+    enum class OS {
+        Desktop,
+        BareMetal,
+        FreeRTOS
+    };
+
+    McuTarget(const QString &vendor, const QString &platform, OS os,
+              const QVector<McuPackage *> &packages, const McuToolChainPackage *toolChainPackage);
 
     QString vendor() const;
     QVector<McuPackage *> packages() const;
     const McuToolChainPackage *toolChainPackage() const;
     QString qulPlatform() const;
+    OS os() const;
     void setColorDepth(int colorDepth);
     int colorDepth() const;
     bool isValid() const;
@@ -145,6 +152,7 @@ public:
 private:
     const QString m_vendor;
     const QString m_qulPlatform;
+    const OS m_os = OS::BareMetal;
     const QVector<McuPackage*> m_packages;
     const McuToolChainPackage *m_toolChainPackage;
     int m_colorDepth = -1;

src/plugins/mcusupport/mcusupportplugin.cpp

@@ -33,11 +33,15 @@
 #include <coreplugin/coreconstants.h>
 #include <coreplugin/icontext.h>
 #include <coreplugin/icore.h>
+#include <coreplugin/infobar.h>
 
 #include <projectexplorer/devicesupport/devicemanager.h>
 #include <projectexplorer/jsonwizard/jsonwizardfactory.h>
 #include <projectexplorer/kitmanager.h>
 
+#include <QTimer>
+
+using namespace Core;
 using namespace ProjectExplorer;
 
 namespace McuSupport {
@@ -90,8 +94,30 @@ void McuSupportPlugin::extensionsInitialized()
 
     connect(KitManager::instance(), &KitManager::kitsLoaded, [](){
         McuSupportOptions::removeOutdatedKits();
+        McuSupportPlugin::askUserAboutMcuSupportKitsSetup();
     });
 }
 
+void McuSupportPlugin::askUserAboutMcuSupportKitsSetup()
+{
+    const char setupMcuSupportKits[] = "SetupMcuSupportKits";
+
+    if (!ICore::infoBar()->canInfoBeAdded(setupMcuSupportKits)
+        || McuSupportOptions::qulDirFromSettings().isEmpty()
+        || !McuSupportOptions::existingKits(nullptr).isEmpty())
+        return;
+
+    InfoBarEntry info(
+                setupMcuSupportKits,
+                tr("Create Kits for Qt for MCUs? "
+                "To do it later, select Options > Devices > MCU."),
+                InfoBarEntry::GlobalSuppression::Enabled);
+    info.setCustomButtonInfo(tr("Create Kits for Qt for MCUs"), [setupMcuSupportKits] {
+        ICore::infoBar()->removeInfo(setupMcuSupportKits);
+        QTimer::singleShot(0, []() { ICore::showOptionsDialog(Constants::SETTINGS_ID); });
+    });
+    ICore::infoBar()->addInfo(info);
+}
+
 } // namespace Internal
 } // namespace McuSupport

src/plugins/mcusupport/mcusupportplugin.h

@@ -43,6 +43,7 @@ public:
 
     bool initialize(const QStringList &arguments, QString *errorString) override;
     void extensionsInitialized() override;
+    static void askUserAboutMcuSupportKitsSetup();
 };
 
 } // namespace Internal

src/plugins/mcusupport/mcusupportsdk.cpp

@@ -220,6 +220,24 @@ static McuPackage *createMcuXpressoIdePackage()
     return result;
 }
 
+static McuPackage *createFreeRTOSSourcesPackage(const QString &envVarPrefix)
+{
+    const QString envVar = envVarPrefix + "_FREERTOS_DIR";
+
+    const QString defaultPath =
+            qEnvironmentVariableIsSet(envVar.toLatin1()) ?
+                qEnvironmentVariable(envVar.toLatin1()) : QDir::homePath();
+
+    auto result = new McuPackage(
+                QString::fromLatin1("FreeRTOS Sources (%1)").arg(envVarPrefix),
+                defaultPath,
+                {},
+                QString::fromLatin1("FreeRTOSSourcePackage_%1").arg(envVarPrefix));
+    result->setDownloadUrl("https://freertos.org");
+    result->setEnvironmentVariableName(envVar);
+    return result;
+}
+
 void hardcodedTargetsAndPackages(const Utils::FilePath &dir, QVector<McuPackage *> *packages,
                                  QVector<McuTarget *> *mcuTargets)
 {
@@ -231,6 +249,9 @@ void hardcodedTargetsAndPackages(const Utils::FilePath &dir, QVector<McuPackage
     McuPackage* evkbImxrt1050SdkPackage = Sdk::createEvkbImxrt1050SdkPackage();
     McuPackage *mcuXpressoIdePackage = createMcuXpressoIdePackage();
     McuPackage *rglPackage = createRGLPackage();
+    McuPackage *freeRTOSSTM32F7Package = createFreeRTOSSourcesPackage("STM32F7");
+    McuPackage *freeRTOSIMXRT1050Package = createFreeRTOSSourcesPackage("IMXRT1050");
+    McuPackage *freeRTOSIMXRT1064Package = createFreeRTOSSourcesPackage("IMXRT1064");
 
     QVector<McuPackage*> stmEvalPackages = {
         armGccPackage, stm32CubeProgrammerPackage};
@@ -242,7 +263,8 @@ void hardcodedTargetsAndPackages(const Utils::FilePath &dir, QVector<McuPackage
     *packages = {
         armGccPackage, desktopToolChainPackage, ghsToolchainPackage,
         stm32CubeFwF7SdkPackage, stm32CubeProgrammerPackage, evkbImxrt1050SdkPackage,
-        mcuXpressoIdePackage, rglPackage};
+        mcuXpressoIdePackage, rglPackage,
+        freeRTOSSTM32F7Package, freeRTOSIMXRT1050Package, freeRTOSIMXRT1064Package};
 
     const QString vendorStm = "STM";
     const QString vendorNxp = "NXP";
@@ -254,33 +276,58 @@ void hardcodedTargetsAndPackages(const Utils::FilePath &dir, QVector<McuPackage
         const QString qulPlatform;
         const QVector<McuPackage*> &packages;
         McuToolChainPackage *toolchainPackage;
+        McuPackage *freeRTOSPackage;
         const QVector<int> colorDepths;
     } targets[] = {
-        {vendorNxp, {"MIMXRT1050-EVK"}, nxpEvalPackages, armGccPackage, {16}},
-        {vendorNxp, {"MIMXRT1064-EVK"}, nxpEvalPackages, armGccPackage, {16}},
-        {vendorQt, {"Qt"}, desktopPackages, desktopToolChainPackage, {32}},
-        {vendorRenesas, {"RH850-D1M1A"}, renesasEvalPackages, ghsToolchainPackage, {32}},
-        {vendorStm, {"STM32F469I-DISCOVERY"}, stmEvalPackages, armGccPackage, {24}},
-        {vendorStm, {"STM32F7508-DISCOVERY"}, stmEvalPackages, armGccPackage, {32, 16}},
-        {vendorStm, {"STM32F769I-DISCOVERY"}, stmEvalPackages, armGccPackage, {32}},
-        {vendorStm, {"STM32H750B-DISCOVERY"}, stmEvalPackages, armGccPackage, {32}},
-        {vendorStm, {"STM32L4R9I-DISCOVERY"}, stmEvalPackages, armGccPackage, {24}},
-        {vendorStm, {"STM32L4R9I-EVAL"}, stmEvalPackages, armGccPackage, {24}}
+        {vendorNxp, {"MIMXRT1050-EVK"}, nxpEvalPackages, armGccPackage,
+                freeRTOSIMXRT1050Package, {16}},
+        {vendorNxp, {"MIMXRT1064-EVK"}, nxpEvalPackages, armGccPackage,
+                freeRTOSIMXRT1064Package, {16}},
+        {vendorQt, {"Qt"}, desktopPackages, desktopToolChainPackage,
+                nullptr, {32}},
+        {vendorRenesas, {"RH850-D1M1A"}, renesasEvalPackages, ghsToolchainPackage,
+                nullptr, {32}},
+        {vendorStm, {"STM32F469I-DISCOVERY"}, stmEvalPackages, armGccPackage,
+                nullptr, {24}},
+        {vendorStm, {"STM32F7508-DISCOVERY"}, stmEvalPackages, armGccPackage,
+                freeRTOSSTM32F7Package, {32, 16}},
+        {vendorStm, {"STM32F769I-DISCOVERY"}, stmEvalPackages, armGccPackage,
+                freeRTOSSTM32F7Package, {32}},
+        {vendorStm, {"STM32H750B-DISCOVERY"}, stmEvalPackages, armGccPackage,
+                nullptr, {32}},
+        {vendorStm, {"STM32L4R9I-DISCOVERY"}, stmEvalPackages, armGccPackage,
+                nullptr, {24}},
+        {vendorStm, {"STM32L4R9I-EVAL"}, stmEvalPackages, armGccPackage,
+                nullptr, {24}}
     };
 
     const QString QulTargetTemplate =
             dir.toString() + "/lib/cmake/Qul/QulTargets/QulTargets_%1_%2.cmake";
-    for (auto target : targets) {
-        for (int colorDepth : target.colorDepths) {
-            const QString QulTarget =
-                    QulTargetTemplate.arg(target.qulPlatform, QString::number(colorDepth));
-            if (!Utils::FilePath::fromUserInput(QulTarget).exists())
-                continue;
-            auto mcuTarget = new McuTarget(target.vendor, target.qulPlatform, target.packages,
-                                           target.toolchainPackage);
-            if (target.colorDepths.count() > 1)
-                mcuTarget->setColorDepth(colorDepth);
-            mcuTargets->append(mcuTarget);
+    for (const auto target : targets) {
+        for (auto os : {McuTarget::OS::Desktop, McuTarget::OS::BareMetal,
+                        McuTarget::OS::FreeRTOS}) {
+            for (int colorDepth : target.colorDepths) {
+                QVector<McuPackage*> required3rdPartyPackages = target.packages;
+                if (os == McuTarget::OS::FreeRTOS) {
+                    if (target.freeRTOSPackage)
+                        required3rdPartyPackages.append(target.freeRTOSPackage);
+                    else
+                        continue;
+                } else if (os == McuTarget::OS::Desktop && target.toolchainPackage->type()
+                        != McuToolChainPackage::TypeDesktop) {
+                    continue;
+                }
+
+                const QString QulTarget =
+                        QulTargetTemplate.arg(target.qulPlatform, QString::number(colorDepth));
+                if (!Utils::FilePath::fromUserInput(QulTarget).exists())
+                    continue;
+                auto mcuTarget = new McuTarget(target.vendor, target.qulPlatform, os,
+                                               required3rdPartyPackages, target.toolchainPackage);
+                if (target.colorDepths.count() > 1)
+                    mcuTarget->setColorDepth(colorDepth);
+                mcuTargets->append(mcuTarget);
+            }
         }
     }
 }