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 2.0 Item { id: root width: 243 height: 243 property bool active property real fuelLevel: 30 property real fuelLevelForStartupAnimation: 0 property real fuelLevelVisible: (startUpAnimation.running || hideAnimation.running) ? fuelLevelForStartupAnimation : fuelLevel property color colorMode: fuelLevel < 20 ? Style.red : (fuelLevel < 40 ? Style.orange : Style.neutralGreen) Behavior on fuelLevelForStartupAnimation { NumberAnimation{ duration: 800 easing.type: Easing.OutCubic } } Image { id: background source: "images/big/fuelGauge/fuel-colored-bg.png" anchors.centerIn: root } Item { id: hole width: 176 height: 176 anchors.centerIn: root clip: true property int wavesOffset: 0 property int wavesOffsetVisible: 0 readonly property int waveHorizontalOffset: -1 ColorizedImage { id: wave source: "images/big/fuelGauge/wave-top-part.png" color: root.colorMode anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: hole.wavesOffsetVisible anchors.right: fuelLevelImage.left anchors.rightMargin: hole.waveHorizontalOffset } ColorizedImage { id: wave_2 source: "images/big/fuelGauge/wave-top-part.png" color: root.colorMode anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: -60 - hole.wavesOffsetVisible anchors.right: fuelLevelImage.left anchors.rightMargin: hole.waveHorizontalOffset } Image { id: wave_2_shadow source: "images/big/fuelGauge/wave-shadow.png" anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: -60 - hole.wavesOffsetVisible anchors.right: fuelLevelImage.left anchors.rightMargin: hole.waveHorizontalOffset } ColorizedImage { id: fuelLevelImage source: "images/big/fuelGauge/wave-bottom-part.png" color: root.colorMode anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: MathAPI.clamp(root.fuelLevelVisible/80*130 - 130, -130, 0) } ColorizedImage { id: holeInBackground color: root.colorMode anchors.centerIn: parent source: "images/big/fuelGauge/hole-in-bg.png" } Timer { id: updateTimer interval: 100 running: true repeat: true onTriggered: { hole.wavesOffsetVisible = hole.wavesOffset } } readonly property real valIn: 80 readonly property real valOut: 20 SequentialAnimation { id: wavesAnimation running: true loops: Animation.Infinite NumberAnimation { target: hole property: "wavesOffset" duration: 3000 from: -hole.valIn to: hole.valOut } NumberAnimation { target: hole property: "wavesOffset" duration: 3000 from: hole.valOut to: -hole.valIn } } } ColorizedImage { id: gradientCircle color: root.colorMode anchors.centerIn: root source: "images/big/fuelGauge/fuel-colored-circle.png" } Image { id: fuelScale source: "images/big/fuelGauge/fuel-scale_2.png" anchors.centerIn: root anchors.verticalCenterOffset: -40 } 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 hole.opacity = 0 fuelLevelForStartupAnimation = 0 fuelScale.opacity = 0 background.opacity = 0 gradientCircle.opacity = 0 } onActiveChanged: { if(active) { startAnimation() } else { hiddingAnimation() } } function startAnimation() { startUpAnimation.start() } function hiddingAnimation() { hideAnimation.start() } SequentialAnimation { id: hideAnimation ScriptAction { script: { root.fuelLevelForStartupAnimation = 0 } } PauseAnimation { duration: 500 } NumberAnimation { target: background; property: "opacity"; to: 0; duration: 250; easing.type: Easing.OutCubic } ScriptAction { script: { hole.opacity = 0 } } 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 } } ParallelAnimation { ScriptAction { script: { hole.opacity = 1 } } SequentialAnimation { PauseAnimation { duration: 300 } ScriptAction { script: { root.fuelLevelForStartupAnimation = 45 } } PauseAnimation { duration: 600 } ScriptAction { script: { root.fuelLevelForStartupAnimation = 30 } } PauseAnimation { duration: 600 } ScriptAction { script: { root.fuelLevelForStartupAnimation = root.fuelLevel } } PauseAnimation { duration: 600 } } SequentialAnimation { NumberAnimation { target: ring1; property: "opacity"; from: 0; to: 1; duration: 300; easing.type: Easing.OutQuad } NumberAnimation { target: gradientCircle; property: "opacity"; from: 0; to: 1; duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutQuad } ParallelAnimation{ NumberAnimation { target: fuelScale; property: "opacity"; from: 0; to: 1; duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutQuad } NumberAnimation { target: background; property: "opacity"; from: 0; to: 1; duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutQuad } } } } } Component.onCompleted: { hideElements() } }