diff options
| author | Thomas Hartmann <thomas.hartmann@qt.io> | 2017-09-12 12:00:40 +0200 |
|---|---|---|
| committer | Thomas Hartmann <thomas.hartmann@qt.io> | 2017-09-12 15:35:47 +0000 |
| commit | e8ebada9ebe7e795559a3a15fb222eb55ed89692 (patch) | |
| tree | 09a9b34af9dad7f45a3fc12907828782ef908a21 /doc/src/snippets/qtcluster | |
| parent | 782b861f02e5fa28490e9a306c6c42d69269257c (diff) | |
Update qtcluster with new graphical design
Replacing the graphical design with a new one and adjusting the QML.
Change-Id: I030bccf619675ed561077c2dcfaee6188bfbf5fa
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>
Diffstat (limited to 'doc/src/snippets/qtcluster')
33 files changed, 277 insertions, 279 deletions
diff --git a/doc/src/snippets/qtcluster/hybridimages.qrc b/doc/src/snippets/qtcluster/hybridimages.qrc index e14c7604c..77e932a67 100644 --- a/doc/src/snippets/qtcluster/hybridimages.qrc +++ b/doc/src/snippets/qtcluster/hybridimages.qrc @@ -14,6 +14,7 @@ <file>images/Icon_TurnLeft_ON_small.png</file> <file>images/greenglow.png</file> <file>images/knob.png</file> + <file>images/knob_small.png</file> <file>images/left.png</file> <file>images/leftgauge.png</file> <file>images/redglow.png</file> @@ -21,6 +22,6 @@ <file>images/rightgauge.png</file> <file>images/temperature.png</file> <file>images/center.png</file> - <file>images/SpeedometerNeedleGreen.png</file> + <file>images/SpeedometerNeedleSmall.png</file> </qresource> </RCC> diff --git a/doc/src/snippets/qtcluster/hybridqml.qrc b/doc/src/snippets/qtcluster/hybridqml.qrc index 08f33bd5d..bc82b0184 100644 --- a/doc/src/snippets/qtcluster/hybridqml.qrc +++ b/doc/src/snippets/qtcluster/hybridqml.qrc @@ -5,7 +5,6 @@ <file>qml/dash_hybrid/Dashboard.qml</file> <file>qml/dash_hybrid/DashboardFrame.qml</file> <file>qml/dash_hybrid/DashboardView.qml</file> - <file>qml/dash_hybrid/gauges/ConsumptionMeter.qml</file> <file>qml/dash_hybrid/gauges/FpsMeter.qml</file> <file>qml/dash_hybrid/gauges/TemperatureMeter.qml</file> <file>qml/dash_hybrid/gauges/TurboMeter.qml</file> diff --git a/doc/src/snippets/qtcluster/images/BottomPanel.png b/doc/src/snippets/qtcluster/images/BottomPanel.png Binary files differindex 8f1d908dc..5f6d92ca5 100644 --- a/doc/src/snippets/qtcluster/images/BottomPanel.png +++ b/doc/src/snippets/qtcluster/images/BottomPanel.png diff --git a/doc/src/snippets/qtcluster/images/Cluster8Gauges.png b/doc/src/snippets/qtcluster/images/Cluster8Gauges.png Binary files differindex d750a54ef..710b0b5d2 100644 --- a/doc/src/snippets/qtcluster/images/Cluster8Gauges.png +++ b/doc/src/snippets/qtcluster/images/Cluster8Gauges.png diff --git a/doc/src/snippets/qtcluster/images/Icon_TurnLeft_OFF_small.png b/doc/src/snippets/qtcluster/images/Icon_TurnLeft_OFF_small.png Binary files differindex b0867cdc2..5e01a9fdd 100644 --- a/doc/src/snippets/qtcluster/images/Icon_TurnLeft_OFF_small.png +++ b/doc/src/snippets/qtcluster/images/Icon_TurnLeft_OFF_small.png diff --git a/doc/src/snippets/qtcluster/images/Icon_TurnLeft_ON_small.png b/doc/src/snippets/qtcluster/images/Icon_TurnLeft_ON_small.png Binary files differindex 20c0e93be..1a0bfa99e 100644 --- a/doc/src/snippets/qtcluster/images/Icon_TurnLeft_ON_small.png +++ b/doc/src/snippets/qtcluster/images/Icon_TurnLeft_ON_small.png diff --git a/doc/src/snippets/qtcluster/images/SpeedometerNeedle.png b/doc/src/snippets/qtcluster/images/SpeedometerNeedle.png Binary files differindex d5dcc6000..6310a37ce 100644 --- a/doc/src/snippets/qtcluster/images/SpeedometerNeedle.png +++ b/doc/src/snippets/qtcluster/images/SpeedometerNeedle.png diff --git a/doc/src/snippets/qtcluster/images/SpeedometerNeedleSmall.png b/doc/src/snippets/qtcluster/images/SpeedometerNeedleSmall.png Binary files differnew file mode 100644 index 000000000..1ba484f57 --- /dev/null +++ b/doc/src/snippets/qtcluster/images/SpeedometerNeedleSmall.png diff --git a/doc/src/snippets/qtcluster/images/center.png b/doc/src/snippets/qtcluster/images/center.png Binary files differindex aadbdaf9a..7a10220ad 100644 --- a/doc/src/snippets/qtcluster/images/center.png +++ b/doc/src/snippets/qtcluster/images/center.png diff --git a/doc/src/snippets/qtcluster/images/greenglow.png b/doc/src/snippets/qtcluster/images/greenglow.png Binary files differindex 34a89f0f3..84d4dda6c 100644 --- a/doc/src/snippets/qtcluster/images/greenglow.png +++ b/doc/src/snippets/qtcluster/images/greenglow.png diff --git a/doc/src/snippets/qtcluster/images/knob.png b/doc/src/snippets/qtcluster/images/knob.png Binary files differindex 4cd98ae07..7de0ea732 100644 --- a/doc/src/snippets/qtcluster/images/knob.png +++ b/doc/src/snippets/qtcluster/images/knob.png diff --git a/doc/src/snippets/qtcluster/images/knob_small.png b/doc/src/snippets/qtcluster/images/knob_small.png Binary files differnew file mode 100644 index 000000000..6afa72dd9 --- /dev/null +++ b/doc/src/snippets/qtcluster/images/knob_small.png diff --git a/doc/src/snippets/qtcluster/images/left.png b/doc/src/snippets/qtcluster/images/left.png Binary files differindex f423cda56..65606758e 100644 --- a/doc/src/snippets/qtcluster/images/left.png +++ b/doc/src/snippets/qtcluster/images/left.png diff --git a/doc/src/snippets/qtcluster/images/leftgauge.png b/doc/src/snippets/qtcluster/images/leftgauge.png Binary files differindex 24d6c0000..3bd6bb53b 100644 --- a/doc/src/snippets/qtcluster/images/leftgauge.png +++ b/doc/src/snippets/qtcluster/images/leftgauge.png diff --git a/doc/src/snippets/qtcluster/images/right.png b/doc/src/snippets/qtcluster/images/right.png Binary files differindex 279284d96..99e7a042f 100644 --- a/doc/src/snippets/qtcluster/images/right.png +++ b/doc/src/snippets/qtcluster/images/right.png diff --git a/doc/src/snippets/qtcluster/images/rightgauge.png b/doc/src/snippets/qtcluster/images/rightgauge.png Binary files differindex 3f80a1cb8..17e849f54 100644 --- a/doc/src/snippets/qtcluster/images/rightgauge.png +++ b/doc/src/snippets/qtcluster/images/rightgauge.png diff --git a/doc/src/snippets/qtcluster/images/temperature.png b/doc/src/snippets/qtcluster/images/temperature.png Binary files differindex 83d889f53..8cf232fa7 100644 --- a/doc/src/snippets/qtcluster/images/temperature.png +++ b/doc/src/snippets/qtcluster/images/temperature.png diff --git a/doc/src/snippets/qtcluster/qml/ValueSource.qml b/doc/src/snippets/qtcluster/qml/ValueSource.qml index a63446543..eb95d8134 100644 --- a/doc/src/snippets/qtcluster/qml/ValueSource.qml +++ b/doc/src/snippets/qtcluster/qml/ValueSource.qml @@ -56,6 +56,8 @@ Item { property bool runningInDesigner: false + property bool seatBelt: false + property var consumption: [300, 600, 700, 800, 900, 700, 600, 300, 50, 50, -100, 50, -100, -150, -200, 50, 150, 200, 300, 200, 300, 200, 500, 50, -100, -100, -150, -80, 50, 300, 600, 700, 800, 600, 700, 300, 50, 50] @@ -283,7 +285,7 @@ Item { } property int simuRpm: fastBootDemo ? kph * 40 : kph * 150 - property double simuTemperature: fastBootDemo ? kph * .25 + 60. : kph * .5 + 50. + property double simuTemperature: kph * .25 + 60. // In normal Car UI mode only speed is animated based on gps data // In automatic demo mode rpm, turbo, consumption and engine temperature are based on speed diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/BottomPanel.ui.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/BottomPanel.ui.qml index 40fe5a6e0..7fdd736ff 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/BottomPanel.ui.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/BottomPanel.ui.qml @@ -41,6 +41,7 @@ import QtQuick 2.6 import ClusterDemo 1.0 import ".." import QtQuick.Extras 1.4 +import QtGraphicalEffects 1.0 Item { id: bottomPanel @@ -52,10 +53,11 @@ Item { anchors.horizontalCenter: parent.horizontalCenter width: bottomPanelImage.width - height: bottomPanelImage.height + height: bottomPanelImage.height - 24 Image { id: bottomPanelImage + y: -24 source: "image://etc/BottomPanel.png" } @@ -79,6 +81,15 @@ Item { color: ValueSource.engineTemperature >= 100.0 ? bottomPanel.iconRed : bottomPanel.iconDark source: "qrc:/iso-icons/iso_grs_7000_4_0246.dat" + + layer.enabled: ValueSource.engineTemperature >= 100.0 + layer.effect: Glow { + radius: 5 + samples: 16 + color: bottomPanel.iconRed + cached: true + spread: 0.15 + } } SafeRendererPicture { @@ -91,6 +102,14 @@ Item { color: ValueSource.batteryLevel <= 25.0 ? bottomPanel.iconRed : bottomPanel.iconDark source: "qrc:/iso-icons/iso_grs_7000_4_0247.dat" + layer.enabled: ValueSource.batteryLevel <= 25.0 + layer.effect: Glow { + radius: 5 + samples: 16 + color: bottomPanel.iconRed + cached: true + spread: 0.15 + } } SafeRendererPicture { @@ -102,7 +121,15 @@ Item { anchors.right: iconParkingBrake.left color: ValueSource.fuelLevel <= 20.0 ? bottomPanel.iconRed : bottomPanel.iconDark - source: "qrc:/iso-icons/iso_grs_7000_4_0245.dat" + source: "qrc:/iso-icons/iso_grs_7000_4_0245.dat" // This is available in all editors. + layer.enabled: ValueSource.fuelLevel <= 20.0 + layer.effect: Glow { + radius: 5 + samples: 16 + color: bottomPanel.iconRed + cached: true + spread: 0.15 + } } SafeRendererPicture { @@ -114,6 +141,8 @@ Item { anchors.right: textTime.left anchors.rightMargin: 3 + color: bottomPanel.iconDark + source: "qrc:/iso-icons/iso_grs_7000_4_0238.dat" } @@ -136,6 +165,8 @@ Item { anchors.left: textTime.right anchors.leftMargin: bottomPanel.iconMargin + color: bottomPanel.iconDark + source: "qrc:/iso-icons/iso_grs_7000_4_0456.dat" } @@ -150,6 +181,14 @@ Item { color: ValueSource.flatTire ? bottomPanel.iconYellow : bottomPanel.iconDark source: "qrc:/iso-icons/iso_grs_7000_4_1434A.dat" + layer.enabled: ValueSource.flatTire + layer.effect: Glow { + radius: 6 + samples: 16 + color: bottomPanel.iconYellow + cached: true + spread: 0.2 + } } SafeRendererPicture { @@ -159,6 +198,7 @@ Item { height: 30 anchors.verticalCenter: textTime.verticalCenter anchors.left: iconTyre.right + color: bottomPanel.iconDark source: "qrc:/iso-icons/iso_grs_7000_4_1555.dat" } @@ -173,6 +213,14 @@ Item { color: ValueSource.seatBelt ? bottomPanel.iconRed : bottomPanel.iconDark source: "qrc:/iso-icons/iso_grs_7000_4_0249.dat" + layer.enabled: ValueSource.seatBelt + layer.effect: Glow { + radius: 5 + samples: 16 + color: bottomPanel.iconRed + cached: true + spread: 0.15 + } } TurnIndicator { diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/CenterViewCarInfo.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/CenterViewCarInfo.qml index 590ef1beb..9438b5648 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/CenterViewCarInfo.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/CenterViewCarInfo.qml @@ -54,7 +54,7 @@ Item { CarInfoField { title: "Total distance" - value: carinfoContainer.total.toString() + value: carinfoContainer.total.toFixed().toString() unit: "km" } diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/CenterViewMusic.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/CenterViewMusic.qml index 41df21852..1fcc1ba00 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/CenterViewMusic.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/CenterViewMusic.qml @@ -42,6 +42,7 @@ Item { property int defaultYPos: 400 Rectangle { + y: 10 id: image width: 124 height: 124 @@ -61,7 +62,7 @@ Item { Text { id: title anchors.top: image.bottom - anchors.topMargin: 10 + anchors.topMargin: 6 anchors.horizontalCenter: image.horizontalCenter text: musicContainer.currentSong color: "gray" diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/Dashboard.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/Dashboard.qml index ae1e0c93b..b94500c11 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/Dashboard.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/Dashboard.qml @@ -64,6 +64,7 @@ DashboardForm tachometer.actualValue: animationStopped ? ValueSource.rpm : -needleRotation speedText.text: speedometer.actualValue.toFixed().toString() + consumptionMeter.actualValue: 2.0 + ValueSource.rpm / 320.45 // @@ -80,7 +81,7 @@ DashboardForm target: dashboardEntity property: "bottomPanelY" from: 480 - to: 402 + to: 412 duration: 1000 * timeScaleMultiplier easing.type: Easing.InCirc } diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardBackground.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardBackground.qml index 2c46b7fe8..6b9f68b96 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardBackground.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardBackground.qml @@ -110,18 +110,6 @@ DashboardBackgroundForm { ParallelAnimation { PropertyAnimation { - target: dashboard.gadget - properties: "opacity, scale" - duration: 1000 - } - PropertyAnimation { - target: dashboard.gadget2 - properties: "opacity, scale" - duration: 1000 - } - } - ParallelAnimation { - PropertyAnimation { target: dashboard.leftGadget properties: "opacity, scale" duration: 400 diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardBackgroundForm.ui.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardBackgroundForm.ui.qml index 8b9b5f34f..ef38f8f38 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardBackgroundForm.ui.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardBackgroundForm.ui.qml @@ -1,4 +1,3 @@ - /**************************************************************************** ** ** Copyright (C) 2015 The Qt Company Ltd. @@ -45,7 +44,6 @@ Item { id: root width: 1280 height: 480 - property alias gadget2: gadget2 property alias center: center property alias rightGadget: rightGadget @@ -54,7 +52,6 @@ Item { property alias image: image property alias rightGauge: rightGauge property alias leftGauge: leftGauge - property alias gadget: gadget property real gaugeOpacity: 1 @@ -64,29 +61,38 @@ Item { Image { id: center - x: 574 - y: 30 + x: 568 + y: 19 source: "image://etc/center.png" + + Image { + x: -140 + y: -122 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + + source: "image://etc/knob_small.png" + } } Image { id: rightGadget - x: 732 - y: 34 + x: 718 + y: 29 source: "image://etc/right.png" } Image { id: leftGadget - x: 419 - y: 32 + x: 417 + y: 28 source: "image://etc/left.png" } Image { id: bar - x: 534 - y: 143 + x: 531 + y: 159 source: "image://etc/temperature.png" } } @@ -96,12 +102,6 @@ Item { x: 318 y: 393 source: "image://etc/leftgauge.png" - - Gadget { - id: gadget - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - } } Image { @@ -109,12 +109,6 @@ Item { x: 652 y: 394 source: "image://etc/rightgauge.png" - - Gadget { - id: gadget2 - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - } } states: [ State { @@ -152,12 +146,6 @@ Item { } PropertyChanges { - target: gadget - scale: 0.8 - opacity: 0 - } - - PropertyChanges { target: leftGadget scale: 0.8 opacity: 0 @@ -180,11 +168,6 @@ Item { scale: 0.8 opacity: 0 } - - PropertyChanges { - target: gadget2 - opacity: 0 - } }, State { name: "normal" @@ -197,8 +180,8 @@ Item { PropertyChanges { target: rightGauge - x: 841 - y: 74 + x: 832 + y: 71 } } ] 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 0d7bc535f..eb2aef4c6 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardForm.ui.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardForm.ui.qml @@ -55,31 +55,24 @@ DashboardBackground { property alias tachometer: tachometer property alias speedText: speedText property alias smallMeter: smallMeter - - gadget2.green: tachometer.actualValue < 4000 - gadget2.value: tachometer.actualValue - gadget2.maxValue: 8000 - gadget.green: speedometer.actualValue < 100 - gadget.value: speedometer.actualValue + property alias consumptionMeter: consumptionMeter anchors.fill: parent // Fuelmeter - SmallMeter { id: fuelMeter - x: 432 - y: 47 + x: 740 + y: 45 value: ValueSource.fuelLevel opacity: dashboardEntity.meterOpacity } // Batterymeter - SmallMeter { id: batteryMeter - x: 433 - y: 47 + x: 739 + y: 45 value: ValueSource.batteryLevel opacity: dashboardEntity.meterOpacity maxValueAngle: 317 @@ -93,20 +86,21 @@ DashboardBackground { // Consumptionmeter - ConsumptionMeter { - opacity: dashboardEntity.meterOpacity - } // Temperaturemeter - TemperatureMeter { opacity: dashboardEntity.meterOpacity + + anchors.right: parent.right + anchors.top: parent.top + anchors.rightMargin: 640 + anchors.topMargin: 82 } - // Turbometer + // Turbometer SmallMeter { id: smallMeter - x: 741 - y: 47 + x: 437 + y: 45 opacity: dashboardEntity.meterOpacity value: ValueSource.rpm / 2000. @@ -119,16 +113,20 @@ DashboardBackground { } // Fpsmeter - FpsMeter { + x: 582 opacity: dashboardEntity.meterOpacity + anchors.right: parent.right + anchors.top: parent.top + anchors.rightMargin: 591 + anchors.topMargin: 87 } // Bottom Panel - BottomPanel { id: bottompanel - y: 402 + y: 412 + anchors.horizontalCenterOffset: 0 } SpeedometerNumbers { @@ -143,23 +141,82 @@ DashboardBackground { id: speedometer opacity: dashboardEntity.meterOpacity - x: 35 - y: 8 + x: 34 + y: 3 actualValue: ValueSource.kph + maxValueAngle: 304 + + layer.enabled: opacity < 1 + + Gadget { + id: knobLeft + x: 113 + y: 118 + + green: speedometer.actualValue < 100 + value: speedometer.actualValue + } } + LargeMeter { id: tachometer opacity: dashboardEntity.meterOpacity - x: 768 - y: 8 + x: 763 + y: 2 + actualValue: 6000 minValueAngle: 55 maxValueAngle: 255 minimumValue: 0 maximumValue: 8000 - limitValue: 4000 + limitValue: 7000 + + layer.enabled: opacity < 1 + + LargeMeter { + id: consumptionMeter + x: 1 + y: -2 + fillWidth: 22 + limitValue: 22 + angleOffset: 72 + actualValue: 30 + visible: true + + minValueAngle: 379 + maxValueAngle: 291 + minimumValue: 0 + maximumValue: 30 + } + + Gadget { + id: knobRight + x: 116 + y: 117 + + green: tachometer.actualValue < 7000 + value: tachometer.actualValue + maxValue: 8000 + + Text { + id: textEco + x: -56 + y: 156 + + anchors.horizontalCenter: parent.horizontalCenter + text: tachometer.actualValue > 6000 ? "POWER" : "ECO" + anchors.verticalCenterOffset: 3 + anchors.horizontalCenterOffset: 7 + visible: true + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 18 + color: tachometer.actualValue <= 6000 ? "white" : "red" + opacity: dashboardEntity.meterOpacity + } + } } + Text { id: speedText x: 74 @@ -172,6 +229,7 @@ DashboardBackground { opacity: dashboardEntity.meterOpacity } + Text { id: speedUnitText anchors.top: speedText.bottom @@ -181,15 +239,26 @@ DashboardBackground { anchors.horizontalCenter: speedText.horizontalCenter opacity: dashboardEntity.meterOpacity } - Text { - id: textEco - anchors.horizontalCenter: tachometer.horizontalCenter - text: tachometer.actualValue > 4000 ? "POWER" : "ECO" - anchors.verticalCenter: tachometer.verticalCenter - font.pixelSize: 18 - color: tachometer.actualValue <= 4000 ? "white" : "red" - opacity: dashboardEntity.meterOpacity + + Image { + id: knobSmallLeft + x: 460 + y: 68 + source: "image://etc/knob_small.png" } + Image { + id: knobSmallRight + x: 763 + y: 70 + source: "image://etc/knob_small.png" + } + + Image { + id: knobSmallcenter + x: 610 + y: 62 + source: "image://etc/knob_small.png" + } } diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardFrame.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardFrame.qml index d0ed5513b..e4dd15e64 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardFrame.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/DashboardFrame.qml @@ -45,11 +45,8 @@ Rectangle { width: 1280 height: 480 - gradient: Gradient { - GradientStop { position: 0.0; color: "#ffffff" } - GradientStop { position: 0.4; color: "#1e2127" } - GradientStop { position: 1.0; color: "#0c0f17" } - } + color: "black" + Image { id: logo diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/Gadget.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/Gadget.qml index b9b3c5eed..5ff261cd9 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/Gadget.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/Gadget.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.4 +import QtGraphicalEffects 1.0 Item { id: gadget @@ -81,40 +82,32 @@ Item { Item { id: glow - x: 53 - y: 52 - width: 145 - height: 145 + x: 34 + y: 31 + width: 185 + height: 185 scale: gadget.__scale - Image { - id: green - x: 0 - y: -1 - - source: "image://etc/greenglow.png" - Behavior on opacity { - NumberAnimation { - + Rectangle { + width: 115 + height: width + radius: width / 2 + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + color: green ? "#0098c3" : "#a31e21" + Behavior on color { + ColorAnimation { + duration: 400 } } - } - Image { - id: red - x: -1 - y: 0 - - source: "image://etc/redglow.png" - Behavior on opacity { - NumberAnimation { - - } - } } - + layer.enabled: true + layer.effect: FastBlur { + radius: 32 + } } Image { @@ -123,19 +116,4 @@ Item { y: 65 source: "image://etc/knob.png" } - states: [ - State { - name: "red" - when: !gadget.green - }, - State { - name: "green" - when: gadget.green - - PropertyChanges { - target: red - opacity: 0 - } - } - ] } diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/ConsumptionMeter.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/ConsumptionMeter.qml deleted file mode 100644 index b25110efd..000000000 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/ConsumptionMeter.qml +++ /dev/null @@ -1,92 +0,0 @@ -/**************************************************************************** -** -** 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.6 -import ClusterDemo 1.0 - -Item { - id: consumtionMeter - property real consumptionValue: 2.0 + ValueSource.rpm / 444.45 - - property real minValueAngle: 378 - property real maxValueAngle: 291 - property real minimumValue: 0 - property real maximumValue: 20 - - anchors.right: parent.right - anchors.top: parent.top - anchors.topMargin: 243 - anchors.rightMargin: 276 - - GaugeFiller { - id: consumptionFiller - value: consumtionMeter.consumptionValue - anchors.fill: parent - numVertices: 32 - radius: 155 - fillWidth: 20 - color: ValueSource.rpm < 4000 ? "#0098c3" : "#a31e21" - opacity: 0.3 - minAngle: consumtionMeter.minValueAngle - maxAngle: consumtionMeter.maxValueAngle - minValue: consumtionMeter.minimumValue - maxValue: consumtionMeter.maximumValue - Behavior on value { - enabled: !ValueSource.runningInDesigner && !ValueSource.automaticDemoMode && startupAnimationsFinished - PropertyAnimation { duration: 250 } - } - } - - Item { - width: 322 - height: 7 - rotation: consumptionFiller.angle - 72 - anchors.centerIn: parent - - Image { - width: 95 - height: 3 - //opacity: 0.75 - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - source: ValueSource.rpm < 4000 ? "image://etc/SpeedometerNeedleGreen.png" : "image://etc/SpeedometerNeedle.png" - } - } -} diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/FpsMeter.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/FpsMeter.qml index 51e27fc86..7cee7ce26 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/FpsMeter.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/FpsMeter.qml @@ -51,20 +51,16 @@ Item { property real maximumValue: 60 property real fpsDegreesPerValue: Math.abs((maxValueAngle - minValueAngle) / maximumValue) - anchors.right: parent.right - anchors.top: parent.top - anchors.rightMargin: 591 - anchors.topMargin: 83 + width: 107 height: 7 rotation: fpsmeterNeedleRotation - 45 Image { - width: 37 - height: 3 anchors.left: parent.left + anchors.leftMargin: -12 anchors.verticalCenter: parent.verticalCenter - source: "image://etc/SpeedometerNeedle.png" + source: "image://etc/SpeedometerNeedleSmall.png" } FpsCounter { diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/LargeMeter.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/LargeMeter.qml index b9d001287..5447b43d1 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/LargeMeter.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/LargeMeter.qml @@ -40,8 +40,20 @@ import QtQuick 2.6 import ClusterDemo 1.0 +import QtGraphicalEffects 1.0 Item { + + Rectangle { + visible: false + width: 86 + height: 86 + radius: 43 + color: "#3a5fe1" + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + width: 480 height: 480 @@ -51,7 +63,7 @@ Item { property bool animationStopped: ValueSource.runningInDesigner ? true : startupAnimationsFinished - property real actualValue: 20 + property real actualValue: 90 property real minValueAngle: 55 property real maxValueAngle: 305 @@ -62,15 +74,17 @@ Item { property real angleOffset: 35 + property alias fillWidth: speedFiller.fillWidth + GaugeFiller { anchors.fill: parent id: speedFiller value: speedometer.actualValue numVertices: 64 radius: 155 - fillWidth: 5 + fillWidth: 10 color: speedometer.actualValue < speedometer.limitValue ? "#0098c3" : "#a31e21" - opacity: 0.6 + opacity: 0.4 minAngle: speedometer.minValueAngle maxAngle: speedometer.maxValueAngle minValue: speedometer.minimumValue @@ -86,21 +100,23 @@ Item { Item { id: speedometerNeedle - width: 309 - height: 7 + width: needleImage.width + height: needleImage.height rotation: speedFiller.angle - speedometer.angleOffset anchors.centerIn: parent Item { - width: 97 - height: 7 - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter + Image { - anchors.fill: parent - source: "image://etc/SpeedometerNeedleGreen.png" - opacity: speedometer.actualValue < speedometer.limitValue ? 0.75 : 0 + x: -59 + y: -0.5 + source: "image://etc/SpeedometerNeedle.png" + opacity: 1 + layer.enabled: true + layer.effect: Colorize { + hue: 0.5 + } Behavior on opacity { NumberAnimation { duration: 1000 @@ -108,16 +124,23 @@ Item { } } Image { + x: -59 + y: -0.5 + id: needleImage opacity: speedometer.actualValue < speedometer.limitValue ? 0 : 0.75 - anchors.fill: parent source: "image://etc/SpeedometerNeedle.png" Behavior on opacity { NumberAnimation { duration: 1000 } } + layer.enabled: true + layer.effect: Colorize { + hue: 0.95 + } } } } + } diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/SmallMeter.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/SmallMeter.qml index 2c086cd35..6b323027a 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/SmallMeter.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/SmallMeter.qml @@ -47,7 +47,6 @@ Item { height: 100 property real meterNeedleRotation: direction * value * degreesPerValue - //property real fuelValue: ValueSource.fuelLevel property real value: 20 property real maxValueAngle: 170 @@ -59,24 +58,26 @@ Item { property real direction: 1 - - Item { - + Rectangle { + visible: false + color: "red" + width: 10 + height: 10 + anchors.centerIn: parent + } - width: 100 - height: 100 + Item { + width: image.width + height: image.height rotation: meter.meterNeedleRotation - meter.rotationOffset + anchors.centerIn: parent Image { - width: 37 - height: 3 - //opacity: 0.75 - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - source: "image://etc/SpeedometerNeedle.png" - + id: image + x: -23 + source: "image://etc/SpeedometerNeedleSmall.png" } } diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/TemperatureMeter.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/TemperatureMeter.qml index c0001667f..cf575b6c8 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/TemperatureMeter.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/TemperatureMeter.qml @@ -42,30 +42,26 @@ import QtQuick 2.6 import ClusterDemo 1.0 Item { + id: root property real temperatureValue: ValueSource.engineTemperature property real minValueAngle: 42.5 property real maxValueAngle: -42.5 property real minimumValue: 40 property real maximumValue: 120 - anchors.right: parent.right - anchors.top: parent.top - anchors.rightMargin: 643 - anchors.topMargin: 60 - GaugeFiller { id: temperatureFiller - value: temperatureValue + value: root.temperatureValue anchors.fill: parent numVertices: 32 radius: 140 fillWidth: 25 color: "#EF2973" opacity: 0.3 - minAngle: minValueAngle - maxAngle: maxValueAngle - minValue: minimumValue - maxValue: maximumValue + minAngle: root.minValueAngle + maxAngle: root.maxValueAngle + minValue: root.minimumValue + maxValue: root.maximumValue Behavior on value { enabled: !ValueSource.automaticDemoMode && startupAnimationsFinished PropertyAnimation { duration: 250 } @@ -75,16 +71,24 @@ Item { Item { width: 280 height: 7 - rotation: temperatureFiller.angle - 47.5 + rotation: temperatureFiller.angle - 48 anchors.centerIn: parent - Image { - width: 25 - height: 3 - //opacity: 0.75 + Item { + id: item1 + width: 34 + height: 7 + opacity: 0.75 anchors.left: parent.left + anchors.leftMargin: -4 anchors.verticalCenter: parent.verticalCenter - source: "image://etc/SpeedometerNeedle.png" + clip: true + + Image { + x: -4 + anchors.verticalCenter: parent.verticalCenter + source: "image://etc/SpeedometerNeedleSmall.png" + } } } } diff --git a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/TurboMeter.qml b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/TurboMeter.qml index 7da8e8f90..af6296634 100644 --- a/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/TurboMeter.qml +++ b/doc/src/snippets/qtcluster/qml/dash_hybrid/gauges/TurboMeter.qml @@ -60,7 +60,6 @@ Item { Image { width: 38 height: 3 - //opacity: 0.75 anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter source: "image://etc/SpeedometerNeedle.png" |
