C
Qt Quick Ultralite Motorcycle Cluster Demo
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick 2.4
import QtQuickUltralite.Extras 2.0
Item {
id: root
width: 1076
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 list tachoPositions: [
Qt.point(0, 90),
Qt.point(56, 63),
Qt.point(116, 36),
Qt.point(176, 14),
Qt.point(236, 3),
Qt.point(306, 0),
Qt.point(377, 0),
Qt.point(447, 0),
Qt.point(518, 0),
Qt.point(588, 0),
Qt.point(659, 0),
Qt.point(729, 3),
Qt.point(800, 14),
Qt.point(860, 36),
Qt.point(920, 63),
Qt.point(980, 90)
]
readonly property list tachoPositionsDayMode: [
Qt.point(26, 111),
Qt.point(81, 84),
Qt.point(141, 57),
Qt.point(201, 33),
Qt.point(261, 26),
Qt.point(332, 24),
Qt.point(402, 24),
Qt.point(473, 24),
Qt.point(543, 24),
Qt.point(614, 24),
Qt.point(684, 24),
Qt.point(755, 26),
Qt.point(824, 35),
Qt.point(885, 59),
Qt.point(945, 86),
Qt.point(1005, 113)
]
readonly property list tachoImages: [
"qrc:///images/tacho/1.png",
"qrc:///images/tacho/2.png",
"qrc:///images/tacho/3.png",
"qrc:///images/tacho/4.png",
"qrc:///images/tacho/5.png",
"qrc:///images/tacho/6.png",
"qrc:///images/tacho/6.png",
"qrc:///images/tacho/6.png",
"qrc:///images/tacho/6.png",
"qrc:///images/tacho/6.png",
"qrc:///images/tacho/6.png",
"qrc:///images/tacho/5.png",
"qrc:///images/tacho/4.png",
"qrc:///images/tacho/3.png",
"qrc:///images/tacho/2.png",
"qrc:///images/tacho/1.png"
]
readonly property list tachoImagesDayLight: [
"qrc:///images/tacho/light/01.png",
"qrc:///images/tacho/light/02.png",
"qrc:///images/tacho/light/03.png",
"qrc:///images/tacho/light/04.png",
"qrc:///images/tacho/light/05.png",
"qrc:///images/tacho/light/06.png",
"qrc:///images/tacho/light/06.png",
"qrc:///images/tacho/light/06.png",
"qrc:///images/tacho/light/06.png",
"qrc:///images/tacho/light/06.png",
"qrc:///images/tacho/light/06.png",
"qrc:///images/tacho/light/05.png",
"qrc:///images/tacho/light/04.png",
"qrc:///images/tacho/light/03.png",
"qrc:///images/tacho/light/02.png",
"qrc:///images/tacho/light/01.png"
]
Repeater {
id: tachoImages
model: root.tachoPositions.length
ColorizedImage {
id: img
source: root.isDayMode ? root.tachoImagesDayLight[index] : root.tachoImages[index]
y: root.isDayMode ? root.tachoPositionsDayMode[index].y : root.tachoPositions[index].y
x: root.isDayMode ? root.tachoPositionsDayMode[index].x : root.tachoPositions[index].x
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
}
}
}
}
}