C

Qt Quick Ultralite Motorcycle 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 Item { id: root property bool isOver13kRpm: false property int rpm: 0 property int gear: 0 width: 152 height: 152 property bool active property color ringsColor: Style.neutralGreen property color backgroundColor: Style.neutralGreen states: [ State { name: "neautralGear" when: gear === 0 PropertyChanges { target: root; ringsColor: Style.neutralGreen } PropertyChanges { target: root; backgroundColor: Style.neutralGreen } PropertyChanges { target: textValue; text: "N" } }, State { name: "driveGear" when: gear !== 0 PropertyChanges { target: root; ringsColor: root.isOver13kRpm ? Style.red : Style.neutralGreen } PropertyChanges { target: root; backgroundColor: root.isOver13kRpm ? Style.red : Style.normalGreen } PropertyChanges { target: textValue; text: root.gear } } ] Behavior on ringsColor { ColorAnimation { duration: 400 easing.type: Easing.InOutQuad }} Behavior on backgroundColor { ColorAnimation { duration: 400 easing.type: Easing.InOutQuad }} Rectangle { id: background width: holeInBackground.width height: holeInBackground.height color: root.backgroundColor anchors.centerIn: root } ColorizedImage { id: holeInBackground color: root.ringsColor anchors.centerIn: root source: "images/big/fuelGauge/hole-in-bg.png" } ColorizedImage { id: gradientCircle color: root.ringsColor anchors.centerIn: root source: "images/big/fuelGauge/fuel-colored-circle.png" } Text { id: textValue font.family: "Barlow-mono" font.pixelSize: 110 color: "white" anchors.centerIn: background anchors.horizontalCenterOffset: -22 transform: [ Rotation { origin.x: textValue.width / 2 origin.y: textValue.height / 2 angle: -90 } ] } Text { id: gearText height: gearText.width font.family: "Barlow-mono" font.pixelSize: 32 color: "white" text: "Gear" anchors.centerIn: background anchors.horizontalCenterOffset: 60 transform: [ Rotation { origin.x: gearText.width / 2 origin.y: gearText.height / 2 angle: -90 } ] } Image { id: ring1 source: "images/big/fuelGauge/ring-1.png" anchors.centerIn: root } Image { id: ring2 source: "images/big/fuelGauge/ring-2.png" anchors.centerIn: root property int verticalCenterOffsetValue anchors.verticalCenterOffset: verticalCenterOffsetValue } function hideElements() { ring1.opacity = 0 ring2.opacity = 0 holeInBackground.opacity = 0 background.opacity = 0 gradientCircle.opacity = 0 textValue.opacity = 0 gearText.opacity = 0 } onActiveChanged: { if(active) { startAnimation() } else { hiddingAnimation() } } function startAnimation() { startUpAnimation.start() } function hiddingAnimation() { hideAnimation.start() } SequentialAnimation { id: hideAnimation NumberAnimation { target: background; property: "opacity"; to: 0; duration: 500; easing.type: Easing.OutCubic } NumberAnimation { target: root; property: "opacity"; to: 0; duration: 500; easing.type: Easing.OutCubic } ScriptAction { script: hideElements() } } SequentialAnimation { id: startUpAnimation ScriptAction { script: { root.opacity = 1 } } ParallelAnimation { NumberAnimation { target: ring2; property: "verticalCenterOffsetValue"; from: StartupConfig.ring2TravelDistance; to: 0; duration: StartupConfig.ring2TravelDuration; easing.type: Easing.OutCubic } NumberAnimation { target: ring2; property: "opacity"; from: 0; to: 1; duration: StartupConfig.ring2OpacityDuration; easing.type: Easing.OutCubic } } ScriptAction { script: { holeInBackground.opacity = 1 } } SequentialAnimation { NumberAnimation { target: ring1; property: "opacity"; from: 0; to: 1; duration: StartupConfig.ring1OpacityDuration; easing.type: Easing.OutCubic } NumberAnimation { target: gradientCircle; property: "opacity"; from: 0; to: 1; duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutCubic } ParallelAnimation { NumberAnimation { target: background; property: "opacity"; from: 0; to: 1; duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutCubic } NumberAnimation { target: gearText; property: "opacity"; from: 0; to: 1; duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutCubic } } NumberAnimation { target: textValue; property: "opacity"; from: 0; to: 1; duration: 500; easing.type: Easing.OutCubic } } } Component.onCompleted: { hideElements() } }