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.4 import QtQuickUltralite.Extras 1.2 Item { id: root width: 152 height: 152 property bool active property bool isDayMode property real fuelLevel: 30 property real fuelLevelForStartupAnimation: 0 property real fuelLevelVisibleValue: (startUpAnimation.running || hideAnimation.running || dayModeAnimation.running || nightModeAnimation.running) ? fuelLevelForStartupAnimation : fuelLevel property color colorMode: fuelLevel < 20 ? Style.red : (fuelLevel < 40 ? Style.orange : Style.neutralGreen) property color imagesColors property image holeInBackgroundImg: "qrc:///images/small/fuelGauge/hole-in-bg.png" property real gradientCircleOpacityTarget: 1 property real backgroundOpacityTarget: 1 states: [ State { name: "dayMode" when: isDayMode === true PropertyChanges { target: root imagesColors: Style.black } PropertyChanges { target: root holeInBackgroundImg: "qrc:///images/small/fuelGauge/hole-in-bg-day.png" } PropertyChanges { target: background opacity: 0 } PropertyChanges { target: root gradientCircleOpacityTarget: 0 } PropertyChanges { target: gradientCircle opacity: 0 } PropertyChanges { target: root backgroundOpacityTarget: 0 } PropertyChanges { target: holeInBackground opacity: 1 } }, State { name: "nightMode" when: isDayMode !== true PropertyChanges { target: root imagesColors: Style.white } PropertyChanges { target: root holeInBackgroundImg: "qrc:///images/small/fuelGauge/hole-in-bg.png" } PropertyChanges { target: background opacity: 1 } PropertyChanges { target: root gradientCircleOpacityTarget: 1 } PropertyChanges { target: gradientCircle opacity: 1 } PropertyChanges { target: root backgroundOpacityTarget: 1 } } ] transitions: [ Transition { to: "dayMode" SequentialAnimation { id: dayModeAnimation ParallelAnimation { ScriptAction { script: { fuelLevelForStartupAnimation = 0 } } NumberAnimation { target: background duration: 300 property: "opacity" to: 0 easing.type: Easing.OutCubic } NumberAnimation { target: gradientCircle duration: 300 property: "opacity" to: 0 easing.type: Easing.OutCubic } } NumberAnimation { target: holeInBackground property: "opacity" to: 0 duration: 300 easing.type: Easing.OutCubic } ScriptAction { script: { holeInBackground.source = holeInBackgroundImg } } PauseAnimation { duration: 1000 } NumberAnimation { target: holeInBackground property: "opacity" to: 1 duration: 300 easing.type: Easing.OutCubic } ScriptAction { script: { fuelLevelForStartupAnimation = fuelLevel } } PauseAnimation { duration: 300 } } }, Transition { to: "nightMode" SequentialAnimation { id: nightModeAnimation ScriptAction { script: { fuelLevelForStartupAnimation = 0 } } PauseAnimation { duration: 300 } NumberAnimation { target: holeInBackground property: "opacity" to: 0 duration: 300 easing.type: Easing.OutCubic } ScriptAction { script: { holeInBackground.source = holeInBackgroundImg } } PauseAnimation { duration: 1000 } NumberAnimation { target: holeInBackground property: "opacity" to: 1 duration: 300 easing.type: Easing.OutCubic } ParallelAnimation { ScriptAction { script: { fuelLevelForStartupAnimation = fuelLevel } } NumberAnimation { target: gradientCircle duration: 300 easing.type: Easing.OutCubic } NumberAnimation { target: background duration: 300 property: "opacity" to: 0 easing.type: Easing.OutCubic } } } } ] Behavior on fuelLevelForStartupAnimation { NumberAnimation { duration: 800 easing.type: Easing.OutCubic } } Image { id: background source: "qrc:///images/small/fuelGauge/fuel-colored-bg.png" anchors.centerIn: root } Item { id: hole width: 114 height: 114 anchors.centerIn: root clip: true property int wavesOffset: 0 ColorizedImage { id: fuelLevelImage source: "qrc:///images/small/fuelGauge/wave-bottom-part.png" color: root.colorMode anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom anchors.bottomMargin: MathAPI.clamp( root.fuelLevelVisibleValue / 80 * 90 - 90, -90, 0) } ColorizedImage { id: wave source: "qrc:///images/small/fuelGauge/wave-top-part.png" color: root.colorMode anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenterOffset: hole.wavesOffset anchors.bottom: fuelLevelImage.top } ColorizedImage { id: wave_2 source: "qrc:///images/small/fuelGauge/wave-top-part.png" color: root.colorMode anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenterOffset: -60 - hole.wavesOffset anchors.bottom: fuelLevelImage.top } Image { id: wave_2_shadow source: "qrc:///images/small/fuelGauge/wave-shadow.png" anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenterOffset: -60 - hole.wavesOffset anchors.bottom: fuelLevelImage.top } Image { id: holeInBackground anchors.centerIn: parent source: "qrc:///images/small/fuelGauge/hole-in-bg.png" } SequentialAnimation { id: wavesAnimation running: true loops: Animation.Infinite NumberAnimation { target: hole property: "wavesOffset" duration: 5000 from: -90 to: 90 } NumberAnimation { target: hole property: "wavesOffset" duration: 5000 from: 90 to: -90 } } } ColorizedImage { id: gradientCircle color: root.colorMode anchors.centerIn: root source: "qrc:///images/small/fuelGauge/fuel-colored-circle.png" } ColorizedImage { id: fuelScale source: "qrc:///images/small/fuelGauge/fuel-scale.png" anchors.centerIn: root color: imagesColors anchors.horizontalCenterOffset: 15 } ColorizedImage { id: ring1 source: "qrc:///images/small/fuelGauge/ring-2.png" anchors.centerIn: root width: 130 height: 130 color: imagesColors } ColorizedImage { id: ring2 source: "qrc:///images/small/fuelGauge/ring-2.png" anchors.centerIn: root property int horizontalCenterOffsetValue anchors.horizontalCenterOffset: horizontalCenterOffsetValue color: imagesColors } 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 } 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: { hideElements() root.opacity = 1 } } ParallelAnimation { NumberAnimation { target: ring2 property: "horizontalCenterOffsetValue" 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" to: gradientCircleOpacityTarget duration: StartupConfig.backgroundOpacityDuration easing.type: Easing.OutQuad } ParallelAnimation { NumberAnimation { target: fuelScale property: "opacity" to: 1 duration: StartupConfig.backgroundOpacityDuration easing.type: Easing.OutQuad } NumberAnimation { target: background property: "opacity" to: backgroundOpacityTarget duration: StartupConfig.backgroundOpacityDuration easing.type: Easing.OutQuad } } } } } Component.onCompleted: { hideElements() } }