[Sizing] add density independence pixel sizes

src/controls/ButtonRow.qml

@@ -36,7 +36,7 @@ Rectangle {
     id: main
     width: childrenRect.width
     color: "#313131"
-    height: 4*mm
+    height: size.dp(40)
     property ListModel model: ListModel {}
     property bool enabled: true
     property int currentIndex: -1
@@ -51,10 +51,10 @@ Rectangle {
     Rectangle{
         id: selecter
         x: rowElement.children[main.currentIndex].x || 0
-        y: -0.5*mm
+        y: size.dp(-5)
 
         width: rowElement.children[main.currentIndex].width || 0
-        height: 5*mm
+        height: size.dp(50)
         color: "#0091e5"
 
         visible: main.currentIndex > -1
@@ -74,10 +74,10 @@ Rectangle {
             model: main.model
             delegate: Rectangle {
                 id: rowItem
-                height: 5*mm
+                height: size.dp(50)
                 width: text.width+(text.width/name.length*2)
 
-                y: -0.5*mm
+                y: size.dp(-5)
 
                 color: "transparent"
                 MouseArea {

src/controls/qquicknemocontrolsextensionplugin.cpp

@@ -53,8 +53,7 @@ void QQuickNemoControlsExtensionPlugin::initializeEngine(QQmlEngine *engine, con
 
     QQmlExtensionPlugin::initializeEngine(engine,uri);
     QQmlContext* context = engine->rootContext();
-
-    context->setContextProperty("mm",sizing->getScaleFactor());
+    context->setContextProperty("size",sizing);
 
     engine->addImageProvider(QLatin1String("theme"), new NemoImageProvider);
 }

src/controls/sizing.cpp

@@ -7,7 +7,10 @@
 Sizing::Sizing(QObject *parent) : QObject(parent)
 {
     m_valid = false;
-    m_scale_factor = 10;
+    m_mm_factor = 10;
+    m_dp_factor = 1;
+
+    m_densitie = mdpi;
 
     m_p_height = qgetenv("QT_QPA_EGLFS_PHYSICAL_HEIGHT").toInt();
     m_p_width = qgetenv("QT_QPA_EGLFS_PHYSICAL_WIDTH").toInt();
@@ -17,9 +20,32 @@ Sizing::Sizing(QObject *parent) : QObject(parent)
     m_height = screen->size().height();
     m_width = screen->size().width();
 
+    m_dpi = screen->physicalDotsPerInch();
+
+    qDebug() << "DPI is " << m_dpi;
+
+    if(m_dpi < 140){
+        m_densitie = ldpi;
+    }else if(m_dpi >= 140 && m_dpi < 200){
+        //~160dpi
+        m_densitie = mdpi;
+    }else if(m_dpi >= 200 && m_dpi < 280){
+        //~240dpi
+        m_densitie = hdpi;
+    }else if(m_dpi >= 280 && m_dpi < 400){
+        //~320dpi
+        m_densitie = xhdpi;
+    }else if(m_dpi >= 400 && m_dpi < 560){
+        //~480dpi
+        m_densitie = xxhdpi;
+    }else{
+        m_densitie = xxxhdpi;
+    }
+
     if(m_p_height > 0 && m_p_width >0){
         m_valid = true;
-        scaleFactor();
+        setMmScaleFactor();
+        setDpScaleFactor();
     }else{
         if(m_p_height == 0){
             qWarning("QT_QPA_EGLFS_PHYSICAL_HEIGHT is not set!");
@@ -28,18 +54,52 @@ Sizing::Sizing(QObject *parent) : QObject(parent)
         if(m_p_width == 0){
             qWarning("QT_QPA_EGLFS_PHYSICAL_WIDTH is not set!");
         }
-
-        qWarning("Device sizing don`t work");
+        qWarning("Device mm sizing don`t work");
     }
 }
 
-void Sizing::scaleFactor()
+void Sizing::setMmScaleFactor()
 {
     if(m_p_width != 0){
-        m_scale_factor = m_width/m_p_width;
+        m_mm_factor = m_width/m_p_width;
     }
 
-    qDebug() << "Scale factor is " << m_scale_factor;
+    qDebug() << "MM scale factor is " << m_mm_factor;
 }
 
+void Sizing::setDpScaleFactor()
+{
+    switch (m_densitie) {
+    case ldpi:
+        m_dp_factor = 0.75;
+        break;
+    case mdpi:
+        m_dp_factor = 1;
+        break;
+    case hdpi:
+        m_dp_factor = 1.5;
+        break;
+    case xhdpi:
+        m_dp_factor = 2;
+        break;
+    case xxhdpi:
+        m_dp_factor = 3;
+        break;
+    case xxxhdpi:
+        m_dp_factor = 4;
+        break;
+    default:
+        m_dp_factor = 1;
+        break;
+    }
+}
 
+float Sizing::mm(float value)
+{
+    return value*m_mm_factor;
+}
+
+float Sizing::dp(float value)
+{
+    return value*m_dp_factor;
+}

src/controls/sizing.h

@@ -3,25 +3,55 @@
 
 #include <QObject>
 
+#ifndef Q_ENUM
+#define Q_ENUM(x) Q_ENUMS(x)
+#endif
+
 class Sizing : public QObject
 {
     Q_OBJECT
 public:
     explicit Sizing(QObject *parent = 0);
+
+    enum Densitie{
+        ldpi,
+        mdpi,
+        hdpi,
+        xhdpi,
+        xxhdpi,
+        xxxhdpi
+    };
+    Q_ENUM(Densities)
+
     bool isValid(){return m_valid;}
-    int getScaleFactor(){return m_scale_factor;}
+
+    float getMmScaleFactor(){return m_mm_factor;}
+    float getDpScaleFactor(){return m_dp_factor;}
+
+    Densitie getDensitie();
+
+    Q_INVOKABLE float mm(float value);
+    Q_INVOKABLE float dp(float value);
 
 private:
     bool m_valid;
 
     int m_p_width;
     int m_p_height;
+
     int m_width;
     int m_height;
 
-    int m_scale_factor;
+    float m_mm_factor;
+    float m_dp_factor;
+
+    qreal m_dpi;
+
+    Densitie m_densitie;
+
+    void setMmScaleFactor();
+    void setDpScaleFactor();
 
-    void scaleFactor();
 };
 
 #endif // SIZING_H

src/styles/ButtonStyle.qml

@@ -30,8 +30,8 @@ ButtonStyle {
 
     // The background of the button.
     background: Rectangle {
-        implicitWidth: 24*mm
-        implicitHeight: 5*mm
+        implicitWidth: size.dp(240)
+        implicitHeight: size.dp(50)
         clip: true
         color: control.primary ? Theme.primaryButton.background
                                : Theme.button.background

src/styles/CheckBoxStyle.qml

@@ -39,21 +39,21 @@ CheckBoxStyle {
     indicator: Rectangle {
             id: background
             color: "transparent"
-            implicitWidth: 7.2*mm
-            implicitHeight: 3.2*mm
+            implicitWidth: size.dp(72)
+            implicitHeight: size.dp(32)
 
             Rectangle {
                 id: back1
-                implicitWidth: 7.2*mm
-                implicitHeight: 2.8*mm
+                implicitWidth: size.dp(72)
+                implicitHeight: size.dp(28)
                 color: Theme.checkbox.back1
                 anchors.centerIn: parent
             }
 
             Rectangle {
                 id: back2
-                implicitWidth: 7.2*mm
-                implicitHeight: 2.8*mm
+                implicitWidth: size.dp(72)
+                implicitHeight: size.dp(28)
                 color: Theme.checkbox.back2
                 anchors.centerIn: parent
             }
@@ -73,14 +73,13 @@ CheckBoxStyle {
                     } else {
                         anim2.restart()
                     }
-
                 }
             }
 
             Component.onCompleted: {
                 back1.opacity = control.checked ? 1 : 0
                 back2.opacity = control.checked ? 0 : 1
-                ball.x = control.checked ? 3.2*mm : 0
+                ball.x = control.checked ? size.dp(32) : 0
             }
 
             SequentialAnimation {
@@ -89,7 +88,7 @@ CheckBoxStyle {
                 NumberAnimation {
                     target: ball
                     property: "x"
-                    to: 3.2*mm
+                    to: size.dp(32)
                     duration: 120
                 }
                 NumberAnimation {

src/styles/GrooveStyle.qml

@@ -22,8 +22,8 @@ import QtQuick.Controls.Styles.Nemo 1.0
 
 Component {
     Rectangle {
-        implicitHeight: 1.6*mm
-        implicitWidth: 44*mm
+        implicitHeight: size.dp(16)
+        implicitWidth: size.dp(440)
         color: Theme.groove.background
         Rectangle {
             antialiasing: true

src/styles/MenuBarStyle.qml

@@ -59,8 +59,8 @@ Style {
     }
 
     property Component menuItem: Rectangle {
-        width: text.width + 1.2*mm
-        height: text.height + 0.4*mm
+        width: text.width + 12
+        height: text.height + 4
         color: sunken ? "#49d" :__backgroundColor
 
         SystemPalette { id: syspal }

src/styles/SliderStyle.qml

@@ -29,9 +29,9 @@ SliderStyle{
         color: "black"
         border.color: "#0091e5"
         border.width: 2
-        implicitWidth: 3.4*mm
-        implicitHeight: 3.4*mm
-        radius: 1.6*mm
+        implicitWidth: size.dp(34)
+        implicitHeight: size.dp(34)
+        radius: size.dp(16)
         visible: control.enabled
 
         Text{
@@ -46,8 +46,8 @@ SliderStyle{
     groove: Rectangle{
         id: grove
 
-        implicitHeight: 1.6*mm
-        implicitWidth: 44*mm
+        implicitHeight: size.dp(16)
+        implicitWidth: size.dp(440)
         color: "#313131"
         z: 1
         Rectangle{
@@ -72,9 +72,9 @@ SliderStyle{
                 verticalCenter: dataLine.verticalCenter
             }
             source: "images/slider-handle-left.svg"
-            height: 3.4*mm
+            height: size.dp(34)
             visible: control.enabled
-            width: (styleData.handlePosition > 8*mm) ? 8*mm : styleData.handlePosition
+            width: (styleData.handlePosition > size.dp(80)) ? size.dp(80) : styleData.handlePosition
             sourceSize.width: width
             sourceSize.height: height
         }

src/styles/TextFieldStyle.qml

@@ -25,11 +25,11 @@ TextFieldStyle {
     selectedTextColor: Theme.textField.selectedTextColor
     selectionColor: Theme.textField.selectionColor
     textColor: Theme.textField.selectedTextColor
-    font.pointSize: 1.4*mm
+    font.pointSize: size.dp(14)
     font.family: Theme.textField.font
     background: Item {
-        anchors.leftMargin: 1.6*mm
-        anchors.rightMargin: 1.6*mm
+        anchors.leftMargin: size.dp(16)
+        anchors.rightMargin: size.dp(16)
         opacity: control.enabled ? 1 : 0.6
         Image {
             anchors.fill: parent

src/styles/ToolBarStyle.qml

@@ -28,8 +28,8 @@ Style {
     padding.bottom: 3
 
     property Component panel: Item {
-        implicitHeight: 7.5*mm
-        implicitWidth: 40*mm
+        implicitHeight: size.dp(75)
+        implicitWidth: size.dp(40)
         Rectangle {
             anchors.fill: parent
             color: Theme.toolBar.background

src/styles/ToolButtonStyle.qml

@@ -31,8 +31,8 @@ Style {
         id: styleitem
 
         //TODO: Maybe we want to add a descriptive text at the bottom of the icon?
-        implicitWidth: 5*mm
-        implicitHeight: 5*mm
+        implicitWidth: size.dp(50)
+        implicitHeight: size.dp(50)
 
         opacity: control.pressed ? 0.5 : 1
 
@@ -47,7 +47,7 @@ Style {
             id: icon
             anchors.fill: parent
             fillMode: Image.PreserveAspectFit
-            anchors.margins: 0.8*mm
+            anchors.margins: size.dp(8)
             source: control.iconSource
         }
     }