From f74b2761bf10dc98d25764b179e17f60c93fdce3 Mon Sep 17 00:00:00 2001 From: shadash Date: Mon, 11 Oct 2021 23:12:21 +0200 Subject: [PATCH 1/6] extend placeholder definition to customizable image + text Signed-off-by: Sophia Hadash --- es-app/src/views/SystemView.cpp | 66 ++++++++++++++++++++++++++++----- es-app/src/views/SystemView.h | 1 + 2 files changed, 58 insertions(+), 9 deletions(-) diff --git a/es-app/src/views/SystemView.cpp b/es-app/src/views/SystemView.cpp index 8159bacbd..75683a09f 100644 --- a/es-app/src/views/SystemView.cpp +++ b/es-app/src/views/SystemView.cpp @@ -68,6 +68,10 @@ void SystemView::populate() e.name = (*it)->getName(); e.object = *it; + // Component offset. + glm::vec3 offsetLogo = {0.0f, 0.0f, 0.0f}; + glm::vec3 offsetLogoPlaceholderText = {0.0f, 0.0f, 0.0f}; + // Make logo. const ThemeData::ThemeElement* logoElem = theme->getElement("system", "logo", "image"); if (logoElem) { @@ -84,18 +88,40 @@ void SystemView::populate() e.data.logo = std::shared_ptr(logo); } } + if (!e.data.logo) { - // No logo in theme; use text. - TextComponent* text = + // No logo in theme; use placeholder. + + glm::vec2 resolution = glm::vec2{static_cast(Renderer::getScreenWidth()), + static_cast(Renderer::getScreenHeight())}; + glm::vec3 center = {resolution.x / 2.0f, resolution.y / 2.0f, 1.0f}; + glm::vec2 scale{getParent() ? getParent()->getSize() : resolution}; + + // Placeholder Image. + const ThemeData::ThemeElement* logoElem = + theme->getElement("system", "logoPlaceholderImage", "image"); + if (logoElem) { + auto path = logoElem->get("path"); + std::string defaultPath = + logoElem->has("default") ? logoElem->get("default") : ""; + if ((!path.empty() && ResourceManager::getInstance()->fileExists(path)) || + (!defaultPath.empty() && + ResourceManager::getInstance()->fileExists(defaultPath))) { + ImageComponent* logo = new ImageComponent(mWindow, false, false); + logo->applyTheme(theme, "system", "logoPlaceholderImage", ThemeFlags::ALL); + if (!logoElem->has("size")) + logo->setMaxSize(mCarousel.logoSize * mCarousel.logoScale); + offsetLogo = logo->getPosition() - center; + logo->setRotateByTargetSize(true); + e.data.logo = std::shared_ptr(logo); + } + } + + // Placeholder Text. + auto* text = new TextComponent(mWindow, (*it)->getName(), Font::get(FONT_SIZE_LARGE), 0x000000FF, ALIGN_CENTER); text->setSize(mCarousel.logoSize * mCarousel.logoScale); - text->applyTheme((*it)->getTheme(), "system", "logoText", - ThemeFlags::FONT_PATH | ThemeFlags::FONT_SIZE | ThemeFlags::COLOR | - ThemeFlags::FORCE_UPPERCASE | ThemeFlags::LINE_SPACING | - ThemeFlags::TEXT); - e.data.logo = std::shared_ptr(text); - if (mCarousel.type == VERTICAL || mCarousel.type == VERTICAL_WHEEL) { text->setHorizontalAlignment(mCarousel.logoAlignment); text->setVerticalAlignment(ALIGN_CENTER); @@ -104,6 +130,13 @@ void SystemView::populate() text->setHorizontalAlignment(ALIGN_CENTER); text->setVerticalAlignment(mCarousel.logoAlignment); } + text->applyTheme((*it)->getTheme(), "system", "logoPlaceholderText", + ThemeFlags::ALL); + offsetLogoPlaceholderText = text->getPosition() - center; + if (!e.data.logo) + e.data.logo = std::shared_ptr(text); + else + e.data.logoPlaceholderText = std::shared_ptr(text); } if (mCarousel.type == VERTICAL || mCarousel.type == VERTICAL_WHEEL) { @@ -124,7 +157,11 @@ void SystemView::populate() } glm::vec2 denormalized{mCarousel.logoSize * e.data.logo->getOrigin()}; - e.data.logo->setPosition(denormalized.x, denormalized.y, 0.0f); + glm::vec3 v = {denormalized.x, denormalized.y, 0.0f}; + e.data.logo->setPosition(v + offsetLogo); + if (e.data.logoPlaceholderText) + e.data.logoPlaceholderText->setPosition( + v + offsetLogoPlaceholderText); // e.data.logo->getPosition() + // Make background extras. e.data.backgroundExtras = ThemeData::makeExtras((*it)->getTheme(), "system", mWindow); @@ -590,6 +627,17 @@ void SystemView::renderCarousel(const glm::mat4& trans) comp->setScale(scale); comp->setOpacity(static_cast(opacity)); comp->render(logoTrans); + + if (mEntries.at(index).data.logoPlaceholderText) { + const std::shared_ptr& comp = mEntries.at(index).data.logoPlaceholderText; + if (mCarousel.type == VERTICAL_WHEEL || mCarousel.type == HORIZONTAL_WHEEL) { + comp->setRotationDegrees(mCarousel.logoRotation * distance); + comp->setRotationOrigin(mCarousel.logoRotationOrigin); + } + comp->setScale(scale); + comp->setOpacity(static_cast(opacity)); + comp->render(logoTrans); + } } Renderer::popClipRect(); } diff --git a/es-app/src/views/SystemView.h b/es-app/src/views/SystemView.h index 6e590c971..5e5cff547 100644 --- a/es-app/src/views/SystemView.h +++ b/es-app/src/views/SystemView.h @@ -29,6 +29,7 @@ enum CarouselType : unsigned int { struct SystemViewData { std::shared_ptr logo; + std::shared_ptr logoPlaceholderText; std::vector backgroundExtras; }; From c388c7fd128ca75a7c73dde987445d528f965663 Mon Sep 17 00:00:00 2001 From: Sophia Hadash Date: Mon, 11 Oct 2021 23:27:11 +0200 Subject: [PATCH 2/6] support old placeholder format as a fallback Signed-off-by: Sophia Hadash --- es-app/src/views/SystemView.cpp | 61 ++++++++++++++++++++++++--------- 1 file changed, 45 insertions(+), 16 deletions(-) diff --git a/es-app/src/views/SystemView.cpp b/es-app/src/views/SystemView.cpp index 75683a09f..230db28da 100644 --- a/es-app/src/views/SystemView.cpp +++ b/es-app/src/views/SystemView.cpp @@ -118,25 +118,54 @@ void SystemView::populate() } // Placeholder Text. - auto* text = - new TextComponent(mWindow, (*it)->getName(), Font::get(FONT_SIZE_LARGE), - 0x000000FF, ALIGN_CENTER); - text->setSize(mCarousel.logoSize * mCarousel.logoScale); - if (mCarousel.type == VERTICAL || mCarousel.type == VERTICAL_WHEEL) { - text->setHorizontalAlignment(mCarousel.logoAlignment); - text->setVerticalAlignment(ALIGN_CENTER); + const ThemeData::ThemeElement* logoPlaceholderText = + theme->getElement("system", "logoPlaceholderText", "text"); + if (logoPlaceholderText) { + // Element 'logoPlaceholderText' found in theme: place text + auto* text = + new TextComponent(mWindow, (*it)->getName(), Font::get(FONT_SIZE_LARGE), + 0x000000FF, ALIGN_CENTER); + text->setSize(mCarousel.logoSize * mCarousel.logoScale); + if (mCarousel.type == VERTICAL || mCarousel.type == VERTICAL_WHEEL) { + text->setHorizontalAlignment(mCarousel.logoAlignment); + text->setVerticalAlignment(ALIGN_CENTER); + } + else { + text->setHorizontalAlignment(ALIGN_CENTER); + text->setVerticalAlignment(mCarousel.logoAlignment); + } + text->applyTheme((*it)->getTheme(), "system", "logoPlaceholderText", + ThemeFlags::ALL); + if (!e.data.logo) { + e.data.logo = std::shared_ptr(text); + offsetLogo = text->getPosition() - center; + } + else { + e.data.logoPlaceholderText = std::shared_ptr(text); + offsetLogoPlaceholderText = text->getPosition() - center; + } } else { - text->setHorizontalAlignment(ALIGN_CENTER); - text->setVerticalAlignment(mCarousel.logoAlignment); - } - text->applyTheme((*it)->getTheme(), "system", "logoPlaceholderText", - ThemeFlags::ALL); - offsetLogoPlaceholderText = text->getPosition() - center; - if (!e.data.logo) + // Fallback to legacy centered placeholder text. + TextComponent* text = + new TextComponent(mWindow, (*it)->getName(), Font::get(FONT_SIZE_LARGE), + 0x000000FF, ALIGN_CENTER); + text->setSize(mCarousel.logoSize * mCarousel.logoScale); + text->applyTheme((*it)->getTheme(), "system", "logoText", + ThemeFlags::FONT_PATH | ThemeFlags::FONT_SIZE | + ThemeFlags::COLOR | ThemeFlags::FORCE_UPPERCASE | + ThemeFlags::LINE_SPACING | ThemeFlags::TEXT); e.data.logo = std::shared_ptr(text); - else - e.data.logoPlaceholderText = std::shared_ptr(text); + + if (mCarousel.type == VERTICAL || mCarousel.type == VERTICAL_WHEEL) { + text->setHorizontalAlignment(mCarousel.logoAlignment); + text->setVerticalAlignment(ALIGN_CENTER); + } + else { + text->setHorizontalAlignment(ALIGN_CENTER); + text->setVerticalAlignment(mCarousel.logoAlignment); + } + } } if (mCarousel.type == VERTICAL || mCarousel.type == VERTICAL_WHEEL) { From 15d7afb71e5c73b655faa077f21f561044a04c8f Mon Sep 17 00:00:00 2001 From: shadash Date: Mon, 11 Oct 2021 23:32:37 +0200 Subject: [PATCH 3/6] documentation Signed-off-by: Sophia Hadash --- THEMES-DEV.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/THEMES-DEV.md b/THEMES-DEV.md index 1b998b9da..bdeba480b 100644 --- a/THEMES-DEV.md +++ b/THEMES-DEV.md @@ -362,8 +362,10 @@ Below are the default zIndex values per element type: * `text name="md_description"` * `text name="md_name"` * System Logo/Text - 50 - * `text name="logoText"` * `image name="logo"` + * `text name="logoText"` + * `image name="logoPlaceholderImage"` + * `text name="logoPlaceholderText"` * Gamelist information - 50 * `text name="gamelistInfo"` @@ -407,17 +409,26 @@ or to specify only a portion of the value of a theme property: ### Views, their elements, and themeable properties #### system + * `helpsystem name="help"` - ALL - The help system style for this view. -* `carousel name="systemcarousel"` -ALL +* `carousel name="systemcarousel"` - ALL - The system logo carousel * `image name="logo"` - PATH | COLOR - A logo image, to be displayed in the system logo carousel. +* `image name="logoPlaceholderImage"` - ALL + - A logo image, to be displayed system name in the system logo carousel when no logo is available. Set the position + to `0.5 0.5` to center the image. +* `text name="logoPlaceholderText"` - ALL + - Logo text, to be displayed system name in the system logo carousel when no logo is available. The logo text is + displayed on top of `logoPlaceholderImage`. Set the position to `0.5 0.5` to center the text. * `text name="logoText"` - FONT_PATH | COLOR | FORCE_UPPERCASE | LINE_SPACING | TEXT - - A logo text, to be displayed system name in the system logo carousel when no logo is available. + - **Deprecated:** A logo text, to be displayed system name in the system logo carousel when no logo is available. + Ignored when `logoPlaceholderImage` or `logoPlaceholderText` are set. * `text name="systemInfo"` - ALL - Displays details of the system currently selected in the carousel. -* You can use extra elements (elements with `extra="true"`) to add your own backgrounds, etc. They will be displayed behind the carousel, and scroll relative to the carousel. +* You can use extra elements (elements with `extra="true"`) to add your own backgrounds, etc. They will be displayed + behind the carousel, and scroll relative to the carousel. #### basic From 716aa3df4a75e8b827d5845ba634d704895649fb Mon Sep 17 00:00:00 2001 From: Sophia Hadash Date: Tue, 12 Oct 2021 10:48:32 +0200 Subject: [PATCH 4/6] cleanup --- es-app/src/views/SystemView.cpp | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/es-app/src/views/SystemView.cpp b/es-app/src/views/SystemView.cpp index 230db28da..e42948fc4 100644 --- a/es-app/src/views/SystemView.cpp +++ b/es-app/src/views/SystemView.cpp @@ -68,7 +68,7 @@ void SystemView::populate() e.name = (*it)->getName(); e.object = *it; - // Component offset. + // Component offset. Used for positioning placeholders. glm::vec3 offsetLogo = {0.0f, 0.0f, 0.0f}; glm::vec3 offsetLogoPlaceholderText = {0.0f, 0.0f, 0.0f}; @@ -89,13 +89,12 @@ void SystemView::populate() } } + // No logo available? Make placeholder. if (!e.data.logo) { - // No logo in theme; use placeholder. glm::vec2 resolution = glm::vec2{static_cast(Renderer::getScreenWidth()), static_cast(Renderer::getScreenHeight())}; glm::vec3 center = {resolution.x / 2.0f, resolution.y / 2.0f, 1.0f}; - glm::vec2 scale{getParent() ? getParent()->getSize() : resolution}; // Placeholder Image. const ThemeData::ThemeElement* logoElem = @@ -190,7 +189,7 @@ void SystemView::populate() e.data.logo->setPosition(v + offsetLogo); if (e.data.logoPlaceholderText) e.data.logoPlaceholderText->setPosition( - v + offsetLogoPlaceholderText); // e.data.logo->getPosition() + + v + offsetLogoPlaceholderText); // Make background extras. e.data.backgroundExtras = ThemeData::makeExtras((*it)->getTheme(), "system", mWindow); From 761b08633170f15a26808db44671129aea7f048e Mon Sep 17 00:00:00 2001 From: shadash Date: Fri, 5 Nov 2021 10:26:14 +0100 Subject: [PATCH 5/6] 652: cleanup code, theme tags --- es-app/src/views/SystemView.cpp | 34 ++++++++++++++++----------------- themes/rbsimple-DE/theme.xml | 7 +++++++ 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/es-app/src/views/SystemView.cpp b/es-app/src/views/SystemView.cpp index fcd0c2695..507f747dc 100644 --- a/es-app/src/views/SystemView.cpp +++ b/es-app/src/views/SystemView.cpp @@ -56,17 +56,16 @@ void SystemView::populate() { mEntries.clear(); - for (auto it = SystemData::sSystemVector.cbegin(); // Line break. - it != SystemData::sSystemVector.cend(); it++) { - const std::shared_ptr& theme = (*it)->getTheme(); + for (auto it : SystemData::sSystemVector) { + const std::shared_ptr& theme = it->getTheme(); if (mViewNeedsReload) getViewElements(theme); - if ((*it)->isVisible()) { + if (it->isVisible()) { Entry e; - e.name = (*it)->getName(); - e.object = *it; + e.name = it->getName(); + e.object = it; // Component offset. Used for positioning placeholders. glm::vec3 offsetLogo = {0.0f, 0.0f, 0.0f}; @@ -75,13 +74,13 @@ void SystemView::populate() // Make logo. const ThemeData::ThemeElement* logoElem = theme->getElement("system", "logo", "image"); if (logoElem) { - std::string path = logoElem->get("path"); + auto path = logoElem->get("path"); std::string defaultPath = logoElem->has("default") ? logoElem->get("default") : ""; if ((!path.empty() && ResourceManager::getInstance()->fileExists(path)) || (!defaultPath.empty() && ResourceManager::getInstance()->fileExists(defaultPath))) { - ImageComponent* logo = new ImageComponent(mWindow, false, false); + auto* logo = new ImageComponent(mWindow, false, false); logo->setMaxSize(mCarousel.logoSize * mCarousel.logoScale); logo->applyTheme(theme, "system", "logo", ThemeFlags::PATH | ThemeFlags::COLOR); logo->setRotateByTargetSize(true); @@ -97,8 +96,7 @@ void SystemView::populate() glm::vec3 center = {resolution.x / 2.0f, resolution.y / 2.0f, 1.0f}; // Placeholder Image. - const ThemeData::ThemeElement* logoElem = - theme->getElement("system", "logoPlaceholderImage", "image"); + logoElem = theme->getElement("system", "logoPlaceholderImage", "image"); if (logoElem) { auto path = logoElem->get("path"); std::string defaultPath = @@ -106,7 +104,7 @@ void SystemView::populate() if ((!path.empty() && ResourceManager::getInstance()->fileExists(path)) || (!defaultPath.empty() && ResourceManager::getInstance()->fileExists(defaultPath))) { - ImageComponent* logo = new ImageComponent(mWindow, false, false); + auto* logo = new ImageComponent(mWindow, false, false); logo->applyTheme(theme, "system", "logoPlaceholderImage", ThemeFlags::ALL); if (!logoElem->has("size")) logo->setMaxSize(mCarousel.logoSize * mCarousel.logoScale); @@ -122,7 +120,7 @@ void SystemView::populate() if (logoPlaceholderText) { // Element 'logoPlaceholderText' found in theme: place text auto* text = - new TextComponent(mWindow, (*it)->getName(), Font::get(FONT_SIZE_LARGE), + new TextComponent(mWindow, it->getName(), Font::get(FONT_SIZE_LARGE), 0x000000FF, ALIGN_CENTER); text->setSize(mCarousel.logoSize * mCarousel.logoScale); if (mCarousel.type == VERTICAL || mCarousel.type == VERTICAL_WHEEL) { @@ -133,7 +131,7 @@ void SystemView::populate() text->setHorizontalAlignment(ALIGN_CENTER); text->setVerticalAlignment(mCarousel.logoAlignment); } - text->applyTheme((*it)->getTheme(), "system", "logoPlaceholderText", + text->applyTheme(it->getTheme(), "system", "logoPlaceholderText", ThemeFlags::ALL); if (!e.data.logo) { e.data.logo = std::shared_ptr(text); @@ -146,11 +144,11 @@ void SystemView::populate() } else { // Fallback to legacy centered placeholder text. - TextComponent* text = - new TextComponent(mWindow, (*it)->getName(), Font::get(FONT_SIZE_LARGE), + auto* text = + new TextComponent(mWindow, it->getName(), Font::get(FONT_SIZE_LARGE), 0x000000FF, ALIGN_CENTER); text->setSize(mCarousel.logoSize * mCarousel.logoScale); - text->applyTheme((*it)->getTheme(), "system", "logoText", + text->applyTheme(it->getTheme(), "system", "logoText", ThemeFlags::FONT_PATH | ThemeFlags::FONT_SIZE | ThemeFlags::COLOR | ThemeFlags::FORCE_UPPERCASE | ThemeFlags::LINE_SPACING | ThemeFlags::TEXT); @@ -192,7 +190,7 @@ void SystemView::populate() v + offsetLogoPlaceholderText); // Make background extras. - e.data.backgroundExtras = ThemeData::makeExtras((*it)->getTheme(), "system", mWindow); + e.data.backgroundExtras = ThemeData::makeExtras(it->getTheme(), "system", mWindow); // Sort the extras by z-index. std::stable_sort( @@ -202,7 +200,7 @@ void SystemView::populate() this->add(e); } } - if (mEntries.size() == 0) { + if (mEntries.empty()) { // Something is wrong, there is not a single system to show, check if UI mode is not full. if (!UIModeController::getInstance()->isUIModeFull()) { Settings::getInstance()->setString("UIMode", "full"); diff --git a/themes/rbsimple-DE/theme.xml b/themes/rbsimple-DE/theme.xml index 4d59d93e2..5b35e863f 100644 --- a/themes/rbsimple-DE/theme.xml +++ b/themes/rbsimple-DE/theme.xml @@ -21,6 +21,13 @@ based on: 'recalbox-multi' by the Recalbox community ./core/fonts/Exo2-RegularCondensed.otf 0.035 + + ./core/fonts/Exo2-RegularCondensed.otf + 0.035 + 000000FF + 0 0 + .2 .2 + From 2557809645d238ac295c382220b18bbf90448d84 Mon Sep 17 00:00:00 2001 From: shadash Date: Fri, 5 Nov 2021 10:30:35 +0100 Subject: [PATCH 6/6] 652: add theme config for placeholder text --- themes/rbsimple-DE/theme.xml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/themes/rbsimple-DE/theme.xml b/themes/rbsimple-DE/theme.xml index 5b35e863f..48dfbce3f 100644 --- a/themes/rbsimple-DE/theme.xml +++ b/themes/rbsimple-DE/theme.xml @@ -22,11 +22,12 @@ based on: 'recalbox-multi' by the Recalbox community 0.035 + 0.5 0.5 + 0.5 0.5 ./core/fonts/Exo2-RegularCondensed.otf 0.035 000000FF - 0 0 - .2 .2 + ${system.fullName}