Slint + async Rust = ?

[Tmpod]

Hello!

In a similar fashion to this post I made on CXX-Qt's discussions, I'm interested in knowing how Slint fairs with async Rust.

I've been interested in cross-platform GUIs for a while, particularly with Rust and QtQuick/QML. I discovered Slint at the beginning of last year, but haven't really dived into it yet. However, I'm quite curious, since it's made by Qt folks, is clearly heavily inspired by the modern QtQuick/QML system and has first-party support for Rust.

Async/await is becoming ever more prevalent, with many new API wrappers and the likes being published exclusively as async crates. One particular example I'm interested on is the great matrix-rust-sdk, which is now powering clients such as Element X iOS (Rust+SwiftUI), Element X Android (Rust+Jetpack Compose) and Fractal (Rust+GTK4). I'd like to play around with making a desktop client with Rust and either QtQuick/QML or Slint :)

How does using an async library like the one mentioned above in a Slint UI look like? Is there first-party support? If not, are there plans for such a thing?

On another somewhat related note, are there any major show stoppers in Slint in terms of feature parity with QML, specially with regards to accessibility and portability?

Thank you!

[hunger]

I have seen people use tokio with slint, but am no authority on how to do that. AFAICT you set aside one thread for the UI, pretty much like you would in Qt, too. Nothing Slint needs to support too much:-)

I have not really used Qt in a while, so I do not feel qualified to do a comparison -- but here is the Slint side of the picture:

Slint has support for accessibility, but this area could use some more work to make it truly great. In my experience that is the case with most accessibility systems out there though.

The limiting factor for portability of Slint is the rust compiler. In my experience all the interesting things are supported there, but some people will miss their favorite CPU architectures. Slint can be made to work pretty much everywhere the rust compiler can generate code for, it does not even need the full rust standard library. core and alloc are enough. Out of the box Slint will work on Linux, Mac and Windows, we have a list of supported MCU platforms and Android support is in the works.

Language portability of Slint is very good IMHO: We officially support Rust, C++ and JS as business logic languages and are currently adding python into the mix. A community member has used Slint from C#. We are of course always open for more languages:-)

The Slint language itself has a very strict separation between business logic and UI. I like that a lot. Basically a designer can design to his hearts content and a developer can refactor the code as needed -- as long as the interface between UI and business logic stays untouched, they will not break each others work. It also will allow us to have great tooling (soon;-) and makes support for so many different languages possible.

I am sure compared to Qt we do miss out on features. Most of that is by design: We happily delegate to rust infrastructure (e.g. docs, build tooling, etc.) and other people's crates (== rust libraries). Of course we also have features missing simply because nobody had the time to implement them yet. In my experience most bases are covered, as we tend to focus on those area the most people report issues in;-) And contributions are always welcome, too.

I hope this helps at least a bit.

[Tmpod]

Thank you for such a detailed response!

[ogoffart]

For async, Slint can run future in the UI thread with the slint::spawn_local function.
With that function you can spawn future and call async function from a callback handler, for example.

You can also run other async executor (eg, tokio) on another thread. It is fairly easy to call back into the ui thread with slint::invoke_from_event_loop.

[Tmpod]

I've tried it, and yes that works as well, thanks!

