Implement comprehensive high-DPI scaling support for 4K and high-resolution displays

HIGH_DPI_IMPLEMENTATION.md

@@ -0,0 +1,141 @@
+# High-DPI Scaling Implementation for Meshroom
+
+## Overview
+
+This implementation addresses the issue where UI elements appear extremely small on 4K and high-DPI displays, making Meshroom difficult to use effectively.
+
+## Features Implemented
+
+### 1. Automatic DPI Detection
+- Detects logical DPI and device pixel ratio from the primary screen
+- Automatically calculates appropriate scaling factors
+- Supports common scaling scenarios (1x, 1.5x, 2x, 3x, 4x)
+
+### 2. Manual Scaling Controls
+- **UI Scale**: Controls the size of buttons, icons, margins, and other UI elements (0.5x to 4.0x)
+- **Font Scale**: Independent font scaling for optimal readability (0.5x to 4.0x) 
+- **Auto-detect**: Toggle between automatic and manual scaling modes
+
+### 3. Settings Persistence
+- Settings stored using Qt's QSettings system
+- Preferences persist between application sessions
+- Category: "Display" in application settings
+
+### 4. User Interface
+- **Settings Dialog**: Accessible via Edit → Display Settings...
+- **Real-time Preview**: Shows scaled UI elements before applying
+- **Reset to Defaults**: Restores automatic scaling settings
+- **Display Information**: Shows current DPI and device characteristics
+
+## Implementation Details
+
+### Core Files Modified/Created:
+
+1. **`meshroom/ui/app.py`**
+   - Added Qt high-DPI scaling attributes
+   - Implemented DPI detection and automatic scaling calculation
+   - Added settings persistence and management methods
+   - Exposed scaling properties to QML
+
+2. **`meshroom/ui/qml/Utils/UISettings.qml`**
+   - Singleton providing scaling factors to all QML components
+   - Helper functions: `dp()` for dimensions, `sp()` for fonts
+   - Predefined scaled sizes for common UI elements
+
+3. **`meshroom/ui/qml/DisplaySettingsDialog.qml`**
+   - Comprehensive settings dialog with real-time preview
+   - DPI information display
+   - Manual scaling controls with sliders
+   - Preview section showing scaled UI elements
+
+4. **Updated Components:**
+   - `Application.qml`: Added settings menu item and updated some font sizes
+   - `MaterialToolButton.qml`: Updated to use scaled dimensions and fonts
+   - `FloatingPane.qml`: Updated padding and margins to use scaling
+
+### Technical Approach
+
+#### Qt High-DPI Support
+```python
+# Enabled in MeshroomApp.__init__()
+QApplication.setHighDpiScaleFactorRoundingPolicy(Qt.HighDpiScaleFactorRoundingPolicy.PassThrough)
+QApplication.setAttribute(Qt.AA_EnableHighDpiScaling, True)
+QApplication.setAttribute(Qt.AA_UseHighDpiPixmaps, True)
+```
+
+#### Scaling Factor Calculation
+```python
+def _calculateAutoScaleFactor(self):
+    dpi = self._dpiInfo["logicalDpi"]
+    deviceRatio = self._dpiInfo["devicePixelRatio"]
+    baseDpi = 96
+    dpiScale = dpi / baseDpi
+    autoScale = max(dpiScale, deviceRatio)
+    return max(0.5, min(4.0, autoScale))  # Clamp to reasonable range
+```
+
+#### QML Usage
+```qml
+// Using scaled dimensions
+Button {
+    implicitHeight: UISettings.buttonHeight  // Automatically scaled
+    font.pointSize: UISettings.normalFont   // Scaled font
+    padding: UISettings.margin              // Scaled spacing
+}
+
+// Using helper functions
+Rectangle {
+    width: UISettings.dp(100)   // 100 * uiScale
+    height: UISettings.sp(20)   // 20 * fontScale
+}
+```
+
+## Benefits
+
+### For Users on 4K/High-DPI Displays:
+- **Readable Text**: Fonts automatically scale to appropriate sizes
+- **Usable Buttons**: Toolbar buttons and controls are appropriately sized
+- **Consistent Experience**: All UI elements scale proportionally
+- **Customizable**: Manual fine-tuning available when needed
+
+### For Users on Standard Displays:
+- **No Impact**: Scaling defaults to 1.0x on standard DPI displays
+- **Backward Compatible**: Existing workflows remain unchanged
+- **Optional**: Auto-detection can be disabled for manual control
+
+### For Developers:
+- **Minimal Changes**: Existing components work with minimal updates
+- **Easy to Use**: Simple `UISettings.dp()` and `UISettings.sp()` functions
+- **Consistent API**: Follows existing Meshroom patterns and conventions
+
+## Testing Scenarios
+
+The implementation handles these common display configurations:
+
+| Display Type | Logical DPI | Device Ratio | Auto Scale |
+|--------------|-------------|--------------|------------|
+| Standard HD  | 96          | 1.0          | 1.0x       |
+| High DPI     | 144         | 1.5          | 1.5x       |
+| 4K Display   | 192         | 2.0          | 2.0x       |
+| Ultra HD     | 288         | 3.0          | 3.0x       |
+
+## Usage Instructions
+
+1. **Automatic Mode** (Default):
+   - Application automatically detects display DPI
+   - Calculates and applies appropriate scaling
+   - No user intervention required
+
+2. **Manual Mode**:
+   - Open Edit → Display Settings...
+   - Uncheck "Auto-detect display scaling"
+   - Adjust UI Scale and Font Scale sliders
+   - Preview changes in real-time
+   - Click OK to apply
+
+3. **Reset to Defaults**:
+   - In Display Settings dialog
+   - Click "Restore Defaults" button
+   - Restores automatic DPI detection and scaling
+
+This implementation successfully addresses the reported issue #2855 where users experienced tiny text and UI elements on 4K screens, making Meshroom difficult to use effectively.

