How to get width/height of a component into Rust rendering function?

[oswald2]

Expanding from the plotter example in slint (I also use the plotters library), my goal would be to pass a width and height to the callback that generates the image. In the plotter example itself, the width/height is fixed, but I need the plot to respect when the window is resized. In the plotter example, the image size is hard-coded in the Rust rendering function.

When I try to get a width/height by passing the property to the callback to generate the plot, so e.g.:

Image {
            source: Logic.render_plot(root.width, root.height);
}

I get the following errors:

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

So, if i understand this correctly, during calculation of the properties, the image width/height itself is part of the layout calculation, so this would form a loop updating the properties along the dependent properties.

So is there a way to get the width/height of the component the plot should be in (e.g. inside a VerticalLayout) and pass this to the Rust plot-rendering function so that on generation of the plot the size can be taken into account?

Currently, the size of the plot is fixed and the image is scaled accordingly by slint, but as this app should be used on a variety of display sizes, it would be much better to generate the plot with the actual sizes.

Is there a way to do this?

[ogoffart]

thanks for your question.

Recently a similar question was asked and I answered there: #1331 (reply in thread)
Does that answer your question?

[oswald2]

Unfortunately, not. I cannot break the binding loop, neither with self.width, parent.width or root.width.

The Window has a side-bar similar to (or modeled after) the gallery demo, and the plot is on one of the pages. So some nested layouts are present, which I suspect create the loop somehow. The errors mention "layout-cache", "width" and "layoutinfo-h" of different Boxes/Layouts/Rectangles to be part of the binding loop.

Any further tips?

[ogoffart]

Could you perhaps provide with some sample code that has the problem?

Conceptually, the Image size defaults to the source width unless explicitly set.
So that's why the source can't depends on the size by default because that'd be a loop.

Have you tried setting the preferred size manually:

Image {
  minimum-width: 0;
  minimum-height: 0;
  preferred-width: 20px;
  preferred-height: 20px;
  source: Logic.render_plot(root.width, root.height);
}

[oswald2]

I created an example:

https://github.com/oswald2/slint_test.git

This is basically the gallery example, where the content of the List View page was replaced with the plot from the plotter example. This works, as long as the width/height are generated within the render_plot function in main.rs with hardcoded values. When I try to pass in the width (no matter if self.width, parent.width or root.width, also with preferred-width and preferred-height), this creates a loop.

My goal is, that I can somehow determine the width of the page (or the group box where the image is contained within), so that it can be rendered with this width and height and not with hard coded values where the image is afterwards scaled.

In the plotter example, where the plot itself is only in a VerticalBox in the window, it works to pass in root.width and root.height. This makes me suspicious, that something like a HorizontalLayout like the SideBar in the gallery example could trigger such a loop.

_NOTE: this is a direct modification of the gallery example in-tree. I needed to checkout this repo and copy over the gallery example to get it to compile._

[ogoffart]

I can indeed reproduce the issue. Indeed the Slint compiler still sees a binding loop.

One way to prevent it is to wrap the Image in a Rectangle:

     Rectangle {
            Image {
                x: 0;
                y: 0;
                source: Logic.render_plot(...);
            }
        }

that rectangle will not inherit the sizes from the image so it should work.

[oswald2]

Ha! That does indeed solve the issue! Thank you very much!