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.

Signed-off-by: Darrel Griët <dgriet@gmail.com>

2 files changed, 82 insertions, 125 deletions

diff --git a/src/compass.svg b/src/compass.svg
index 95d62a1..73e74ac 100644
--- a/src/compass.svg
+++ b/src/compass.svg
@@ -1,109 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   id="Layer_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 35 35"
-   enable-background="new 0 0 35 35"
-   xml:space="preserve"
-   sodipodi:docname="compass.svg"
-   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"><metadata
-     id="metadata3833"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs3831" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1016"
-     id="namedview3829"
-     showgrid="false"
-     inkscape:object-paths="true"
-     inkscape:zoom="16"
-     inkscape:cx="7.5465768"
-     inkscape:cy="17.750312"
-     inkscape:window-x="0"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1" /><path
-     d="m 17.493113,15.086904 c -1.283249,0.0043 -2.320747,1.047536 -2.317392,2.330546 0.0043,1.283247 1.047536,2.320745 2.330544,2.317389 1.28422,-0.0041 2.321718,-1.047295 2.317632,-2.331514 -0.0034,-1.28301 -1.047537,-2.320747 -2.330784,-2.316421"
-     id="path3804"
-     inkscape:connector-curvature="0"
-     style="fill:#ffffff" /><path
-     d="M 19.954083,15.534864 17.465699,5.7398872 15.033784,15.54996 c 0.562459,-0.745137 1.451088,-1.229738 2.45664,-1.231378 1.005062,-0.0038 1.897363,0.475408 2.463659,1.216282 m -4.909178,3.751098 2.489355,9.795215 2.430942,-9.81031 c -0.562458,0.745137 -1.451818,1.228526 -2.45664,1.231376 -1.005059,0.0038 -1.896392,-0.475168 -2.463657,-1.216281"
-     id="path3806"
-     inkscape:connector-curvature="0"
-     style="fill:#ffffff" /><g
-     id="g3816"
-     transform="rotate(67.343584,17.569832,17.378031)" /><g
-     id="g3818"
-     transform="rotate(67.343584,17.569832,17.378031)" /><g
-     id="g3820"
-     transform="rotate(67.343584,17.569832,17.378031)" /><g
-     id="g3822"
-     transform="rotate(67.343584,17.569832,17.378031)" /><g
-     id="g3824"
-     transform="rotate(67.343584,17.569832,17.378031)" /><g
-     id="g3826"
-     transform="rotate(67.343584,17.569832,17.378031)" /><path
-     style="fill:none;stroke:#ffffff;stroke-width:0.30000001;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none"
-     id="path3904"
-     sodipodi:type="arc"
-     sodipodi:cx="17.59202"
-     sodipodi:cy="17.632317"
-     sodipodi:rx="15.026019"
-     sodipodi:ry="15.026019"
-     sodipodi:start="1.7453293"
-     sodipodi:end="4.5378561"
-     d="M 14.982778,32.430057 A 15.026019,15.026019 0 0 1 2.5660009,17.632316 15.026019,15.026019 0 0 1 14.98278,2.8345764"
-     sodipodi:open="true" /><path
-     style="fill:none;stroke:#ffffff;stroke-width:0.30000001;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none"
-     id="path3904-1"
-     sodipodi:type="arc"
-     sodipodi:cx="-17.343567"
-     sodipodi:cy="-17.621738"
-     sodipodi:rx="15.026019"
-     sodipodi:ry="15.026019"
-     sodipodi:start="1.7453293"
-     sodipodi:end="4.5378561"
-     d="m -19.952808,-2.8239985 a 15.026019,15.026019 0 0 1 -12.416778,-14.7977405 15.026019,15.026019 0 0 1 12.416779,-14.79774"
-     sodipodi:open="true"
-     transform="rotate(-179.9951)" /><text
-     xml:space="preserve"
-     style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;"
-     x="15.472248"
-     y="4.934525"
-     id="text825"><tspan
-       sodipodi:role="line"
-       id="tspan823"
-       x="15.472248"
-       y="4.934525"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.33333349px;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#ffffff;">N</tspan></text>
-<text
-     xml:space="preserve"
-     style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;"
-     x="15.746987"
-     y="34.182407"
-     id="text829"><tspan
-       sodipodi:role="line"
-       id="tspan827"
-       x="15.746987"
-       y="34.182407"
-       style="font-size:5.33333349px;fill:#ffffff;">S</tspan></text>
-</svg>
\ No newline at end of file
+<svg width="1e3" height="1e3" version="1.1" viewBox="0 0 264.58 264.58" xmlns="http://www.w3.org/2000/svg">
+ <path transform="scale(.26458)" d="m500 482.94-499.69 517.06 499.69-250.18 501.9 250.18z" fill="#ffb147" stroke-opacity="0" style="paint-order:markers fill stroke"/>
+</svg>
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
+                    }
+                }
+            }
+        }
     }
 }