How to use a slint window as an ephemeral splash screen ?

[Sulquendi]

Hello there !

I'd like to implement an ephemeral slint window in my rust code. The goal is quite basic : before entering in a processing loop of n items by my rust function, showing a slint window with a progress bar and a text caption (to display the current step name)

Then the rust loop starts and at each loop, updates the progressbar and text values. When the loop is over, hide/destroy the window > Done.

Here is the rust code :

let handle = UserNotification::new().unwrap();
  handle.on_do_work({
        info!(" --- Starting job ---");
        let ui_handle = handle.as_weak();
        let handle = ui_handle.unwrap();
        for step in exec_keys.iter() {
            info!(" => In loop for: {:?}", step);
            handle.set_component_name(SharedString::from(step.display().to_string()));
            let ten_secs = time::Duration::from_secs(10);
            thread::sleep(ten_secs);
        }
        move || {
            // dunno what to do this this, any code there doesn't get executed at all
        }
    });
    handle.run().unwrap();

For the slint part:

import { VerticalBox } from "std-widgets.slint";

// Duplicating the ProgressIndicator defs to use corporate colors
export component ProgressIndicator {
    in property <float> progress;
    in property <bool> indeterminate;

    min-height: 6px;
    horizontal-stretch: 1;
    vertical-stretch: 0;
    accessible-role: progress-indicator;
    accessible-value: root.progress;

    Rectangle {
        clip: true;
        border-radius: 3px;

        i-rail := Rectangle {
            border-radius: parent.border-radius;
            background: #eee;
            border-width: 0.5px;
            border-color: #ccc;
            clip: true;

            Rectangle {
                border-width: 1px;
                border-color: @radial-gradient(circle, #00000026, #00000000);
                border-radius: parent.border-radius;
            }
        }

        i-track := Rectangle {
            width: !root.indeterminate ?  parent.width * min(1, max(0, root.progress)) : parent.width;
            height: 100%;
            x: !root.indeterminate ? 0px : -parent.width + (parent.width * mod(animation-tick(), 2s) / 1s);
            border-radius: parent.border-radius;
            background: #ff7900;
        }
    }
}

export component UserNotification inherits Window {
    in-out property <string> component_name <=> component-name.text;
    in property <int> progress;

    callback  do-work();
    width: 640px;
    height: 300px;
    background: white;
    no-frame: true;
    default-font-family: "Helvetica Neue";
    default-font-size: 20px;

    init => {
        do-work();
    }

    VerticalLayout {
        padding: 10px;
        alignment: start;
        spacing: 50px;
        Text {
            text: @tr("Initalization of the user env:");
            font-weight: 600;
            color: #f16e00;
        }


        VerticalLayout {
            spacing: 10px;
            Text {
                text: @tr("Configuring current product :");
                font-weight: 600;
            }
            component-name:= Text { }
            ProgressIndicator {
                width: parent.width - 20px;
                height: 20px;
                progress: 50%;
            }
        }
    }
}

So far i'm stuck with this design implementation :

• With a init callback, all the code is taking place BEFORE the window is shown
• When i run() the window, my rust code is stuck until i close the slint window.

Any ideas about how to get this done properly ?

Thanks !

[Sulquendi]

Answering to myself 👀

The ìnit`callback is fired when rendering the ui, not after, so it's no the good way to do it. I finally figured out how to make it work. Still not knowing if it is the best way of doing it but it works so...

    let handle = UserNotification::new().unwrap();

    let ui_handle = handle.as_weak();
    let _: std::thread::JoinHandle<()> = std::thread::spawn(move || {
        info!(" --- Starting job ---");
        for step in vec!["step1", "step2", "step3", "step3"] {
            info!(" => In loop for: {:?}", step);
            let handle_copy = ui_handle.clone();
            slint::invoke_from_event_loop(move || {
                handle_copy.unwrap().set_component_name(step.into())
            })
            .unwrap();
            let ten_secs = time::Duration::from_secs(10);
            thread::sleep(ten_secs);
        }
        slint::quit_event_loop().unwrap();
    });
    handle.run().unwrap();

[tronical]

That looks reasonable. One simplification that you could do is use Weak::upgrade_in_event_loop() directly.