Example: revamp sensorsshowcase

Updated the example to align with the Qt6 Example-Guideline.

https://wiki.qt.io/Qt6/Example-Guideline

Pick-to: 6.5
Task-number: QTBUG-111254
Change-Id: I8d8028ab5351cd801c8ce5126b1ebe5f2d0f4e50
Reviewed-by: Ivan Solovev <ivan.solovev@qt.io>

1 files changed, 77 insertions, 0 deletions

diff --git a/examples/sensors/sensorsshowcase/Compass.qml b/examples/sensors/sensorsshowcase/Compass.qml
new file mode 100644
index 0000000..b3f0653
--- /dev/null
+++ b/examples/sensors/sensorsshowcase/Compass.qml
@@ -0,0 +1,77 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtSensors
+
+Item {
+    id: root
+
+    property alias headingFontSize: heading.font.pixelSize
+    required property StackView parentStack
+    required property int fontSize
+    required property int imageSize
+
+    property real azimuth: 30
+
+    Compass {
+        id: compass
+        active: true
+        dataRate: 7
+        onReadingChanged: root.azimuth = -(reading as CompassReading).azimuth
+    }
+
+    ColumnLayout {
+        id: layout
+
+        anchors.fill: parent
+        spacing: 10
+
+        Text {
+            id: heading
+            Layout.preferredWidth: parent.width
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.Wrap
+            text: "Compass"
+        }
+
+        Image {
+            id: arrow
+
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredWidth: root.imageSize * 1.25
+            Layout.fillHeight: true
+
+            source: "images/compass.svg"
+            fillMode: Image.PreserveAspectFit
+            rotation: root.azimuth
+        }
+
+        Rectangle {
+            id: separator
+
+            Layout.topMargin: 10
+            Layout.preferredWidth: parent.width * 0.75
+            Layout.preferredHeight: 1
+            Layout.alignment: Qt.AlignHCenter
+            color: "black"
+        }
+
+        Text {
+            id: info
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.topMargin: 10
+            text: "Azimuth: " + root.azimuth.toFixed(2) + "°"
+            font.pixelSize: root.fontSize
+        }
+
+        Button {
+            Layout.fillWidth: true
+            onClicked: root.parentStack.pop()
+            text: "Back"
+        }
+    }
+}