Multiple layout improvements when running on a vertically oriented screen.

This commit is contained in:
Leon Styhre 2023-02-10 01:00:10 +01:00
parent ebcc0f95b0
commit 07951d8d21
8 changed files with 37 additions and 28 deletions

View file

@ -60,7 +60,7 @@ void NinePatchComponent::buildVertices()
else { else {
// Scale the corner size relative to the screen resolution (using the medium sized // Scale the corner size relative to the screen resolution (using the medium sized
// default font as size reference). // default font as size reference).
relCornerSize = mCornerSize * (Font::get(FONT_SIZE_MEDIUM)->getLetterHeight() * relCornerSize = mCornerSize * (Font::get(FONT_SIZE_MEDIUM_FIXED)->getLetterHeight() *
(mSharpCorners == true ? 0.0568f : 0.09f) / 2.0f); (mSharpCorners == true ? 0.0568f : 0.09f) / 2.0f);
} }

View file

@ -235,7 +235,7 @@ CarouselComponent<T>::CarouselComponent()
, mColorGradientHorizontal {true} , mColorGradientHorizontal {true}
, mTextColor {0x000000FF} , mTextColor {0x000000FF}
, mTextBackgroundColor {0xFFFFFF00} , mTextBackgroundColor {0xFFFFFF00}
, mFont {Font::get(FONT_SIZE_LARGE)} , mFont {Font::get(FONT_SIZE_LARGE_FIXED)}
, mLetterCase {LetterCase::NONE} , mLetterCase {LetterCase::NONE}
, mLetterCaseAutoCollections {LetterCase::UNDEFINED} , mLetterCaseAutoCollections {LetterCase::UNDEFINED}
, mLetterCaseCustomCollections {LetterCase::UNDEFINED} , mLetterCaseCustomCollections {LetterCase::UNDEFINED}

View file

@ -171,7 +171,7 @@ TextListComponent<T>::TextListComponent()
, mLoopScroll {false} , mLoopScroll {false}
, mGamelistView {std::is_same_v<T, FileData*> ? true : false} , mGamelistView {std::is_same_v<T, FileData*> ? true : false}
, mLegacyMode {false} , mLegacyMode {false}
, mFont {Font::get(FONT_SIZE_MEDIUM)} , mFont {Font::get(FONT_SIZE_MEDIUM_FIXED)}
, mSelectorHeight {mFont->getSize() * 1.5f} , mSelectorHeight {mFont->getSize() * 1.5f}
, mSelectorHorizontalOffset {0.0f} , mSelectorHorizontalOffset {0.0f}
, mSelectorVerticalOffset {0.0f} , mSelectorVerticalOffset {0.0f}

View file

@ -22,6 +22,7 @@ GuiDetectDevice::GuiDetectDevice(bool firstRun,
const std::function<void()>& doneCallback) const std::function<void()>& doneCallback)
: mFirstRun {firstRun} : mFirstRun {firstRun}
, mForcedConfig {forcedConfig} , mForcedConfig {forcedConfig}
, mRenderer {Renderer::getInstance()}
, mBackground {":/graphics/frame.svg"} , mBackground {":/graphics/frame.svg"}
, mGrid {glm::ivec2 {1, 5}} , mGrid {glm::ivec2 {1, 5}}
{ {
@ -81,12 +82,14 @@ GuiDetectDevice::GuiDetectDevice(bool firstRun,
// Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent // 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. // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
float aspectValue {1.778f / Renderer::getScreenAspectRatio()}; const float aspectValue {1.778f / mRenderer->getScreenAspectRatio()};
float width {glm::clamp(0.60f * aspectValue, 0.50f, 0.80f) * Renderer::getScreenWidth()}; const float width {glm::clamp(0.60f * aspectValue, 0.50f,
(mRenderer->getIsVerticalOrientation() ? 0.85f : 0.80f)) *
mRenderer->getScreenWidth()};
setSize(width, Renderer::getScreenHeight() * 0.5f); setSize(width, mRenderer->getScreenHeight() * 0.5f);
setPosition((Renderer::getScreenWidth() - mSize.x) / 2.0f, setPosition((mRenderer->getScreenWidth() - mSize.x) / 2.0f,
(Renderer::getScreenHeight() - mSize.y) / 2.0f); (mRenderer->getScreenHeight() - mSize.y) / 2.0f);
} }
void GuiDetectDevice::onSizeChanged() void GuiDetectDevice::onSizeChanged()

View file

@ -30,6 +30,7 @@ private:
InputConfig* mHoldingConfig; InputConfig* mHoldingConfig;
int mHoldTime; int mHoldTime;
Renderer* mRenderer;
NinePatchComponent mBackground; NinePatchComponent mBackground;
ComponentGrid mGrid; ComponentGrid mGrid;

View file

@ -187,7 +187,8 @@ GuiInputConfig::GuiInputConfig(InputConfig* target,
float aspectValue {1.778f / Renderer::getScreenAspectRatio()}; float aspectValue {1.778f / Renderer::getScreenAspectRatio()};
float width {glm::clamp(0.60f * aspectValue, 0.50f, 0.80f) * Renderer::getScreenWidth()}; float width {glm::clamp(0.60f * aspectValue, 0.50f, 0.80f) * Renderer::getScreenWidth()};
setSize(width, Renderer::getScreenHeight() * 0.75f); setSize(width, (Renderer::getIsVerticalOrientation() ? Renderer::getScreenWidth() * 0.75f :
Renderer::getScreenHeight() * 0.75f));
setPosition((Renderer::getScreenWidth() - mSize.x) / 2.0f, setPosition((Renderer::getScreenWidth() - mSize.x) / 2.0f,
(Renderer::getScreenHeight() - mSize.y) / 2.0f); (Renderer::getScreenHeight() - mSize.y) / 2.0f);
} }

