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: 717 property int rpm: 10000 property int rpmAnimationTime: 1000 Behavior on rpm { NumberAnimation { duration: rpmAnimationTime } } readonly property int changeOpacityAnimationDuration: 250 readonly property int changeColorAnimationDuration: 1000 property bool isDayMode: false property color normalColor: root.isDayMode ? Style.tachoElementDayMode : Style.tachoElementNightMode property color redColor: root.isDayMode ? Style.tachoElementRedDayMode : Style.tachoElementRedNightMode Behavior on normalColor { NumberAnimation { duration: 1000 } } Behavior on redColor { NumberAnimation { duration: 1000 } } readonly property ListModel tachoElements: ListModel { id: tachoImagesModel ListElement { yPos: 60 xPos: 0 yPosDayMode: 74 xPosDayMode: 17 img: "qrc:///images/small/tacho/1.png" imgDayMode: "qrc:///images/small/tacho/light/01.png" } ListElement { yPos: 42 xPos: 37 yPosDayMode: 56 xPosDayMode: 54 img: "qrc:///images/small/tacho/2.png" imgDayMode: "qrc:///images/small/tacho/light/02.png" } ListElement { yPos: 24 xPos: 77 yPosDayMode: 38 xPosDayMode: 94 img: "qrc:///images/small/tacho/3.png" imgDayMode: "qrc:///images/small/tacho/light/03.png" } ListElement { yPos: 9 xPos: 117 yPosDayMode: 22 xPosDayMode: 134 img: "qrc:///images/small/tacho/4.png" imgDayMode: "qrc:///images/small/tacho/light/04.png" } ListElement { yPos: 2 xPos: 157 yPosDayMode: 17 xPosDayMode: 174 img: "qrc:///images/small/tacho/5.png" imgDayMode: "qrc:///images/small/tacho/light/05.png" } ListElement { yPos: 0 xPos: 204 yPosDayMode: 16 xPosDayMode: 221 img: "qrc:///images/small/tacho/6.png" imgDayMode: "qrc:///images/small/tacho/light/06.png" } ListElement { yPos: 0 xPos: 251 yPosDayMode: 16 xPosDayMode: 268 img: "qrc:///images/small/tacho/6.png" imgDayMode: "qrc:///images/small/tacho/light/06.png" } ListElement { yPos: 0 xPos: 298 yPosDayMode: 16 xPosDayMode: 315 img: "qrc:///images/small/tacho/6.png" imgDayMode: "qrc:///images/small/tacho/light/06.png" } ListElement { yPos: 0 xPos: 345 yPosDayMode: 16 xPosDayMode: 362 img: "qrc:///images/small/tacho/6.png" imgDayMode: "qrc:///images/small/tacho/light/06.png" } ListElement { yPos: 0 xPos: 392 yPosDayMode: 16 xPosDayMode: 409 img: "qrc:///images/small/tacho/6.png" imgDayMode: "qrc:///images/small/tacho/light/06.png" } ListElement { yPos: 0 xPos: 439 yPosDayMode: 16 xPosDayMode: 456 img: "qrc:///images/small/tacho/6.png" imgDayMode: "qrc:///images/small/tacho/light/06.png" } ListElement { yPos: 2 xPos: 486 yPosDayMode: 17 xPosDayMode: 503 img: "qrc:///images/small/tacho/5.png" imgDayMode: "qrc:///images/small/tacho/light/05.png" } ListElement { yPos: 9 xPos: 533 yPosDayMode: 23 xPosDayMode: 549 img: "qrc:///images/small/tacho/4.png" imgDayMode: "qrc:///images/small/tacho/light/04.png" } ListElement { yPos: 24 xPos: 573 yPosDayMode: 39 xPosDayMode: 590 img: "qrc:///images/small/tacho/3.png" imgDayMode: "qrc:///images/small/tacho/light/03.png" } ListElement { yPos: 42 xPos: 613 yPosDayMode: 57 xPosDayMode: 630 img: "qrc:///images/small/tacho/2.png" imgDayMode: "qrc:///images/small/tacho/light/02.png" } ListElement { yPos: 60 xPos: 653 yPosDayMode: 75 xPosDayMode: 670 img: "qrc:///images/small/tacho/1.png" imgDayMode: "qrc:///images/small/tacho/light/01.png" } } Repeater { id: tachoImages model: tachoElements ColorizedImage { id: img source: root.isDayMode ? model.imgDayMode : model.img y: root.isDayMode ? model.yPosDayMode : model.yPos x: root.isDayMode ? model.xPosDayMode : model.xPos opacity: index * 1000 < root.rpm ? 1 : 0 color: index >= 13 ? root.redColor : root.normalColor transform: Scale { xScale: index > 8 ? -1 : 1 origin.x: img.implicitWidth / 2 } Behavior on opacity { NumberAnimation { duration: changeOpacityAnimationDuration } } Behavior on color { NumberAnimation { duration: changeColorAnimationDuration } } } } }