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.0 import QtQuickUltralite.Extras 1.2 ItemWithAcivationAnimations { id: root width: 620 height: 152 welcomeAnimationDelay: 500 property bool isDayMode: false property alias tripDistance: tripDistance.text property color textColor: getFontColor() Behavior on textColor { NumberAnimation { duration: welcomeAnimationDuration} } function getFontColor() : color { return isDayMode ? Style.black : Style.white } Text { anchors.bottom: motorbikeStatus.top anchors.bottomMargin: 10 anchors.left: motorbikeStatus.left font.pixelSize: 18 font.family: "Barlow-mono"; color: textColor text: "Motorbike status" } Column { id: motorbikeStatus anchors.bottom: root.bottom ColorizedImage { id: batteryImg source: "qrc:///images/small/status/battery-status.png" color: textColor } ColorizedImage { id: oilImg source: "qrc:///images/small/status/engine-oil-status.png" color: textColor } ColorizedImage { id: serviceImg source: "qrc:///images/small/status/service-status.png" color: textColor } } Column { id: motorbikeStatusTxts anchors.left: motorbikeStatus.right anchors.verticalCenter: motorbikeStatus.verticalCenter width: 95 spacing: 18 Text { anchors.right: motorbikeStatusTxts.right font.pixelSize: 18 font.family: "Barlow-mono"; color: textColor text: "12.5 V" } Text { anchors.right: motorbikeStatusTxts.right font.pixelSize: 18 font.family: "Barlow-mono"; color: textColor text: "OK" } Text { anchors.right: motorbikeStatusTxts.right font.pixelSize: 18 font.family: "Barlow-mono"; color: textColor text: "1258 km" } } Text { anchors.bottom: tripSummaryImgs.top anchors.bottomMargin: 10 anchors.left: tripSummaryImgs.left anchors.leftMargin: 25 font.pixelSize: 18 font.family: "Barlow-mono"; color: textColor text: "Trip Summary" } Column { id: tripSummaryImgs anchors.right: tripSummaryTxts.left anchors.bottom: root.bottom ColorizedImage { id: batteryImg source: "qrc:///images/small/status/distance-status.png" color: textColor } ColorizedImage { id: oilImg source: "qrc:///images/small/status/fuel-avg-status.png" color: textColor } ColorizedImage { id: serviceImg source: "qrc:///images/small/status/time-status.png" color: textColor } } Column { id: tripSummaryTxts anchors.right: parent.right anchors.verticalCenter: tripSummaryImgs.verticalCenter width: 120 spacing: 18 Text { id: tripDistance anchors.right: tripSummaryTxts.right font.pixelSize: 18 font.family: "Barlow-mono"; color: textColor } Text { anchors.right: tripSummaryTxts.right font.pixelSize: 18 font.family: "Barlow-mono"; color: textColor text: "4.5 l/100 km" } Text { anchors.right: tripSummaryTxts.right font.pixelSize: 18 font.family: "Barlow-mono"; color: textColor text: "2h 35 min" } } onIsDayModeChanged: { if(active) { changeDayModeAnimation.start() } } SequentialAnimation { id: changeDayModeAnimation PauseAnimation { duration: 900 } ScriptAction { script: root.textColor = getFontColor() } } }