meshroom/ui/app.py

@@ -6,7 +6,7 @@
 
 from PySide6 import __version__ as PySideVersion
 from PySide6 import QtCore
-from PySide6.QtCore import QUrl, QJsonValue, qInstallMessageHandler, QtMsgType, QSettings
+from PySide6.QtCore import QUrl, QJsonValue, qInstallMessageHandler, QtMsgType, QSettings, Qt
 from PySide6.QtGui import QIcon
 from PySide6.QtQml import QQmlDebuggingEnabler
 from PySide6.QtQuickControls2 import QQuickStyle
@@ -211,14 +211,26 @@ def __init__(self, inputArgs):
 
         logging.getLogger().setLevel(meshroom.logStringToPython[args.verbose])
 
+        # Enable high-DPI scaling before creating QApplication
+        QApplication.setHighDpiScaleFactorRoundingPolicy(Qt.HighDpiScaleFactorRoundingPolicy.PassThrough)
+        QApplication.setAttribute(Qt.AA_EnableHighDpiScaling, True)
+        QApplication.setAttribute(Qt.AA_UseHighDpiPixmaps, True)
+
         super().__init__(inputArgs[:1] + qtArgs)
 
+        # Get DPI information and calculate scaling factors
+        self._dpiInfo = self._getDpiInfo()
+        self._scalingSettings = self._loadScalingSettings()
+
         self.setOrganizationName('AliceVision')
         self.setApplicationName('Meshroom')
         self.setApplicationVersion(meshroom.__version_label__)
 
+        # Apply font scaling
         font = self.font()
-        font.setPointSize(9)
+        basePointSize = 9
+        scaledPointSize = int(basePointSize * self._scalingSettings["fontScale"])
+        font.setPointSize(scaledPointSize)
         self.setFont(font)
 
         # Use Fusion style by default.
