From 5ab054fa665ab0b1124f1ae416e5e8b0af42cf41 Mon Sep 17 00:00:00 2001
From: Darrel Griët <dgriet@gmail.com>
Date: Mon, 30 May 2022 21:40:19 +0200
Subject: Redesign the compass design. Redesigns the calibration to use the
 status page. Use eight labels positioned at a 45 degree interval and rotate
 them based on the magnetometer.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Darrel Griët <dgriet@gmail.com>
---
 src/main.qml | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 79 insertions(+), 16 deletions(-)

(limited to 'src/main.qml')

diff --git a/src/main.qml b/src/main.qml
index 6a7db45..70bfc13 100644
--- a/src/main.qml
+++ b/src/main.qml
@@ -1,5 +1,6 @@
 /*
- * Copyright (C) 2017 - Florent Revest  <revestflo@gmail.com>
+ * Copyright (C) 2022 - Darrel Griët    <dgriet@gmail.com>
+ *               2017 - Florent Revest  <revestflo@gmail.com>
  *                    - Niels Tholenaar <info@123quality.nl>
  *
  * This program is free software: you can redistribute it and/or modify
@@ -19,6 +20,7 @@
 import QtQuick 2.5
 import org.asteroid.controls 1.0
 import QtSensors 5.3
+import QtGraphicalEffects 1.15
 
 Application {
     id: app
@@ -28,6 +30,7 @@ Application {
 
     property int rotation: 0;
     property int calibration: 0;
+    property int ringValueOffset: Math.sqrt(Math.pow(Dims.l(40), 2) / 2);
 
     Compass {
         active: true
@@ -37,22 +40,82 @@ Application {
         }
     }
 
-    Image {
-        anchors.fill: parent
-        anchors.margins: Dims.l(15)
-        fillMode: Image.PreserveAspectFit
-        source: "qrc:///compass.svg"
-        rotation: -app.rotation
-        height: 200;
-        sourceSize.width: width
-        sourceSize.height: height
+    StatusPage {
+        //% "<h3>No data</h3>Calibrate the sensor by moving it in an ∞ figure."
+        text: qsTrId("id-no-data-calibrate")
+        icon: "ios-infinite-outline"
+        visible: !app.calibration
     }
 
-    Label {
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: Dims.l(7)
-        font.pixelSize: Dims.l(5)
-        text: app.rotation + " °N Calibrated: " + app.calibration
+    Item {
+        visible: app.calibration
+        anchors.fill: parent
+
+        Item {
+            id: centerDisplay
+            anchors.fill: parent
+            Label {
+                id: magneticRotation
+                anchors.centerIn: parent
+                text: app.rotation
+                font {
+                    pixelSize: parent.height / 4
+                    capitalization: Font.Capitalize
+                    styleName: "SemiCondensed"
+                    kerning: true
+                    preferShaping: true
+                }
+            }
+            Label {
+                id: degreeSymbol
+                anchors.top: magneticRotation.top
+                anchors.left: magneticRotation.right
+                text: "°"
+                font {
+                    pixelSize: parent.height / 4
+                    capitalization: Font.Capitalize
+                    styleName: "SemiCondensed"
+                    kerning: true
+                    preferShaping: true
+                }
+            }
+            Image {
+                anchors.top: parent.top
+                anchors.centerIn: parent
+                anchors.verticalCenterOffset: -Dims.l(35)
+                width: Dims.l(10)
+                height: width
+                source: "compass.svg"
+            }
+        }
+
+        Item {
+            anchors.fill: parent
+            rotation: -app.rotation
+            Repeater {
+                id: outerRing
+                anchors.fill: parent
+                model: 8
+                Label {
+                    property var angle: (index / outerRing.count) * 2 * Math.PI
+                    property var cardinalDirections: ["N", "NE", "E", "SE", "S", "SW", "W", "NW"]
+                    rotation: app.rotation
+                    color: index == 0 ? "#c2620c" : "white"
+                    text: cardinalDirections[index]
+                    anchors {
+                        centerIn: parent
+                        verticalCenterOffset: -Math.cos(angle) * Dims.l(40)
+                        horizontalCenterOffset: Math.sin(angle) * Dims.l(40)
+                    }
+                    font {
+                        pixelSize: index % 2 ? Dims.l(8) : Dims.l(10)
+                        capitalization: Font.Capitalize
+                        styleName: "Condensed Bold"
+                        kerning: true
+                        preferShaping: true
+                    }
+                }
+            }
+        }
     }
 }
-- 
cgit v1.2.3-54-g00ecf