Merge remote-tracking branch 'origin/5.6' into 5.7

Conflicts:
	examples/quickcontrols/extras/flat/main.cpp
	src/controls/Private/qquickcontrolsettings.cpp

Change-Id: I9eb9342a2ee994611f3cb18daab6dd89eb924ccc

6 files changed, 1062 insertions, 0 deletions

diff --git a/examples/quickcontrols/extras/dashboard/qml/DashboardGaugeStyle.qml b/examples/quickcontrols/extras/dashboard/qml/DashboardGaugeStyle.qml
new file mode 100644
index 000000000..feb85a5f3
--- /dev/null
+++ b/examples/quickcontrols/extras/dashboard/qml/DashboardGaugeStyle.qml
@@ -0,0 +1,174 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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.2
+import QtQuick.Controls.Styles 1.4
+
+CircularGaugeStyle {
+    tickmarkInset: toPixels(0.04)
+    minorTickmarkInset: tickmarkInset
+    labelStepSize: 20
+    labelInset: toPixels(0.23)
+
+    property real xCenter: outerRadius
+    property real yCenter: outerRadius
+    property real needleLength: outerRadius - tickmarkInset * 1.25
+    property real needleTipWidth: toPixels(0.02)
+    property real needleBaseWidth: toPixels(0.06)
+    property bool halfGauge: false
+
+    function toPixels(percentage) {
+        return percentage * outerRadius;
+    }
+
+    function degToRad(degrees) {
+        return degrees * (Math.PI / 180);
+    }
+
+    function radToDeg(radians) {
+        return radians * (180 / Math.PI);
+    }
+
+    function paintBackground(ctx) {
+        if (halfGauge) {
+            ctx.beginPath();
+            ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height / 2);
+            ctx.clip();
+        }
+
+        ctx.beginPath();
+        ctx.fillStyle = "black";
+        ctx.ellipse(0, 0, ctx.canvas.width, ctx.canvas.height);
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.lineWidth = tickmarkInset;
+        ctx.strokeStyle = "black";
+        ctx.arc(xCenter, yCenter, outerRadius - ctx.lineWidth / 2, outerRadius - ctx.lineWidth / 2, 0, Math.PI * 2);
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.lineWidth = tickmarkInset / 2;
+        ctx.strokeStyle = "#222";
+        ctx.arc(xCenter, yCenter, outerRadius - ctx.lineWidth / 2, outerRadius - ctx.lineWidth / 2, 0, Math.PI * 2);
+        ctx.stroke();
+
+        ctx.beginPath();
+        var gradient = ctx.createRadialGradient(xCenter, yCenter, outerRadius * 0.8, xCenter, yCenter, outerRadius);
+        gradient.addColorStop(0, Qt.rgba(1, 1, 1, 0));
+        gradient.addColorStop(0.7, Qt.rgba(1, 1, 1, 0.13));
+        gradient.addColorStop(1, Qt.rgba(1, 1, 1, 1));
+        ctx.fillStyle = gradient;
+        ctx.arc(xCenter, yCenter, outerRadius - tickmarkInset, outerRadius - tickmarkInset, 0, Math.PI * 2);
+        ctx.fill();
+    }
+
+    background: Canvas {
+        onPaint: {
+            var ctx = getContext("2d");
+            ctx.reset();
+            paintBackground(ctx);
+        }
+
+        Text {
+            id: speedText
+            font.pixelSize: toPixels(0.3)
+            text: kphInt
+            color: "white"
+            horizontalAlignment: Text.AlignRight
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.verticalCenter
+            anchors.topMargin: toPixels(0.1)
+
+            readonly property int kphInt: control.value
+        }
+        Text {
+            text: "km/h"
+            color: "white"
+            font.pixelSize: toPixels(0.09)
+            anchors.top: speedText.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
+    needle: Canvas {
+        implicitWidth: needleBaseWidth
+        implicitHeight: needleLength
+
+        property real xCenter: width / 2
+        property real yCenter: height / 2
+
+        onPaint: {
+            var ctx = getContext("2d");
+            ctx.reset();
+
+            ctx.beginPath();
+            ctx.moveTo(xCenter, height);
+            ctx.lineTo(xCenter - needleBaseWidth / 2, height - needleBaseWidth / 2);
+            ctx.lineTo(xCenter - needleTipWidth / 2, 0);
+            ctx.lineTo(xCenter, yCenter - needleLength);
+            ctx.lineTo(xCenter, 0);
+            ctx.closePath();
+            ctx.fillStyle = Qt.rgba(0.66, 0, 0, 0.66);
+            ctx.fill();
+
+            ctx.beginPath();
+            ctx.moveTo(xCenter, height)
+            ctx.lineTo(width, height - needleBaseWidth / 2);
+            ctx.lineTo(xCenter + needleTipWidth / 2, 0);
+            ctx.lineTo(xCenter, 0);
+            ctx.closePath();
+            ctx.fillStyle = Qt.lighter(Qt.rgba(0.66, 0, 0, 0.66));
+            ctx.fill();
+        }
+    }
+
+    foreground: null
+}
diff --git a/examples/quickcontrols/extras/dashboard/qml/IconGaugeStyle.qml b/examples/quickcontrols/extras/dashboard/qml/IconGaugeStyle.qml
new file mode 100644
index 000000000..392044869
--- /dev/null
+++ b/examples/quickcontrols/extras/dashboard/qml/IconGaugeStyle.qml
@@ -0,0 +1,134 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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.2
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Extras 1.4
+
+DashboardGaugeStyle {
+    id: fuelGaugeStyle
+    minimumValueAngle: -60
+    maximumValueAngle: 60
+    tickmarkStepSize: 1
+    labelStepSize: 1
+    labelInset: toPixels(-0.25)
+    minorTickmarkCount: 3
+
+    needleLength: toPixels(0.85)
+    needleBaseWidth: toPixels(0.08)
+    needleTipWidth: toPixels(0.03)
+
+    halfGauge: true
+
+    property string icon: ""
+    property color minWarningColor: "transparent"
+    property color maxWarningColor: "transparent"
+    readonly property real minWarningStartAngle: minimumValueAngle - 90
+    readonly property real maxWarningStartAngle: maximumValueAngle - 90
+
+    tickmark: Rectangle {
+        implicitWidth: toPixels(0.06)
+        antialiasing: true
+        implicitHeight: toPixels(0.2)
+        color: "#c8c8c8"
+    }
+
+    minorTickmark: Rectangle {
+        implicitWidth: toPixels(0.03)
+        antialiasing: true
+        implicitHeight: toPixels(0.15)
+        color: "#c8c8c8"
+    }
+
+    background: Item {
+        Canvas {
+            anchors.fill: parent
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+
+                paintBackground(ctx);
+
+                if (minWarningColor != "transparent") {
+                    ctx.beginPath();
+                    ctx.lineWidth = fuelGaugeStyle.toPixels(0.08);
+                    ctx.strokeStyle = minWarningColor;
+                    ctx.arc(outerRadius, outerRadius,
+                        // Start the line in from the decorations, and account for the width of the line itself.
+                        outerRadius - tickmarkInset - ctx.lineWidth / 2,
+                        degToRad(minWarningStartAngle),
+                        degToRad(minWarningStartAngle + angleRange / (minorTickmarkCount + 1)), false);
+                    ctx.stroke();
+                }
+                if (maxWarningColor != "transparent") {
+                    ctx.beginPath();
+                    ctx.lineWidth = fuelGaugeStyle.toPixels(0.08);
+                    ctx.strokeStyle = maxWarningColor;
+                    ctx.arc(outerRadius, outerRadius,
+                        // Start the line in from the decorations, and account for the width of the line itself.
+                        outerRadius - tickmarkInset - ctx.lineWidth / 2,
+                        degToRad(maxWarningStartAngle - angleRange / (minorTickmarkCount + 1)),
+                        degToRad(maxWarningStartAngle), false);
+                    ctx.stroke();
+                }
+            }
+        }
+
+        Image {
+            source: icon
+            anchors.bottom: parent.verticalCenter
+            anchors.bottomMargin: toPixels(0.3)
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: toPixels(0.3)
+            height: width
+            fillMode: Image.PreserveAspectFit
+        }
+    }
+}
diff --git a/examples/quickcontrols/extras/dashboard/qml/TachometerStyle.qml b/examples/quickcontrols/extras/dashboard/qml/TachometerStyle.qml
new file mode 100644
index 000000000..d92da7b5f
--- /dev/null
+++ b/examples/quickcontrols/extras/dashboard/qml/TachometerStyle.qml
@@ -0,0 +1,126 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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.2
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Extras 1.4
+
+DashboardGaugeStyle {
+    id: tachometerStyle
+    tickmarkStepSize: 1
+    labelStepSize: 1
+    needleLength: toPixels(0.85)
+    needleBaseWidth: toPixels(0.08)
+    needleTipWidth: toPixels(0.03)
+
+    tickmark: Rectangle {
+        implicitWidth: toPixels(0.03)
+        antialiasing: true
+        implicitHeight: toPixels(0.08)
+        color: styleData.index === 7 || styleData.index === 8 ? Qt.rgba(0.5, 0, 0, 1) : "#c8c8c8"
+    }
+
+    minorTickmark: null
+
+    tickmarkLabel: Text {
+        font.pixelSize: Math.max(6, toPixels(0.12))
+        text: styleData.value
+        color: styleData.index === 7 || styleData.index === 8 ? Qt.rgba(0.5, 0, 0, 1) : "#c8c8c8"
+        antialiasing: true
+    }
+
+    background: Canvas {
+        onPaint: {
+            var ctx = getContext("2d");
+            ctx.reset();
+            paintBackground(ctx);
+
+            ctx.beginPath();
+            ctx.lineWidth = tachometerStyle.toPixels(0.08);
+            ctx.strokeStyle = Qt.rgba(0.5, 0, 0, 1);
+            var warningCircumference = maximumValueAngle - minimumValueAngle * 0.1;
+            var startAngle = maximumValueAngle - 90;
+            ctx.arc(outerRadius, outerRadius,
+                // Start the line in from the decorations, and account for the width of the line itself.
+                outerRadius - tickmarkInset - ctx.lineWidth / 2,
+                degToRad(startAngle - angleRange / 8 + angleRange * 0.015),
+                degToRad(startAngle - angleRange * 0.015), false);
+            ctx.stroke();
+        }
+
+        Text {
+            id: rpmText
+            font.pixelSize: tachometerStyle.toPixels(0.3)
+            text: rpmInt
+            color: "white"
+            horizontalAlignment: Text.AlignRight
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.verticalCenter
+            anchors.topMargin: 20
+
+            readonly property int rpmInt: valueSource.rpm
+        }
+        Text {
+            text: "x1000"
+            color: "white"
+            font.pixelSize: tachometerStyle.toPixels(0.1)
+            anchors.top: parent.top
+            anchors.topMargin: parent.height / 4
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+        Text {
+            text: "RPM"
+            color: "white"
+            font.pixelSize: tachometerStyle.toPixels(0.1)
+            anchors.top: rpmText.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols/extras/dashboard/qml/TurnIndicator.qml b/examples/quickcontrols/extras/dashboard/qml/TurnIndicator.qml
new file mode 100644
index 000000000..b132510eb
--- /dev/null
+++ b/examples/quickcontrols/extras/dashboard/qml/TurnIndicator.qml
@@ -0,0 +1,114 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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.2
+
+Item {
+    // This enum is actually keyboard-related, but it serves its purpose
+    // as an indication of direction for us.
+    property int direction: Qt.LeftArrow
+    property bool on: false
+
+    property bool flashing: false
+
+    scale: direction === Qt.LeftArrow ? 1 : -1
+
+    Timer {
+        id: flashTimer
+        interval: 500
+        running: on
+        repeat: true
+        onTriggered: flashing = !flashing
+    }
+
+    function paintOutlinePath(ctx) {
+        ctx.beginPath();
+        ctx.moveTo(0, height * 0.5);
+        ctx.lineTo(0.6 * width, 0);
+        ctx.lineTo(0.6 * width, height * 0.28);
+        ctx.lineTo(width, height * 0.28);
+        ctx.lineTo(width, height * 0.72);
+        ctx.lineTo(0.6 * width, height * 0.72);
+        ctx.lineTo(0.6 * width, height);
+        ctx.lineTo(0, height * 0.5);
+    }
+
+    Canvas {
+        id: backgroundCanvas
+        anchors.fill: parent
+
+        onPaint: {
+            var ctx = getContext("2d");
+            ctx.reset();
+
+            paintOutlinePath(ctx);
+
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = "black";
+            ctx.stroke();
+        }
+    }
+
+    Canvas {
+        id: foregroundCanvas
+        anchors.fill: parent
+        visible: on && flashing
+
+        onPaint: {
+            var ctx = getContext("2d");
+            ctx.reset();
+
+            paintOutlinePath(ctx);
+
+            ctx.fillStyle = "green";
+            ctx.fill();
+        }
+    }
+}
diff --git a/examples/quickcontrols/extras/dashboard/qml/ValueSource.qml b/examples/quickcontrols/extras/dashboard/qml/ValueSource.qml
new file mode 100644
index 000000000..7225be482
--- /dev/null
+++ b/examples/quickcontrols/extras/dashboard/qml/ValueSource.qml
@@ -0,0 +1,330 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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.2
+
+Item {
+    id: valueSource
+    property real kph: 0
+    property real rpm: 1
+    property real fuel: 0.85
+    property string gear: {
+        var g;
+        if (kph == 0) {
+            return "P";
+        }
+        if (kph < 30) {
+            return "1";
+        }
+        if (kph < 50) {
+            return "2";
+        }
+        if (kph < 80) {
+            return "3";
+        }
+        if (kph < 120) {
+            return "4";
+        }
+        if (kph < 160) {
+            return "5";
+        }
+    }
+    property int turnSignal: gear == "P" && !start ? randomDirection() : -1
+    property real temperature: 0.6
+    property bool start: true
+
+    function randomDirection() {
+        return Math.random() > 0.5 ? Qt.LeftArrow : Qt.RightArrow;
+    }
+
+    SequentialAnimation {
+        running: true
+        loops: 1
+
+        // We want a small pause at the beginning, but we only want it to happen once.
+        PauseAnimation {
+            duration: 1000
+        }
+
+        PropertyAction {
+            target: valueSource
+            property: "start"
+            value: false
+        }
+
+        SequentialAnimation {
+            loops: Animation.Infinite
+
+            ParallelAnimation {
+                NumberAnimation {
+                    target: valueSource
+                    property: "kph"
+                    easing.type: Easing.InOutSine
+                    from: 0
+                    to: 30
+                    duration: 3000
+                }
+                NumberAnimation {
+                    target: valueSource
+                    property: "rpm"
+                    easing.type: Easing.InOutSine
+                    from: 1
+                    to: 6.1
+                    duration: 3000
+                }
+            }
+            ParallelAnimation {
+                // We changed gears so we lost a bit of speed.
+                NumberAnimation {
+                    target: valueSource
+                    property: "kph"
+                    easing.type: Easing.InOutSine
+                    from: 30
+                    to: 26
+                    duration: 600
+                }
+                NumberAnimation {
+                    target: valueSource
+                    property: "rpm"
+                    easing.type: Easing.InOutSine
+                    from: 6
+                    to: 2.4
+                    duration: 600
+                }
+            }
+            ParallelAnimation {
+                NumberAnimation {
+                    target: valueSource
+                    property: "kph"
+                    easing.type: Easing.InOutSine
+                    to: 60
+                    duration: 3000
+                }
+                NumberAnimation {
+                    target: valueSource
+                    property: "rpm"
+                    easing.type: Easing.InOutSine
+                    to: 5.6
+                    duration: 3000
+                }
+            }
+            ParallelAnimation {
+                // We changed gears so we lost a bit of speed.
+                NumberAnimation {
+                    target: valueSource
+                    property: "kph"
+                    easing.type: Easing.InOutSine
+                    to: 56
+                    duration: 600
+                }
+                NumberAnimation {
+                    target: valueSource
+                    property: "rpm"
+                    easing.type: Easing.InOutSine
+                    to: 2.3
+                    duration: 600
+                }
+            }
+            ParallelAnimation {
+                NumberAnimation {
+                    target: valueSource
+                    property: "kph"
+                    easing.type: Easing.InOutSine
+                    to: 100
+                    duration: 3000
+                }
+                NumberAnimation {
+                    target: valueSource
+                    property: "rpm"
+                    easing.type: Easing.InOutSine
+                    to: 5.1
+                    duration: 3000
+                }
+            }
+            ParallelAnimation {
+                // We changed gears so we lost a bit of speed.
+                NumberAnimation {
+                    target: valueSource
+                    property: "kph"
+                    easing.type: Easing.InOutSine
+                    to: 96
+                    duration: 600
+                }
+                NumberAnimation {
+                    target: valueSource
+                    property: "rpm"
+                    easing.type: Easing.InOutSine
+                    to: 2.2
+                    duration: 600
+                }
+            }
+
+            ParallelAnimation {
+                NumberAnimation {
+                    target: valueSource
+                    property: "kph"
+                    easing.type: Easing.InOutSine
+                    to: 140
+                    duration: 3000
+                }
+                NumberAnimation {
+                    target: valueSource
+                    property: "rpm"
+                    easing.type: Easing.InOutSine
+                    to: 6.2
+                    duration: 3000
+                }
+            }
+
+            // Start downshifting.
+
+            // Fifth to fourth gear.
+            ParallelAnimation {
+                NumberAnimation {
+                    target: valueSource
+                    property: "kph"
+                    easing.type: Easing.Linear
+                    to: 100
+                    duration: 5000
+                }
+
+                NumberAnimation {
+                    target: valueSource
+                    property: "rpm"
+                    easing.type: Easing.InOutSine
+                    to: 3.1
+                    duration: 5000
+                }
+            }
+
+            // Fourth to third gear.
+            NumberAnimation {
+                target: valueSource
+                property: "rpm"
+                easing.type: Easing.InOutSine
+                to: 5.5
+                duration: 600
+            }
+
+            ParallelAnimation {
+                NumberAnimation {
+                    target: valueSource
+                    property: "kph"
+                    easing.type: Easing.InOutSine
+                    to: 60
+                    duration: 5000
+                }
+                NumberAnimation {
+                    target: valueSource
+                    property: "rpm"
+                    easing.type: Easing.InOutSine
+                    to: 2.6
+                    duration: 5000
+                }
+            }
+
+            // Third to second gear.
+            NumberAnimation {
+                target: valueSource
+                property: "rpm"
+                easing.type: Easing.InOutSine
+                to: 6.3
+                duration: 600
+            }
+
+            ParallelAnimation {
+                NumberAnimation {
+                    target: valueSource
+                    property: "kph"
+                    easing.type: Easing.InOutSine
+                    to: 30
+                    duration: 5000
+                }
+                NumberAnimation {
+                    target: valueSource
+                    property: "rpm"
+                    easing.type: Easing.InOutSine
+                    to: 2.6
+                    duration: 5000
+                }
+            }
+
+            NumberAnimation {
+                target: valueSource
+                property: "rpm"
+                easing.type: Easing.InOutSine
+                to: 6.5
+                duration: 600
+            }
+
+            // Second to first gear.
+            ParallelAnimation {
+                NumberAnimation {
+                    target: valueSource
+                    property: "kph"
+                    easing.type: Easing.InOutSine
+                    to: 0
+                    duration: 5000
+                }
+                NumberAnimation {
+                    target: valueSource
+                    property: "rpm"
+                    easing.type: Easing.InOutSine
+                    to: 1
+                    duration: 4500
+                }
+            }
+
+            PauseAnimation {
+                duration: 5000
+            }
+        }
+    }
+}
diff --git a/examples/quickcontrols/extras/dashboard/qml/dashboard.qml b/examples/quickcontrols/extras/dashboard/qml/dashboard.qml
new file mode 100644
index 000000000..6080b516d
--- /dev/null
+++ b/examples/quickcontrols/extras/dashboard/qml/dashboard.qml
@@ -0,0 +1,184 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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.2
+import QtQuick.Window 2.1
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Extras 1.4
+
+Window {
+    id: root
+    visible: true
+    width: 1024
+    height: 600
+
+    color: "#161616"
+    title: "Qt Quick Extras Demo"
+
+    ValueSource {
+        id: valueSource
+    }
+
+    // Dashboards are typically in a landscape orientation, so we need to ensure
+    // our height is never greater than our width.
+    Item {
+        id: container
+        width: root.width
+        height: Math.min(root.width, root.height)
+        anchors.centerIn: parent
+
+        Row {
+            id: gaugeRow
+            spacing: container.width * 0.02
+            anchors.centerIn: parent
+
+            TurnIndicator {
+                id: leftIndicator
+                anchors.verticalCenter: parent.verticalCenter
+                width: height
+                height: container.height * 0.1 - gaugeRow.spacing
+
+                direction: Qt.LeftArrow
+                on: valueSource.turnSignal == Qt.LeftArrow
+            }
+
+            Item {
+                width: height
+                height: container.height * 0.25 - gaugeRow.spacing
+                anchors.verticalCenter: parent.verticalCenter
+
+                CircularGauge {
+                    id: fuelGauge
+                    value: valueSource.fuel
+                    maximumValue: 1
+                    y: parent.height / 2 - height / 2 - container.height * 0.01
+                    width: parent.width
+                    height: parent.height * 0.7
+
+                    style: IconGaugeStyle {
+                        id: fuelGaugeStyle
+
+                        icon: "qrc:/images/fuel-icon.png"
+                        minWarningColor: Qt.rgba(0.5, 0, 0, 1)
+
+                        tickmarkLabel: Text {
+                            color: "white"
+                            visible: styleData.value === 0 || styleData.value === 1
+                            font.pixelSize: fuelGaugeStyle.toPixels(0.225)
+                            text: styleData.value === 0 ? "E" : (styleData.value === 1 ? "F" : "")
+                        }
+                    }
+                }
+
+                CircularGauge {
+                    value: valueSource.temperature
+                    maximumValue: 1
+                    width: parent.width
+                    height: parent.height * 0.7
+                    y: parent.height / 2 + container.height * 0.01
+
+                    style: IconGaugeStyle {
+                        id: tempGaugeStyle
+
+                        icon: "qrc:/images/temperature-icon.png"
+                        maxWarningColor: Qt.rgba(0.5, 0, 0, 1)
+
+                        tickmarkLabel: Text {
+                            color: "white"
+                            visible: styleData.value === 0 || styleData.value === 1
+                            font.pixelSize: tempGaugeStyle.toPixels(0.225)
+                            text: styleData.value === 0 ? "C" : (styleData.value === 1 ? "H" : "")
+                        }
+                    }
+                }
+            }
+
+            CircularGauge {
+                id: speedometer
+                value: valueSource.kph
+                anchors.verticalCenter: parent.verticalCenter
+                maximumValue: 280
+                // We set the width to the height, because the height will always be
+                // the more limited factor. Also, all circular controls letterbox
+                // their contents to ensure that they remain circular. However, we
+                // don't want to extra space on the left and right of our gauges,
+                // because they're laid out horizontally, and that would create
+                // large horizontal gaps between gauges on wide screens.
+                width: height
+                height: container.height * 0.5
+
+                style: DashboardGaugeStyle {}
+            }
+
+            CircularGauge {
+                id: tachometer
+                width: height
+                height: container.height * 0.25 - gaugeRow.spacing
+                value: valueSource.rpm
+                maximumValue: 8
+                anchors.verticalCenter: parent.verticalCenter
+
+                style: TachometerStyle {}
+            }
+
+            TurnIndicator {
+                id: rightIndicator
+                anchors.verticalCenter: parent.verticalCenter
+                width: height
+                height: container.height * 0.1 - gaugeRow.spacing
+
+                direction: Qt.RightArrow
+                on: valueSource.turnSignal == Qt.RightArrow
+            }
+
+        }
+    }
+}