Buttons now look correct on high-resolution displays.

Also removed some unneeded SVG metadata from the bundled graphics files.

CHANGELOG.md

@@ -32,6 +32,7 @@ Many bugs have been fixed, and numerous features that were only partially implem
 * Added volume sliders for navigation sounds and game videos to the sound settings menu
 * Added support for OpenGL GLSL shaders (OpenGL 2.1 renderer only, no support for OpenGL ES 1.0 renderer)
 * Added multiple animations and shader effects, such as when opening menus, playing videos in the gamelists and via the screensaver etc.
+* Updated the application to work properly on high resolution devices (such as 4K)
 * Seamless (almost) launch of games without showing the desktop when starting and returning from RetroArch and other emulators
 * Updated scraper to support additional media files, detailed configuration of what to scrape, semi-automatic mode etc.
 * Added user account support when scraping using ScreenScraper
@@ -114,6 +115,7 @@ Many bugs have been fixed, and numerous features that were only partially implem
 * Unknown command line options were silently accepted instead of generating an error and notifying the user
 * Deleting a game from the metadata editor did not delete the game media files or its entry in the gamelist.xml file
 * Hidden files still showed up if they had a gamelist.xml entry
+* Fixed multiple instances of misaligned GUI elements on high-resolution displays due to the use of fixed-pixel constants
 * The VRAM statistics overlay was somewhat broken and incorrectly displayed numbers in megabytes instead of mebibytes
 * Long game names would sometimes not scroll in the gamelist view
 * Game media was not rendered when moving between gamelists using the slide transition style

es-core/src/Window.cpp

@@ -402,6 +402,7 @@ void Window::render()
         }
     }
 
