UAK: Menu items shrink in width with increasing DPI scale (Windows)

[Noridge]

Hi there,

I recently noticed an issue with the menu items: Their width is shrinking if the DPI scale increases. Its quite prominent as the items' labels are not shown completely anymore. I tested the occurrence of this issue on a 2160p monitor (150% default scale) and a 1080p one (100% default scale) with differenct scales.

For the tests I created a fresh project and used the code from the DPI Scaling tutorial. The mouse hovered over the first menu entry while generating the screenshots for you to see the width of the menu entry relative to the window title. They are ordered by DPI scale (100->125->150->175).

First the 1080p monitor:

 

Second the 2160p monitor:

 

Other than that the DPI scaling capabilities of UAK are awesome, especially as there are many software products out there which are totally unable to accomplish something like this. ?

[Noridge]

I noticed that that the text of Panles with style PANEL_GROUP is affected as well. See the screenshots (1080p monitor, scales: 100 -> 125)

 

Have also a look at the menu items. While the space between them is too big, beginning with the 125 scale the labels are cut off again. It feels more prominent without having the hover-highling like in the screenshots of my previous post.

[Josh]

Thank you for reporting this!

[Noridge]

Text of nodes in treeview is affected as well.

[Josh]

I've been working on this in the last couple days...hang tight...

[Josh]

Appears to be working correctly now in Ultra Engine:

#include "UltraEngine.h"

using namespace UltraEngine;

int main(int argc, const char* argv[])
{
    //Get the displays
    auto displays = GetDisplays();

    //Create a window
    auto window = CreateWindow("Ultra Engine", 0, 0, 800, 600, displays[0], WINDOW_TITLEBAR | WINDOW_RESIZABLE);

    //Create User Interface
    auto ui = CreateInterface(window);

    //Create widget
    auto sz = ui->root->ClientSize();
    auto treeview = CreateTreeView(10, 10, sz.x - 20, sz.y - 20, ui->root, TREEVIEW_DRAGANDDROP | TREEVIEW_DRAGINSERT);
    treeview->SetLayout(1, 1, 1, 1);

    auto node = treeview->root->AddNode("Node 1");
    node->AddNode("Subnode 1");
    node->AddNode("Subnode 2");
    node->AddNode("Subnode 3");

    node = treeview->root->AddNode("Node 2");
    node->AddNode("Subnode 1");
    node->AddNode("Subnode 2");
    node->AddNode("Subnode 3");

    node = treeview->root->AddNode("Node 3");
    node->AddNode("Subnode 1");
    node->AddNode("Subnode 2");
    node->AddNode("Subnode 3");

    ui->SetScale(2);

    while (true)
    {
        const auto& event = WaitEvent();
        switch (event.id)
        {
        case EVENT_WIDGETSELECT:
            if (event.source == treeview and event.data == 1)
            {
                node = event.extra->As<Widget>();
                Print("Selected: " + node->text);
            }
            break;
        case EVENT_WIDGETACTION:
            if (event.source == treeview)
            {
                node = event.extra->As<Widget>();
                Print("Action: " + node->text);
                if (!node->kids.empty())
                {
                    if (node->Collapsed())
                    {
                        node->Expand();
                    }
                    else
                    {
                        node->Collapse();
                    }
                }
            }
            break;
        case EVENT_WIDGETDROP:
        {
            auto child = event.source->As<Widget>();
            auto parent = event.extra->As<Widget>();
            child->SetParent(parent, event.data);
        }
        break;
        case EVENT_WINDOWCLOSE:
            return 0;
            break;
        }
    }
    return 0;
}