automotive.qml Example File
imagine/automotive/qml/automotive.qml
/****************************************************************************
**
** Copyright (C) 2017 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.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Imagine 2.12
import QtQuick.Window 2.0
ApplicationWindow id : window
width : 1280
height : 720
minimumWidth : 1180
minimumHeight : 663
visible : true
title : "Qt Quick Controls 2 - Imagine Style Example: Automotive"
readonly property color colorGlow : "#1d6d64"
readonly property color colorWarning : "#d5232f"
readonly property color colorMain : "#6affcd"
readonly property color colorBright : "#ffffff"
readonly property color colorLightGrey : "#888"
readonly property color colorDarkGrey : "#333"
readonly property int fontSizeExtraSmall : Qt .application .font .pixelSize * 0.8
readonly property int fontSizeMedium : Qt .application .font .pixelSize * 1.5
readonly property int fontSizeLarge : Qt .application .font .pixelSize * 2
readonly property int fontSizeExtraLarge : Qt .application .font .pixelSize * 5
Component .onCompleted: {
x = Screen .width / 2 - width / 2
y = Screen .height / 2 - height / 2
}
Shortcut sequence : "Ctrl+Q"
onActivated : Qt .quit ()
}
Frame id : frame
anchors .fill: parent
anchors .margins: 90
RowLayout id : mainRowLayout
anchors .fill: parent
anchors .margins: 24
spacing : 36
Container id : leftTabBar
currentIndex : 1
Layout .fillWidth: false
Layout .fillHeight: true
ButtonGroup buttons : columnLayout .children
}
contentItem : ColumnLayout {
id : columnLayout
spacing : 3
Repeater model : leftTabBar .contentModel
}
}
FeatureButton {
id : navigationFeatureButton
text : qsTr ("Navigation" )
icon .name: "navigation"
Layout .fillHeight: true
}
FeatureButton {
text : qsTr ("Music" )
icon .name: "music"
checked : true
Layout .fillHeight: true
}
FeatureButton {
text : qsTr ("Message" )
icon .name: "message"
Layout .fillHeight: true
}
FeatureButton {
text : qsTr ("Command" )
icon .name: "command"
Layout .fillHeight: true
}
FeatureButton {
text : qsTr ("Settings" )
icon .name: "settings"
Layout .fillHeight: true
}
}
StackLayout currentIndex : leftTabBar .currentIndex
Layout .preferredWidth: 150
Layout .maximumWidth: 150
Layout .fillWidth: false
Item ColumnLayout spacing : 16
ButtonGroup id : viewButtonGroup
buttons : viewTypeRowLayout .children
}
RowLayout id : viewTypeRowLayout
spacing : 3
Layout .bottomMargin: 12
Button text : qsTr ("Compact" )
font .pixelSize: fontSizeExtraSmall
checked : true
Layout .fillWidth: true
}
Button text : qsTr ("Full" )
font .pixelSize: fontSizeExtraSmall
checkable : true
Layout .fillWidth: true
}
}
GlowingLabel {
text : qsTr ("VOLUME" )
color : "white"
font .pixelSize: fontSizeMedium
}
Dial id : volumeDial
from : 0
value : 42
to : 100
stepSize : 1
Layout .alignment: Qt .AlignHCenter
Layout .minimumWidth: 64
Layout .minimumHeight: 64
Layout .preferredWidth: 128
Layout .preferredHeight: 128
Layout .maximumWidth: 128
Layout .maximumHeight: 128
Layout .fillHeight: true
Label text : volumeDial .value .toFixed (0 )
color : "white"
font .pixelSize: Qt .application .font .pixelSize * 3
anchors .centerIn: parent
}
}
ButtonGroup id : audioSourceButtonGroup
}
RowLayout Layout .topMargin: 16
GlowingLabel {
id : radioOption
text : qsTr ("RADIO" )
color : "white"
font .pixelSize: fontSizeMedium
horizontalAlignment : Label .AlignLeft
Layout .fillWidth: true
}
GlowingLabel {
text : qsTr ("AUX" )
color : colorLightGrey
font .pixelSize: fontSizeMedium * 0.8
horizontalAlignment : Label .AlignHCenter
glowEnabled : false
Layout .alignment: Qt .AlignBottom
Layout .fillWidth: true
}
GlowingLabel {
text : qsTr ("MP3" )
color : colorDarkGrey
font .pixelSize: fontSizeMedium * 0.6
horizontalAlignment : Label .AlignRight
glowEnabled : false
Layout .alignment: Qt .AlignBottom
Layout .fillWidth: true
}
}
Frame id : stationFrame
leftPadding : 1
rightPadding : 1
topPadding : 1
bottomPadding : 1
Layout .fillWidth: true
Layout .fillHeight: true
Layout .preferredHeight: 128
ListView clip : true
anchors .fill: parent
ScrollIndicator .vertical: ScrollIndicator {
parent : stationFrame
anchors .top: parent .top
anchors .right: parent .right
anchors .rightMargin: 1
anchors .bottom: parent .bottom
}
model : ListModel {
ListElement name : "V-Radio" ; frequency : "105.5 MHz" }
ListElement name : "World News" ; frequency : "93.4 MHz" }
ListElement name : "TekStep FM" ; frequency : "95.0 MHz" }
ListElement name : "Classic Radio" ; frequency : "89.9 MHz" }
ListElement name : "Buena Vista FM" ; frequency : "100.8 MHz" }
ListElement name : "Drive-by Radio" ; frequency : "99.1 MHz" }
ListElement name : "Unknown #1" ; frequency : "104.5 MHz" }
ListElement name : "Unknown #2" ; frequency : "91.2 MHz" }
ListElement name : "Unknown #3" ; frequency : "93.8 MHz" }
ListElement name : "Unknown #4" ; frequency : "80.4 MHz" }
ListElement name : "Unknown #5" ; frequency : "101.1 MHz" }
ListElement name : "Unknown #6" ; frequency : "92.2 MHz" }
}
delegate : ItemDelegate {
id : stationDelegate
width : parent .width
height : 22
text : model .name
font .pixelSize: fontSizeExtraSmall
topPadding : 0
bottomPadding : 0
contentItem : RowLayout {
Label text : model .name
font : stationDelegate .font
horizontalAlignment : Text .AlignLeft
Layout .fillWidth: true
}
Label text : model .frequency
font : stationDelegate .font
horizontalAlignment : Text .AlignRight
Layout .fillWidth: true
}
}
}
}
}
Frame Layout .fillWidth: true
RowLayout anchors .fill: parent
Label text : qsTr ("Sort by" )
font .pixelSize: fontSizeExtraSmall
Layout .alignment: Qt .AlignTop
}
ColumnLayout RadioButton text : qsTr ("Name" )
font .pixelSize: fontSizeExtraSmall
}
RadioButton text : qsTr ("Frequency" )
font .pixelSize: fontSizeExtraSmall
}
RadioButton text : qsTr ("Favourites" )
font .pixelSize: fontSizeExtraSmall
checked : true
}
}
}
}
}
}
Rectangle color : colorMain
implicitWidth : 1
Layout .fillHeight: true
}
ColumnLayout Layout .preferredWidth: 350
Layout .fillWidth: true
Layout .fillHeight: true
GlowingLabel {
id : timeLabel
text : qsTr ("11:02" )
font .pixelSize: fontSizeExtraLarge
Layout .alignment: Qt .AlignHCenter
GlowingLabel {
text : qsTr ("AM" )
font .pixelSize: fontSizeLarge
anchors .left: parent .right
anchors .leftMargin: 8
}
}
Label text : qsTr ("01/01/2018" )
color : colorLightGrey
font .pixelSize: fontSizeMedium
Layout .alignment: Qt .AlignHCenter
Layout .topMargin: 2
Layout .bottomMargin: 10
}
Image source : "qrc:/icons/car.png"
fillMode : Image .PreserveAspectFit
Layout .fillHeight: true
Column x : parent .width * 0.88
y : parent .height * 0.56
spacing : 3
Image source : "qrc:/icons/warning.png"
anchors .horizontalCenter: parent .horizontalCenter
layer .enabled: true
layer .effect: CustomGlow {
spread : 0.2
samples : 40
color : colorWarning
}
}
GlowingLabel {
text : qsTr ("Door open" )
color : colorWarning
glowColor : Qt .rgba (colorWarning .r , colorWarning .g , colorWarning .b , 0.4 )
}
}
}
}
Rectangle color : colorMain
implicitWidth : 1
Layout .fillHeight: true
}
ColumnLayout Row spacing : 8
Image source : "qrc:/icons/weather.png"
}
Column spacing : 8
Row anchors .horizontalCenter: parent .horizontalCenter
GlowingLabel {
id : outsideTempValueLabel
text : qsTr ("31" )
font .pixelSize: fontSizeExtraLarge
}
GlowingLabel {
text : qsTr ("°C" )
font .pixelSize: Qt .application .font .pixelSize * 2.5
anchors .baseline: outsideTempValueLabel .baseline
}
}
Label text : qsTr ("Osaka, Japan" )
color : colorLightGrey
font .pixelSize: fontSizeMedium
}
}
}
ColumnLayout id : airConRowLayout
spacing : 8
Layout .preferredWidth: 128
Layout .preferredHeight: 380
Layout .fillHeight: true
Item Layout .fillHeight: true
}
SwitchDelegate text : qsTr ("AC" )
leftPadding : 0
rightPadding : 0
topPadding : 0
bottomPadding : 0
Layout .fillWidth: true
}
// QTBUG-63269
Item implicitHeight : temperatureValueLabel .implicitHeight
Layout .fillWidth: true
Layout .topMargin: 16
Label text : qsTr ("Temperature" )
anchors .baseline: temperatureValueLabel .bottom
anchors .left: parent .left
}
GlowingLabel {
id : temperatureValueLabel
text : qsTr ("24°C" )
font .pixelSize: fontSizeLarge
anchors .right: parent .right
}
}
Slider value : 0.35
Layout .fillWidth: true
}
// QTBUG-63269
Item implicitHeight : powerValueLabel .implicitHeight
Layout .fillWidth: true
Layout .topMargin: 16
Label text : qsTr ("Power" )
anchors .baseline: powerValueLabel .bottom
anchors .left: parent .left
}
GlowingLabel {
id : powerValueLabel
text : qsTr ("10%" )
font .pixelSize: fontSizeLarge
anchors .right: parent .right
}
}
Slider value : 0.25
Layout .fillWidth: true
}
SwitchDelegate text : qsTr ("Low" )
leftPadding : 0
rightPadding : 0
topPadding : 0
bottomPadding : 0
Layout .fillWidth: true
Layout .topMargin: 16
}
SwitchDelegate text : qsTr ("High" )
checked : true
leftPadding : 0
rightPadding : 0
topPadding : 0
bottomPadding : 0
Layout .fillWidth: true
}
SwitchDelegate text : qsTr ("Defog" )
leftPadding : 0
rightPadding : 0
topPadding : 0
bottomPadding : 0
Layout .fillWidth: true
}
SwitchDelegate text : qsTr ("Recirculate" )
leftPadding : 0
rightPadding : 0
topPadding : 0
bottomPadding : 0
Layout .fillWidth: true
}
Item Layout .fillHeight: true
}
}
}
Container id : rightTabBar
currentIndex : 1
Layout .fillHeight: true
ButtonGroup buttons : rightTabBarContentLayout .children
}
contentItem : ColumnLayout {
id : rightTabBarContentLayout
spacing : 3
Repeater model : rightTabBar .contentModel
}
}
Item Layout .fillHeight: true
}
FeatureButton {
text : qsTr ("Windows" )
icon .name: "windows"
Layout .maximumHeight: navigationFeatureButton .height
Layout .fillHeight: true
}
FeatureButton {
text : qsTr ("Air Con." )
icon .name: "air-con"
checked : true
Layout .maximumHeight: navigationFeatureButton .height
Layout .fillHeight: true
}
FeatureButton {
text : qsTr ("Seats" )
icon .name: "seats"
Layout .maximumHeight: navigationFeatureButton .height
Layout .fillHeight: true
}
FeatureButton {
text : qsTr ("Statistics" )
icon .name: "statistics"
Layout .maximumHeight: navigationFeatureButton .height
Layout .fillHeight: true
}
}
}
}
}
