Add web_aspect_ratio example#2209
Conversation
Cargo.toml
Outdated
| [dev-dependencies] | ||
| image = { version = "0.24.0", default-features = false, features = ["png"] } | ||
| simple_logger = "2.1.0" | ||
| web-sys = { version = "0.3.4", features = ['CanvasRenderingContext2d'] } |
There was a problem hiding this comment.
That's quite an old version of web-sys; why did you pick that one?
There was a problem hiding this comment.
Not sure where I got that version from...
Its functionally identical but I updated to use the same version as the non dev-dep to make it less confusing.
examples/web_aspect_ratio.rs
Outdated
| let parent_div = document.create_element("div").unwrap(); | ||
| parent_div | ||
| .dyn_ref::<HtmlElement>() | ||
| .unwrap() | ||
| .style() | ||
| .set_css_text("margin: auto; width: 50%; aspect-ratio: 4 / 1;"); | ||
| body.append_child(&parent_div).unwrap(); | ||
|
|
||
| // Set a background color for the canvas to make it easier to tell the where the canvas is for debugging purposes. | ||
| let canvas = window.canvas(); | ||
| canvas | ||
| .style() | ||
| .set_css_text("display: block; width: 100%; height: 100%; background-color: crimson;"); | ||
| parent_div.append_child(&canvas).unwrap(); |
There was a problem hiding this comment.
You shouldn't need to create a parent <div>; applying the CSS directly to the canvas works fine.
There was a problem hiding this comment.
oh I thanks I didnt realize that.
I think I prefer to have the div separate in my actual application as it means I can have a generic canvas created by wasm that the html template can configure the size of by setting the css on the parent div.
However in this example it probably makes sense to just keep it simple and do all in one considering we cant control the raw html file anyway.
I've changed the PR to remove the div but am happy to revert if someone else prefers the original way.
examples/web_aspect_ratio.rs
Outdated
| // A small default size is used to better demonstrate issues that come from failing to update the size | ||
| .with_inner_size(PhysicalSize::new(100, 100)) |
There was a problem hiding this comment.
This could be a bit misleading to people reading the example, since you almost never want to use with_inner_size when sizing using ResizeObserver; it works in this case since the canvas' style gets overridden below, but that should probably be documented more clearly.
Something like: 'Note: this would normally fix the canvas' width and height to 100px, but since the canvas' style gets overridden below in create_canvas, it just sets the initial framebuffer size.'
dd29722 to
02370df
Compare
|
I've resolved merge conflicts, would appreciate a review. |
madsmtm
left a comment
There was a problem hiding this comment.
I'm not sure I understand how it is supposed to look like now, and how it is supposed to look like after the ResizeObserver?
Here's a screenshot of what it looks like to me on Firefox:
02370df to
29b4627
Compare
|
I have addressed your feedback and added screenshots of both to the PR description. |
madsmtm
left a comment
There was a problem hiding this comment.
Thanks, that was helpful! Would you mind noting in the example that the behaviour is not as it should be yet, but will be after the other PR?
29b4627 to
bc2943f
Compare
|
done! |
madsmtm
left a comment
There was a problem hiding this comment.
Thanks, that makes it much more understandable
CHANGELOG.mdif knowledge of this change could be valuable to usersAdds a new example that creates a web canvas that fills an aspect-ratio'd div
The main point of this example is to demonstrate the functionality provided by #2074
The example can land before or after, but landing it before will make it easier to test #2074
Another benefit of this example is demonstrating how to create a web canvas that fills up the available space while maintaining the same aspect ratio.
Although this is slightly out of scope of winit I believe it would be extremely useful to provide as figuring out what combination of html elements and css configuration I needed to get this to work was surprisingly difficult for me even though I've been dabbling with web technologies for ages.
Pinging @Liamolucko for feedback as this relates to your PR.
Currently running
cargo run-wasm --example web_aspect_ratiowill give:With #2074 and running
RUSTFLAGS="--cfg=web_sys_unstable_apis" cargo run-wasm --example web_aspect_ratio --features css-sizewill give: