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 {
// Scale the corner size relative to the screen resolution (using the medium sized
// 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);
}

View file

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

View file

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

View file

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

View file

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

View file

@ -187,7 +187,8 @@ GuiInputConfig::GuiInputConfig(InputConfig* target,
float aspectValue {1.778f / Renderer::getScreenAspectRatio()};
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,
(Renderer::getScreenHeight() - mSize.y) / 2.0f);
}

View file

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

View file

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