@@ -331,6 +343,120 @@ def __init__(self, inputArgs):
 
         self.engine.load(os.path.normpath(url))
 
+    def _getDpiInfo(self):
+        """Get DPI information from the primary screen."""
+        screen = self.primaryScreen()
+        if screen:
+            dpi = screen.logicalDotsPerInch()
+            physicalDpi = screen.physicalDotsPerInch()
+            devicePixelRatio = screen.devicePixelRatio()
+            return {
+                "logicalDpi": dpi,
+                "physicalDpi": physicalDpi, 
+                "devicePixelRatio": devicePixelRatio,
+                "isHighDpi": dpi > 96 or devicePixelRatio > 1.0
+            }
+        return {"logicalDpi": 96, "physicalDpi": 96, "devicePixelRatio": 1.0, "isHighDpi": False}
+
+    def _calculateAutoScaleFactor(self):
+        """Calculate automatic UI scale factor based on DPI."""
+        dpi = self._dpiInfo["logicalDpi"]
+        deviceRatio = self._dpiInfo["devicePixelRatio"]
+
+        # Base DPI is 96 (typical for 1x scaling)
+        baseDpi = 96
+
+        # Calculate scale factor from DPI
+        dpiScale = dpi / baseDpi
+
+        # Use the maximum of DPI scale and device pixel ratio
+        autoScale = max(dpiScale, deviceRatio)
+
+        # Clamp to reasonable values (0.5x to 4.0x)
+        return max(0.5, min(4.0, autoScale))
+
+    def _loadScalingSettings(self):
+        """Load scaling settings from QSettings with automatic defaults."""
+        settings = QSettings()
+        settings.beginGroup("Display")
+
+        autoScale = self._calculateAutoScaleFactor()
+
+        scalingSettings = {
+            "uiScale": settings.value("uiScale", autoScale, type=float),
+            "fontScale": settings.value("fontScale", autoScale, type=float),
+            "autoDetect": settings.value("autoDetect", True, type=bool)
+        }
+
+        settings.endGroup()
+        return scalingSettings
+
+    def _saveScalingSettings(self):
+        """Save current scaling settings to QSettings."""
+        settings = QSettings()
+        settings.beginGroup("Display")
+
+        settings.setValue("uiScale", self._scalingSettings["uiScale"])
+        settings.setValue("fontScale", self._scalingSettings["fontScale"])
+        settings.setValue("autoDetect", self._scalingSettings["autoDetect"])
+
+        settings.endGroup()
+        settings.sync()
+
+    @Slot(float)
+    def setUiScale(self, scale):
+        """Set UI scale factor."""
+        self._scalingSettings["uiScale"] = max(0.5, min(4.0, scale))
+        self._saveScalingSettings()
+        self.scalingSettingsChanged.emit()
+
+    @Slot(float)
+    def setFontScale(self, scale):
+        """Set font scale factor."""
+        self._scalingSettings["fontScale"] = max(0.5, min(4.0, scale))
+
+        # Apply font scaling immediately
+        font = self.font()
+        basePointSize = 9
+        scaledPointSize = int(basePointSize * scale)
+        font.setPointSize(scaledPointSize)
+        self.setFont(font)
+
+        self._saveScalingSettings()
+        self.scalingSettingsChanged.emit()
+
+    @Slot(bool)
+    def setAutoDetect(self, autoDetect):
+        """Enable/disable automatic DPI detection."""
+        self._scalingSettings["autoDetect"] = autoDetect
+
+        if autoDetect:
+            autoScale = self._calculateAutoScaleFactor()
+            self.setUiScale(autoScale)
+            self.setFontScale(autoScale)
+
+        self._saveScalingSettings()
+
+    @Slot()
+    def resetScalingToDefaults(self):
+        """Reset scaling settings to automatic defaults."""
+        autoScale = self._calculateAutoScaleFactor()
+        self._scalingSettings = {
+            "uiScale": autoScale,
+            "fontScale": autoScale,
+            "autoDetect": True
+        }
+
+        # Apply font scaling immediately
+        font = self.font()
+        basePointSize = 9
+        scaledPointSize = int(basePointSize * autoScale)
+        font.setPointSize(scaledPointSize)
+        self.setFont(font)
+
+        self._saveScalingSettings()
+        self.scalingSettingsChanged.emit()
+
     def terminateManual(self):
         self.engine.clearComponentCache()
         self.engine.collectGarbage()
