C

Qt Quick Ultralite instrument_cluster Example

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

Rectangle {
    color: "#00414A"
    Text {
        id: speedometer
        color: "#2CDE85"
        anchors.centerIn: parent

        font.weight: Font.DemiBold
        font.pixelSize: 90
        text: VehicleStatus.speed
    }
    Text {
        color: "#28C878"
        anchors.horizontalCenter: speedometer.horizontalCenter
        anchors.bottom: speedometer.top
        anchors.bottomMargin: -36

        font.weight: Font.Light
        font.pixelSize: 22
        text: "km/h"
    }
    Text {
        id: leftBlinker
        opacity: 0.0
        color: "#2CDE85"
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.topMargin: 20
        anchors.leftMargin: 40
        font.weight: Font.DemiBold
        font.pixelSize: 60
        text: "⇦"

        Behavior on opacity { NumberAnimation { duration: 500; easing.type: Easing.InCubic } }
    }
    Text {
        id: rightBlinker
        opacity: 0.0
        color: "#2CDE85"
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.topMargin: 20
        anchors.rightMargin: 40
        font.weight: Font.DemiBold
        font.pixelSize: 60
        text: "⇨"

        Behavior on opacity { NumberAnimation { duration: 500; easing.type: Easing.InCubic } }
    }
    Text {
        id: tripMeter
        color: "#2CDE85"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5

        font.weight: Font.DemiBold
        font.pixelSize: 24
        text: VehicleStatus.tripMeter.toFixed(1) + " km"
    }
    Text {
        color: "#28C878"
        anchors.horizontalCenter: speedometer.horizontalCenter
        anchors.bottom: tripMeter.top
        anchors.bottomMargin: -6

        font.weight: Font.Light
        font.pixelSize: 22
        text: "Trip"
    }

    VehicleStatus.onLeftBlinkerStateChange: {
        leftBlinker.opacity = leftBlinkerState ? 1.0 : 0.0
    }
    VehicleStatus.onRightBlinkerStateChange: {
        rightBlinker.opacity = rightBlinkerState ? 1.0 : 0.0
    }
}