Apply screenScaleFactor to Cura Connect UI

Any pixel size specified in QML should not either use UM.Theme.getSize(), or use screenScaleFactor to make sure the pixel size is as intended on OSX, Windows and Linux regardless of display DPI.

Contributes to CURA-4376

plugins/UM3NetworkPrinting/ClusterControlItem.qml

@@ -12,7 +12,7 @@ Component
         property var manager: Cura.MachineManager.printerOutputDevices[0]
         anchors.fill: parent
         property var lineColor: "#DCDCDC" // TODO: Should be linked to theme.
-        property var cornerRadius: 4 // TODO: Should be linked to theme.
+        property var cornerRadius: 4 * screenScaleFactor // TODO: Should be linked to theme.
 
         visible: manager != null
 

plugins/UM3NetworkPrinting/ClusterMonitorItem.qml

@@ -15,7 +15,7 @@ Component
 
         property var emphasisColor: "#44c0ff" //TODO: should be linked to theme.
         property var lineColor: "#DCDCDC" // TODO: Should be linked to theme.
-        property var cornerRadius: 4 // TODO: Should be linked to theme.
+        property var cornerRadius: 4 * screenScaleFactor // TODO: Should be linked to theme.
         UM.I18nCatalog
         {
             id: catalog
@@ -50,7 +50,7 @@ Component
             anchors.top: parent.top
             anchors.horizontalCenter: parent.horizontalCenter
             
-            width: Math.min(800, maximumWidth)
+            width: Math.min(800 * screenScaleFactor, maximumWidth)
             height: children.height
             visible: OutputDevice.connectedPrinters.length != 0
 
@@ -90,8 +90,8 @@ Component
                 delegate: PrinterInfoBlock
                 {
                     printer: modelData
-                    width: Math.min(800, maximumWidth)
-                    height: 125
+                    width: Math.min(800 * screenScaleFactor, maximumWidth)
+                    height: 125 * screenScaleFactor
 
                     // Add a 1 pix margin, as the border is sometimes cut off otherwise.
                     anchors.horizontalCenter: parent.horizontalCenter

plugins/UM3NetworkPrinting/PrintWindow.qml

@@ -11,8 +11,8 @@ UM.Dialog
 {
     id: base;
 
-    minimumWidth: 500
-    minimumHeight: 140
+    minimumWidth: 500 * screenScaleFactor
+    minimumHeight: 140 * screenScaleFactor
     maximumWidth: minimumWidth
     maximumHeight: minimumHeight
     width: minimumWidth
@@ -31,7 +31,7 @@ UM.Dialog
         anchors.topMargin: UM.Theme.getSize("default_margin").height
         anchors.leftMargin: UM.Theme.getSize("default_margin").width
         anchors.rightMargin: UM.Theme.getSize("default_margin").width
-        height: 50
+        height: 50 * screenScaleFactor
 
         Label
         {
@@ -44,7 +44,7 @@ UM.Dialog
             }
             text: "Printer selection"
             wrapMode: Text.Wrap
-            height: 20
+            height: 20 * screenScaleFactor
         }
 
         ComboBox
@@ -54,7 +54,7 @@ UM.Dialog
             textRole: "friendly_name"
 
             width: parent.width
-            height: 40
+            height: 40 * screenScaleFactor
             Behavior on height { NumberAnimation { duration: 100 } }
 
             onActivated:

plugins/UM3NetworkPrinting/PrinterInfoBlock.qml

@@ -137,7 +137,7 @@ Rectangle
             Rectangle   // Camera icon
             {
                 id: showCameraIcon
-                width: 40
+                width: 40 * screenScaleFactor
                 height: width
                 radius: width
                 anchors.right: printProgressArea.left
@@ -161,7 +161,7 @@ Rectangle
 
                 width: parent.width / 2 - UM.Theme.getSize("default_margin").width
                 height: childrenRect.height
-                spacing: 10
+                spacing: 10 * screenScaleFactor
 
                 PrintCoreConfiguration
                 {
@@ -173,7 +173,7 @@ Rectangle
                 Rectangle
                 {
                     id: extruderSeperator
-                    width: 1
+                    width: 1 * screenScaleFactor
                     height: parent.height
                     color: lineColor
                 }
@@ -215,7 +215,7 @@ Rectangle
                     width: parent.width
                     //border.width: UM.Theme.getSize("default_lining").width
                     //border.color: lineColor
-                    height: 40
+                    height: 40 * screenScaleFactor
                     anchors.left: parent.left
 
                     Label

plugins/UM3NetworkPrinting/PrinterTile.qml

@@ -8,8 +8,8 @@ import Cura 1.0 as Cura
 Rectangle
 {
     id: base
-    width: 250
-    height: 250
+    width: 250 * screenScaleFactor
+    height: 250 * screenScaleFactor
     signal clicked()
     MouseArea
     {
@@ -19,8 +19,8 @@ Rectangle
     Rectangle
     {
         // TODO: Actually add UM icon / picture
-        width: 100
-        height: 100
+        width: 100 * screenScaleFactor
+        height: 100 * screenScaleFactor
         border.width: UM.Theme.getSize("default_lining").width
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: parent.top
@@ -47,7 +47,7 @@ Rectangle
         anchors.bottom: parent.bottom
         anchors.bottomMargin:  UM.Theme.getSize("default_margin").height
         font: UM.Theme.getFont("default")
-        height:10
+        height:10 * screenScaleFactor
         anchors.horizontalCenter: parent.horizontalCenter
     }
 }

plugins/UM3NetworkPrinting/PrinterVideoStream.qml

@@ -29,8 +29,8 @@ Item
         anchors.right: cameraImage.right
 
         // TODO: Harcoded sizes
-        width: 20
-        height: 20
+        width: 20 * screenScaleFactor
+        height: 20 * screenScaleFactor
 
         onClicked: OutputDevice.selectAutomaticPrinter()
 
@@ -56,8 +56,8 @@ Item
     Image
     {
         id: cameraImage
-        width: Math.min(sourceSize.width === 0 ? 800 : sourceSize.width, maximumWidth)
-        height: (sourceSize.height === 0 ? 600 : sourceSize.height) * width / sourceSize.width
+        width: Math.min(sourceSize.width === 0 ? 800 * screenScaleFactor : sourceSize.width, maximumWidth)
+        height: (sourceSize.height === 0 ? 600 * screenScaleFactor : sourceSize.height) * width / sourceSize.width
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
         z: 1