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
                }
            }
        }
    }
}