View file

@ -25,7 +25,8 @@ GuiMsgBox::GuiMsgBox(const HelpStyle& helpstyle,
const std::function<void()>& func3, const std::function<void()>& func3,
bool disableBackButton, bool disableBackButton,
bool deleteOnButtonPress) bool deleteOnButtonPress)
: mBackground {":/graphics/frame.svg"} : mRenderer {Renderer::getInstance()}
, mBackground {":/graphics/frame.svg"}
, mGrid {glm::ivec2 {1, 2}} , mGrid {glm::ivec2 {1, 2}}
, mHelpStyle {helpstyle} , mHelpStyle {helpstyle}
, mDisableBackButton {disableBackButton} , mDisableBackButton {disableBackButton}
@ -33,12 +34,13 @@ GuiMsgBox::GuiMsgBox(const HelpStyle& helpstyle,
{ {
// Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent // 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. // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
float aspectValue {1.778f / Renderer::getScreenAspectRatio()}; const float aspectValue {1.778f / mRenderer->getScreenAspectRatio()};
float width { const float maxWidthMultiplier {mRenderer->getIsVerticalOrientation() ? 0.90f : 0.80f};
floorf(glm::clamp(0.60f * aspectValue, 0.60f, 0.80f) * Renderer::getScreenWidth())}; float width {floorf(glm::clamp(0.60f * aspectValue, 0.60f, maxWidthMultiplier) *
float minWidth { mRenderer->getScreenWidth())};
floorf(glm::clamp(0.30f * aspectValue, 0.10f, 0.50f) * Renderer::getScreenWidth())}; const float minWidth {
floorf(glm::clamp(0.30f * aspectValue, 0.10f, 0.50f) * mRenderer->getScreenWidth())};
mMsg = std::make_shared<TextComponent>(text, Font::get(FONT_SIZE_MEDIUM), 0x777777FF, mMsg = std::make_shared<TextComponent>(text, Font::get(FONT_SIZE_MEDIUM), 0x777777FF,
ALIGN_CENTER); ALIGN_CENTER);
@ -85,14 +87,14 @@ GuiMsgBox::GuiMsgBox(const HelpStyle& helpstyle,
// Now that we know width, we can find height. // Now that we know width, we can find height.
mMsg->setSize(width, 0.0f); // mMsg->getSize.y() now returns the proper length. mMsg->setSize(width, 0.0f); // mMsg->getSize.y() now returns the proper length.
const float msgHeight = std::max(Font::get(FONT_SIZE_LARGE)->getHeight(), const float msgHeight {std::max(Font::get(FONT_SIZE_LARGE)->getHeight(),
mMsg->getSize().y * VERTICAL_PADDING_MODIFIER); mMsg->getSize().y * VERTICAL_PADDING_MODIFIER)};
setSize(width + std::ceil(HORIZONTAL_PADDING_PX * 2.0f * Renderer::getScreenWidthModifier()), setSize(width + std::ceil(HORIZONTAL_PADDING_PX * 2.0f * mRenderer->getScreenWidthModifier()),
msgHeight + mButtonGrid->getSize().y); msgHeight + mButtonGrid->getSize().y);
// Center for good measure. // Center for good measure.
setPosition((Renderer::getScreenWidth() - mSize.x) / 2.0f, setPosition((mRenderer->getScreenWidth() - mSize.x) / 2.0f,
(Renderer::getScreenHeight() - mSize.y) / 2.0f); (mRenderer->getScreenHeight() - mSize.y) / 2.0f);
addChild(&mBackground); addChild(&mBackground);
addChild(&mGrid); addChild(&mGrid);
@ -101,18 +103,19 @@ GuiMsgBox::GuiMsgBox(const HelpStyle& helpstyle,
void GuiMsgBox::changeText(const std::string& newText) void GuiMsgBox::changeText(const std::string& newText)
{ {
mMsg->setText(newText); mMsg->setText(newText);
glm::vec2 newSize = mMsg->getFont()->sizeText(newText); glm::vec2 newSize {mMsg->getFont()->sizeText(newText)};
newSize.y *= VERTICAL_PADDING_MODIFIER; newSize.y *= VERTICAL_PADDING_MODIFIER;
mMsg->setSize(newSize); mMsg->setSize(newSize);
// Adjust the width depending on the aspect ratio of the screen, to make the screen look // 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 // somewhat coherent regardless of screen type. The 1.778 aspect ratio value is the 16:9
// reference. // reference.
float aspectValue = 1.778f / Renderer::getScreenAspectRatio(); float aspectValue {1.778f / Renderer::getScreenAspectRatio()};
float width = const float maxWidthMultiplier {mRenderer->getIsVerticalOrientation() ? 0.90f : 0.80f};
floorf(glm::clamp(0.60f * aspectValue, 0.60f, 0.80f) * Renderer::getScreenWidth()); float width {floorf(glm::clamp(0.60f * aspectValue, 0.60f, maxWidthMultiplier) *
float minWidth = Renderer::getScreenWidth() * 0.3f; mRenderer->getScreenWidth())};
const float minWidth {mRenderer->getScreenWidth() * 0.3f};
// Decide final width. // Decide final width.
if (mMsg->getSize().x < width && mButtonGrid->getSize().x < width) { if (mMsg->getSize().x < width && mButtonGrid->getSize().x < width) {
@ -130,8 +133,8 @@ void GuiMsgBox::changeText(const std::string& newText)
newSize.y *= VERTICAL_PADDING_MODIFIER; newSize.y *= VERTICAL_PADDING_MODIFIER;
mMsg->setSize(newSize); mMsg->setSize(newSize);
const float msgHeight = std::max(Font::get(FONT_SIZE_LARGE)->getHeight(), mMsg->getSize().y); const float msgHeight {std::max(Font::get(FONT_SIZE_LARGE)->getHeight(), mMsg->getSize().y)};
setSize(width + std::ceil(HORIZONTAL_PADDING_PX * 2.0f * Renderer::getScreenWidthModifier()), setSize(width + std::ceil(HORIZONTAL_PADDING_PX * 2.0f * mRenderer->getScreenWidthModifier()),
msgHeight + mButtonGrid->getSize().y); msgHeight + mButtonGrid->getSize().y);
} }
@ -181,7 +184,7 @@ void GuiMsgBox::deleteMeAndCall(const std::function<void()>& func)
std::vector<HelpPrompt> GuiMsgBox::getHelpPrompts() std::vector<HelpPrompt> GuiMsgBox::getHelpPrompts()
{ {
std::vector<HelpPrompt> prompts = mGrid.getHelpPrompts(); std::vector<HelpPrompt> prompts {mGrid.getHelpPrompts()};
if (!mDisableBackButton) if (!mDisableBackButton)
prompts.push_back(HelpPrompt("b", "Back")); prompts.push_back(HelpPrompt("b", "Back"));

View file

@ -42,6 +42,7 @@ public:
private: private:
void deleteMeAndCall(const std::function<void()>& func); void deleteMeAndCall(const std::function<void()>& func);
Renderer* mRenderer;
NinePatchComponent mBackground; NinePatchComponent mBackground;
ComponentGrid mGrid; ComponentGrid mGrid;