DisplaySettings: Add UI for switching the scale factor

For now, only support 1x and 2x scale.

I tried doing something "smarter" first where the UI would try
to keep the physical resolution constant when toggling between
1x and 2x, but many of the smaller 1x resolutions map to 2x
logical resolutions that Compositor rejects (e.g. 1024x768 becomes
512x384, which is less than the minimum 640x480 that Compositor
wants) and it felt complicated and overly magical.

So this instead just gives you a 1x/2x toggle and a dropdown
with logical (!) resolutions. That is, 800x600 @ 2x gives you
a physical resolution of 1600x1200.

If we don't like this after trying it for a while, we can change
the UI then.

Userland/Applications/DisplaySettings/DisplaySettings.cpp

@@ -39,6 +39,7 @@
 #include <LibGUI/ItemListModel.h>
 #include <LibGUI/Label.h>
 #include <LibGUI/MessageBox.h>
+#include <LibGUI/RadioButton.h>
 #include <LibGUI/WindowServerConnection.h>
 #include <LibGfx/Palette.h>
 #include <LibGfx/SystemTheme.h>
@@ -148,6 +149,21 @@ void DisplaySettingsWidget::create_frame()
         m_monitor_widget->update();
     };
 
+    m_display_scale_radio_1x = *find_descendant_of_type_named<GUI::RadioButton>("scale_1x");
+    m_display_scale_radio_1x->on_checked = [this](bool checked) {
+        if (checked) {
+            m_monitor_widget->set_desktop_scale_factor(1);
+            m_monitor_widget->update();
+        }
+    };
+    m_display_scale_radio_2x = *find_descendant_of_type_named<GUI::RadioButton>("scale_2x");
+    m_display_scale_radio_2x->on_checked = [this](bool checked) {
+        if (checked) {
+            m_monitor_widget->set_desktop_scale_factor(2);
+            m_monitor_widget->update();
+        }
+    };
+
     m_color_input = *find_descendant_of_type_named<GUI::ColorInput>("color_input");
     m_color_input->set_color_has_alpha_channel(false);
     m_color_input->set_color_picker_title("Select color for desktop");
@@ -215,13 +231,19 @@ void DisplaySettingsWidget::load_current_settings()
     index = m_modes.find_first_index(mode).value();
     m_mode_combo->set_selected_index(index);
 
-    /// Resolution ////////////////////////////////////////////////////////////////////////////////
-    Gfx::IntSize find_size;
+    /// Resolution and scale factor ///////////////////////////////////////////////////////////////
+    int scale_factor = ws_config->read_num_entry("Screen", "ScaleFactor", 1);
+    if (scale_factor != 1 && scale_factor != 2) {
+        dbgln("unexpected ScaleFactor {}, setting to 1", scale_factor);
+        scale_factor = 1;
+    }
+    (scale_factor == 1 ? m_display_scale_radio_1x : m_display_scale_radio_2x)->set_checked(true);
+    m_monitor_widget->set_desktop_scale_factor(scale_factor);
 
     // Let's attempt to find the current resolution and select it!
+    Gfx::IntSize find_size;
     find_size.set_width(ws_config->read_num_entry("Screen", "Width", 1024));
     find_size.set_height(ws_config->read_num_entry("Screen", "Height", 768));
-
     index = m_resolutions.find_first_index(find_size).value_or(0);
     Gfx::IntSize m_current_resolution = m_resolutions.at(index);
     m_monitor_widget->set_desktop_resolution(m_current_resolution);
