Merge pull request #2 from nicmorais/v1.1.0

New dark theme and others changes

Author: nicmorais

CMakeLists.txt

@@ -11,7 +11,7 @@ set(CMAKE_AUTOMOC ON)
 set(CMAKE_AUTORCC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
-find_package(Qt6 6.2 REQUIRED COMPONENTS Quick Sensors)
+find_package(Qt6 6.2 REQUIRED COMPONENTS Quick Sensors Svg)
 
 configure_file(main.cpp.in main.cpp @ONLY)
 
@@ -22,7 +22,7 @@ qt_add_executable(qompass
 qt_add_qml_module(qompass
     URI qompass
     VERSION 1.0
-    QML_FILES Main.qml
+    QML_FILES Main.qml Theme.qml
 )
 
 set_property(TARGET qompass PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR
@@ -31,15 +31,17 @@ set_property(TARGET qompass PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR
 target_link_libraries(qompass
     PRIVATE Qt6::Quick
             Qt6::Sensors
+            Qt6::Svg
 )
 
 qt_add_resources(qompass
         "main"
     PREFIX
         "/"
     FILES
-        images/degrees_indicator.png
-        images/north_indicator.png
+        images/degrees_indicator.svg
+        images/north_indicator.svg
+        images/degrees_indicator_dark_theme.svg
 )
 
 install(TARGETS qompass

Main.qml

@@ -21,11 +21,15 @@ import QtQuick
 import QtQuick.Window
 import QtSensors
 import QtQuick.Controls
+import QtQuick.Controls.Material
 
 ApplicationWindow {
-    width: 640
-    height: 480
+    width: Screen.width
+    height: Screen.height
     visible: true
+    color: Theme.background
+//    property real lastAzimuth
+
     Compass {
         id: compass
     }
@@ -35,9 +39,17 @@ ApplicationWindow {
         triggeredOnStart: true
         repeat: true
         onTriggered: {
-            degreesIndicator.rotation = Math.abs(compass.reading.azimuth)
-            degreesText.text = Math.round(Math.abs(
-                                              compass.reading.azimuth)) + "°"
+            let azimuth = compass.reading.azimuth
+            //trick below prevents the number animation on
+            //rotation from doing a great turn when degrees
+            //change between positive and negative values
+            if(Math.sign(degreesIndicator.rotation) !== Math.sign(azimuth)) {
+                rotationSmoother.enabled = false
+            } else {
+                rotationSmoother.enabled = true
+            }
+            degreesIndicator.rotation = azimuth
+            degreesText.text = Math.round(azimuth) + "°"
             calibrationLevel.text = "Calibration Level: " + Math.floor(
                         compass.reading.calibrationLevel * 100) + " %"
         }
@@ -53,36 +65,49 @@ ApplicationWindow {
         anchors.centerIn: parent
         height: Math.max(parent.width, parent.height) / 2
         width: height
-        source: "qrc:/images/degrees_indicator.png"
+        source: Theme.isDark ? "qrc:/images/degrees_indicator_dark_theme.svg" : "qrc:/images/degrees_indicator.svg"
         Behavior on rotation {
+            id: rotationSmoother
             NumberAnimation {
                 duration: 200
             }
         }
     }
-
     Image {
         id: northIndicator
         height: 50
         width: 50
         anchors.centerIn: degreesIndicator
-        source: "qrc:/images/north_indicator.png"
+        source: "qrc:/images/north_indicator.svg"
     }
 
     Text {
         id: degreesText
         text: "Loading"
+        color: Theme.foreground
         anchors.top: northIndicator.bottom
         anchors.horizontalCenter: northIndicator.horizontalCenter
     }
 
     Button {
-        text: "about"
-        onPressed: aboutPopup.open()
+        background: Rectangle {
+            anchors.fill: parent
+            color: Theme.background
+            border.width: 1
+            border.color: Theme.foreground
+            radius: width / 10
+        }
+
+        contentItem: Text {
+            text: "About"
+            color: Theme.foreground
+        }
+
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         anchors.rightMargin: 5
         anchors.bottomMargin: 5
+        onPressed: aboutPopup.open()
     }
 
     Popup {
@@ -92,32 +117,47 @@ ApplicationWindow {
         anchors.centerIn: parent
         dim: true
         background: Rectangle {
-            color: "white"
+            color: Theme.background
             anchors.fill: parent
         }
         Column {
             width: parent.width
             Text {
                 width: parent.width
                 text: "Author: Nicolas Morais"
+                color: Theme.foreground
                 font.pixelSize: 15
                 font.bold: true
             }
             Text {
                 width: parent.width
+                color: Theme.foreground
                 wrapMode: Text.WordWrap
                 text: "Source code available at https://github.com/nicmorais/qompass"
             }
+            Row {
+                Text {
+                    text: "Dark Theme:"
+                    color: Theme.foreground
+                }
+                Switch {
+                    checked: Theme.isDark
+                    onClicked: Theme.toggleDarkTheme()
+                }
+            }
         }
+
         Text {
+            text: "Version: " + Qt.application.version
+            color: Theme.foreground
             anchors.left: parent.left
             anchors.bottom: parent.bottom
-            text: "Version: " + Qt.application.version
         }
     }
     Text {
         id: calibrationLevel
         text: "Calibration level"
+        color: Theme.foreground
         font.pointSize: 10
         anchors.left: parent.left
         anchors.bottom: parent.bottom

NEWS.md

@@ -1,3 +1,10 @@
+### 1.1.0 (2023-08-17)
+* Adds dark theme, with switching between light and dark
+* Fixes animation behavior when angle changes
+* Centers the indicator circle
+* Adds building guide to README
+* Removes deprecated Qt.labs.settings (QSettings is under QtCore)
+
 ### 1.0.0 (2023-07-15)
 
 * Initial release. Simple compass with angle indicator, calibration level

README.md

@@ -5,7 +5,7 @@ This is exactly what you need: a simple compass app.
 
 ### Demo
 
-![Demo](doc/demo.gif)
+![Demo](doc/demo.jpg)
 
 ## Downloading
 
@@ -14,4 +14,45 @@ Go to Github Releases page and download the latest APK file.
 This app is not (yet) available at F-Droid.
 
 ## Building
-TODO
+
+(This building guide lacks some details)
+
+Make sure to have Qt 6 for Android with Qt Sensors and Qt SVG installed in your machine.
+
+You'll also need Android SDK, NDK and Java JDK. My current NDK version is `25.1.8937393`.
+
+If you install Qt 6 with its online installer, the android files will be at ~/Qt/${QT_VERSION}/android_${ANDROID_ABI}
+
+The CMake command will be:
+
+```bash
+
+cd Qompass
+
+cmake -S . \
+	-B build \
+	-DANDROID_ABI="arm64-v8a"\
+	-DANDROID_NDK=$HOME/Android/Sdk/ndk/25.1.8937393 \
+	-DANDROID_SDK_ROOT=$HOME/Android/Sdk \
+	-DANDROID_PLATFORM="android-31" \
+	-DCMAKE_GENERATOR="Ninja" \
+	-DCMAKE_BUILD_TYPE="Debug" \
+	-DCMAKE_TOOLCHAIN_FILE:FILEPATH=$HOME/Android/Sdk/ndk/25.1.8937393/build/cmake/android.toolchain.cmake \
+	-DCMAKE_PREFIX_PATH=$HOME/Qt/6.5.2/android_arm64_v8a \
+	-DCMAKE_FIND_ROOT_PATH:PATH=$HOME/Qt/6.5.2/android_arm64_v8a \
+    -DQOMPASS_VERSION="1.1.0" \
+\
+
+```
+
+The `QOMPASS_VERSION` variable is optional, and defined by this project only at CMakeLists.txt.
+
+Then:
+
+```bash
+
+cd build
+
+ninja
+
+```

Theme.qml

@@ -0,0 +1,41 @@
+
+/*
+ * Copyright (C) 2023 Nicolas Morais
+ * This program is free software; you can redistribute
+ * it and/or modify it under the terms of the GNU
+ * General Public License as published by the Free
+ * Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it
+ * will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+
+ * You should have received a copy of the GNU General
+ * Public License along with this program; if not, see
+ * <https://www.gnu.org/licenses>.
+ */
+pragma Singleton
+
+import QtQuick
+import QtCore
+
+Item {
+    id: root
+    // app uses dark theme by default
+    property bool isDark: settings.value("isDark", true)
+    readonly property color background: isDark ? "black" : "white"
+    readonly property color foreground: isDark ? "white" : "black"
+    function toggleDarkTheme() {
+        isDark = !isDark
+    }
+
+    Settings {
+        id: settings
+        property alias isDark: root.isDark
+    }
+
+    Component.onDestruction: settings.setValue("isDark", root.isDark)
+}

android/AndroidManifest.xml

@@ -2,8 +2,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="io.github.nicmorais.qompass"
     android:installLocation="auto"
-    android:versionCode="1"
-    android:versionName="1.0.0">
+    android:versionCode="2"
+    android:versionName="1.1.0">
     <!-- The comment below will be replaced with dependencies permissions upon deployment.
              Remove the comment if you do not require these default permissions. -->
     <!-- %%INSERT_PERMISSIONS -->
@@ -23,12 +23,14 @@
         android:hardwareAccelerated="true"
         android:label="Qompass"
         android:requestLegacyExternalStorage="true"
+        android:appCategory="productivity"
         android:icon="@drawable/icon">
         <activity
             android:name="org.qtproject.qt.android.bindings.QtActivity"
             android:configChanges="orientation|uiMode|screenLayout|screenSize|smallestScreenSize|layoutDirection|locale|fontScale|keyboard|keyboardHidden|navigation|mcc|mnc|density"
             android:label="Qompass"
             android:launchMode="singleTop"
+            android:exported="true"
             android:screenOrientation="portrait">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN"/>