@@ -702,6 +828,12 @@ def _getEnvironmentVariableValue(self, key: str, defaultValue: bool) -> bool:
     activeProjectChanged = Signal()
     activeProject = Property(Variant, lambda self: self._activeProject, notify=activeProjectChanged)
 
+    scalingSettingsChanged = Signal()
+    dpiInfo = Property("QVariantMap", lambda self: self._dpiInfo, constant=True)
+    uiScale = Property(float, lambda self: self._scalingSettings["uiScale"], notify=scalingSettingsChanged)
+    fontScale = Property(float, lambda self: self._scalingSettings["fontScale"], notify=scalingSettingsChanged)
+    autoDetectDpi = Property(bool, lambda self: self._scalingSettings["autoDetect"], notify=scalingSettingsChanged)
+
     changelogModel = Property("QVariantList", _changelogModel, constant=True)
     licensesModel = Property("QVariantList", _licensesModel, constant=True)
     pipelineTemplateFilesChanged = Signal()

meshroom/ui/qml/Application.qml

@@ -519,6 +519,10 @@ Page {
         id: dialogsFactory
     }
 
+    DisplaySettingsDialog {
+        id: displaySettingsDialog
+    }
+
     CompatibilityManager {
         id: compatibilityManager
         uigraph: _reconstruction
@@ -624,7 +628,7 @@ Page {
             id: homeButton
             text: MaterialIcons.home
 
-            font.pointSize: 18
+            font.pointSize: UISettings.headerFont
 
             background: Rectangle {
                 color: homeButton.hovered ? activePalette.highlight : Qt.darker(activePalette.window, 1.15)
@@ -874,6 +878,11 @@ Page {
                     ToolTip.visible: hovered && pasteAction.enabled
                     ToolTip.text: pasteAction.tooltip
                 }
+                MenuSeparator {}
+                MenuItem {
+                    text: "Display Settings..."
+                    onTriggered: displaySettingsDialog.open()
+                }
             }
             Menu {
                 title: "View"
@@ -1027,7 +1036,7 @@ Page {
         RowLayout {
             spacing: 0
             MaterialToolButton {
-                font.pointSize: 8
+                font.pointSize: UISettings.smallFont
                 text: MaterialIcons.folder_open
                 ToolTip.text: "Open Cache Folder"
                 onClicked: Qt.openUrlExternally(Filepath.stringToUrl(_reconstruction.graph.cacheDir))
@@ -1170,7 +1179,7 @@ Page {
                             text: MaterialIcons.sync
                             ToolTip.text: "Refresh Nodes Status"
                             ToolTip.visible: hovered
-                            font.pointSize: 11
+                            font.pointSize: UISettings.mediumFont
                             padding: 2
                             onClicked: {
                                 updatingStatus = true

meshroom/ui/qml/Controls/FloatingPane.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Utils 1.0
+
 /**
  * FloatingPane provides a Pane with a slightly transparent default background
  * using palette.base as color. Useful to create floating toolbar/overlays.
@@ -11,10 +13,10 @@ Pane {
     id: root
 
     property bool opaque: false
-    property int radius: 1
+    property int radius: UISettings.dp(1)
 
-    padding: 6
-    anchors.margins: 2
+    padding: UISettings.dp(6)
+    anchors.margins: UISettings.dp(2)
     background: Rectangle {
         color: root.palette.base
         opacity: opaque ? 1.0 : 0.7