App text and other objects extremely large or small in windowed mode

[bbiw]

Hello all,

i'm working on an app that, so far, works well on phone screen. But when connecting the phone to a TV over USB-C-to-HDMI-cable e.g. the PageHeader text is extremely large. Here's a sample code:

Rectangle {
    id: mainPage
    anchors.fill: parent

    PageHeader {
        id: header
        title: "ABC"
        z: 1
        contents: Rectangle {
            id: hdrrec
            anchors.fill: parent
            color: "white"
            Text {
                id: hdrtxt
                anchors.left: hdrrec.left
                anchors.verticalCenter: hdrrec.verticalCenter
                text: header.title
                font.pointSize: 40
            }

If i change font.pointSize to font.pixelSize the text is much smaller on phone screen but not on TV, it's still very large, i can't even see a difference between font.pointSize and font.pixelSize.

Does anyone know what i should change or which Text QML Type properties to use? I can't find any useful informations from Google. I guess it's a special Ubuntu Touch thing, because of the possibility to change between windowed and staged mode?

This is not the only problem, maybe someone can help me with the others, too.

Edit: I have found Screen QML Type, is this the way to go?

[ikoz]

@bbiw Can you try the label component from Lomiri.Components? I believe the issue is due to the grid unit scaling not being updated (like pixel density over area).

[kugiigi]

Scaling can be confusing to be honest and I'm not sure if the implementation is final because it has changed a few times. UT's native toolkit use gird units unit.gu() for making sure the dimensions scale well. But you can also check the hidpi scaling in Qt/QML. If you set your app to use that then I scaling would work better.

[bbiw]

@ikoz I use the Label component somewhere else in the app and the scaling problem persists. The text is still very large on TV.

@kugiigi I've used units.gu() before, but didn't know or forgot the meaning of it. This maybe a good hint, i will try this. Thank you.

As for the header i've found another solution:

Set font.pointSize to hdrrec.height/3, this way the relation stays the same. Maybe i will use this relation thing for other texts the problem still persists, because Text components for which I didn't set a size has no scaling problem. E.g. setting font.pointSize to txt1.font.pointSize*2 or i will try with the grid units like mentioned above.

I will write again in the event of further problems.

[kugiigi]

@bbiw I would advise against doing any manual computation for the scaling. If you want to use the native toolkit, use grid unit and the toolkit's components so scaling would works automatically. If not, you could explore using QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

In any case, scaling can still be buggy in UT so you might also be hitting one. For example, there are apps where some elements have bad scaling once you connect to an external display while the app is already open, however the scaling is fixed if you open the app after the external display is already connected.

[bbiw]

@kugiigi When using QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling); it looks the same on phone and TV. That's nice, but i think i will stick with units.gu(). I've tried it and, so far, it works nice. I saw there are problems, but that's not the fault of my app.