WASM | Returning struct to js that interacts with a window?

[sotrh]

I'm looking to make a little demo that lets you create noise textures in the browser using wgpu. The page would have form inputs that would allow you to set the seed, number of octaves, and lacunarity as well as a button to tell the wgpu code to update the canvas.

While I know how to get a winit window working in WASM, currently this method requires me running EventLoop::run which never returns. I want to return a control struct to the caller so that the js code can update the internal state of the wgpu code.

How do I start the event loop while still returning an interface for the js code to use to update things?

[ALPHAAAL]

This is exactly what I am looking for as well! Any guidance would be nice 😭
I want to 'pause' the event loop and switch back after some work on js.

[madsmtm]

Would winit::platform::web::EventLoopExtWebSys::spawn be able to do it for you?

[ALPHAAAL]

Unfortunately, it doesn't work, spawn just silent the error when first creating the event loop.

[stevenhuyn]

following

[stevenhuyn]

Ok I found the sauce: from a search of event_loop.spawn( in the whole of public github source code.

Make use of CustomEvents

Because EventLoopProxy does not implement Send,Sync work around is thread_local! from my understanding.

#[derive(Debug, Clone, Copy)]
pub enum CustomEvent {
    Foo,
}

thread_local! {
    pub static EVENT_LOOP_PROXY: Mutex<Option<EventLoopProxy<CustomEvent>>> = Mutex::new(None);
}

#[wasm_bindgen(js_name = "fireFoo")]
pub fn fire_foo() {
    EVENT_LOOP_PROXY.with(|proxy| {
        if let Some(event_loop_proxy) = &*proxy.lock().unwrap() {
            event_loop_proxy.send_event(CustomEvent::Foo).ok();
        }
    });
}

#[wasm_bindgen]
pub fn run() {
    console_log::init_with_level(log::Level::Debug).expect("error initializing logger");

    let event_loop: EventLoop<CustomEvent> =
        EventLoopBuilder::<CustomEvent>::with_user_event().build();

    let window = WindowBuilder::new()
        .with_title("A fantastic window!")
        .build(&event_loop)
        .unwrap();

    let event_loop_proxy = event_loop.create_proxy();

    EVENT_LOOP_PROXY.with(move |proxy| {
        *proxy.lock().unwrap() = Some(event_loop_proxy);
    });

    // Don't actually need spawn
    event_loop.run(move |event, _, control_flow| {
        ...
    };
}

Then in typescript

import init, { fireFoo} from "your-wasm"

onClick(() => fireFoo())

[daxpedda]

That looks about right.
For a thread_local you don't need a Mutex though, a RefCell would do it too.

[daxpedda]

The wasm-bindgen guide explains how to export types and functions to JS in Rust. That in combination with EventLoopProxy, as pointed out in the example above, should provide all the tools necessary to solve the problem.

[stevenhuyn]

Is there a reason why the example is configured for no wasm? https://github.com/rust-windowing/winit/blob/master/examples/custom_events.rs

I also feel like this is a common web use case, so might be worth putting in as an example?

[llvm-x86]

@sotrh @stevenhuyn has there been any further work in this direction? I'm trying to control a wasm wgpu application from javascript within my django app.