From 482daa84f800b812327efe10cc0740c613b0bf58 Mon Sep 17 00:00:00 2001 From: Matthias Rauter Date: Fri, 24 Nov 2023 15:40:54 +0100 Subject: Refresh the planespotter example Fixes: QTBUG-119095 Change-Id: I65cb30204f91dffebfd32d272cda156dc1c27674 Reviewed-by: Volker Hilsheimer (cherry picked from commit da597f02125e18300f029afe896d5776ae37225c) Reviewed-by: Qt Cherry-pick Bot --- examples/location/planespotter/CMakeLists.txt | 2 +- examples/location/planespotter/Plane.qml | 86 ++++++++++++++------- examples/location/planespotter/airplane.png | Bin 831 -> 0 bytes examples/location/planespotter/airplane.svg | 3 + .../planespotter/doc/images/planespotter.png | Bin 135872 -> 272851 bytes examples/location/planespotter/planespotter.qml | 4 +- examples/location/planespotter/qml.qrc | 2 +- 7 files changed, 66 insertions(+), 31 deletions(-) delete mode 100644 examples/location/planespotter/airplane.png create mode 100644 examples/location/planespotter/airplane.svg diff --git a/examples/location/planespotter/CMakeLists.txt b/examples/location/planespotter/CMakeLists.txt index 2440d91e..9b9da2f4 100644 --- a/examples/location/planespotter/CMakeLists.txt +++ b/examples/location/planespotter/CMakeLists.txt @@ -38,7 +38,7 @@ target_link_libraries(planespotter PUBLIC # Resources: set(qml_resource_files "Plane.qml" - "airplane.png" + "airplane.svg" "planespotter.qml" ) diff --git a/examples/location/planespotter/Plane.qml b/examples/location/planespotter/Plane.qml index 65403e1b..af229a06 100644 --- a/examples/location/planespotter/Plane.qml +++ b/examples/location/planespotter/Plane.qml @@ -3,6 +3,8 @@ import QtQuick import QtLocation +import QtQuick.Shapes + //! [PlaneMapQuick1] // Plane.qml @@ -14,54 +16,84 @@ MapQuickItem { anchorPoint.x: image.width/2 anchorPoint.y: image.height/2 - sourceItem: Grid { + sourceItem: Item { //... //! [PlaneMapQuick1] - columns: 1 - Grid { - horizontalItemAlignment: Grid.AlignHCenter - Image { - id: image - rotation: bearing - source: "airplane.png" - } - Rectangle { - id: bubble - color: "lightblue" - border.width: 1 - width: text.width * 1.3 - height: text.height * 1.3 - radius: 5 - Text { - id: text - anchors.centerIn: parent - text: pilotName + width: childrenRect.width + height: childrenRect.height + Image { + id: image + rotation: bearing + source: "airplane.svg" + } + Shape { + id: bubble + anchors.bottom: image.top + anchors.margins: 3 + opacity: 0.8 + preferredRendererType: Shape.CurveRenderer + ShapePath { + strokeWidth: 0 + strokeColor: "#00414A" + fillGradient: LinearGradient { + x1: 0; y1: 0 + x2: 10 + text.width; y2: 10 + text.height + GradientStop { position: 0; color: "#00414A" } + GradientStop { position: 1; color: "#0C1C1F" } } + startX: 5; startY: 0 + PathLine { x: 5 + text.width + 6; y: 0 } + PathArc { x: 10 + text.width + 6; y: 5; radiusX: 5; radiusY: 5} + PathLine { x: 10 + text.width + 6; y: 5 + text.height + 6 } + PathArc { x: 5 + text.width + 6; y: 10 + text.height + 6 ; radiusX: 5; radiusY: 5} + // arrow down + PathLine { x: 10 + text.width / 2 + 3; y: 10 + text.height + 6 } + PathLine { x: 5 + text.width / 2 + 3; y: 15 + text.height + 6 } + PathLine { x: 0 + text.width / 2 + 3; y: 10 + text.height + 6 } + // end arrow down + PathLine { x: 5; y: 10 + text.height + 6 } + PathArc { x: 0; y: 5 + text.height + 6 ; radiusX: 5; radiusY: 5} + PathLine { x: 0; y: 5 } + PathArc { x: 5; y: 0 ; radiusX: 5; radiusY: 5} + } + Text { + id: text + color: "white" + anchors.top: parent.top + anchors.horizontalCenter: parent.horizontalCenter + anchors.margins: 8 + text: pilotName + font.bold: true } } Rectangle { id: message - color: "lightblue" - border.width: 1 - width: banner.width * 1.3 - height: banner.height * 1.3 + anchors.left: image.right + anchors.margins: 3 + opacity: 0.0 radius: 5 - opacity: 0 + border.width: 0 + color: "#E6E6E6" + width: banner.width + 30 + height: banner.height + 20 Text { id: banner + color: "#00414A" anchors.centerIn: parent + font.bold: true } + SequentialAnimation { id: playMessage running: false NumberAnimation { target: message; property: "opacity"; - to: 1.0; + to: 1; duration: 200 easing.type: Easing.InOutQuad } - PauseAnimation { duration: 1000 } + PauseAnimation { duration: 3000 } NumberAnimation { target: message; property: "opacity"; to: 0.0; diff --git a/examples/location/planespotter/airplane.png b/examples/location/planespotter/airplane.png deleted file mode 100644 index 080460dd..00000000 Binary files a/examples/location/planespotter/airplane.png and /dev/null differ diff --git a/examples/location/planespotter/airplane.svg b/examples/location/planespotter/airplane.svg new file mode 100644 index 00000000..05b07de4 --- /dev/null +++ b/examples/location/planespotter/airplane.svg @@ -0,0 +1,3 @@ + + + diff --git a/examples/location/planespotter/doc/images/planespotter.png b/examples/location/planespotter/doc/images/planespotter.png index f68f6f22..89625ca1 100644 Binary files a/examples/location/planespotter/doc/images/planespotter.png and b/examples/location/planespotter/doc/images/planespotter.png differ diff --git a/examples/location/planespotter/planespotter.qml b/examples/location/planespotter/planespotter.qml index 3cb3085b..cc961a98 100644 --- a/examples/location/planespotter/planespotter.qml +++ b/examples/location/planespotter/planespotter.qml @@ -8,10 +8,10 @@ import QtLocation Window { width: 700 - height: 500 + height: 550 visible: true - property variant topLeftEurope: QtPositioning.coordinate(60.5, 0.0) + property variant topLeftEurope: QtPositioning.coordinate(61, 0.0) property variant bottomRightEurope: QtPositioning.coordinate(51.0, 14.0) property variant viewOfEurope: QtPositioning.rectangle(topLeftEurope, bottomRightEurope) diff --git a/examples/location/planespotter/qml.qrc b/examples/location/planespotter/qml.qrc index 6903ec0f..f01ad81b 100644 --- a/examples/location/planespotter/qml.qrc +++ b/examples/location/planespotter/qml.qrc @@ -2,6 +2,6 @@ planespotter.qml Plane.qml - airplane.png + airplane.svg -- cgit v1.2.3