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 Item { id: root height: 40 property alias tripValue: tripInfo.valueText property alias odoValue: odoInfo.valueText property alias tempValue: tempInfo.valueText property bool active: false property bool isDayMode readonly property int margin: 14 property color separatorsColor: isDayMode ? Style.kindOfBrightGray : Style.kindOfGray property color fontsColor: isDayMode ? Style.black : Style.white Behavior on separatorsColor { NumberAnimation { duration: 1000 } } Behavior on fontsColor { NumberAnimation { duration: 1000 } } Item { id: tripInfoWrapper height: tripInfo.height width: tripInfo.width + margin anchors.right: tipAndOdoSeparator.left anchors.top: parent.top anchors.topMargin: 4 clip: true OdoTextElement { id: tripInfo labelText: "TRIP" fontsColor: root.fontsColor } } Rectangle { id: tipAndOdoSeparator anchors.left: parent.left anchors.leftMargin: 112 anchors.top: parent.top anchors.topMargin: 0 opacity: 1 width: 2 height: 40 color: separatorsColor } Item { id: odoInfoWrapper clip: true height: odoInfo.height width: odoInfo.width + margin anchors.left: tipAndOdoSeparator.right anchors.top: parent.top anchors.topMargin: 4 OdoTextElement { id: odoInfo labelText: "ODO" fontsColor: root.fontsColor } } Item { height: tempInfo.height width: tempInfo.width + margin anchors.right: tempAndTimeSeparator.left anchors.top: parent.top anchors.topMargin: 4 clip: true TextElement { id: tempInfo unitText: "°C" fontsColor: root.fontsColor } } Rectangle { id: tempAndTimeSeparator anchors.left: parent.left anchors.leftMargin: 363 anchors.top: parent.top anchors.topMargin: 0 opacity: 1 width: 2 height: 40 color: separatorsColor } Item { height: timeInfo.height width: timeInfo.width + margin anchors.left: tempAndTimeSeparator.right anchors.top: parent.top anchors.topMargin: 4 clip: true TimeView { id: timeInfo fontsColor: root.fontsColor } } states: [ State { name: "visible" when: active PropertyChanges { target: root opacity: 1 } PropertyChanges { target: tipAndOdoSeparator opacity: 1 } PropertyChanges { target: tripInfo x: 0 } PropertyChanges { target: odoInfo x: margin } PropertyChanges { target: tempAndTimeSeparator opacity: 1 } PropertyChanges { target: tempInfo x: 0 } PropertyChanges { target: timeInfo x: margin } }, State { name: "hidden" when: !active PropertyChanges { target: root opacity: 0 } PropertyChanges { target: tipAndOdoSeparator opacity: 0 } PropertyChanges { target: tripInfo x: tripInfo.width + margin } PropertyChanges { target: odoInfo x: -odoInfo.width } PropertyChanges { target: tempAndTimeSeparator opacity: 0 } PropertyChanges { target: tempInfo x: tempInfo.width + margin } PropertyChanges { target: timeInfo x: -timeInfo.width } } ] transitions: [ Transition { to: "visible" SequentialAnimation { NumberAnimation { target: root duration: 16 } ParallelAnimation { NumberAnimation { target: tipAndOdoSeparator duration: 500 easing.type: Easing.OutQuad } NumberAnimation { target: tempAndTimeSeparator duration: 500 easing.type: Easing.OutQuad } } ParallelAnimation { NumberAnimation { target: tripInfo duration: 500 easing.type: Easing.OutQuad } NumberAnimation { target: odoInfo duration: 500 easing.type: Easing.OutQuad } NumberAnimation { target: tempInfo duration: 500 easing.type: Easing.OutQuad } NumberAnimation { target: timeInfo duration: 500 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.x = tempInfo.width + margin timeInfo.x = -timeInfo.width tripInfo.x = tripInfo.width + margin odoInfo.x = -odoInfo.width root.opacity = 0 } Component.onCompleted: { hideElements() } }