Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
markusmoenig opened this issue May 2, 2023 · 2 comments
Open
Labels
question Usability question

Comments

@markusmoenig
Copy link

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
Copy link
Owner

parasyte commented May 2, 2023

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:

minimal-web screenshot

Resize is already handled:

// 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
// 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.

@parasyte parasyte added the question Usability question label May 2, 2023
@markusmoenig
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Usability question
Projects
None yet
Development

No branches or pull requests

2 participants