StudioWelcome: Allow to download examples

Change-Id: If46eb9bc2f24a6c1057fd3db34596c4619ddcb7b
Reviewed-by: Henning Gründl <henning.gruendl@qt.io>
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>

18 files changed, 1323 insertions, 1 deletions

diff --git a/src/plugins/studiowelcome/qml/downloaddialog/ArcItem.qml b/src/plugins/studiowelcome/qml/downloaddialog/ArcItem.qml
new file mode 100644
index 0000000000..fa38d302db
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/ArcItem.qml
@@ -0,0 +1,249 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.9
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+
+    implicitWidth: 100
+    implicitHeight: 100
+
+    property alias gradient: path.fillGradient
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias capStyle: path.capStyle
+    property alias dashOffset: path.dashOffset
+
+    property real begin: 0
+    property real end: 90
+
+    property real arcWidth: 10
+
+    property real arcWidthBegin: arcWidth
+    property real arcWidthEnd: arcWidth
+
+    property real radiusInnerAdjust: 0
+    property real radiusOuterAdjust: 0
+
+    property real alpha: clamp(sortedEnd() - sortedBegin(),0, 359.9)
+
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+    property bool outlineArc: false
+
+    property bool round: false
+
+    property bool roundEnd: round
+    property bool roundBegin: round
+
+    function clamp(num, min, max) {
+        return num <= min ? min : num >= max ? max : num;
+    }
+
+    function myCos(angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        return Math.cos(angleInRadians)
+    }
+
+    function mySin(angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        return Math.sin(angleInRadians)
+    }
+
+    function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var x = centerX + radius * Math.cos(angleInRadians)
+        return x
+    }
+
+    function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var y = centerY + radius * Math.sin(angleInRadians);
+        return y
+    }
+
+    function calc()
+    {
+        path.__xRadius = root.width / 2 - root.strokeWidth / 2
+        path.__yRadius = root.height / 2 - root.strokeWidth / 2
+
+        path.__Xcenter = root.width / 2
+        path.__Ycenter = root.height / 2
+
+        path.startX = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.sortedBegin() - 90) +  root.__beginOff * myCos(root.sortedBegin() + 90)
+        path.startY = root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.sortedBegin() - 90) + root.__beginOff * mySin(root.sortedBegin() + 90)
+
+        arc1.x = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.sortedEnd() - 90) + root.__endOff * myCos(root.sortedEnd() + 90)
+        arc1.y = root.polarToCartesianY(path.__Xcenter, path.__Ycenter,  path.__yRadius, root.sortedEnd() - 90) + root.__endOff * mySin(root.sortedEnd() + 90)
+
+        arc1.radiusX =  path.__xRadius - root.__endOff / 2 -root.__beginOff / 2 + root.radiusOuterAdjust
+        arc1.radiusY =  path.__yRadius - root.__endOff / 2 -root.__beginOff / 2 + root.radiusOuterAdjust
+
+        arc1.useLargeArc =  root.alpha > 180
+    }
+
+    function sortedBegin()
+    {
+        return(Math.min(root.begin, root.end))
+    }
+
+    function sortedEnd()
+    {
+        return(Math.max(root.begin, root.end))
+    }
+
+
+    onWidthChanged: calc()
+    onHeightChanged: calc()
+    onBeginChanged: calc()
+    onEndChanged: calc()
+    onAlphaChanged: calc()
+
+    ShapePath {
+        id: path
+
+        property real __xRadius
+        property real __yRadius
+
+        property real __Xcenter
+        property real __Ycenter
+
+        strokeColor: "red"
+        strokeWidth: 4
+        capStyle: ShapePath.FlatCap
+    }
+
+    property real __beginOff: {
+
+        if (root.arcWidthEnd > root.arcWidthBegin)
+            return (root.arcWidthEnd - root.arcWidthBegin) / 2
+
+        return 0;
+    }
+
+    property real __endOff: {
+
+        if (root.arcWidthBegin > root.arcWidthEnd)
+            return (root.arcWidthBegin - root.arcWidthEnd) / 2
+
+        return 0;
+    }
+
+    property real __startP: root.arcWidthBegin + __beginOff
+    property real __endP: root.arcWidthEnd + __endOff
+
+    Item {
+        id: shapes
+        PathArc {
+            id: arc1
+            property bool add: true
+        }
+
+        PathLine {
+            relativeX: root.arcWidthEnd * myCos(root.sortedEnd())
+            relativeY: root.arcWidthEnd * mySin(root.sortedEnd())
+            property bool add: !root.roundEnd && (root.outlineArc && root.alpha < 359.8)
+
+        }
+
+        PathArc {
+            relativeX: root.arcWidthEnd * myCos(root.sortedEnd())
+            relativeY: root.arcWidthEnd * mySin(root.sortedEnd())
+            radiusX: root.arcWidthEnd /2
+            radiusY: root.arcWidthEnd /2
+            property bool add: root.roundEnd && (root.outlineArc && root.alpha < 359.8)
+        }
+
+        PathMove {
+            relativeX: root.arcWidthEnd * myCos(root.sortedEnd())
+            relativeY: root.arcWidthEnd * mySin(root.sortedEnd())
+            property bool add: root.outlineArc && root.alpha > 359.7
+        }
+
+        PathArc {
+            id: arc2
+            useLargeArc: arc1.useLargeArc
+
+            radiusX: path.__xRadius - root.arcWidthBegin + root.__beginOff / 2 + root.__endOff / 2  + root.radiusInnerAdjust
+            radiusY:path.__yRadius - root.arcWidthBegin + root.__beginOff / 2 + root.__endOff / 2 + root.radiusInnerAdjust
+
+            x: path.startX + root.arcWidthBegin * myCos(root.sortedBegin())
+            y: path.startY + root.arcWidthBegin * mySin(root.sortedBegin())
+
+            direction: PathArc.Counterclockwise
+
+            property bool add: root.outlineArc
+        }
+
+
+        PathLine {
+            x: path.startX
+            y: path.startY
+            property bool add: !root.roundBegin && root.outlineArc && root.alpha < 359.8
+
+        }
+
+        PathArc {
+            x: path.startX
+            y: path.startY
+            radiusX: root.arcWidthEnd /2
+            radiusY: root.arcWidthEnd /2
+            property bool add: root.roundBegin && root.outlineArc && root.alpha < 359.8
+        }
+
+        PathMove {
+            x: path.startX
+            y: path.startY
+            property bool add: root.outlineArc && root.alpha == 360
+        }
+    }
+
+    function invalidatePaths() {
+        if (!root.__completed)
+            return
+
+        for (var i = 0; i < shapes.resources.length; i++) {
+            var s = shapes.resources[i];
+            if (s.add)
+                path.pathElements.push(s)
+        }
+
+    }
+
+    property bool __completed: false
+
+    Component.onCompleted: {
+        root.__completed = true
+        invalidatePaths()
+        calc()
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/CircularIndicator.ui.qml b/src/plugins/studiowelcome/qml/downloaddialog/CircularIndicator.ui.qml
new file mode 100644
index 0000000000..15b2e26552
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/CircularIndicator.ui.qml
@@ -0,0 +1,129 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+
+import QtQuick 2.12
+import QtQuick.Timeline 1.0
+
+Rectangle {
+    id: rectangle
+    width: 60
+    height: 60
+    color: "#8c8c8c"
+    radius: 50
+    property alias inputMax: rangeMapper.inputMax
+    property alias inputMin: rangeMapper.inputMin
+    property alias value: minMaxMapper.input
+
+    ArcItem {
+        id: arc
+        x: -1
+        y: -1
+        width: 62
+        height: 62
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        end: rangeMapper.value
+        antialiasing: true
+        strokeWidth: 8
+        strokeColor: "#ffffff"
+        capStyle: 32
+        fillColor: "#00000000"
+    }
+
+    RangeMapper {
+        id: rangeMapper
+        outputMax: 358
+        input: minMaxMapper.value
+    }
+
+    MinMaxMapper {
+        id: minMaxMapper
+        input: 95
+        max: rangeMapper.inputMax
+        min: rangeMapper.inputMin
+    }
+
+    Rectangle {
+        id: rectangle1
+        width: 60
+        height: 60
+        color: "#ffffff"
+        radius: 40
+        anchors.verticalCenter: parent.verticalCenter
+        scale: 1
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+    Timeline {
+        id: timeline
+        currentFrame: rangeMapper.value
+        enabled: true
+        endFrame: 360
+        startFrame: 0
+
+        KeyframeGroup {
+            target: rectangle1
+            property: "opacity"
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 360
+                value: 1
+            }
+        }
+
+        KeyframeGroup {
+            target: rectangle1
+            property: "scale"
+            Keyframe {
+                frame: 360
+                value: 1
+            }
+
+            Keyframe {
+                frame: 0
+                value: 0.1
+            }
+        }
+
+        KeyframeGroup {
+            target: arc
+            property: "opacity"
+            Keyframe {
+                value: 0
+                frame: 0
+            }
+
+            Keyframe {
+                value: 1
+                frame: 40
+            }
+        }
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/CoolProgressBar.ui.qml b/src/plugins/studiowelcome/qml/downloaddialog/CoolProgressBar.ui.qml
new file mode 100644
index 0000000000..b48880406c
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/CoolProgressBar.ui.qml
@@ -0,0 +1,193 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+
+import QtQuick 2.12
+import QtQuick.Timeline 1.0
+
+Item {
+    id: coolProgressBar
+    width: 605
+    height: 16
+    property alias value: timeline.currentFrame
+    clip: true
+
+    Timeline {
+        id: timeline
+        enabled: true
+        endFrame: 100
+        startFrame: 0
+
+        KeyframeGroup {
+            target: rectangle
+            property: "width"
+            Keyframe {
+                value: 0
+                frame: 0
+            }
+
+            Keyframe {
+                value: 150
+                frame: 25
+            }
+
+            Keyframe {
+                value: 300
+                frame: 50
+            }
+
+            Keyframe {
+                value: 450
+                frame: 75
+            }
+
+            Keyframe {
+                value: 600
+                frame: 100
+            }
+        }
+
+        KeyframeGroup {
+            target: rectangle1
+            property: "width"
+            Keyframe {
+                value: 0
+                frame: 0
+            }
+
+            Keyframe {
+                value: 300
+                frame: 25
+            }
+
+            Keyframe {
+                value: 450
+                frame: 50
+            }
+
+            Keyframe {
+                value: 600
+                frame: 75
+            }
+        }
+
+        KeyframeGroup {
+            target: rectangle2
+            property: "width"
+            Keyframe {
+                value: 0
+                frame: 0
+            }
+
+            Keyframe {
+                value: 450
+                frame: 25
+            }
+
+            Keyframe {
+                value: 600
+                frame: 50
+            }
+        }
+
+        KeyframeGroup {
+            target: rectangle3
+            property: "width"
+            Keyframe {
+                value: 0
+                frame: 0
+            }
+
+            Keyframe {
+                value: 600
+                frame: 25
+            }
+        }
+
+        KeyframeGroup {
+            target: content
+            property: "opacity"
+            Keyframe {
+                value: 0
+                frame: 0
+            }
+
+            Keyframe {
+                value: 1
+                frame: 50
+            }
+        }
+    }
+
+    Item {
+        id: content
+        anchors.fill: parent
+
+        Rectangle {
+            id: rectangle
+            y: 0
+            width: 80
+            height: 16
+            color: "#ffffff"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle1
+            y: 0
+            width: 80
+            height: 16
+            opacity: 0.6
+            color: "#ffffff"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle2
+            y: 0
+            width: 80
+            height: 16
+            opacity: 0.4
+            color: "#ffffff"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle3
+            y: 0
+            width: 80
+            height: 16
+            opacity: 0.2
+            color: "#ffffff"
+            radius: 12
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:16;width:590}D{i:1}
+}
+##^##*/
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/DialogButton.qml b/src/plugins/studiowelcome/qml/downloaddialog/DialogButton.qml
new file mode 100644
index 0000000000..d21acdde35
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/DialogButton.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import QtQuick.Templates 2.1 as T
+
+T.Button {
+    id: control
+
+    implicitWidth: Math.max(buttonBackground ? buttonBackground.implicitWidth : 0,
+                                         textItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(buttonBackground ? buttonBackground.implicitHeight : 0,
+                                          textItem.implicitHeight + topPadding + bottomPadding)
+    leftPadding: 4
+    rightPadding: 4
+
+    text: "My Button"
+
+    property color defaultColor: "#b9b9ba"
+    property color checkedColor:  "#ffffff"
+
+    background: buttonBackground
+    Rectangle {
+        id: buttonBackground
+        color: control.defaultColor
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        radius: 0
+        border.width: 1
+    }
+
+    contentItem: textItem
+    Text {
+        id: textItem
+        text: control.text
+
+        opacity: enabled ? 1.0 : 0.3
+        color: "#bababa"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    states: [
+        State {
+            name: "normal"
+            when: !control.down && !control.checked
+            PropertyChanges {
+                target: buttonBackground
+                color:  "#2d2e30"
+            }
+        },
+        State {
+            name: "down"
+            when: control.down || control.checked
+            PropertyChanges {
+                target: textItem
+                color: control.checkedColor
+            }
+
+            PropertyChanges {
+                target: buttonBackground
+                color: "#545456"
+                border.color: "#70a2f5"
+                border.width: 2
+            }
+        }
+    ]
+}
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/DialogLabel.qml b/src/plugins/studiowelcome/qml/downloaddialog/DialogLabel.qml
new file mode 100644
index 0000000000..c5dac79a50
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/DialogLabel.qml
@@ -0,0 +1,37 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Controls 2.15
+
+import ExampleCheckout 1.0
+import QtQuick.Layouts 1.11
+
+import StudioFonts 1.0
+
+Text {
+    font.family: StudioFonts.titilliumWeb_light
+    color: root.textColor
+}
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/MinMaxMapper.qml b/src/plugins/studiowelcome/qml/downloaddialog/MinMaxMapper.qml
new file mode 100644
index 0000000000..451c098f9e
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/MinMaxMapper.qml
@@ -0,0 +1,54 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+
+QtObject {
+    id: object
+
+
+    property real input
+
+    property bool minClipped: object.input < object.min
+    property bool maxClipped: object.input > object.max
+    property bool outOfRage: object.maxClipped ||object.minClipped
+
+    property real value: {
+        if (object.maxClipped)
+            return object.max
+
+        if (object.minClipped)
+            return object.min
+
+        return object.input
+    }
+
+    property real min: 0
+    property real max: 100
+}
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/RangeMapper.qml b/src/plugins/studiowelcome/qml/downloaddialog/RangeMapper.qml
new file mode 100644
index 0000000000..dc75325b08
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/RangeMapper.qml
@@ -0,0 +1,48 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+
+QtObject {
+    id: object
+
+
+    property real input
+
+    property real value: {
+        var slope = (object.outputMax - object.outputMin) / (object.inputMax - object.inputMin)
+        return object.outputMin + slope * (object.input - object.inputMin)
+    }
+
+    property real inputMin: 0
+    property real inputMax: 100
+    property real outputMin: 0
+    property real outputMax: 100
+
+}
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/downloaddialog.qmlproject b/src/plugins/studiowelcome/qml/downloaddialog/downloaddialog.qmlproject
new file mode 100644
index 0000000000..880c6022a9
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/downloaddialog.qmlproject
@@ -0,0 +1,47 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QmlProject 1.1
+
+Project {
+    mainFile: "main.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "mockData", "../../../../share/3rdparty/studiofonts", "../../../../../share/qtcreator/qmldesigner/propertyEditorQmlSources/imports" ]
+
+    Environment {
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/main.qml b/src/plugins/studiowelcome/qml/downloaddialog/main.qml
new file mode 100644
index 0000000000..cb7f62a68c
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/main.qml
@@ -0,0 +1,312 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Controls 2.15
+
+import ExampleCheckout 1.0
+import QtQuick.Layouts 1.11
+
+import StudioFonts 1.0
+
+Rectangle {
+    id: root
+    property alias url: downloader.url
+    property string path: fileExtractor.targetPath
+    width: 620
+    height: 300
+
+    color: "#2d2e30"
+
+    property color textColor: "#b9b9ba"
+
+    signal canceled
+    signal accepted
+
+    StackLayout {
+        id: stackLayout
+        anchors.fill: parent
+        currentIndex: 0
+
+        FileExtractor {
+            id: fileExtractor
+            sourceFile: downloader.tempFile
+            archiveName: downloader.completeBaseName
+        }
+
+        FileDownloader {
+            id: downloader
+            //onNameChanged: start()
+            onFinishedChanged: {
+                button.enabled = downloader.finished
+                if (!downloader.finished)
+                    stackLayout.currentIndex = 3
+            }
+
+            onDownloadFailed:  stackLayout.currentIndex = 3
+        }
+
+        Item {
+            id: download
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            DialogButton {
+                id: button
+                x: 532
+                y: 432
+                text: qsTr("Continue")
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 20
+                anchors.rightMargin: 20
+                enabled: false
+                onClicked: stackLayout.currentIndex = 1
+            }
+
+            CoolProgressBar {
+                id: coolProgressBar
+                width: 605
+                anchors.top: parent.top
+                value: downloader.progress
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.topMargin: 69
+            }
+
+            DialogLabel {
+                x: 201
+                text: "Downloading Example " + downloader.completeBaseName
+                anchors.top: parent.top
+                anchors.topMargin: 22
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            DialogButton {
+                id: downloadbutton
+                y: 420
+                enabled: !button.enabled
+                text: qsTr("Start Download")
+                anchors.left: parent.left
+                anchors.bottom: parent.bottom
+                anchors.leftMargin: 20
+                anchors.bottomMargin: 20
+                onClicked: {
+                    downloadbutton.enabled = false
+                    downloader.start()
+                }
+            }
+
+            CircularIndicator {
+                id: circularIndicator
+                x: 304
+                anchors.top: parent.top
+                anchors.horizontalCenterOffset: 0
+                value: downloader.progress
+                anchors.topMargin: 120
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+        }
+
+        Item {
+            id: destiationfolder
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            DialogButton {
+                id: nextPageDestination
+                x: 532
+                y: 432
+                text: qsTr("Continue")
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                enabled: !fileExtractor.targetFolderExists
+                anchors.bottomMargin: 20
+                anchors.rightMargin: 20
+                onClicked: {
+                    stackLayout.currentIndex = 2
+                    fileExtractor.extract()
+                }
+            }
+
+            RowLayout {
+                y: 114
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.rightMargin: 104
+                anchors.leftMargin: 67
+
+                TextField {
+                    id: textField
+                    text: fileExtractor.targetPath
+                    Layout.fillWidth: true
+                    font.family: StudioFonts.titilliumWeb_light
+                    wrapMode: Text.WordWrap
+                    selectByMouse: true
+                    readOnly: true
+                }
+
+                DialogButton {
+                    id: browse
+                    text: qsTr("Browse")
+                    onClicked: fileExtractor.browse()
+                }
+            }
+
+            DialogLabel {
+                id: label
+                y: 436
+                text: qsTr("Folder ") + downloader.completeBaseName + (" already exists")
+                anchors.left: parent.left
+                anchors.bottom: parent.bottom
+                anchors.leftMargin: 20
+                anchors.bottomMargin: 20
+                visible: !nextPageDestination.enabled
+            }
+
+            DialogButton {
+                id: button5
+                x: 400
+                y: 420
+                text: qsTr("Cancel")
+                anchors.right: nextPageDestination.left
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 20
+                anchors.rightMargin: 20
+                onClicked: root.canceled()
+            }
+
+            DialogLabel {
+                text: "Choose installation folder"
+                anchors.top: parent.top
+                anchors.topMargin: 22
+                anchors.horizontalCenter: parent.horizontalCenter
+                x: 8
+            }
+        }
+
+        Item {
+            id: extraction
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+
+            DialogButton {
+                id: done
+                x: 532
+                y: 432
+                text: qsTr("Open")
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 20
+                anchors.rightMargin: 20
+                enabled: fileExtractor.finished
+                onClicked: root.accepted()
+            }
+
+
+            DialogLabel {
+                id: text2
+                text: fileExtractor.count + " files " + (fileExtractor.size / 1024 / 1024).toFixed(2) + " MB "+ fileExtractor.currentFile
+                anchors.left: parent.left
+                anchors.bottom: parent.bottom
+                font.pixelSize: 12
+                wrapMode: Text.WrapAnywhere
+                anchors.leftMargin: 20
+                anchors.bottomMargin: 20
+            }
+
+
+            DialogButton {
+                id: details
+                x: 8
+                text: qsTr("Details")
+                anchors.top: parent.top
+                anchors.topMargin: 66
+                anchors.horizontalCenter: parent.horizontalCenter
+                checkable: true
+            }
+
+
+            DialogLabel {
+                x: 8
+                text: "Extracting Example " + downloader.completeBaseName
+                anchors.top: parent.top
+                anchors.topMargin: 22
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            Flickable {
+                visible: details.checked
+                clip: true
+                anchors.bottomMargin: 60
+                anchors.rightMargin: 20
+                anchors.leftMargin: 20
+                anchors.topMargin: 120
+                anchors.fill: parent
+                id: flickable
+                interactive: false
+
+                DialogLabel {
+                    onHeightChanged: flickable.contentY =  text1.implicitHeight - flickable.height
+                    id: text1
+
+                    text: fileExtractor.detailedText
+
+                    font.pixelSize: 12
+                    wrapMode: Text.WrapAnywhere
+
+                    width: flickable.width
+                }
+            }
+        }
+
+        Item {
+            id: failed
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            DialogButton {
+                id: finish
+                x: 532
+                y: 432
+                text: qsTr("Finish")
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 20
+                anchors.rightMargin: 20
+                onClicked: root.canceled()
+            }
+
+            DialogLabel {
+                x: 8
+                text: qsTr("Download failed")
+                anchors.top: parent.top
+                anchors.topMargin: 22
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+        }
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/mockData/ExampleCheckout/FileDownloader.qml b/src/plugins/studiowelcome/qml/downloaddialog/mockData/ExampleCheckout/FileDownloader.qml
new file mode 100644
index 0000000000..bf873ec563
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/mockData/ExampleCheckout/FileDownloader.qml
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+QtObject {
+    id: root
+
+    signal downloadFailed
+
+    property bool finished: false
+
+    property bool url
+
+    property int progress: 55
+    Behavior on progress { PropertyAnimation {
+            duration: 2000
+        }
+    }
+
+    function start() {
+        timer.start()
+        root.progress = 100
+
+    }
+
+    property Timer timer: Timer {
+        interval: 2000
+        repeat: false
+        onTriggered: {
+            root.finished
+            root.progress = 1000
+            finished = true
+        }
+
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/mockData/ExampleCheckout/FileExtractor.qml b/src/plugins/studiowelcome/qml/downloaddialog/mockData/ExampleCheckout/FileExtractor.qml
new file mode 100644
index 0000000000..d3ee8e20f6
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/mockData/ExampleCheckout/FileExtractor.qml
@@ -0,0 +1,41 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+QtObject {
+    signal finished
+
+    property string sourceFile: "SomeExample.zip"
+    property string archiveName: "SomeExample"
+
+    property string targetPath: "/extract/here"
+
+    property string detailedText: "Start" +
+                                  "\n1 Some detailed info about extraction\nSome detailed info about extraction\nSome detailed info about extractionSome detailed info about extractionSome detailed info about extraction" +
+                                  "\n2 Some detailed info about extraction\nSome detailed info about extraction\nSome detailed info about extractionSome detailed info about extractionSome detailed info about extraction" +
+                                  "\n3 Some detailed info about extraction\nSome detailed info about extraction\nSome detailed info about extractionSome detailed info about extractionSome detailed info about extraction" +
+                                  "\nend"
+}
diff --git a/src/plugins/studiowelcome/qml/downloaddialog/mockData/ExampleCheckout/qmldir b/src/plugins/studiowelcome/qml/downloaddialog/mockData/ExampleCheckout/qmldir
new file mode 100644
index 0000000000..7c2bb0bcd4
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/downloaddialog/mockData/ExampleCheckout/qmldir
@@ -0,0 +1,2 @@
+FileDownloader 1.0 FileDownloader.qml
+FileExtractor 1.0 FileExtractor.qml
diff --git a/src/plugins/studiowelcome/qml/welcomepage/ExamplesModel.qml b/src/plugins/studiowelcome/qml/welcomepage/ExamplesModel.qml
index 5e9fe07985..3f33f0205e 100644
--- a/src/plugins/studiowelcome/qml/welcomepage/ExamplesModel.qml
+++ b/src/plugins/studiowelcome/qml/welcomepage/ExamplesModel.qml
@@ -74,4 +74,13 @@ ListModel {
         thumbnail: "images/washingmachinedemo_thumbnail.png"
         displayName: "Washing Machine"
     }
+
+    ListElement {
+        projectName: "highendivisystem"
+        qmlFileName: "Screen01.ui.qml"
+        thumbnail: "images/highendivi_thumbnail.png"
+        displayName: "Highend IVI System"
+        url: "https://download.qt.io/learning/examples/qtdesignstudio/highendivisystem.zip"
+        showDownload: true
+    }
 }
diff --git a/src/plugins/studiowelcome/qml/welcomepage/HoverOverDesaturate.qml b/src/plugins/studiowelcome/qml/welcomepage/HoverOverDesaturate.qml
index e160a1f70e..a7d7501a52 100644
--- a/src/plugins/studiowelcome/qml/welcomepage/HoverOverDesaturate.qml
+++ b/src/plugins/studiowelcome/qml/welcomepage/HoverOverDesaturate.qml
@@ -35,6 +35,8 @@ Item {
     property alias imageSource: image.source
     property alias labelText: label.text
 
+    property alias downloadIcon: downloadCloud.visible
+
     onVisibleChanged: {
         animateOpacity.start()
         animateScale.start()
@@ -89,6 +91,19 @@ Item {
                 rectangle.color = "#262728"
                 label.color = "#686868"
             }
+
+            Image {
+                id: downloadCloud
+                x: 210
+                y: 118
+                width: 60
+                height: 60
+                source: "images/downloadCloud.svg"
+                sourceSize.height: 60
+                sourceSize.width: 60
+                fillMode: Image.PreserveAspectFit
+                visible: false
+            }
         }
     }
 
@@ -187,3 +202,9 @@ Item {
         font.family: StudioFonts.titilliumWeb_regular
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;formeditorZoom:1.3300000429153442}D{i:8}
+}
+##^##*/
diff --git a/src/plugins/studiowelcome/qml/welcomepage/ProjectsGrid.qml b/src/plugins/studiowelcome/qml/welcomepage/ProjectsGrid.qml
index 6faf3a6554..6a18d10ded 100644
--- a/src/plugins/studiowelcome/qml/welcomepage/ProjectsGrid.qml
+++ b/src/plugins/studiowelcome/qml/welcomepage/ProjectsGrid.qml
@@ -39,6 +39,7 @@ GridView {
         id: hoverOverDesaturate
         imageSource: typeof(thumbnail) === "undefined" ? "images/thumbnail_test.png" : thumbnail;
         labelText: displayName
+        downloadIcon: typeof(showDownload) === "undefined" ? false : showDownload;
 
         SequentialAnimation {
             id: animation
diff --git a/src/plugins/studiowelcome/qml/welcomepage/images/downloadCloud.svg b/src/plugins/studiowelcome/qml/welcomepage/images/downloadCloud.svg
new file mode 100644
index 0000000000..3a527c3e54
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/downloadCloud.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 128 128" overflow="visible" xml:space="preserve">
+<g transform="translate(0.000000,2000.000000) scale(0.100000,-0.100000)">
+	<path fill="#686868" d="M764,19815.1c-12.5-0.6-28.9-2.1-38.4-3.5c-30-4.3-73-22.5-107.4-45.4c-19.9-13.2-34.6-25.2-51.1-41.6
+		c-18.6-18.6-30.1-33.4-43.2-55.8l-5.8-9.9l-6.7,3.2c-44.8,21.1-105.6,27.1-154.5,15.3c-35.4-8.5-75.1-30-104.5-56.5
+		c-3.4-3.1-6.8-6-7.5-6.5c-2.2-1.6-17.1-17.9-22.3-24.5c-7.4-9.3-16.5-23.4-21.7-33.8c-13.5-26.7-25.2-66.5-26.7-91l-0.4-7
+		l-15.9-7.9c-26.7-13.3-44.8-26.6-66.8-49.2c-18.9-19.3-31.4-36.4-41.9-57c-22.4-44.3-29.9-95.3-20.8-142.8
+		c8.4-44.1,29.1-83.5,61.5-117.1c35.2-36.5,62.1-52.4,108.2-64c24-6,47.3-7.8,115.4-8.9c12.4-0.2,29.7-0.4,38.4-0.6
+		c78.9-1.6,573.8-2.5,615.8-1.1c54,1.7,79,3.6,101.9,7.4c21.4,3.6,36.6,8.4,59.7,18.8c31.7,14.3,49.3,26.2,71,48
+		c22.6,22.7,38,46.4,49.6,76.8c14.6,38.2,19.8,83.7,13.7,121.3c-5.2,31.9-19.8,67.7-38.7,94.4c-10.5,14.7-28.8,34.7-42.7,46.2
+		c-28.8,24.1-58.1,39.7-90.8,48.4c-7.5,2-9.1,2.7-9.1,3.6c0,0.6,0.8,6.8,1.7,13.7c1.6,11.5,1.7,14.2,1.7,32.8
+		c0,21.9-0.9,31.7-4.4,49.8c-9.2,46.3-30,91.8-59.8,130.6c-21.3,27.8-49.5,53.4-77,69.9c-31.4,18.8-83.2,39.1-108.8,42.6
+		C819.9,19815.7,790.2,19816.3,764,19815.1z M828,19778.4c13-1.8,27.2-6.1,48.6-14.6c24-9.6,42.8-19,56.8-28.3
+		c57.9-38.7,101.4-106.8,113.6-178c3.9-22.6,4.1-43.6,0.6-69.7c-1.1-8.4-2.2-19-2.3-23.5c-0.3-7.6-0.3-8.5,1.1-11.6
+		c0.9-2.1,2.6-4.4,4.6-6.1c3.6-3.2,4.9-3.7,23.6-8.6c19.7-5.2,28.8-8.4,42.2-15.2c32.3-16.2,62.4-42.8,82-72.5
+		c14.5-22,26.1-52.4,29.9-78.6c0.8-5.6,1.1-11.6,1.1-22.8c-0.1-55-19.5-104.3-55.1-140.1c-18.5-18.6-39.9-32.1-71-44.9
+		c-32.4-13.4-63.1-16.9-162.9-18.8c-36.3-0.7-402.6-0.4-440.8,0.4c-8.2,0.2-43.7,0.4-78.9,0.6c-93.9,0.5-151.4,1.6-178.1,3.5
+		c-14.9,1.1-24.2,2.5-36.8,5.7c-39,9.9-59.1,21.9-89.9,53.6c-26,26.7-44.1,60-51.4,94.6c-8.9,42.1-3.2,84.4,16.8,124.7
+		c11.5,23.2,33.3,48.7,58.8,69c10.2,8.2,20.3,14.4,34.3,21.2c21.2,10.4,27.7,15.3,32,24.5c2.4,5,3.5,10.5,3.5,17.2
+		c0,12.4,5.9,37,14,59.1c4.4,11.9,12.1,27.5,18.3,36.7c18.9,28.3,49.9,55,83.7,71.9c29.5,14.8,54.5,20.2,89.4,19.4
+		c15-0.3,24.8-1.4,38-4c18.7-3.7,30.7-8,51.1-18.1c17-8.6,19.2-9.1,25.8-7.2c6.1,1.8,8.7,4.9,18.6,22.2c10.8,19,14.4,24.8,20.7,33.2
+		c28.7,38.1,74.9,72.8,121.8,91.3c23.8,9.4,36.1,12.1,62.8,13.9c5.6,0.4,11.6,0.8,13.3,0.9C774.9,19779.8,823.3,19779.1,828,19778.4
+		z"/>
+</g>
+<path  fill="#686868" d="M82.4,65.7L70.2,78.7c0,0-0.1,0-0.1,0l0-33.5c0-1.6-1.2-3.1-2.9-3.2c-1.7-0.1-3.1,1.3-3.1,3v33.7c0,0,0,0-0.1,0L52,65.7
+	c-0.9-1-2.5-1.1-3.6-0.1h0c-1,0.9-1.1,2.5-0.1,3.6l16.7,18c1.2,1.3,3.2,1.3,4.3,0l16.7-18c0.9-1,0.9-2.6-0.1-3.6h0
+	C84.9,64.6,83.3,64.6,82.4,65.7z"/>
+</svg>
diff --git a/src/plugins/studiowelcome/qml/welcomepage/images/highendivi_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/highendivi_thumbnail.png
new file mode 100644
index 0000000000..5428c80776
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/highendivi_thumbnail.png
diff --git a/src/plugins/studiowelcome/qml/welcomepage/main.qml b/src/plugins/studiowelcome/qml/welcomepage/main.qml
index 759ac45923..771f484585 100644
--- a/src/plugins/studiowelcome/qml/welcomepage/main.qml
+++ b/src/plugins/studiowelcome/qml/welcomepage/main.qml
@@ -60,7 +60,7 @@ Item {
             ScrollView {
                 ProjectsGrid {
                     model: ExamplesModel {}
-                    onItemSelected: projectModel.openExample(item.projectName, item.qmlFileName)
+                    onItemSelected: projectModel.openExample(item.projectName, item.qmlFileName, item.url)
                 }
             }