C
Qt Quick Ultralite traveo_t2g_effects Example
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick 2.15
import Automotive 1.0
import TviiEffects 1.0
Item {
id: root;
property real value;
property int minAngle: 0
property int needleOffsetX: 0
property int needleOffsetY: 0
property int highlightOffsetX: 0
property int highlightOffsetY: 0
property int maxValue : 1; // The maximum value shown in this gauge
property int maxAngle : 200; // The angle in degrees at which the needle is when the value is maxValue
width: 340;
height: 340;
property int transformOriginX: 60
property real scale: 1;
property int interval: maxValue > 140 ? 20 : maxValue > 50 ? 10 : 1;
property real animatedValue: value;
Behavior on animatedValue { NumberAnimation {
easing.type: Easing.OutQuad;
duration: 500
} }
Image {
id: bg;
width: implicitWidth
height: implicitHeight
anchors.centerIn: parent;
source: "images/gauge-gauge-frame.png"
}
property real angle: minAngle/0.0174532925 + 180 + animatedValue * (maxAngle - minAngle) / maxValue
Image {
id: highlight
x: 112 + highlightOffsetX
y: -3 + highlightOffsetY
width: implicitWidth
height: implicitHeight
source: "images/highlight-normal.png"
transform: [
Rotation {
origin.x: 340 / 2 - highlight.x;
origin.y: 340 / 2 - highlight.y - 0.5;
angle: root.angle
},
Scale {
origin.x: transformOriginX - highlight.x
origin.y: 340 - highlight.y - 0.5
xScale: root.scale
yScale: root.scale
},
Translate {
y: 0.5
}
]
}
NeedleTrail {
anchors.centerIn: parent
width: 300
height: 300
mask: "images/needle-mask.png"
rotation: root.angle
}
Image {
id: needle
x: 171 - needle.width/2 + needleOffsetX
y: 16 + needleOffsetY
width: implicitWidth
height: implicitHeight
source: "images/needle-normal.png"
transform: [
Rotation {
origin.x: 340 / 2 - needle.x;
origin.y: 340 / 2 - needle.y;
angle: root.angle
},
Scale {
origin.x: transformOriginX - needle.x
origin.y: 340 - needle.y
xScale: root.scale
yScale: root.scale
}
]
}
}