C

Qt Quick Ultralite Automotive Cluster Demo

/****************************************************************************** ** ** Copyright (C) 2020 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Quick Ultralite module. ** ** $QT_BEGIN_LICENSE:COMM$ ** ** 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 http://www.qt.io/terms-conditions. For further ** information use the contact form at http://www.qt.io/contact-us. ** ** $QT_END_LICENSE$ ** ******************************************************************************/
import QtQuick 2.15 import QtQuickUltralite.Extras 1.2 import Automotive 1.0 Item { id: root; property bool active: true; property int menu: NormalModeModel.menu; property bool naviMode: active && menu == NormalModeModel.NavigationMenu; property real scale: !naviMode ? 1.0 : 1.25 // negation is a workaround for UL-419 Behavior on scale { NumberAnimation { duration: 500; } } Image { id: topLine; source: "images/top-line.png"; anchors.horizontalCenter: parent.horizontalCenter; y: 62; } LaneAssist { anchors.fill: parent scale: root.scale } GuideArrowItem { anchors.fill: parent scale: root.scale } Item { id: mainElement; anchors.fill: parent MediaPlayer { activeMode: active; selected: menu == NormalModeModel.MediaPlayerMenu; anchors.fill: parent; } Navi { activeMode: active && NaviModel.filteredDistanceToNextManoeuver != 0; selected: menu == NormalModeModel.NavigationMenu; anchors.fill: parent; scale: root.scale } Phone { activeMode: active; selected: menu == NormalModeModel.PhoneMenu; anchors.fill: parent; } CarStatus { activeMode: active; selected: menu == NormalModeModel.CarStatusMenu; anchors.fill: parent; } } Item { id: gauges opacity: MainModel.gaugesOpacity; Gauge { id: leftGauge; x: 20; y: 44; left: true; value: Units.kilometersToLongDistanceUnit(MainModel.speed) maxValue: Units.maximumSpeed textLabel: Units.speedUnit SpeedWarningIndicator { id: speedWarningIndicator x: 218 - width/2 y: 271 - height/2 transform: Scale { origin.x: 60 - speedWarningIndicator.x origin.y: 340 - speedWarningIndicator.y xScale: leftGauge.scale yScale: leftGauge.scale } } } Gauge { id: rightGauge; x: root.width - rightGauge.width - 20; y: 44; value: MainModel.rpm / 1000; valueText: MainModel.gearShiftText maxValue: MainModel.maxRpm / 1000; maxAngle: 180 textLabel: "" StaticText { id: rpmLabel anchors.centerIn: parent anchors.horizontalCenterOffset: -35 anchors.verticalCenterOffset: 100 opacity: 0.2 horizontalAlignment: StaticText.AlignRight text: "x1000\n RPM" color: Style.lightPeriwinkle; font.pixelSize: 10 font.family: "Sarabun" transform: Scale { origin.x: rightGauge.transformOriginX - rpmLabel.x origin.y: 340 - rpmLabel.y xScale: rightGauge.scale yScale: rightGauge.scale } } } Behavior on opacity { NumberAnimation { duration: MainModel.gaugesOpacityChangeDuration; } } } Menu { id: normalMenu; opacity: topLine.opacity; anchors.horizontalCenter: parent.horizontalCenter; y: 293; currentIndex: menu; onClicked: menu = index; } Menu { id: navModeMenu; opacity: 0; anchors.horizontalCenter: parent.horizontalCenter; y: 87; currentIndex: 1; onClicked: menu = index; } states: [ State { name: "inactive" when: !active PropertyChanges { target: mainElement opacity: 0 } PropertyChanges { target: topLine opacity: 0 } PropertyChanges { target: leftGauge opacity: 0 x: root.width / 3; } PropertyChanges { target: rightGauge opacity: 0 x: root.width - rightGauge.width - root.width / 3; } }, State { name: "navi" when: naviMode; PropertyChanges { target: navModeMenu; opacity: topLine.opacity; } PropertyChanges { target: normalMenu; opacity: 0; } PropertyChanges { target: leftGauge; scale: 0.8 } PropertyChanges { target: rightGauge; scale: 0.8 } } ] // FIXME! need to have exact easing curve and timeing from the design transitions: [ Transition { from: "inactive" SequentialAnimation { PauseAnimation { duration: 600 } NumberAnimation { target: mainElement duration: 350; } ScriptAction { script: SportModeModel.menuActive = false } ParallelAnimation { NumberAnimation { easing.type: Easing.OutQuad target: leftGauge; duration: 350; } NumberAnimation { easing.type: Easing.OutQuad target: rightGauge; duration: 350; } NumberAnimation { easing.type: Easing.InQuad target: topLine duration: 400; } } } }, Transition { to: "inactive" SequentialAnimation { ParallelAnimation { NumberAnimation { target: mainElement duration: 250; } NumberAnimation { target: topLine duration: 250; } } ParallelAnimation { NumberAnimation { easing.type: Easing.OutQuad target: leftGauge; duration: 350; } NumberAnimation { easing.type: Easing.OutQuad target: rightGauge; duration: 350; } } } }, Transition { to: "navi" NumberAnimation { properties: "scale"; duration: 500; } SequentialAnimation { NumberAnimation { target: normalMenu; duration: 250; } PauseAnimation { duration: 300; } NumberAnimation { target: navModeMenu duration: 300; easing.type: Easing.InCubic; } } }, Transition { from: "navi" NumberAnimation { properties: "scale"; duration: 500; } SequentialAnimation { NumberAnimation { target: navModeMenu; duration: 250; } PauseAnimation { duration: 300; } NumberAnimation { target: normalMenu duration: 300; easing.type: Easing.InCubic; } } } ] }