C
Qt Quick Ultralite traveo_t2g_effects Example
/****************************************************************************** ** ** Copyright (C) 2021 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Quick Ultralite module. ** ** $QT_BEGIN_LICENSE:COMM$ ** ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see http://www.qt.io/terms-conditions. For further ** information use the contact form at http://www.qt.io/contact-us. ** ** $QT_END_LICENSE$ ** ******************************************************************************/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 } ] } }