C

Qt Quick Ultralite Motorcycle Cluster Demo

// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick 2.4

Row {
    id: root
    width: 330
    height: 60
    spacing: 30

    property bool active

    property bool engineFailureActive
    property bool batteryFailureActive
    property bool highBeamActive
    property bool engineOilActive

    property bool engineFailureActiveForStartupAnimation
    property bool batteryFailureActiveForStartupAnimation
    property bool highBeamActiveForStartupAnimation
    property bool engineOilActiveForStartupAnimation

    property bool isDayMode: false

    TellTalesIndicator {
        id: highBeamTT
        source: "qrc:///images/telltales/high-beams.png"
        active: startUpAnimation.running ? highBeamActiveForStartupAnimation : highBeamActive
        activeColor: Style.telltallesBlue
        isDayMode: root.isDayMode
    }

    TellTalesIndicator {
        id: engineFailureTT
        source: "qrc:///images/telltales/engine-failure.png"
        active: startUpAnimation.running ? engineFailureActiveForStartupAnimation : engineFailureActive
        isDayMode: root.isDayMode
    }

    TellTalesIndicator {
        id: batteryTT
        source: "qrc:///images/telltales/battery.png"
        active: startUpAnimation.running ? batteryFailureActiveForStartupAnimation : batteryFailureActive
        isDayMode: root.isDayMode
    }

    TellTalesIndicator {
        id: engineOilTT
        source: "qrc:///images/telltales/engine-oil.png"
        active: startUpAnimation.running ? engineOilActiveForStartupAnimation : engineOilActive
        isDayMode: root.isDayMode
    }

    function hideElements() {
        highBeamTT.isVisible = false
        engineFailureTT.isVisible = false
        batteryTT.isVisible = false
        engineOilTT.isVisible = false

        highBeamActiveForStartupAnimation = false
        engineFailureActiveForStartupAnimation = false
        batteryFailureActiveForStartupAnimation = false
        engineOilActiveForStartupAnimation = false
    }

    onActiveChanged: {
        if (active) {
            startAnimation()
        } else {
            hideElements()
        }
    }

    function startAnimation() {
        startUpAnimation.start()
    }

    readonly property int telltaleDalay: 200

    SequentialAnimation {
        id: startUpAnimation
        ScriptAction {
            script: {
                highBeamTT.isVisible = true
                highBeamActiveForStartupAnimation = true
            }
        }
        PauseAnimation {
            duration: telltaleDalay
        }
        ScriptAction {
            script: {
                engineFailureTT.isVisible = true
                engineFailureActiveForStartupAnimation = true
            }
        }
        PauseAnimation {
            duration: telltaleDalay
        }
        ScriptAction {
            script: {
                batteryTT.isVisible = true
                batteryFailureActiveForStartupAnimation = true
            }
        }
        PauseAnimation {
            duration: telltaleDalay
        }
        ScriptAction {
            script: {
                engineOilTT.isVisible = true
                engineOilActiveForStartupAnimation = true
            }
        }

        PauseAnimation {
            duration: 4000
        }

        ScriptAction {
            script: {
                engineOilActiveForStartupAnimation = false
            }
        }
        PauseAnimation {
            duration: telltaleDalay
        }
        ScriptAction {
            script: {
                batteryFailureActiveForStartupAnimation = false
            }
        }
        PauseAnimation {
            duration: telltaleDalay
        }
        ScriptAction {
            script: {
                engineFailureActiveForStartupAnimation = false
            }
        }
        PauseAnimation {
            duration: telltaleDalay
        }
        ScriptAction {
            script: {
                highBeamActiveForStartupAnimation = false
            }
        }
    }

    Component.onCompleted: root.hideElements()
}