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 Item { id: root clip: true width: 370 height: 108 property bool showWarning: false property bool isWarningVisible: warning.topMarginForAnimation === 0 readonly property int warningTimeout: 3000 property int warningId: 0 readonly property ListModel warningsModel: ListModel { ListElement { warningImg: "qrc:///images/small/warnings/engine-failure-warning.png" text: "Engine Malfunction\n Stop Now!" } ListElement { warningImg: "qrc:///images/small/warnings/engine-oil-warning.png" text: " Low Oil Pressure\nService immediately" } ListElement { warningImg: "qrc:///images/small/warnings/battery-warning.png" text: " Low Battery Charge\nDon't drive long distance" } } onShowWarningChanged: { if (showWarning) { hideWarningAnimation.stop() warningsAniamtion.stop() warningsAniamtion.start() } } onWarningIdChanged: { hideWarningAnimation.stop() warningsAniamtion.stop() if (showWarning) { warningsAniamtion.start() } else { hideWarningAnimation.start() } } SequentialAnimation { id: warningsAniamtion NumberAnimation { target: warning property: "topMarginForAnimation" to: 0 duration: 330 easing.type: Easing.OutCubic } PauseAnimation { duration: warningTimeout } NumberAnimation { target: warning property: "topMarginForAnimation" to: -height duration: 330 easing.type: Easing.InCubic } } NumberAnimation { id: hideWarningAnimation target: warning property: "topMarginForAnimation" to: -height duration: 330 easing.type: Easing.InCubic } Rectangle { id: warning width: 370 height: 108 anchors.top: root.top property int topMarginForAnimation: -height anchors.topMargin: topMarginForAnimation radius: 4 color: Style.red Rectangle { id: iconRectangle width: 80 height: 98 radius: 4 color: Style.white anchors.top: parent.top anchors.topMargin: 5 anchors.left: parent.left anchors.leftMargin: 4 ColorizedImage { id: warningIcon source: warningsModel.get(root.warningId).warningImg anchors.centerIn: parent color: Style.red } } Text { id: warningText anchors.centerIn: parent anchors.horizontalCenterOffset: 34 text: warningsModel.get(root.warningId).text font.pixelSize: 24 font.family: "Barlow-mono" color: Style.white } } }