C

Qt Quick Ultralite Automotive Cluster Demo

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

import QtQuick 2.15
import Automotive 1.0

Item {
    property alias image: img.source
    property alias emptyText: t1.text
    property alias fullText: t2.text
    property real value
    property real animatedValue: value
    Behavior on animatedValue { NumberAnimation {
        easing.type: Easing.OutQuad;
        duration: MainModel.gaugesValueChangeDuration;
    }}

    width: 110
    height: 32
    Image {
        id: img
        anchors.bottom: parent.bottom;
    }
    Rectangle {
        id: rect
        color: "#002b66"
        height: 6;
        y: 20;
        anchors.left: parent.left;
        anchors.leftMargin: 28;
        anchors.right: parent.right;
        anchors.rightMargin: 12;

        Rectangle {
            color: Style.highlighterGreen;
            height: parent.height;
            width: parent.width * animatedValue;
        }
    }
    Text {
        id: t1;
        anchors.horizontalCenter: rect.left ;
        anchors.bottom: rect.top;
        anchors.bottomMargin: 4
        color: Style.lightPeriwinkle;
        anchors.rightMargin: 30
        y: 22;
        height: 16;
        font.pixelSize: 12;
        font.family: "Sarabun";
        horizontalAlignment: Text.AlignHCenter;
    }
    Text {
        id: t2;
        text: "1/1"
        anchors.horizontalCenter: rect.right;
        anchors.bottom: rect.top;
        anchors.bottomMargin: 4
        color: Style.lightPeriwinkle;
        anchors.rightMargin: 30
        y: 22;
        height: 16;
        font.pixelSize: 12;
        font.family: "Sarabun";
        horizontalAlignment: Text.AlignHCenter;
    }
}