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
BaseGauge {
id: root;
property alias textLabel: label.text;
property alias valueText: textValue.text;
property double labelOpacity: 1
property int labelHorizontalCenterOffset: 0
property int labelVerticalOffset: 0
property int valueVerticalCenterOffset: -7
property int valueHorizontalCenterOffset: 0
needleOffsetX: -1
needleOffsetY: -38
highlightOffsetX: 1
highlightOffsetY: -22
gaugeSource: "images/gauge-gauge-frame-sport-center.png"
needleSource: sportNeedle
highlightSource: sportHighlight
Repeater {
model: 11;
delegate: Text {
visible: index <= Math.ceil(maxValue / interval); // Ideally, the model would be dinamic and this not needed
property real angle: minAngle + 2 * Math.PI * index * interval / maxValue * (maxAngle - minAngle) / 360;
x: (root.width - width) / 2 + (root.left ? -1 : 1) * Math.sin(angle) * root.scale * 135;
y: (root.height - height) / 2 + Math.cos(angle) * root.scale * 135;
text: index * interval;
color: Style.lightPeriwinkle;
font.pixelSize: 12;
font.bold: false;
font.family: "Sarabun";
opacity: {
var distance = Math.abs(animatedValue/interval - index);
var alphaResult = 1.5 - (distance / 1.25);
return Math.min(Math.max(alphaResult, 0), 1);
}
Behavior on opacity { NumberAnimation { duration: 150; } }
}
}
Text {
id: textValue
anchors.centerIn: parent
anchors.verticalCenterOffset: valueVerticalCenterOffset * root.scale
anchors.horizontalCenterOffset: valueHorizontalCenterOffset
opacity: labelOpacity
horizontalAlignment: Text.AlignHCenter
text: value.toFixed(0);
color: Style.lightPeriwinkle;
font.pixelSize: 64;
font.bold: true;
font.family: "Sarabun";
Behavior on opacity { NumberAnimation { duration: 250 } }
}
Text {
id: label
horizontalAlignment: Text.AlignHCenter
anchors.horizontalCenter: parent.horizontalCenter
anchors.horizontalCenterOffset: labelHorizontalCenterOffset
anchors.topMargin: labelVerticalOffset
anchors.top: textValue.bottom;
opacity: labelOpacity
color: Style.lightPeriwinkle;
font.pixelSize: 16;
font.bold: false;
font.family: "Sarabun";
}
}