Scale all QML elements according to the current display size

LenaPi/controllers/StyleController.cpp

@@ -0,0 +1,88 @@
+#include "StyleController.h"
+#include <QGuiApplication>
+#include <QScreen>
+
+StyleController::StyleController(QObject *parent)
+    : QObject{parent}, mStyleSizes(new QQmlPropertyMap(this)),
+      mMargins(new QQmlPropertyMap(this)), mSpacings(new QQmlPropertyMap(this)), mPaddings(new QQmlPropertyMap(this))
+{
+ // nothing
+}
+
+void StyleController::calculateAndSetRatio()
+{
+    qreal refHeight = 480;
+    qreal refWidth = 800;
+    // Scales to fullscreen. No rescaling when changing window size
+    QRect rect = QGuiApplication::primaryScreen()->geometry();
+    qreal height = qMax(rect.width(),rect.height());
+    qreal width = qMin(rect.width(), rect.height());
+
+    mRatio = qMin(height/refHeight, width/refWidth);
+}
+
+void StyleController::initStyleSizes()
+{
+    scaleAndInsert(mStyleSizes, "roundButtonDefaultSize", 65);
+    scaleAndInsert(mStyleSizes, "roundButtonBorderWidth", 2);
+    scaleAndInsert(mStyleSizes, "smallPlayerButtonSize", 60);
+    scaleAndInsert(mStyleSizes, "largePlayerButtonSize", 80);
+
+    scaleAndInsert(mStyleSizes, "scrollHandleWidth", 16);
+    scaleAndInsert(mStyleSizes, "scrollHandleHeight", 8);
+    scaleAndInsert(mStyleSizes, "scrollHandleBorderWidth", 1);
+
+    int progressBackgroundDefaultHeight = 10;
+    scaleAndInsert(mStyleSizes, "progressBackgroundDefaultHeight", progressBackgroundDefaultHeight);
+    scaleAndInsert(mStyleSizes, "progressBackgroundRadius", progressBackgroundDefaultHeight/2);
+    scaleAndInsert(mStyleSizes, "progressBarDefaultHeight", 8);
+    scaleAndInsert(mStyleSizes, "progressBackgroundBorderWidth", 1);
+
+    scaleAndInsert(mStyleSizes, "navigationListHeight", 210);
+    scaleAndInsert(mStyleSizes, "navigationDelegateDefaultSize", 150);
+
+}
+
+void StyleController::initSpacings()
+{
+    scaleAndInsert(mSpacings, "defaultSpacing", 20);
+    scaleAndInsert(mSpacings, "smallSpacing", 10);
+    scaleAndInsert(mSpacings, "tinySpacing", 5);
+}
+
+void StyleController::initMargins()
+{
+    scaleAndInsert(mMargins, "defaultMargin", 20);
+    scaleAndInsert(mMargins, "smallMargin", 10);
+    scaleAndInsert(mMargins, "tinyMargin", 5);
+    scaleAndInsert(mMargins, "scrollHandleMargins", 1);
+}
+
+void StyleController::initPaddings()
+{
+    scaleAndInsert(mPaddings, "defaultPadding", 5);
+}
+
+void StyleController::scaleAndInsert(QQmlPropertyMap *map, const QString &key, int value)
+{
+    map->insert(key, applyRatio(value));
+}
+
+int StyleController::applyRatio(int size) const
+{
+    return size*mRatio;
+}
+
+void StyleController::init(QQmlContext *context)
+{
+    calculateAndSetRatio();
+    initStyleSizes();
+    initMargins();
+    initSpacings();
+    initPaddings();
+
+    context->setContextProperty("StyleSizes", mStyleSizes);
+    context->setContextProperty("StyleSpacings", mSpacings);
+    context->setContextProperty("StyleMargins", mMargins);
+    context->setContextProperty("StylePaddings", mPaddings);
+}

LenaPi/controllers/StyleController.h

@@ -0,0 +1,78 @@
+#ifndef STYLECONTROLLER_H
+#define STYLECONTROLLER_H
+
+#include <QObject>
+#include <QQmlContext>
+#include <QQmlPropertyMap>
+
+/**
+ * @brief Contains all style sizes, margins and paddings used throughout the application
+ *
+ * Based on a reference screen size, maps for scaled margins, paddings and spacings are created and
+ * registered in the QML context. The values stored in the maps can then be used from QML.
+ * Map names: StyleSizes, StylePaddings, StyleSpacings, StyleMargins
+ *
+ * Always use values from these maps in QML! Never use magic numbers! They will NOT scale when
+ * the application is run on a different screen.
+ *
+ * See https://doc.qt.io/qt-5/scalability.html
+ */
+class StyleController : public QObject
+{
+    Q_OBJECT
+public:
+    explicit StyleController(QObject *parent = nullptr);
+
+    /**
+     * @brief Calculates ratio, initializes all maps and registers them in QML context
+     * @param context Context to register Maps in
+     */
+    void init(QQmlContext* context);
+
+private:
+    /**
+     * @brief Calculates ratio from reference screen size and size of the current primary screen and inits member mRatio
+     */
+    void calculateAndSetRatio();
+    /**
+     * @brief Initializes map containing all sizes (e.g., button or delegate sizes)
+     */
+    void initStyleSizes();
+    /**
+     * @brief Initializes map containing all spacings
+     */
+    void initSpacings();
+    /**
+     * @brief Initializes map containing all margins
+     */
+    void initMargins();
+    /**
+     * @brief Initializes map containing all paddings
+     */
+    void initPaddings();
+    /**
+     * @brief Scales the value with calculated ratio and inserts it into the given map under the given key
+     * @param map Map to insert key-value pair into
+     * @param key Key used in the map. This is the name used to retrieve the value in QML
+     * @param value Unscaled value
+     * @see mRatio
+     *
+     * In QML the value with the key "defaulSpacing" in the Map "StyleSpacings" is accessed by StyleSpacings.defaultSpacing
+     */
+    void scaleAndInsert(QQmlPropertyMap* map, const QString& key, int value);
+    /**
+     * @brief Applys ratio to given size
+     * @param size Size to be scaled
+     * @return scaled size
+     * @see mRatio
+     */
+    int applyRatio(int size) const;
+
+    qreal mRatio = 1.0;
+    QQmlPropertyMap* mStyleSizes = nullptr;
+    QQmlPropertyMap* mMargins = nullptr;
+    QQmlPropertyMap* mSpacings = nullptr;
+    QQmlPropertyMap* mPaddings = nullptr;
+};
+
+#endif // STYLECONTROLLER_H