Update image content when window is resized/initialized

[second-reality]

Hi,

I'm trying to generate an image covering the whole window (a map viewer).
A callback is defined to update an image (set as property).

Is there a way to automatically update it when main window gets resized/initialized? (something like an onResize event).
So far, I added a button to update it, but it's not my goal here.

Maybe there is another way to do things?

slint::slint! {
    import { Button } from "std-widgets.slint";
    MainWindow := Window {
        property <image> map;
        img := Image {
            source: map;
        }
        callback build_image(length, length) -> image;
        Button {
            width: 100px;
            height: 100px;
            text: "click here!";
            clicked => {parent.map = parent.build_image(parent.width, parent.height);}
        }
    }
}

fn build_map(w: u32, h: u32) -> Image {
// do things with pixels here
}

fn main() {
    let win = MainWindow::new();
    win.on_build_map(move |width, height| {
        build_map(width as u32, height as u32)
    });
    win.run();
}

Thanks!

[tronical]

What you could try to do is change the property setup:

slint::slint! {
    import { Button } from "std-widgets.slint";
    MainWindow := Window {
        img := Image {
            property <int> some_other_parameter;
            source: build_image(self.width, self.height, self.some_other_parameter);
        }
        callback build_image(length, length, int) -> image;
        Button {
            width: 100px;
            height: 100px;
            text: "click here!";
            clicked => { img.some_other_parameter = 42; }
        }
    }
}

So basically the computed image depends on the width, height and some third parameter that I suppose affects what content is chosen. When the size of the window changes, build_image() is called with the same parameter value but other size. If you click the button, you change the parameter and source is re-computed by calling build_image again.

[ogoffart]

img.some_other_parameter += 1 will help to make sure it is changed.

[second-reality]

I missed it was possible to define source as a callback directly, that's awesome!
It's really good to see slint handles dependencies between properties and their usage points.

HelloWorld := Window {
     Image {
         source: build_map(parent.width, parent.height);
     }
     callback build_map(length, length) -> image;
}

That's enough to get a surface automatically drawn by native code when an event requires it (or at window initialization). 👍

[Pilyushkin]

Good afternoon, I'm solving a similar problem and getting an error.

The binding for the property 'width' is part of a binding loop

[ogoffart]

The binding for the property 'width' is part of a binding loop

This probably happens because the width and height default to the source, so the source can't depends on the width and height in that case.
You can try to break the loop by either:

• assigning explicit size to the width and height (or use it in a layout)
• use the height and width from a parent or other size that don't depend on the size of the image itself.

[Pilyushkin]

Good afternoon. He gave an example. What am I doing wrong?
I want the image to occupy the entire area allocated for it in the layout.

export component HelloWorld inherits Window {
    pure callback get_image(length, length) -> image;

    vl := VerticalLayout {
        alignment: center;
        spacing: 5px;
        Rectangle {
            text := Text {
                text: "hello world!";
                vertical-alignment: center;
                horizontal-alignment: center;
                color: black;
                preferred-height: 150px;
                preferred-width: 300px;
            }
            background: yellow;
        }

        Image {
            source: get_image(self.width, self.height /*50px*/);
        }
    }

    Rectangle {
        width: vl.width;
        height: vl.height;
        x: vl.x;
        y: vl.y;
        background: transparent;
        border-color: red;
        border-width: 2px;
    }

    preferred-width: 400px;
    preferred-height: 150px;
    background: gray;
}`

`slint::include_modules!();

use slint::{Image, SharedPixelBuffer};
use rand::Rng;

fn main() {
    let app = HelloWorld::new().unwrap();

    app.on_get_image(|width, height| {
        let mut rnd = rand::thread_rng();
        let slice = [rnd.gen(), rnd.gen(), rnd.gen()].repeat((width * height) as usize);
        return Image::from_rgb8(SharedPixelBuffer::clone_from_slice(&slice, width as u32, height as u32));
    });

    app.run().unwrap();
}

[Pilyushkin]

Hi. Any ideas on my question? Is this a bug, or am I doing something wrong?

[hunger]

@Pilyushkin: Sorry, I missed your question completely. Please consider to open a new discussion the next time: It is so much easier for us to see what still needs looking into.

You have a binding loop: An Image takes its size from the source it displays. Your source in turn takes its size from self.width and self.height, which gets their value from source, which ... . You see the problem?

I hope this helps :-)

[Pilyushkin]

Hi, OK.
The Image is located in layout, so does the size of the Image (component) depend on the size of the image?

How can I make it so that when I change the size to fit an image (in layout), I can generate an image for this size?

[ogoffart]

See also #3575

Put your image in a rectangle so the layout don't depend on the size of the image

Rectangle {
            Image {
                x: 0;
                y: 0;
                width: 100%;
                height: 100%;
                source: ...;
            }
        }

[Pilyushkin]

Thank you