Web Example: Possible to occupy all available space ? Key Input

[markusmoenig]

Hi,

not a web expert here..., two questions on the web example:

• Is it possible to open the window so that it covers all available browser space (and resize with it) ?
• By default, after running the example it does not have keyboard focus, before being able to receive keyboard input one has to click on the window canvas. Is it possible to make the window canvas focus during startup ?

Thanks as always!

[parasyte]

The web example does cover all available space in the Browser window, with the same image scaling rules as with native windows. E.g. it will only scale to even integer ratios, leaving a black border as in the screenshot:

Resize is already handled:

pixels/examples/minimal-web/src/main.rs

Lines 88 to 97 in cbda7df

	// Listen for resize event on browser client. Adjust winit window dimensions
	// on event trigger
	let closure = wasm_bindgen::closure::Closure::wrap(Box::new(move |_e: web_sys::Event| {
	let size = get_window_size();
	window.set_inner_size(size)
	}) as Box<dyn FnMut(_)>);
	client_window
	.add_event_listener_with_callback("resize", closure.as_ref().unchecked_ref())
	.unwrap();
	closure.forget();

and

pixels/examples/minimal-web/src/main.rs

Lines 130 to 137 in cbda7df

	// Resize the window
	if let Some(size) = input.window_resized() {
	if let Err(err) = pixels.resize_surface(size.width, size.height) {
	log_error("pixels.resize_surface", err);
	*control_flow = ControlFlow::Exit;
	return;
	}
	}

For keyboard focus, I think it can be done with some extra web-sys stuff. With access to the canvas element that winit manages, you would call the focus() method on it. Probably need to verify that winit adds an event listener to the canvas (I'm not really sure if it does, maybe it adds a global event listener to the window). If it's a global event listener, then calling focus() on the window should be enough.

[markusmoenig]

Ah, you are right, I forgot that you scale up to even aspect ratios and mistook the black border for unused space. Perfect!

Thanks for the info re web-sys, will look into it.

[parasyte]

Also, we have a new ScaleMode::Fill added in #425 which can fit the available area without introducing much blur.