I saw that, and was giving it a shot, but it still requires the Tokio spawned future to be Send (which isn't possible with Rc). How did it work for you?

[bjorn]

It worked for me, because I did not need to pass a reference to my app in the Tokio future. It sufficed to await the Tokio task, and to only refer back to my app and its models from the async block passed to slint::spawn_local. I think this would be commonly the case.

Unfortunately my patch wasn't very polished yet so I can't yet link to my code for reference.

[Tmpod]

I see. I took a better look at your code and I think I understand why you didn't have issues: you create a client on each interaction, inside tokio's spawn block. (example)

In my case, I want to have a long lived client object (actually managed by an external crate) which provides async methods I need to call inside a tokio runtime.

[Tmpod]

I didn't end up doing much yesterday, but I ended up cooking this, which is working (compiles and runs):

let ui = AppWindow::new()?;
let app = Arc::new(App { client: make_client() });

ui.on_foo({
    let ui_weak = ui.as_weak();
    let app_ref = app.clone();
    move || {
        let ui = ui_weak.unwrap();
        let app = app_ref.clone();
        let _ = slint::spawn_local(async move {
            let foo = tokio::spawn(async move { app.client.foo().await }).await.unwrap();
            ui.set_foo(foo.into());
        });
    }
});

Where App is just a struct with some APIs wrapper client.

However, this feels a bit clunky and with too many Weak/Arc clones. Can this be simplified?
I've also made some macros to heavily simplify this in terms of syntax, but I was looking to simplifying the logic itself.

[Tmpod]

I'm having issues with another thing, though: changing UI from within tokio tasks (through slint::invoke_from_event_loop).
Specifically, the API client I'm using requires their event handlers to be both Send and Sync, and it seems Weak isn't the latter, so I can't get a weak ref for the UI component inside the closure. How can this be solved?

Edit: Sorry if I'm hijacking this thread way too much! Let me know if I should create a new one.

[maxenko]

Just to add to above example, as it took a bit to wrap my mind around.

    runtime.clone().on_state_change.lock().await.subscribe({
        let ui_handle = ui_handle.clone();
        move |state| {
            let ui_handle = ui_handle.clone();
            slint::invoke_from_event_loop(move || {
                let ui = ui_handle.clone().unwrap();
               // do stuff with ui...
            }).unwrap();
        }

    }).await;

Here I queue up a lambda that will be invoked from a different thread to be run on main UI thread. This is more or less identical to how WPF dispatches calls from other threads on main ui thread (through a message queue). Make sure you are not sending ui handles to methods with Sync traits (as Slint is not multi-threaded).

In short, there are no issues spawning threads from main UI thread, or having parallel threads make calls to slint ui.

[Tmpod]

Nice, thank you for the extra snippet! For the project I'm working on, because of all the repetitiveness and verbosity of this approach, I made some macros that greatly simplify callbacks and so on. I'm still not 100% sold on them, but they're here: https://git.sr.ht/~tmpod/eigen/tree/main/item/src/utils.rs

[Tmpod]

(apparently replies via e-mail don't get added to the existing comment thread :/)

[Areopagitics]

Here is a working example updated from here.

I would be interested to hear if this would be the proper "slint" way to do async.

The UI:

import {ListView, Button, VerticalBox, Slider } from "std-widgets.slint";


export struct ListItemData {
    id: int,
    progress: float,
}

export component AppWindow inherits Window {
    preferred-width: 400px;
    preferred-height: 600px;
    
    in-out property<int> counter: 42;
    in-out property<float> latency <=> slider.value;
    in-out property<[ListItemData]> task-data-model;

    callback request-increase-value();

    HorizontalLayout {
        VerticalBox {
            width: parent.width/2;
            Text { text: "Counter: \{counter}"; }
            Button {
                text: "Increase value";
                clicked => {
                    request-increase-value();
                }
            }
            Text{ text: "Latency: \{slider.value}"; }
            slider := Slider {
                height: 20px;
            }
        }

        ListView {
            for task[i] in task-data-model:
                Rectangle {
                    border-color: #030C8FF1;
                    border-width: 1px;
                    VerticalLayout {
                        Text { text: "[\{i}] task: \{task.id} => progress: \{task.progress}"; }                        
                        Rectangle { 
                            width: task.progress/100*parent.width;
                            height: 3px;
                            background: task.progress > 99.9? #00FF00: #FF0000;   
                        }
                    }
                }
        }

    }
}

The Main Rust:

slint::include_modules!();

use slint::{Model, ModelRc, VecModel};
use std::rc::Rc;
use std::sync::{Arc, Mutex};
use std::thread;
use std::time;

mod id_map_data;
use id_map_data::nextId;
use id_map_data::IdMapData;

fn main() {
    let ui = AppWindow::new().unwrap();

    let ui_handle = ui.as_weak();

    let list_data: Rc<VecModel<ListItemData>> = Rc::new(VecModel::<ListItemData>::default());
    let task_data = Arc::new(Mutex::new(IdMapData::default()));

    ui.set_task_data_model(ModelRc::new(list_data.clone()));

    ui.on_request_increase_value({
        let task_data = task_data.clone();
        move || {
            let ui = ui_handle.unwrap();
            let id = nextId() as i32;
            let model_handle = ui.get_task_data_model();
            let data = model_handle
                .as_any()
                .downcast_ref::<VecModel<ListItemData>>()
                .unwrap();
            task_data.lock().as_deref_mut().unwrap().push(data, id);
            let latency = ui.get_latency();
            let period = time::Duration::from_millis((latency * 10.) as u64);

            let ui_handle = ui.as_weak();

            let task_data = task_data.clone();

            std::thread::spawn(move || {
                for i in 0..101 {
                    thread::sleep(period);
                    let task_data = task_data.clone();
                    let ui_handle = ui_handle.clone();
                    slint::invoke_from_event_loop(move || {
                        let ui = ui_handle.unwrap();
                        let model_handle = ui.get_task_data_model();
                        let data = model_handle
                            .as_any()
                            .downcast_ref::<VecModel<ListItemData>>()
                            .unwrap();
                        task_data
                            .lock()
                            .as_deref_mut()
                            .unwrap()
                            .set_progress(data, id, i as f32)
                    }).unwrap();
                }
                thread::sleep(time::Duration::from_secs(1));
                slint::invoke_from_event_loop(move || {
                    let ui = ui_handle.unwrap();
                    let model_handle = ui.get_task_data_model();
                    let data = model_handle
                        .as_any()
                        .downcast_ref::<VecModel<ListItemData>>()
                        .unwrap();
                    task_data
                        .lock()
                        .as_deref_mut()
                        .unwrap()
                        .remove_by_id(data, id);
                    ui.set_counter(ui.get_counter() + 1);
                }).unwrap();
            });
        }
    });

    ui.run().unwrap();
}

AND id_map_data.rs

use super::*;
use slint::Model;
use std::{collections::HashMap, vec::Vec};

pub fn nextId() -> i32 {
    unsafe {
        static mut n: i32 = 0 as i32;
        const period: i32 = (1 << 15) as i32;
        n = (n + 1i32) % period;
        n
    }
}

pub struct IdMapData {
    pub id2row: HashMap<i32, usize>,
    pub row2id: Vec<i32>,
}

impl IdMapData {
    pub fn default() -> IdMapData {
        IdMapData {
            id2row: HashMap::<i32, usize>::default(),
            row2id: Vec::<i32>::default(),
        }
    }

    pub fn push(&mut self, data: &slint::VecModel<ListItemData>, id: i32) {
        self.row2id.push(id);
        self.id2row.insert(id, self.row2id.len() - 1);
        data.push(ListItemData {
            id: id,
            progress: 0f32,
        })
    }

    pub fn set_progress(&self, data: &slint::VecModel<ListItemData>, id: i32, progress: f32) {
        let row = *self.id2row.get(&id).unwrap();
        data.set_row_data(
            row,
            ListItemData {
                id: id,
                progress: progress,
            },
        );
    }

    pub fn remove_by_id(&mut self, data: &slint::VecModel<ListItemData>, id: i32) {
        let row = *self.id2row.get(&id).unwrap();
        self.remove_by_row(data, row);
    }

    pub fn remove_by_row(&mut self, data: &slint::VecModel<ListItemData>, row: usize) {
        assert!(0 <= row && row < self.row2id.len());
        let mut r = row + 1;
        while r < self.row2id.len() {
            let id = self.row2id.get(r);
            *self.id2row.get_mut(id.unwrap()).unwrap() -= 1;
            r += 1;
        }
        self.id2row.remove(&self.row2id.get(row).unwrap());
        self.row2id.remove(row);
        data.remove(row);
    }

    pub fn quit(&mut self, data: &slint::VecModel<ListItemData>) {
        let r = self.row2id.len();
        while r != 0 {
            self.remove_by_row(data, r - 1);
        }
    }
}