Improve web example (#2115)

* Improve web example

* Implement basic logger into the example webpage

* Repace bash script with xtask

* replace wasm-bindgen-cli with wasm-bindgen-cli-support

* refactor

* Move logic into external crate.

* Remove CI changes

* Review feedback
This commit is contained in:
Lucas Kent 2022-02-25 22:57:46 +11:00 committed by GitHub
parent 40f48cbeb4
commit b7e7755edd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 63 additions and 13 deletions

2
.cargo/config.toml Normal file
View file

@ -0,0 +1,2 @@
[alias]
run-wasm = ["run", "--release", "--package", "run-wasm", "--"]

View file

@ -125,3 +125,8 @@ version = "0.2.45"
[target.'cfg(target_arch = "wasm32")'.dev-dependencies]
console_log = "0.2"
[workspace]
members = [
"run-wasm",
]

View file

@ -71,6 +71,8 @@ Winit provides the following features, which can be enabled in your `Cargo.toml`
#### WebAssembly
To run the web example: `cargo run-wasm --example web`
Winit supports compiling to the `wasm32-unknown-unknown` target with `web-sys`.
On the web platform, a Winit window is backed by a `<canvas>` element. You can

View file

@ -13,24 +13,13 @@ pub fn main() {
.unwrap();
#[cfg(target_arch = "wasm32")]
{
use winit::platform::web::WindowExtWebSys;
let canvas = window.canvas();
let window = web_sys::window().unwrap();
let document = window.document().unwrap();
let body = document.body().unwrap();
body.append_child(&canvas)
.expect("Append canvas to HTML body");
}
let log_list = wasm::create_log_list(&window);
event_loop.run(move |event, _, control_flow| {
*control_flow = ControlFlow::Wait;
#[cfg(target_arch = "wasm32")]
log::debug!("{:?}", event);
wasm::log_event(&log_list, &event);
match event {
Event::WindowEvent {
@ -48,6 +37,7 @@ pub fn main() {
#[cfg(target_arch = "wasm32")]
mod wasm {
use wasm_bindgen::prelude::*;
use winit::{event::Event, window::Window};
#[wasm_bindgen(start)]
pub fn run() {
@ -55,4 +45,43 @@ mod wasm {
super::main();
}
pub fn create_log_list(window: &Window) -> web_sys::Element {
use winit::platform::web::WindowExtWebSys;
let canvas = window.canvas();
let window = web_sys::window().unwrap();
let document = window.document().unwrap();
let body = document.body().unwrap();
// Set a background color for the canvas to make it easier to tell the where the canvas is for debugging purposes.
canvas.style().set_css_text("background-color: crimson;");
body.append_child(&canvas).unwrap();
let log_header = document.create_element("h2").unwrap();
log_header.set_text_content(Some("Event Log"));
body.append_child(&log_header).unwrap();
let log_list = document.create_element("ul").unwrap();
body.append_child(&log_list).unwrap();
log_list
}
pub fn log_event(log_list: &web_sys::Element, event: &Event<()>) {
log::debug!("{:?}", event);
// Getting access to browser logs requires a lot of setup on mobile devices.
// So we implement this basic logging system into the page to give developers an easy alternative.
// As a bonus its also kind of handy on desktop.
if let Event::WindowEvent { event, .. } = &event {
let window = web_sys::window().unwrap();
let document = window.document().unwrap();
let log = document.create_element("li").unwrap();
log.set_text_content(Some(&format!("{:?}", event)));
log_list
.insert_before(&log, log_list.first_child().as_ref())
.unwrap();
}
}
}

9
run-wasm/Cargo.toml Normal file
View file

@ -0,0 +1,9 @@
[package]
name = "run-wasm"
version = "0.1.0"
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
cargo-run-wasm = "0.1.0"

3
run-wasm/src/main.rs Normal file
View file

@ -0,0 +1,3 @@
fn main() {
cargo_run_wasm::run_wasm();
}