From f37f281f89e925d68502fdfddaf4b4d591a83404 Mon Sep 17 00:00:00 2001 From: Nico Weber Date: Fri, 15 Jan 2021 19:02:17 -0500 Subject: [PATCH] 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. --- Documentation/HighDPI.md | 8 ++--- .../DisplaySettings/DisplaySettings.cpp | 33 +++++++++++++++---- .../DisplaySettings/DisplaySettings.h | 3 ++ .../DisplaySettings/DisplaySettingsWindow.gml | 20 +++++++++++ .../DisplaySettings/MonitorWidget.cpp | 20 +++++++++-- .../DisplaySettings/MonitorWidget.h | 4 +++ 6 files changed, 76 insertions(+), 12 deletions(-) diff --git a/Documentation/HighDPI.md b/Documentation/HighDPI.md index 885cebbd83..8c946b9dd1 100644 --- a/Documentation/HighDPI.md +++ b/Documentation/HighDPI.md @@ -31,8 +31,8 @@ The plan is to have all applications use highdpi backbuffers eventually. It'll t 0. Add some scaling support to Painter. Make it do 2x nearest neighbor scaling of everything at paint time for now. 1. Add scale factor concept to WindowServer. WindowServer has a scaled framebuffer/backbuffer. All other bitmaps (both other bitmaps in WindowServer, as well as everything WindowServer-client-side) are always stored at 1x and scaled up when they're painted to the framebuffer. Things will look fine at 2x, but pixely (but window gradients will be smooth already). 2. Let DisplaySettings toggle it WindowServer scale. Now it's possible to switch to and from HighDPI dynamically, using UI. -2. Come up with a system to have scale-dependent bitmap and font resources. Use that to use a high-res cursor bitmaps and high-res menu bar text painting in window server. Menu text and cursor will look less pixely. (And window frames too, I suppose.) -3. Let apps opt in to high-res window framebuffers, and convert all apps one-by-one -4. Remove high-res window framebuffer opt-in since all apps have it now. +3. Come up with a system to have scale-dependent bitmap and font resources. Use that to use a high-res cursor bitmaps and high-res menu bar text painting in window server. Menu text and cursor will look less pixely. (And window frames too, I suppose.) +4. Let apps opt in to high-res window framebuffers, and convert all apps one-by-one +5. Remove high-res window framebuffer opt-in since all apps have it now. -We're currently before point 2. +We're currently before point 3. diff --git a/Userland/Applications/DisplaySettings/DisplaySettings.cpp b/Userland/Applications/DisplaySettings/DisplaySettings.cpp index de8c00cc6f..20bb7f4e9c 100644 --- a/Userland/Applications/DisplaySettings/DisplaySettings.cpp +++ b/Userland/Applications/DisplaySettings/DisplaySettings.cpp @@ -39,6 +39,7 @@ #include #include #include +#include #include #include #include @@ -148,6 +149,21 @@ void DisplaySettingsWidget::create_frame() m_monitor_widget->update(); }; + m_display_scale_radio_1x = *find_descendant_of_type_named("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("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("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(m_monitor_widget->desktop_resolution(), 1); + auto result = GUI::WindowServerConnection::the().send_sync(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); } diff --git a/Userland/Applications/DisplaySettings/DisplaySettings.h b/Userland/Applications/DisplaySettings/DisplaySettings.h index 30fb26ebed..ebda18addd 100644 --- a/Userland/Applications/DisplaySettings/DisplaySettings.h +++ b/Userland/Applications/DisplaySettings/DisplaySettings.h @@ -29,6 +29,7 @@ #include "MonitorWidget.h" #include #include +#include class DisplaySettingsWidget : public GUI::Widget { C_OBJECT(DisplaySettingsWidget); @@ -51,5 +52,7 @@ private: RefPtr m_wallpaper_combo; RefPtr m_mode_combo; RefPtr m_resolution_combo; + RefPtr m_display_scale_radio_1x; + RefPtr m_display_scale_radio_2x; RefPtr m_color_input; }; diff --git a/Userland/Applications/DisplaySettings/DisplaySettingsWindow.gml b/Userland/Applications/DisplaySettings/DisplaySettingsWindow.gml index af9f204f03..2794423045 100644 --- a/Userland/Applications/DisplaySettings/DisplaySettingsWindow.gml +++ b/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%" } } diff --git a/Userland/Applications/DisplaySettings/MonitorWidget.cpp b/Userland/Applications/DisplaySettings/MonitorWidget.cpp index e998b1f228..e146c740bd 100644 --- a/Userland/Applications/DisplaySettings/MonitorWidget.cpp +++ b/Userland/Applications/DisplaySettings/MonitorWidget.cpp @@ -27,6 +27,7 @@ #include "MonitorWidget.h" #include #include +#include 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()); } } diff --git a/Userland/Applications/DisplaySettings/MonitorWidget.h b/Userland/Applications/DisplaySettings/MonitorWidget.h index 1961e91330..5fcd07c867 100644 --- a/Userland/Applications/DisplaySettings/MonitorWidget.h +++ b/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 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; };