From 6178830504621116cafd5fa74c23dcc7e44e9078 Mon Sep 17 00:00:00 2001 From: Leon Styhre <leon@leonstyhre.com> Date: Fri, 2 Jul 2021 17:57:52 +0200 Subject: [PATCH] Improved scaling relative to the screen aspect ratio for various GUI components. --- es-core/src/guis/GuiComplexTextEditPopup.cpp | 14 ++++++++---- es-core/src/guis/GuiDetectDevice.cpp | 8 +++---- es-core/src/guis/GuiInputConfig.cpp | 8 +++---- es-core/src/guis/GuiMsgBox.cpp | 23 ++++++++++++-------- es-core/src/guis/GuiTextEditPopup.cpp | 8 +++---- 5 files changed, 36 insertions(+), 25 deletions(-) diff --git a/es-core/src/guis/GuiComplexTextEditPopup.cpp b/es-core/src/guis/GuiComplexTextEditPopup.cpp index 0d234c0ed..20d77fba7 100644 --- a/es-core/src/guis/GuiComplexTextEditPopup.cpp +++ b/es-core/src/guis/GuiComplexTextEditPopup.cpp @@ -88,11 +88,17 @@ GuiComplexTextEditPopup::GuiComplexTextEditPopup( if (multiLine) textHeight *= 6; - mText->setSize(0, textHeight); - mInfoString2->setSize(Renderer::getScreenWidth() * 0.70f, mInfoString2->getFont()->getHeight()); + // Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent + // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference. + float aspectValue = 1.778f / Renderer::getScreenAspectRatio(); + float infoWidth = Math::clamp(0.70f * aspectValue, 0.60f, 0.85f) * Renderer::getScreenWidth(); + float windowWidth = Math::clamp(0.75f * aspectValue, 0.65f, 0.90f) * Renderer::getScreenWidth(); - setSize(Renderer::getScreenWidth() * 0.75f, mTitle->getFont()->getHeight() + - textHeight + mButtonGrid->getSize().y() + mButtonGrid->getSize().y() * 1.85f); + mText->setSize(0, textHeight); + mInfoString2->setSize(infoWidth, mInfoString2->getFont()->getHeight()); + + setSize(windowWidth, mTitle->getFont()->getHeight() + textHeight + + mButtonGrid->getSize().y() + mButtonGrid->getSize().y() * 1.85f); setPosition((Renderer::getScreenWidth() - mSize.x()) / 2, (Renderer::getScreenHeight() - mSize.y()) / 2); mText->startEditing(); diff --git a/es-core/src/guis/GuiDetectDevice.cpp b/es-core/src/guis/GuiDetectDevice.cpp index f9135f672..f5973c510 100644 --- a/es-core/src/guis/GuiDetectDevice.cpp +++ b/es-core/src/guis/GuiDetectDevice.cpp @@ -77,10 +77,10 @@ GuiDetectDevice::GuiDetectDevice( Font::get(FONT_SIZE_MEDIUM), 0xFFFFFFFF, ALIGN_CENTER); mGrid.setEntry(mDeviceHeld, Vector2i(0, 4), false, true); - // For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen - // width rather than the 60% allowed for wider displays. - float width = Renderer::getScreenWidth() * - ((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f); + // Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent + // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference. + float aspectValue = 1.778f / Renderer::getScreenAspectRatio(); + float width = Math::clamp(0.60f * aspectValue, 0.50f, 0.80f) * Renderer::getScreenWidth(); setSize(width, Renderer::getScreenHeight() * 0.5f); setPosition((Renderer::getScreenWidth() - mSize.x()) / 2, diff --git a/es-core/src/guis/GuiInputConfig.cpp b/es-core/src/guis/GuiInputConfig.cpp index efab129ff..5604c5f5e 100644 --- a/es-core/src/guis/GuiInputConfig.cpp +++ b/es-core/src/guis/GuiInputConfig.cpp @@ -214,10 +214,10 @@ GuiInputConfig::GuiInputConfig( mButtonGrid = makeButtonGrid(mWindow, buttons); mGrid.setEntry(mButtonGrid, Vector2i(0, 6), true, false); - // For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen - // width rather than the 60% allowed for wider displays. - float width = Renderer::getScreenWidth() * - ((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f); + // Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent + // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference. + float aspectValue = 1.778f / Renderer::getScreenAspectRatio(); + float width = Math::clamp(0.60f * aspectValue, 0.50f, 0.80f) * Renderer::getScreenWidth(); setSize(width, Renderer::getScreenHeight() * 0.75f); setPosition((Renderer::getScreenWidth() - mSize.x()) / 2.0f, diff --git a/es-core/src/guis/GuiMsgBox.cpp b/es-core/src/guis/GuiMsgBox.cpp index d7d98eae1..16b87ef5b 100644 --- a/es-core/src/guis/GuiMsgBox.cpp +++ b/es-core/src/guis/GuiMsgBox.cpp @@ -27,11 +27,14 @@ GuiMsgBox::GuiMsgBox(Window* window, const HelpStyle& helpstyle, const std::stri mDisableBackButton(disableBackButton), mDeleteOnButtonPress(deleteOnButtonPress) { - // For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen - // width rather than the 60% allowed for wider displays. - float width = Renderer::getScreenWidth() * - ((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f); - float minWidth = Renderer::getScreenWidth() * 0.3f; + // Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent + // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference. + float aspectValue = 1.778f / Renderer::getScreenAspectRatio(); + + float width = floorf(Math::clamp(0.60f * aspectValue, 0.60f, 0.80f) * + Renderer::getScreenWidth()); + float minWidth = floorf(Math::clamp(0.30f * aspectValue, 0.10f, 0.50f) * + Renderer::getScreenWidth()); mMsg = std::make_shared<TextComponent>(mWindow, text, Font::get(FONT_SIZE_MEDIUM), 0x777777FF, ALIGN_CENTER); @@ -95,11 +98,13 @@ void GuiMsgBox::changeText(const std::string& newText) mMsg->setText(newText); mMsg->setSize(mMsg->getFont()->sizeText(newText)); - // For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen - // width rather than the 60% allowed for wider displays. - float width = Renderer::getScreenWidth() * - ((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f); + // Adjust the width depending on the aspect ratio of the screen, to make the screen look + // somewhat coherent regardless of screen type. The 1.778 aspect ratio value is the 16:9 + // reference. + float aspectValue = 1.778f / Renderer::getScreenAspectRatio(); + float width = floorf(Math::clamp(0.60f * aspectValue, 0.60f, 0.80f) * + Renderer::getScreenWidth()); float minWidth = Renderer::getScreenWidth() * 0.3f; // Decide final width. diff --git a/es-core/src/guis/GuiTextEditPopup.cpp b/es-core/src/guis/GuiTextEditPopup.cpp index 71aee9be9..1bdb06961 100644 --- a/es-core/src/guis/GuiTextEditPopup.cpp +++ b/es-core/src/guis/GuiTextEditPopup.cpp @@ -62,10 +62,10 @@ GuiTextEditPopup::GuiTextEditPopup( textHeight *= 6; mText->setSize(0, textHeight); - // For narrower displays (e.g. in 4:3 ratio), allow the window to fill 70% of the screen - // width rather than the 50% allowed for wider displays. - float width = Renderer::getScreenWidth() * - ((Renderer::getScreenAspectRatio() < 1.4f) ? 0.7f : 0.5f); + // Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent + // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference. + float aspectValue = 1.778f / Renderer::getScreenAspectRatio(); + float width = Math::clamp(0.50f * aspectValue, 0.40f, 0.70f) * Renderer::getScreenWidth(); setSize(width, mTitle->getFont()->getHeight() + textHeight + mButtonGrid->getSize().y() + mButtonGrid->getSize().y() / 2);