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 Item { id: root height: 700 width: 64 property alias tripValue: tripInfo.valueText property alias odoValue: odoInfo.valueText property alias tempValue: tempInfo.valueText property bool active: false readonly property int margin: 23 Item { id: odoInfoWrapper clip: true height: odoInfo.height + margin width: odoInfo.width anchors.bottom: tipAndOdoSeparator.top anchors.right: parent.right anchors.rightMargin: 2 OdoTextElement { id: odoInfo labelText: "ODO" anchors.top: parent.top magicMarginForValue: -27 magicMarginForTextLabel: -2 } } Rectangle { id: tipAndOdoSeparator anchors.bottom: parent.bottom anchors.bottomMargin: 176 anchors.right: parent.right opacity: 1 width: 64 height: 2 color: Style.kindOfGray } Item { id: tripInfoWrapper height: tripInfo.height + margin width: tripInfo.width anchors.top: tipAndOdoSeparator.bottom anchors.right: parent.right anchors.rightMargin: 2 clip: true OdoTextElement { id: tripInfo labelText: "TRIP" anchors.bottom: parent.bottom magicMarginForValue: -7 magicMarginForTextLabel: -5 } } Item { height: timeInfo.height + margin width: timeInfo.width anchors.bottom: tempAndTimeSeparator.top anchors.left: parent.left anchors.leftMargin: 9 clip: true TimeView { id: timeInfo } } Rectangle { id: tempAndTimeSeparator anchors.top: parent.top anchors.topMargin: 112 anchors.right: parent.right opacity: 1 width: 64 height: 2 color: Style.kindOfGray } Item { height: tempInfo.height + margin width: tempInfo.width anchors.top: tempAndTimeSeparator.bottom anchors.left: parent.left anchors.leftMargin: 9 clip: true TextElement { id: tempInfo unitText: "°C" anchors.bottom: parent.bottom } } states: [ State { name: "visible" when: active PropertyChanges { target: root; opacity: 1 } PropertyChanges { target: tipAndOdoSeparator; opacity: 1 } PropertyChanges { target: tripInfo; y: margin } PropertyChanges { target: odoInfo; y: 0 } PropertyChanges { target: tempAndTimeSeparator; opacity: 1 } PropertyChanges { target: tempInfo; y: margin } PropertyChanges { target: timeInfo; y: 0 } }, State { name: "hidden" when: !active PropertyChanges { target: root; opacity: 0; } PropertyChanges { target: tipAndOdoSeparator; opacity: 0 } PropertyChanges { target: tripInfo; y: -tripInfo.height } PropertyChanges { target: odoInfo; y: odoInfo.height + margin } PropertyChanges { target: tempAndTimeSeparator; opacity: 0 } PropertyChanges { target: tempInfo; y: -tempInfo.height } PropertyChanges { target: timeInfo; y: timeInfo.height + margin } } ] transitions: [ Transition { to: "visible" SequentialAnimation { NumberAnimation { target: root; duration: 16 } ParallelAnimation { NumberAnimation { target: tipAndOdoSeparator; duration: 300; easing.type: Easing.OutQuad } NumberAnimation { target: tempAndTimeSeparator; duration: 300; easing.type: Easing.OutQuad } } ParallelAnimation { NumberAnimation { target: tripInfo; duration: 300; easing.type: Easing.OutQuad } NumberAnimation { target: odoInfo; duration: 300; easing.type: Easing.OutQuad } NumberAnimation { target: tempInfo; duration: 300; easing.type: Easing.OutQuad } NumberAnimation { target: timeInfo; duration: 300; easing.type: Easing.OutQuad } } } }, Transition { to: "hidden" SequentialAnimation { NumberAnimation { target: root; duration: 500} ParallelAnimation { NumberAnimation { target: tipAndOdoSeparator; } NumberAnimation { target: tempAndTimeSeparator; } } ParallelAnimation { NumberAnimation { target: tripInfo } NumberAnimation { target: odoInfo } NumberAnimation { target: tempInfo } NumberAnimation { target: timeInfo } } } } ] function hideElements() { tempAndTimeSeparator.opacity = 0 tipAndOdoSeparator.opacity = 0 tempInfo.y = -tempInfo.height - margin timeInfo.y = timeInfo.height tripInfo.y = -tripInfo.height odoInfo.y = odoInfo.height - margin root.opacity = 0 } Component.onCompleted: { hideElements() } }