C

Qt Quick Ultralite Motorcycle Cluster Demo

/****************************************************************************** ** ** Copyright (C) 2020 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 QtQuickUltralite.Extras 2.0 Item { id: root property bool active property int speedValue property int speedValueVisible readonly property int verticalOffsetRotation: 50 readonly property int horizontalOffsetRotation: -50 readonly property int offsetRotation2digits: 42 readonly property int offsetRotation3digits: 83 readonly property int rotationOrigin: 83/2 width: 300 height: 300 Timer { id: updateTimer interval: 300 running: true repeat: true onTriggered: { speedValueVisible = speedValue textValue.text = speedValue.toString() } } Text { id: textValue anchors.centerIn: parent anchors.horizontalCenterOffset: root.speedValueVisible < 10 ? horizontalOffsetRotation : ( root.speedValueVisible < 100 ) ? offsetRotation2digits+horizontalOffsetRotation : offsetRotation3digits+horizontalOffsetRotation anchors.verticalCenterOffset: root.speedValueVisible < 10 ? verticalOffsetRotation : ( root.speedValueVisible < 100 ) ? offsetRotation2digits+verticalOffsetRotation : offsetRotation3digits+verticalOffsetRotation font.pixelSize:149 // smaller size than in the design, because if the size is bigger there is an error in QUL: qul_fonts.cpp:12539:1: warning: overflow in implicit constant conversion [-Woverflow] font.italic: true font.bold: true font.family: "Barlow-mono" color: Style.white transform: Rotation { angle: -90; origin.x: root.rotationOrigin origin.y: root.rotationOrigin } } StaticText { id: unit anchors.centerIn: parent anchors.horizontalCenterOffset: 83 anchors.verticalCenterOffset: 18 font.pixelSize: 32 font.family: "Barlow-mono" color: Style.white text: "km/h" transform: Rotation { angle: -90; origin.x: unit.width/2; origin.y: unit.height - unit.width/2} } function hideElements() { root.opacity = 0 } onActiveChanged: { if(active) { startAnimation() } else { hiddingAnimation() } } function startAnimation() { showAnimation.start() } function hiddingAnimation() { hideAnimation.start() } NumberAnimation { id: hideAnimation target: root; property: "opacity"; to:0; duration: 400; easing.type: Easing.OutQuad } NumberAnimation { id: showAnimation target: root; property: "opacity"; from: 0; to:1; duration: 400; easing.type: Easing.OutQuad } Component.onCompleted: hideElements() }