@@ -246,10 +268,9 @@ void DisplaySettingsWidget::load_current_settings()
 
 void DisplaySettingsWidget::send_settings_to_window_server()
 {
-    // FIXME: Add UI for changing the scale factor.
-    auto result = GUI::WindowServerConnection::the().send_sync<Messages::WindowServer::SetResolution>(m_monitor_widget->desktop_resolution(), 1);
+    auto result = GUI::WindowServerConnection::the().send_sync<Messages::WindowServer::SetResolution>(m_monitor_widget->desktop_resolution(), m_monitor_widget->desktop_scale_factor());
     if (!result->success()) {
-        GUI::MessageBox::show(nullptr, String::formatted("Reverting to resolution {}x{}", result->resolution().width(), result->resolution().height()),
+        GUI::MessageBox::show(nullptr, String::formatted("Reverting to resolution {}x{} @ {}x", result->resolution().width(), result->resolution().height(), result->scale_factor()),
             "Unable to set resolution", GUI::MessageBox::Type::Error);
     }
 

Userland/Applications/DisplaySettings/DisplaySettings.h

@@ -29,6 +29,7 @@
 #include "MonitorWidget.h"
 #include <LibGUI/ColorInput.h>
 #include <LibGUI/ComboBox.h>
+#include <LibGUI/RadioButton.h>
 
 class DisplaySettingsWidget : public GUI::Widget {
     C_OBJECT(DisplaySettingsWidget);
@@ -51,5 +52,7 @@ private:
     RefPtr<GUI::ComboBox> m_wallpaper_combo;
     RefPtr<GUI::ComboBox> m_mode_combo;
     RefPtr<GUI::ComboBox> m_resolution_combo;
+    RefPtr<GUI::RadioButton> m_display_scale_radio_1x;
+    RefPtr<GUI::RadioButton> m_display_scale_radio_2x;
     RefPtr<GUI::ColorInput> m_color_input;
 };

Userland/Applications/DisplaySettings/DisplaySettingsWindow.gml

@@ -64,6 +64,26 @@
 
         @GUI::ComboBox {
             name: "resolution_combo"
+            fixed_width: 90
+        }
+
+        @GUI::Widget {
+        }
+
+        @GUI::Label {
+            text: "Display scale:"
+            text_alignment: "CenterLeft"
+            fixed_width: 75
+        }
+
+        @GUI::RadioButton {
+            name: "scale_1x"
+            text: "100%"
+        }
+
+        @GUI::RadioButton {
+            name: "scale_2x"
+            text: "200%"
         }
     }
 

Userland/Applications/DisplaySettings/MonitorWidget.cpp

@@ -27,6 +27,7 @@
 #include "MonitorWidget.h"
 #include <LibGUI/Painter.h>
 #include <LibGfx/Bitmap.h>
+#include <LibGfx/Font.h>
 
 namespace DisplaySettings {
 
@@ -110,8 +111,23 @@ void MonitorWidget::paint_event(GUI::PaintEvent& event)
     painter.draw_scaled_bitmap(m_monitor_rect, *screen_bitmap, screen_bitmap->rect());
 
     if (!m_desktop_resolution.is_null()) {
-        painter.draw_text(m_monitor_rect.translated(1, 1), m_desktop_resolution.to_string(), Gfx::TextAlignment::Center, Color::Black);
-        painter.draw_text(m_monitor_rect, m_desktop_resolution.to_string(), Gfx::TextAlignment::Center, Color::White);
+        auto displayed_resolution_string = Gfx::IntSize { m_desktop_resolution.width(), m_desktop_resolution.height() }.to_string();
+
+        // Render text label scaled with scale factor to hint at its effect.
+        // FIXME: Once bitmaps have intrinsic scale factors, we could create a bitmap with an intrinsic scale factor of m_desktop_scale_factor
+        // and that should give us the same effect with less code.
+        auto text_bitmap = Gfx::Bitmap::create(Gfx::BitmapFormat::RGBA32, Gfx::IntSize { painter.font().width(displayed_resolution_string) + 1, painter.font().glyph_height() + 1 });
+        GUI::Painter text_painter(*text_bitmap);
+        text_painter.set_font(painter.font());
+
+        text_painter.draw_text({}, displayed_resolution_string, Gfx::TextAlignment::BottomRight, Color::Black);
+        text_painter.draw_text({}, displayed_resolution_string, Gfx::TextAlignment::TopLeft, Color::White);
+
+        Gfx::IntRect text_rect = text_bitmap->rect();
+        text_rect.set_width(text_rect.width() * m_desktop_scale_factor);
+        text_rect.set_height(text_rect.height() * m_desktop_scale_factor);
+        text_rect.center_within(m_monitor_rect);
+        painter.draw_scaled_bitmap(text_rect, *text_bitmap, text_bitmap->rect());
     }
 }
 

Userland/Applications/DisplaySettings/MonitorWidget.h

@@ -43,6 +43,9 @@ public:
     void set_desktop_resolution(Gfx::IntSize resolution);
     Gfx::IntSize desktop_resolution();
 
+    void set_desktop_scale_factor(int scale_factor) { m_desktop_scale_factor = scale_factor; }
+    int desktop_scale_factor() const { return m_desktop_scale_factor; }
+
     void set_background_color(Gfx::Color background_color);
     Gfx::Color background_color();
 
@@ -58,6 +61,7 @@ private:
     RefPtr<Gfx::Bitmap> m_desktop_wallpaper_bitmap;
     String m_desktop_wallpaper_mode;
     Gfx::IntSize m_desktop_resolution;
+    int m_desktop_scale_factor { 1 };
     Gfx::Color m_desktop_color;
 };