How to update image on every frame?

[TheColorRed]

I have a color box that looks like this:

When I move my mouse up/down the vertical image, the big square image doesn't change until my mouse stops moving, even though the event is being processed by my backend very rapidly to generate the big image, so I shouldn't see a delay (in theory). Why isn't this updating in real time? why is there a delay?

export global ColorPanel {
    in-out property <float> hue-time;
    in-out property <image> color-box;
    in-out property <image> hue-bar;

    callback hue-changed(float, float, float);
    callback color-changed(float, float, float, ColorType);
}

export component Colors inherits Rectangle {
    function hue-change(position: length) {
        ColorPanel.hue-time = clamp((position / 1px) / hue-size, 0.0, 1.0);
        ColorPanel.hue-changed(ColorPanel.hue-time, ColorPanel.x-time, ColorPanel.y-time);
    }
        Image {
            source: ColorPanel.color-box;

            color-ta := TouchArea {
                property <ColorType> type: ColorType.Foreground;
                pointer-event(event) => {
                    color-change(color-ta.mouse-x, color-ta.mouse-y);
                }
            }
        }

        Image {
            source: ColorPanel.hue-bar;

            hue-ta := TouchArea {
                pointer-event(event) => {
                    hue-change(hue-ta.mouse-y);
                }
            }
        }
}

Here is one of the call backs, the other one is the same, only it generates a different image. So in this code when you mouse over the hue bar (right) the main box will create the correct shade. However, it doesn't update the render till after the mouse stops.

fn main() {
  panel.on_hue_changed(move |hue, x, y| {
    let panel = ColorPanel::get(&window);

    /* ... generate the box ... */

    panel.set_color_box(as_ui_image(&image));
  });
}

pub fn as_ui_image(image: &Image) -> slint::Image {
  let joined_channels = image.rgba();
  let channels = joined_channels.as_slice();
  let (width, height) = image.get_dimensions();
  let pixel_buffer = SharedPixelBuffer::<Rgba8Pixel>::clone_from_slice(channels, width, height);
  slint::Image::from_rgba8(pixel_buffer)
}

I have the same thing setup on the main box but that when the mouse moves, it updates a color to update the two left boxes (in-out property <color> fg-color; and in-out property <color> bg-color;). this works as the mouse moves (as I was thinking the main box should.

[hunger]

Do you have a minimal example somewhere we can look into? I tried to create one from the snippets above, but there are some pieces missing, so whatever I do will only be an approximation to the problem you see.

On first glance, this reads like a bug to me.

[TheColorRed]

I have been trying to create a minimal example (I just loop over images on file instead of creating an image from scratch), but I cannot reproduce it that way with a minimal example. It seems to work as expected. Not sure why though. I guess I need to look into my code more...

When I wrap my image creation code with timing, like this (thinking maybe it takes a while to create the image);

panel.on_hue_changed(move |hue, x, y| {
    let start_time = std::time::Instant::now();
    let mut my_image = MyImage::new();

    /* ...create the big box using some gradients here.... */

    /* ...convert to slint image... */

    panel.set_color_box(&slint_image));
    println!("Hue changed: {:?}", start_time.elapsed());
});

I get these timings as the mouse moves:

Hue changed: 75.7457ms
Hue changed: 75.6863ms
Hue changed: 75.135ms
Hue changed: 74.4627ms
Hue changed: 77.9476ms

I am using rayon to assist in generating the image but I think that just loops over the data async but the code here would still be sync I think.

[TheColorRed]

Okay, so it looks like it is just acting like that in "Debug" mode, when building with the --release flag, it works as expected.

So, it must be the speed at which I am creating my image because with a release the image is created in ~5ms:

Hue changed: 5.9881ms
Hue changed: 5.2758ms
Hue changed: 5.2011ms
Hue changed: 5.9093ms
Hue changed: 5.9633ms

[hunger]

I was afraid it was a bug somewhere :-) Timing issues are always tricky to debug...

[TheColorRed]

Would you happen know if this mean that the code is blocking the main/render thread even though it is in a callback?

[hunger]

The UI code is single threaded, so I expect callbacks to be blocking, yes. You could have the callback trigger something in other threads of course, but it won't do that by default.