Ensure ControlsPanel icons have pixel-perfect rendering

anthem-audio · Nov 2, 2020 · fae8fde · fae8fde
1 parent 2621481
commit fae8fde
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 10 deletions.
diff --git a/Main/ControlsPanel.qml b/Main/ControlsPanel.qml
@@ -18,15 +18,19 @@
                         <https://www.gnu.org/licenses/>.
 */
 
-import QtQuick 2.14
-import QtGraphicalEffects 1.14
+import QtQuick 2.15
+import QtGraphicalEffects 1.15
 import QtQuick.Dialogs 1.2
+import QtQuick.Window 2.15
 
 import "BasicComponents"
 import "Global"
 import "Menus"
 
 Rectangle {
+    id: controlsPanel
+    property real spacerMargins: 7
+
     height: 42
 
     function updateAll() {
@@ -46,25 +50,31 @@ Rectangle {
     color: colors.white_12
 
     Item {
-        id: controlPanelSpacer
+        id: paddingItem
         anchors {
             fill: parent
-            margins: 7
+            margins: controlsPanel.spacerMargins
         }
 
         Row {
             id: groupContainer
-            property int totalGroupWidths:
+            property real totalGroupWidths:
                 group1.width + spacerWidth +
                 group2.width + spacerWidth +
                 group3.width + spacerWidth +
                 group4.width + spacerWidth +
                 group5.width + spacerWidth +
                 group6.width
-            property int spacerWidth: 2
-            property int groupCount: 6
+            property real spacerWidth: 2
+            property real groupCount: 6
+            property real spacerCount: groupCount * 2 - 2
 
-            spacing: (controlPanelSpacer.width - totalGroupWidths) / ((groupCount - 1) * 2)
+            property real spacingBase:
+                Math.floor(
+                    (Screen.devicePixelRatio *
+                        (paddingItem.width - totalGroupWidths)) /
+                        ((groupCount - 1) * 2)
+                ) / Screen.devicePixelRatio;
 
             Row {
                 id: group1
@@ -191,13 +201,22 @@ Rectangle {
                 }
             }
 
+            ControlsPanelSpacer {
+                spacerNumber: 1
+            }
+
             Rectangle {
                 height: 16
                 anchors.verticalCenter: parent.verticalCenter
                 width: groupContainer.spacerWidth
                 color: colors.white_12
             }
 
+            ControlsPanelSpacer {
+                spacerNumber: 2
+            }
+
+
             Row {
                 id: group2
                 spacing: 4
@@ -242,13 +261,21 @@ Rectangle {
                 }
             }
 
+            ControlsPanelSpacer {
+                spacerNumber: 3
+            }
+
             Rectangle {
                 height: 16
                 anchors.verticalCenter: parent.verticalCenter
                 width: groupContainer.spacerWidth
                 color: colors.white_12
             }
 
+            ControlsPanelSpacer {
+                spacerNumber: 4
+            }
+
             Row {
                 id: group3
                 spacing: 4
@@ -315,13 +342,21 @@ Rectangle {
                 }
             }
 
+            ControlsPanelSpacer {
+                spacerNumber: 5
+            }
+
             Rectangle {
                 height: 16
                 anchors.verticalCenter: parent.verticalCenter
                 width: groupContainer.spacerWidth
                 color: colors.white_12
             }
 
+            ControlsPanelSpacer {
+                spacerNumber: 6
+            }
+
             Row {
                 id: group4
                 spacing: 2
@@ -338,7 +373,7 @@ Rectangle {
                     smallestIncrement: 0.01
                     decimalPlaces: 2
                     value: 140
-                    property int lastSentValue: 140
+                    property real lastSentValue: 140
                     hoverMessage: qsTr("Tempo")
                     units: qsTr("BPM")
 
@@ -520,13 +555,21 @@ Rectangle {
                 }
             }
 
+            ControlsPanelSpacer {
+                spacerNumber: 7
+            }
+
             Rectangle {
                 height: 16
                 anchors.verticalCenter: parent.verticalCenter
                 width: groupContainer.spacerWidth
                 color: colors.white_12
             }
 
+            ControlsPanelSpacer {
+                spacerNumber: 8
+            }
+
             Row {
                 id: group5
                 spacing: 4
@@ -571,13 +614,21 @@ Rectangle {
                 }
             }
 
+            ControlsPanelSpacer {
+                spacerNumber: 9
+            }
+
             Rectangle {
                 height: 16
                 anchors.verticalCenter: parent.verticalCenter
                 width: groupContainer.spacerWidth
                 color: colors.white_12
             }
 
+            ControlsPanelSpacer {
+                spacerNumber: 10
+            }
+
             Row {
                 id: group6
                 spacing: 4

diff --git a/Main/ControlsPanelSpacer.qml b/Main/ControlsPanelSpacer.qml
@@ -0,0 +1,43 @@
+/*
+    Copyright (C) 2020 Joshua Wade
+
+    This file is part of Anthem.
+
+    Anthem is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Lesser General Public License as
+    published by the Free Software Foundation, either version 3 of
+    the License, or (at your option) any later version.
+
+    Anthem 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 Lesser General Public
+    License along with Anthem. If not, see
+                        <https://www.gnu.org/licenses/>.
+*/
+
+import QtQuick 2.15
+import QtQuick.Window 2.15
+
+// There are (number of groups - 1) * 2 spacers. Each time the control
+// panel's width increases by 1 pixel, a pixel is added to one of the
+// spacers, starting on the left and going to the right. This process
+// is used to keep pixel-perfect icons, since the spacers all have
+// integer pixel values.
+//
+// This process also corrects for pixel density.
+Item {
+    property int spacerNumber
+
+    width:
+        groupContainer.spacingBase +
+        (((paddingItem.width - controlsPanel.spacerMargins)
+            * Screen.devicePixelRatio) %
+            groupContainer.spacerCount >=
+        spacerNumber
+            ? 1 / Screen.devicePixelRatio
+            : 0)
+    height: 1
+}
diff --git a/Main/main.qml b/Main/main.qml
@@ -190,7 +190,8 @@ Window {
     Image {
         id: asdf
         source: "file:///C:\\Users\\qbgee\\Pictures\\background.jpg"
-        anchors.fill: parent
+        width: Screen.width
+        height: Screen.height
         fillMode: Image.PreserveAspectCrop
         visible: false
     }

diff --git a/Main/qml.qrc b/Main/qml.qrc
@@ -149,5 +149,6 @@
         <file>Fonts/NotoSansMono-Medium.ttf</file>
         <file>Fonts/NotoSansMono-Regular.ttf</file>
         <file>BasicComponents/Icon.qml</file>
+        <file>ControlsPanelSpacer.qml</file>
     </qresource>
 </RCC>