How does the linuxkms backend implement window adaptation?

[CarbonPool]

I fixed the width and height of the window to 1280x720. When I run it on a 1024x600 screen, the UI is not fully displayed.

[tronical]

How did you fix the width and height of the window?

Generally, the linuxkms backend should render the window according to the size of the screen. See also https://docs.slint.dev/latest/docs/slint/guide/backends-and-renderers/backend_linuxkms/#display-selection-with-opengl-or-skia-software .

It's possible that we're not handling this correctly though, i.e. that writing Window { width: 300px; height: 300px; } when run on a 1024x600 screen will only render 300x300.

[CarbonPool]

Window { width: 1280px; height: 720px; }

I can't set the width and height to 100%, otherwise there will be an error. Is there a better adaptive solution?

[tronical]

If you don't specify width and height, the window should be automatically sized to the resolution of the screen. Is that not working for you?

[CarbonPool]

I tried it and it works great. It would be even better if it could support CSS media selectors.

[tronical]

You can do that in Slint using the if. We use this kind of trick in the energy monitor demo:

export enum ScreenSize {
    EmbeddedSmall,
    EmbeddedMedium,
    Mobile,
    Desktop
}

export component MainWindow inherits Window {
    private property <length> big-break-point: 1366px;
    private property <length> mid-break-point: 799px;
    private property <length> mobile-break-point: 444px;
    private property <ScreenSize> screen-size: root.get-screen-size();

    preferred-width: 800px;
    preferred-height: 480px;

    pure function get-screen-size() -> ScreenSize {
        if (root.width <= root.mobile-break-point && root.width < root.height) {
            return ScreenSize.Mobile;
        }

        if (root.width < root.mid-break-point) {
            return ScreenSize.EmbeddedSmall;
        }

        return ScreenSize.EmbeddedMedium;
    }

    if root.screen-size == ScreenSize.Mobile : MobileMain {
        preferred-width: 100%;
        preferred-height: 100%;
    }

    if root.screen-size == ScreenSize.EmbeddedMedium : MidMain {
        preferred-width: 100%;
        preferred-height: 100%;
    }

    if root.screen-size == ScreenSize.EmbeddedSmall : SmallMain {
        preferred-width: 100%;
        preferred-height: 100%;
    }
}