From 782b861f02e5fa28490e9a306c6c42d69269257c Mon Sep 17 00:00:00 2001 From: Thomas Hartmann Date: Thu, 31 Aug 2017 13:07:49 +0200 Subject: Update qtcluster Adding numbers to speedometer in QML and animating them. Change-Id: Ic74f1b8b85a2776a3d7c9c9dec69d98e30bf7d67 Reviewed-by: Alessandro Portale --- doc/src/snippets/qtcluster/hybridqml.qrc | 2 + doc/src/snippets/qtcluster/images/leftgauge.png | Bin 52418 -> 61875 bytes .../qtcluster/qml/dash_hybrid/DashboardForm.ui.qml | 16 ++ .../qml/dash_hybrid/gauges/NumberLabel.qml | 9 + .../qml/dash_hybrid/gauges/SpeedometerNumbers.qml | 267 +++++++++++++++++++++ 5 files changed, 294 insertions(+) create mode 100644 doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/NumberLabel.qml create mode 100644 doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/SpeedometerNumbers.qml (limited to 'doc/src/snippets') diff --git a/doc/src/snippets/qtcluster/hybridqml.qrc b/doc/src/snippets/qtcluster/hybridqml.qrc index 46f47078b..08f33bd5d 100644 --- a/doc/src/snippets/qtcluster/hybridqml.qrc +++ b/doc/src/snippets/qtcluster/hybridqml.qrc @@ -21,5 +21,7 @@ qml/dash_hybrid/Gadget.qml qml/dash_hybrid/gauges/LargeMeter.qml qml/dash_hybrid/gauges/SmallMeter.qml + qml/dash_hybrid/gauges/SpeedometerNumbers.qml + qml/dash_hybrid/gauges/NumberLabel.qml diff --git a/doc/src/snippets/qtcluster/images/leftgauge.png b/doc/src/snippets/qtcluster/images/leftgauge.png index 323804849..24d6c0000 100644 Binary files a/doc/src/snippets/qtcluster/images/leftgauge.png and b/doc/src/snippets/qtcluster/images/leftgauge.png differ diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardForm.ui.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardForm.ui.qml index 8897836c2..0d7bc535f 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardForm.ui.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardForm.ui.qml @@ -65,6 +65,7 @@ DashboardBackground { anchors.fill: parent // Fuelmeter + SmallMeter { id: fuelMeter x: 432 @@ -74,6 +75,7 @@ DashboardBackground { } // Batterymeter + SmallMeter { id: batteryMeter x: 433 @@ -90,14 +92,17 @@ DashboardBackground { } // Consumptionmeter + ConsumptionMeter { opacity: dashboardEntity.meterOpacity } // Temperaturemeter + TemperatureMeter { opacity: dashboardEntity.meterOpacity } // Turbometer + SmallMeter { id: smallMeter x: 741 @@ -114,16 +119,26 @@ DashboardBackground { } // Fpsmeter + FpsMeter { opacity: dashboardEntity.meterOpacity } // Bottom Panel + BottomPanel { id: bottompanel y: 402 } + SpeedometerNumbers { + id: speedometerNumbers + x: 103 + y: 73 + value: speedometer.actualValue + opacity: dashboardEntity.meterOpacity + } + LargeMeter { id: speedometer @@ -176,4 +191,5 @@ DashboardBackground { color: tachometer.actualValue <= 4000 ? "white" : "red" opacity: dashboardEntity.meterOpacity } + } diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/NumberLabel.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/NumberLabel.qml new file mode 100644 index 000000000..32b9630df --- /dev/null +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/NumberLabel.qml @@ -0,0 +1,9 @@ +import QtQuick 2.0 + +Text { + id: text_0 + color: "#c6c6c6" + text: "0" + font.family: "Verdana" + font.pixelSize: 14 +} diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/SpeedometerNumbers.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/SpeedometerNumbers.qml new file mode 100644 index 000000000..f92e86768 --- /dev/null +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/SpeedometerNumbers.qml @@ -0,0 +1,267 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: root + width: 338 + height: 338 + + property real value: 5 + property real scaleFactor: 1.3 + + NumberLabel { + id: text_0 + x: 64 + y: 237 + } + + NumberLabel { + id: text_20 + x: 39 + y: 184 + text: "20" + } + + NumberLabel { + id: text_40 + x: 40 + y: 126 + text: "40" + } + + NumberLabel { + id: text_60 + x: 67 + y: 78 + text: "60" + } + + NumberLabel { + id: text_80 + x: 112 + y: 45 + text: "80" + } + + NumberLabel { + id: text_100 + x: 158 + y: 35 + text: "100" + } + + NumberLabel { + id: text_120 + x: 211 + y: 45 + text: "120" + } + + NumberLabel { + id: text_140 + x: 250 + y: 78 + text: "140" + } + + NumberLabel { + id: text_160 + x: 277 + y: 126 + text: "160" + } + + NumberLabel { + id: text_180 + x: 279 + y: 185 + text: "180" + } + + NumberLabel { + id: text_200 + x: 256 + y: 237 + text: "200" + } + + states: [ + State { + name: "0" + + when: root.value < 10 + + PropertyChanges { + target: text_0 + color: "#0098c3" + scale: 1.2 + } + }, + State { + name: "20" + + when: root.value > 10 && root.value < 30 + + PropertyChanges { + target: text_20 + color: "#0098c3" + scale: root.scaleFactor + } + }, + State { + name: "40" + + when: root.value > 30 && root.value < 50 + + PropertyChanges { + target: text_40 + color: "#0098c3" + scale: root.scaleFactor + } + }, + State { + name: "60" + + when: root.value > 50 && root.value < 70 + + PropertyChanges { + target: text_60 + color: "#0098c3" + scale: root.scaleFactor + } + }, + State { + name: "80" + + when: root.value > 70 && root.value < 90 + + PropertyChanges { + target: text_80 + color: "#0098c3" + scale: root.scaleFactor + } + }, + State { + name: "100" + + when: root.value > 90 && root.value < 110 + + PropertyChanges { + target: text_100 + color: "#a31e21" + scale: root.scaleFactor + } + }, + State { + name: "120" + + when: root.value > 110 && root.value < 130 + + PropertyChanges { + target: text_120 + color: "#a31e21" + scale: root.scaleFactor + } + }, + State { + name: "140" + + when: root.value > 130 && root.value < 150 + + PropertyChanges { + target: text_140 + color: "#a31e21" + scale: root.scaleFactor + } + }, + State { + name: "160" + + when: root.value > 150 && root.value < 170 + + PropertyChanges { + target: text_160 + color: "#a31e21" + scale: root.scaleFactor + } + }, + State { + name: "180" + + when: root.value > 170 && root.value < 190 + + PropertyChanges { + target: text_180 + color: "#a31e21" + scale: root.scaleFactor + } + }, + State { + name: "200" + + when: root.value > 190 + + PropertyChanges { + target: text_200 + color: "#a31e21" + scale: root.scaleFactor + } + } + ] + + transitions: Transition { + from: "*" + to: "*" + + ParallelAnimation { + NumberAnimation { + properties: "scale" + duration: 400 + } + + ColorAnimation { + properties: "color" + duration: 400 + } + } + } +} -- cgit v1.2.3