+    // Render the quick list scrolling overlay, which is triggered in IList.
     if (mListScrollOpacity != 0) {
         Renderer::setMatrix(Transform4x4f::Identity());
         Renderer::drawRect(0.0f, 0.0f, static_cast<float>(Renderer::getScreenWidth()),

es-core/src/components/ButtonComponent.cpp

@@ -16,12 +16,13 @@ ButtonComponent::ButtonComponent(
     const std::string& helpText,
     const std::function<void()>& func)
     : GuiComponent(window),
-    mBox(window, ":/graphics/button.png"),
+    mBox(window, ":/graphics/button.svg"),
     mFont(Font::get(FONT_SIZE_MEDIUM)),
     mFocused(false),
     mEnabled(true),
     mTextColorFocused(0xFFFFFFFF), mTextColorUnfocused(0x777777FF)
 {
+    mBox.setIsScalable(true);
     setPressedFunc(func);
     setText(text, helpText);
     updateImage();
@@ -83,7 +84,7 @@ void ButtonComponent::setEnabled(bool state)
 void ButtonComponent::updateImage()
 {
     if (!mEnabled || !mPressedFunc) {
-        mBox.setImagePath(":/graphics/button_filled.png");
+        mBox.setImagePath(":/graphics/button_filled.svg");
         mBox.setCenterColor(0x770000FF);
         mBox.setEdgeColor(0x770000FF);
         return;
@@ -91,7 +92,7 @@ void ButtonComponent::updateImage()
 
     mBox.setCenterColor(0xFFFFFFFF);
     mBox.setEdgeColor(0xFFFFFFFF);
-    mBox.setImagePath(mFocused ? ":/graphics/button_filled.png" : ":/graphics/button.png");
+    mBox.setImagePath(mFocused ? ":/graphics/button_filled.svg" : ":/graphics/button.svg");
 }
 
 void ButtonComponent::render(const Transform4x4f& parentTrans)

es-core/src/components/NinePatchComponent.cpp

@@ -22,7 +22,8 @@ NinePatchComponent::NinePatchComponent(
         mEdgeColor(edgeColor),
         mCenterColor(centerColor),
         mPath(path),
-        mVertices(nullptr)
+        mVertices(nullptr),
+        mIsScalable(false)
 {
     if (!mPath.empty())
         buildVertices();
@@ -39,10 +40,10 @@ void NinePatchComponent::updateColors()
     const unsigned int edgeColor = Renderer::convertRGBAToABGR(mEdgeColor);
     const unsigned int centerColor = Renderer::convertRGBAToABGR(mCenterColor);
 
-    for (int i = 0; i < 6*9; ++i)
+    for (int i = 0; i < 6 * 9; i++)
         mVertices[i].col = edgeColor;
 
-    for (int i = 6*4; i < 6; ++i)
+    for (int i = 6*4; i < 6; i++)
         mVertices[(6*4)+i].col = centerColor;
 }
 
@@ -55,14 +56,29 @@ void NinePatchComponent::buildVertices()
 
     if (mTexture->getSize() == Vector2i::Zero()) {
         mVertices = nullptr;
-        LOG(LogWarning) << "NinePatchComponent missing texture!";
+        LOG(LogWarning) << "NinePatchComponent has no texture";
         return;
     }
 
+    Vector2f texSize;
     mVertices = new Renderer::Vertex[6 * 9];
 
-    const Vector2f texSize = Vector2f(static_cast<float>(mTexture->getSize().x()),
+    // This is just a partial fix, the plan is to always scale according to the screen
+    // resolution. But unfortunately doing this for the menu frame leads to flickering when
+    // entering a submenu, probably because the texture is unloaded and re-rasterized at the
+    // higher resolution. So for the moment the frame.png texture is still used (which won't be
+    // scaled as that leads to ugly pixelated corners for the menus). Scaling ButtonComponent
+    // works perfect with the below code though.
+    if (mIsScalable) {
+        texSize = Vector2f(static_cast<float>(mTexture->getSize().x()) *
+                Renderer::getScreenWidthModifier(), static_cast<float>(mTexture->getSize().y()) *
+                Renderer::getScreenHeightModifier());
+        mTexture->rasterizeAt(static_cast<size_t>(texSize.x()), static_cast<size_t>(texSize.y()));
+    }
+    else {
+        texSize = Vector2f(static_cast<float>(mTexture->getSize().x()),
                 static_cast<float>(mTexture->getSize().y()));
+    }
 
     const float imgSizeX[3] = { mCornerSize.x(), mSize.x() - mCornerSize.x() * 2, mCornerSize.x()};
     const float imgSizeY[3] = { mCornerSize.y(), mSize.y() - mCornerSize.y() * 2, mCornerSize.y()};
@@ -92,7 +108,7 @@ void NinePatchComponent::buildVertices()
         mVertices[v + 4] = { { imgPos.x() + imgSize.x(), imgPos.y() + imgSize.y() }, { texPos.x() + texSize.x(), texPos.y() + texSize.y() }, 0 };
 
         // Round vertices.
-        for (int i = 1; i < 5; ++i)
+        for (int i = 1; i < 5; i++)
             mVertices[v + i].pos.round();
 
         // Make duplicates of first and last vertex so this can be rendered as a triangle strip.

es-core/src/components/NinePatchComponent.h

@@ -50,6 +50,7 @@ public:
             const std::string& element, unsigned int properties) override;
 
     inline const Vector2f& getCornerSize() const { return mCornerSize; };
+    void setIsScalable(bool scalable) { mIsScalable = scalable; };
     inline void setCornerSize(const Vector2f& size)
     {
         mCornerSize = size;
@@ -67,6 +68,7 @@ private:
     unsigned int mEdgeColor;
     unsigned int mCenterColor;
     std::shared_ptr<TextureResource> mTexture;
+    bool mIsScalable;
 };
 
 #endif // ES_CORE_COMPONENTS_NINE_PATCH_COMPONENT_H

resources/graphics/button.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48" height="48" version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <path
+     style="fill:none;fill-opacity:1;stroke:#777777;stroke-width:1.90893817;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     d="M 4.4345762,0.95447028 H 43.565423 c 1.927979,0 3.480107,1.55212772 3.480107,3.48010702 V 43.565424 c 0,1.927979 -1.552128,3.480107 -3.480107,3.480107 H 4.4345762 c -1.9279794,0 -3.48010712,-1.552128 -3.48010712,-3.480107 V 4.4345773 c 0,-1.9279793 1.55212772,-3.48010702 3.48010712,-3.48010702 z"/>
+</svg>

resources/graphics/button_filled.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48" height="48" version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <path
+     style="fill:#777777;fill-opacity:1;stroke:#777777;stroke-width:1.90893817;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     d="M 4.4345767,0.95446968 H 43.565423 c 1.92798,0 3.480107,1.55212772 3.480107,3.48010702 V 43.565423 c 0,1.92798 -1.552127,3.480107 -3.480107,3.480107 H 4.4345767 c -1.9279793,0 -3.48010702,-1.552127 -3.48010702,-3.480107 V 4.4345767 c 0,-1.9279793 1.55212772,-3.48010702 3.48010702,-3.48010702 z"/>
+  <path
+     d="M 4.4345767,0.95446968 H 43.565423 c 1.92798,0 3.480107,1.55212772 3.480107,3.48010702 V 43.565423 c 0,1.92798 -1.552127,3.480107 -3.480107,3.480107 H 4.4345767 c -1.9279793,0 -3.48010702,-1.552127 -3.48010702,-3.480107 V 4.4345767 c 0,-1.9279793 1.55212772,-3.48010702 3.48010702,-3.48010702 z"
+     style="fill:#777777;fill-opacity:1;stroke:#777777;stroke-width:1.90893817;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" />
+</svg>

resources/graphics/frame.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48" height="48" version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <path
+     style="fill:#efefef;fill-opacity:1;stroke:none;stroke-width:1.98800004;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     d="M 8.3579788,0 H 39.642021 C 44.272341,0 48,3.7276586 48,8.3579788 V 39.642021 C 48,44.272341 44.272341,48 39.642021,48 H 8.3579788 C 3.7276586,48 0,44.272341 0,39.642021 V 8.3579788 C 0,3.7276586 3.7276586,0 8.3579788,0 Z"/>
+</svg>

resources/graphics/off.svg

@@ -1,55 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8"?>
-<svg
+<svg width="43.916" height="21.959" version="1.1" viewBox="0 0 43.916 21.959" xmlns="http://www.w3.org/2000/svg">
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="43.916"
-   height="21.959"
-   version="1.1"
-   id="svg8"
-   sodipodi:docname="off.svg"
-   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
-  <metadata
-     id="metadata14">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs12" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1139"
-     id="namedview10"
-     showgrid="false"
-     inkscape:zoom="16.21277"
-     inkscape:cx="19.031461"
-     inkscape:cy="7.2502934"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg8"
-     inkscape:pagecheckerboard="false" />
   <path
      style="fill:#b3b3b3;fill-opacity:1;stroke-width:0.74354357"
-     d="M 10.433594 0.15820312 C 4.9009198 0.15820313 0.40039062 5.0035554 0.40039062 10.958984 C 0.40039062 16.914414 4.9009208 21.759766 10.433594 21.759766 L 33.367188 21.759766 C 38.899858 21.759766 43.400391 16.914414 43.400391 10.958984 C 43.400391 5.0035554 38.899858 0.15820312 33.367188 0.15820312 L 10.433594 0.15820312 z M 10.433594 3.2441406 C 14.385295 3.2441406 17.599609 6.7053283 17.599609 10.958984 C 17.599609 15.212638 14.385295 18.673828 10.433594 18.673828 C 6.4818917 18.673828 3.2675781 15.212638 3.2675781 10.958984 C 3.2675781 6.7053283 6.4818918 3.2441406 10.433594 3.2441406 z M 10.433594 4.7871094 C 7.2723748 4.7871094 4.6992188 7.5562136 4.6992188 10.958984 C 4.6992187 14.361753 7.2723747 17.130859 10.433594 17.130859 C 13.594809 17.130859 16.166016 14.361753 16.166016 10.958984 C 16.166016 7.5562136 13.594809 4.7871094 10.433594 4.7871094 z "
+     d="M 10.491203,0.17871838 C 4.9585292,0.17871839 0.45799999,5.0240707 0.45799999,10.979499 c 0,5.95543 4.50053021,10.800782 10.03320301,10.800782 h 22.933594 c 5.53267,0 10.033203,-4.845352 10.033203,-10.800782 0,-5.9554283 -4.500533,-10.80078062 -10.033203,-10.80078062 z m 0,3.08593752 c 3.951701,0 7.166015,3.4611877 7.166015,7.7148431 0,4.253654 -3.214314,7.714844 -7.166015,7.714844 -3.9517019,0 -7.1660155,-3.46119 -7.1660155,-7.714844 0,-4.2536554 3.2143137,-7.7148431 7.1660155,-7.7148431 z m 0,1.5429688 c -3.1612188,0 -5.7343748,2.7691042 -5.7343748,6.1718743 -1e-7,3.402769 2.5731559,6.171875 5.7343748,6.171875 3.161215,0 5.732422,-2.769106 5.732422,-6.171875 0,-3.4027701 -2.571207,-6.1718743 -5.732422,-6.1718743 z"/>
-     id="path6" />
 </svg>

resources/graphics/on.svg

@@ -1,56 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8"?>
-<svg
+<svg width="43.916" height="21.959" version="1.1" viewBox="0 0 43.916 21.959" xmlns="http://www.w3.org/2000/svg">
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="43.916"
-   height="21.959"
-   version="1.1"
-   id="svg8"
-   sodipodi:docname="on.svg"
-   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
-  <metadata
-     id="metadata14">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs12" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1139"
-     id="namedview10"
-     showgrid="false"
-     inkscape:zoom="16.21277"
-     inkscape:cx="18.215088"
-     inkscape:cy="9.5704457"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg8"
-     inkscape:pagecheckerboard="false" />
   <path
-     inkscape:connector-curvature="0"
+     d="m 10.491337,21.7795 h 22.933327 c 5.532673,0 10.033336,-4.84457 10.033336,-10.8 0,-5.9554292 -4.500663,-10.80000018 -10.033337,-10.80000018 H 10.491337 c -5.5326701,0 -10.03333682,4.84457098 -10.03333682,10.80000018 0,5.95543 4.50066672,10.8 10.03333682,10.8 z M 33.424664,3.2652139 c 3.9517,0 7.166673,3.4606284 7.166673,7.7142861 0,4.253657 -3.214973,7.714287 -7.166673,7.714287 -3.9517,0 -7.166663,-3.46063 -7.166663,-7.714287 0,-4.2536577 3.214963,-7.7142861 7.166663,-7.7142861 z"
-     d="M 10.433337,21.759 H 33.366664 C 38.899337,21.759 43.4,16.91443 43.4,10.959 43.4,5.003571 38.899337,0.159 33.366663,0.159 H 10.433337 C 4.9006667,0.159 0.4,5.003571 0.4,10.959 c 0,5.95543 4.5006667,10.8 10.033337,10.8 z M 33.366664,3.2447141 c 3.9517,0 7.166673,3.4606284 7.166673,7.7142859 0,4.253657 -3.214973,7.714287 -7.166673,7.714287 -3.9517,0 -7.166663,-3.46063 -7.166663,-7.714287 0,-4.2536575 3.214963,-7.7142859 7.166663,-7.7142859 z"
+     style="fill:#808080;fill-opacity:1;stroke-width:0.74354357"/>
-     id="path6"
-     style="fill:#808080;stroke-width:0.74354357;fill-opacity:1" />
 </svg>