- Qt 5.5
- Qt Quick Extras
- Qt Quick Extras - Dashboard
- dashboard.qml Example File
- Qt 5.5.1 Reference Documentation

# dashboard.qml Example File

dashboard/qml/dashboard.qml

    /****************************************************************************
    **
    ** Copyright (C) 2015 The Qt Company Ltd.
    ** Contact: http://www.qt.io/licensing/
    **
    ** This file is part of the examples of the Qt Toolkit.
    **
    ** $QT_BEGIN_LICENSE:BSD$
    ** 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
                }

            }
        }
    }