Refresh the planespotter example

Pick-to: 6.7
Fixes: QTBUG-119095
Change-Id: I65cb30204f91dffebfd32d272cda156dc1c27674
Reviewed-by: Volker Hilsheimer <volker.hilsheimer@qt.io>

7 files changed, 66 insertions, 31 deletions

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
--- a/examples/location/planespotter/airplane.png
+++ /dev/null
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 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4411 36.3024C14.8022 36.485 14.1663 36.0053 14.1663 35.3409V34.6666C14.1663 34.3519 14.3145 34.0555 14.5663 33.8666L17.4997 31.6666V22.5L4.61518 26.2895C3.9747 26.4779 3.33301 25.9978 3.33301 25.3302V23.9053C3.33301 23.5509 3.52055 23.223 3.82599 23.0433L17.4997 15V5.83331C17.4997 5.13887 17.7427 4.54859 18.2288 4.06248C18.715 3.57637 19.3052 3.33331 19.9997 3.33331C20.6941 3.33331 21.2844 3.57637 21.7705 4.06248C22.2566 4.54859 22.4997 5.13887 22.4997 5.83331V15L36.1734 23.0433C36.4788 23.223 36.6663 23.5509 36.6663 23.9053V25.3302C36.6663 25.9978 36.0247 26.4779 35.3842 26.2895L22.4997 22.5V31.6666L25.433 33.8666C25.6848 34.0555 25.833 34.3519 25.833 34.6666L25.833 35.3409C25.833 36.0053 25.1971 36.485 24.5583 36.3024L19.9997 35L15.4411 36.3024Z" fill="#00414A"/>
+</svg>
diff --git a/examples/location/planespotter/doc/images/planespotter.png b/examples/location/planespotter/doc/images/planespotter.png
index f68f6f22..89625ca1 100644
--- a/examples/location/planespotter/doc/images/planespotter.png
+++ b/examples/location/planespotter/doc/images/planespotter.png
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 @@
     <qresource prefix="/">
         <file>planespotter.qml</file>
         <file>Plane.qml</file>
-        <file>airplane.png</file>
+        <file>airplane.svg</file>
     </qresource>
 </RCC>