Using TouchArea with Image { image-fit: contain; } inconvenient. Am I missing something?

[kaarelen]

Using TouchArea with Image { image-fit: contain; } inconvenient. Am I missing something? Probably there is a workaround for this case \ or prob it should be made for first time?

In simple words - TouchArea sticks outside Image.

example: TouchArea placed inside

Image {
            image-fit: contain;
            width: parent.width;
            height: parent.height;
}

will occupy full size of the Image, so it's tricky to map a mouse event to the same pixel on the image, if any gaps surrounds image (and they will - because of "image-fit: contain;")

Image {
    source: get_image();

    width: parent.width;
    height: parent.height;
    image-fit: contain;

    TouchArea {
        Rectangle {
            background: red;
            opacity: 50%;
        }
    }
}

PS: sorry for my level of English, if something is not clear.

[kaarelen]

PPSS: I know that I can map mouse events, because I know size of the window & aspect ratio of the image,
but I will prefer a solution, not a workaround

[W9pi3cZ1]

You just need to set the height or width of Image.

Note: Just change one of them, the other will automatically be proportional. Otherwise, the height and width will be changed to what you set, even if it doesn't fit the proportions.

[kaarelen]

Hi, @W9pi3cZ1, thank you for response!
I'm expecting behavior like that (look at the screenshots), as I understand it's impossible to achieve it with your solution (just tested it, it doesn't work as expected at all). Is my understanding correct?

[bjorn]

I think the image-fit property is not suitable for what you're trying to achieve. This is because it only affects the position and size at which the image is rendered within the Image item. If you need the user to interact with the image and conveniently know which location on the image they clicked, you should instead use the width and height properties to make sure your image has the right size.

To avoid a binding loop, you could probably have single expression determine the scale the image should have, based on its parent width and height, and then set the image's width and height based on the scale. You need to make sure though, that the parent size does not also depend on the image size.

[kaarelen]

Oh, haven't noticed your message, I'm sorry.

Could you check out my last comment?

If I've understood you correctly - I need to forget about resizing, like on the video, if I want to get simple user-interaction code?

[W9pi3cZ1]

I trying to Implement this. It's works.

[kaarelen]

Hello, @W9pi3cZ1. I'm really grateful for the time you have spent, but I've just tried your approach and it doesn't work for me as I've expected - the image doesn't stay fitted to the window size and can overflow (watch the attached video).
Behavior of your code -
recording (1).webm

I want to make, as clear as possible, what I want to get. So here is video of expected behavior (in terms of resizing) -
recording.webm

Actual problem - I want to fit TouchArea into a RENDERED image without loosing this fancy resizing, but I don't have any access to real rendered(!) image size \ position :

1. "image.source.height" relates to real (file) image size.
2. "image.height" relates to size of the box that contains rendered image.
3. "image.padding" | "padding-bottom" | etc - stays on 0px.

So there is no clear way to get this information.

Here is a simplified example of my code:

export component MainWindow inherits Window{
    pure callback get_image() -> image;

    no-frame: true;    
    image := Image {
        // source: get_image();
        source: @image-url("sample.jpeg");
        width: parent.width;
        height: parent.height;

        image-fit: contain;
        image-rendering: smooth;
        // image-rendering: pixelated;

        touch := TouchArea {
            width: image.width;
            height: image.height;

            Rectangle {
                background: red;
                opacity: 30%;
            }
        }
    }
}

Here is a code used for video of "your" code:

export component MainWindow inherits Window{
    pure callback get_image() -> image;
    pure callback save_area(
        int,
        int,
        int,
        int,
    );
    
    no-frame: true;

    default-font-size: 24px;
    Image {
        source: @image-url("sample.jpeg");
        // property <float> ratio: self.source.width / (self.width / 1px);
        width: parent.width;
        image-fit: contain;
        touch := TouchArea {
            Rectangle {
                background: red;
                opacity: 30%;
            }
        }
        Rectangle {
            x: touch.pressed-x;
            y: touch.pressed-y;
            background: blue;
            width: 1px;
            height: 1px;
        }
    }
}

Code directly from dreams:

Image {
    source: @image-url("sample.jpeg");
    image-fit: contain;
    touch := TouchArea {
        width: parent.inner.width;
    }
}

PS: I can just calculate rendered size of the image from window size, image source size, aspect ratio of the image, but It's definitely NOT a convenient way.

[kaarelen]

@ogoffart yeah, agreed, but reality hits)

Here are minimal examples to reproduce

Laggy, barely usable:

export component MainWindow inherits Window{
    //pure callback get_image() -> image;
    image := Image {
        source: @image-url("test.png");
        property <int> ratio: image.source.width / image.source.height;
        width: min(parent.width, parent.height * ratio);
        height: min(parent.height, parent.width / ratio);

        touch := TouchArea {
            Rectangle {
                background: red;
                opacity: 30%;
            }
        }
    }
}

Fast and responsive:

export component MainWindow inherits Window{
    //pure callback get_image() -> image;
    image := Image {
        source: @image-url("test.png");
        image-fit: contain;
        width: parent.width;
        height: parent.height;

        touch := TouchArea {
            Rectangle {
                background: red;
                opacity: 30%;
            }
        }
    } 
}

test.png if you need sample image
size of the image - 2560x1440

[ogoffart]

For me the two are the same.
What renderer are you using? Is it a release or a debug build?
You can use set an env variable SLINT_DEBUG_PERFORMANCE=console,refresh_full_speed,overlay to debug performance.

[kaarelen]

It's still laggy.

> SLINT_DEBUG_PERFORMANCE=console,refresh_full_speed,overlay cargo run --release

Slint: Build config: release; Backend: Qt backend (platform wayland)
average frames per second: 53 details from last frame: [0 layers created]
average frames per second: 63 details from last frame: [0 layers created]
average frames per second: 19 details from last frame: [0 layers created]
average frames per second: 24 details from last frame: [0 layers created]
average frames per second: 19 details from last frame: [0 layers created]
average frames per second: 19 details from last frame: [0 layers created]
average frames per second: 20 details from last frame: [0 layers created]
average frames per second: 25 details from last frame: [0 layers created]

[kaarelen]

@ogoffart final solution - forget about image and just scale size of TouchArea same way, as u suggested before for image. In my case its whole overlay, not just TouchArea, but idea is the same.

Thoughts about why u had not any issues with that, and I had - probably u have a lot more powerful device, so in your case performance is degrading too, but fps still higher than 60 and my 10 years old pc with weak CPU just dies from this load. So that's why.

Writing here just to provide info for next generations (for me, when i will forget this solution 0)0))

[kaarelen]

here is minimal code that's enough to understand solution in few seconds

image := Image {
        source: get_image();
        // source: @image-url("test.png");

        width: parent.width;
        height: parent.height;
        image-fit: contain;

        image_overlay := Rectangle {
              property <int> ratio: image.source.width / image.source.height;
              width: min(image.width, image.height * ratio);
              height: min(image.height, image.width / ratio);
        }
}

[bjorn]

That's clever, thanks for posting your solution!