From 5ab054fa665ab0b1124f1ae416e5e8b0af42cf41 Mon Sep 17 00:00:00 2001 From: Darrel Griët 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 --- src/compass.svg | 112 ++------------------------------------------------------ src/main.qml | 95 +++++++++++++++++++++++++++++++++++++++-------- 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 @@ - - - -image/svg+xmlN -S - \ No newline at end of file + + + 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 + * Copyright (C) 2022 - Darrel Griët + * 2017 - Florent Revest * - Niels Tholenaar * * 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 { + //% "

No data

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-70-g09d2