From 94a1098cbff980e97619a0365864d4ec519f2ee0 Mon Sep 17 00:00:00 2001 From: zzq Date: Fri, 5 Jul 2024 17:49:43 +0800 Subject: [PATCH] add wasm example MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ♻️ refactor(examples/wasm)：更新.gitignore，移除index.js文件，修改index.html结构，添加注释到lib.rs并重构结构体名 ✨ feat(examples/wasm): 在Cargo.toml中为button-driver添加wasm特性，简化lib.rs代码并修改Instant实现 ✨ feat: 在Cargo.toml中添加js-sys依赖；在src/instant.rs中为js_sys::Date实现InstantProvider trait ✨ feat(.github/workflows/rust.yml)：添加Clippy wasm检查、rustup添加wasm32-unknown-unknown目标及wasm示例构建步骤 💡 feat(examples/wasm/src/lib.rs)：添加注释说明使用`JsInstant`类型，更新依赖并替换`Date`为`JsInstant` ✨ feat: 在src/instant.rs中添加JsInstant结构体及相关实现，在src/lib.rs中导出JsInstant 💡 docs: 在src/instant.rs中添加JsInstant的注释说明 --- .github/workflows/rust.yml | 9 +- Cargo.toml | 2 + examples/wasm/.gitignore | 2 + examples/wasm/Cargo.lock | 164 +++++++++++++++++++++++++++++++++++++ examples/wasm/Cargo.toml | 17 ++++ examples/wasm/index.html | 22 +++++ examples/wasm/src/lib.rs | 103 +++++++++++++++++++++++ src/instant.rs | 24 ++++++ src/lib.rs | 3 + 9 files changed, 345 insertions(+), 1 deletion(-) create mode 100644 examples/wasm/.gitignore create mode 100644 examples/wasm/Cargo.lock create mode 100644 examples/wasm/Cargo.toml create mode 100644 examples/wasm/index.html create mode 100644 examples/wasm/src/lib.rs diff --git a/.github/workflows/rust.yml b/.github/workflows/rust.yml index 912b1e9..8139a5e 100644 --- a/.github/workflows/rust.yml +++ b/.github/workflows/rust.yml @@ -27,11 +27,15 @@ jobs: run: | cargo clippy --features embedded_hal -- -D warnings cargo clippy --features embedded_hal_old -- -D warnings + - name: Clippy wasm + run: cargo clippy --features wasm -- -D warnings - name: Clippy default run: cargo clippy --no-default-features -- -D warnings - name: Install dependencies - run: rustup target add thumbv7m-none-eabi + run: | + rustup target add thumbv7m-none-eabi + rustup target add wasm32-unknown-unknown - name: Clippy example stm32 working-directory: examples/stm32 @@ -39,6 +43,9 @@ jobs: - name: Clippy example stm32-embassy working-directory: examples/stm32-embassy run: cargo clippy -- -D warnings + - name: Build example wasm + working-directory: examples/wasm + run: cargo build --target wasm32-unknown-unknown --release - name: Tests run: cargo test tests --features std diff --git a/Cargo.toml b/Cargo.toml index 60019cb..1d92480 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -20,6 +20,7 @@ features = ["std"] embassy-time = { version = "0.5.0", optional = true } embedded-hal-old = { package = "embedded-hal", version = "0.2.7", optional = true } embedded-hal = { version = "1.0.0", optional = true } +js-sys = { version = "0.3", optional = true } [dev-dependencies] parking_lot = "0.12.4" @@ -31,3 +32,4 @@ embedded_hal_old = ["dep:embedded-hal-old", "embedded-hal-old/unproven"] esp = ["dep:embedded-hal"] embedded_hal = ["dep:embedded-hal"] std = [] +wasm = ["dep:js-sys", "std"] diff --git a/examples/wasm/.gitignore b/examples/wasm/.gitignore new file mode 100644 index 0000000..a803f50 --- /dev/null +++ b/examples/wasm/.gitignore @@ -0,0 +1,2 @@ +/target +/dist \ No newline at end of file diff --git a/examples/wasm/Cargo.lock b/examples/wasm/Cargo.lock new file mode 100644 index 0000000..fb39b93 --- /dev/null +++ b/examples/wasm/Cargo.lock @@ -0,0 +1,164 @@ +# This file is automatically @generated by Cargo. +# It is not intended for manual editing. +version = 4 + +[[package]] +name = "bumpalo" +version = "3.16.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "79296716171880943b8470b5f8d03aa55eb2e645a4874bdbb28adb49162e012c" + +[[package]] +name = "button-driver" +version = "0.2.4" +dependencies = [ + "js-sys", +] + +[[package]] +name = "cfg-if" +version = "1.0.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd" + +[[package]] +name = "js-sys" +version = "0.3.69" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "29c15563dc2726973df627357ce0c9ddddbea194836909d655df6a75d2cf296d" +dependencies = [ + "wasm-bindgen", +] + +[[package]] +name = "log" +version = "0.4.22" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "a7a70ba024b9dc04c27ea2f0c0548feb474ec5c54bba33a7f72f873a39d07b24" + +[[package]] +name = "once_cell" +version = "1.19.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3fdb12b2476b595f9358c5161aa467c2438859caa136dec86c26fdd2efe17b92" + +[[package]] +name = "proc-macro2" +version = "1.0.86" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "5e719e8df665df0d1c8fbfd238015744736151d4445ec0836b8e628aae103b77" +dependencies = [ + "unicode-ident", +] + +[[package]] +name = "quote" +version = "1.0.36" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "0fa76aaf39101c457836aec0ce2316dbdc3ab723cdda1c6bd4e6ad4208acaca7" +dependencies = [ + "proc-macro2", +] + +[[package]] +name = "syn" +version = "2.0.68" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "901fa70d88b9d6c98022e23b4136f9f3e54e4662c3bc1bd1d84a42a9a0f0c1e9" +dependencies = [ + "proc-macro2", + "quote", + "unicode-ident", +] + +[[package]] +name = "unicode-ident" +version = "1.0.12" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3354b9ac3fae1ff6755cb6db53683adb661634f67557942dea4facebec0fee4b" + +[[package]] +name = "wasm" +version = "0.1.0" +dependencies = [ + "button-driver", + "log", + "wasm-bindgen", + "wasm-logger", + "web-sys", +] + +[[package]] +name = "wasm-bindgen" +version = "0.2.92" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "4be2531df63900aeb2bca0daaaddec08491ee64ceecbee5076636a3b026795a8" +dependencies = [ + "cfg-if", + "wasm-bindgen-macro", +] + +[[package]] +name = "wasm-bindgen-backend" +version = "0.2.92" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "614d787b966d3989fa7bb98a654e369c762374fd3213d212cfc0251257e747da" +dependencies = [ + "bumpalo", + "log", + "once_cell", + "proc-macro2", + "quote", + "syn", + "wasm-bindgen-shared", +] + +[[package]] +name = "wasm-bindgen-macro" +version = "0.2.92" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "a1f8823de937b71b9460c0c34e25f3da88250760bec0ebac694b49997550d726" +dependencies = [ + "quote", + "wasm-bindgen-macro-support", +] + +[[package]] +name = "wasm-bindgen-macro-support" +version = "0.2.92" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "e94f17b526d0a461a191c78ea52bbce64071ed5c04c9ffe424dcb38f74171bb7" +dependencies = [ + "proc-macro2", + "quote", + "syn", + "wasm-bindgen-backend", + "wasm-bindgen-shared", +] + +[[package]] +name = "wasm-bindgen-shared" +version = "0.2.92" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "af190c94f2773fdb3729c55b007a722abb5384da03bc0986df4c289bf5567e96" + +[[package]] +name = "wasm-logger" +version = "0.2.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "074649a66bb306c8f2068c9016395fa65d8e08d2affcbf95acf3c24c3ab19718" +dependencies = [ + "log", + "wasm-bindgen", + "web-sys", +] + +[[package]] +name = "web-sys" +version = "0.3.69" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "77afa9a11836342370f4817622a2f0f418b134426d91a82dfb48f532d2ec13ef" +dependencies = [ + "js-sys", + "wasm-bindgen", +] diff --git a/examples/wasm/Cargo.toml b/examples/wasm/Cargo.toml new file mode 100644 index 0000000..f2616d4 --- /dev/null +++ b/examples/wasm/Cargo.toml @@ -0,0 +1,17 @@ +[package] +name = "wasm" +version = "0.1.0" +edition = "2021" + +[dependencies] +wasm-bindgen = { version = "0.2" } +web-sys = { version = "0.3.69", features = ["Window", "Document", "Element", "MouseEvent"] } +button-driver = { path = "../../", features = ["wasm"] } +log = "0.4.22" +wasm-logger = "0.2.0" + +[lib] +path = "src/lib.rs" +crate-type = ["cdylib"] + +[features] diff --git a/examples/wasm/index.html b/examples/wasm/index.html new file mode 100644 index 0000000..a03175e --- /dev/null +++ b/examples/wasm/index.html @@ -0,0 +1,22 @@ + + + + Button example + + + + +
+

+ Please open developer tools console to view log. +

+ + diff --git a/examples/wasm/src/lib.rs b/examples/wasm/src/lib.rs new file mode 100644 index 0000000..03c9596 --- /dev/null +++ b/examples/wasm/src/lib.rs @@ -0,0 +1,103 @@ +//! A WebAssembly example demonstrating button driver usage in the browser. +//! This example uses the built-in `JsInstant` type which wraps `js_sys::Date::now()`. +//! +//! To run this example: +//! 1. Install trunk: `cargo install trunk` +//! 2. Run: `trunk serve` +//! 3. Open your browser at `http://localhost:8080` +//! +//! Required features: `wasm` (which includes `std` and `js-sys`). + +use std::{cell::RefCell, rc::Rc}; + +use button_driver::{Button, ButtonConfig, JsInstant, Mode, PinWrapper}; +use log::info; +use wasm_bindgen::{closure::Closure, JsCast}; +use web_sys::MouseEvent; + +#[derive(Clone, Default)] +struct ButtonInput(Rc>); + +impl PinWrapper for ButtonInput { + fn is_high(&mut self) -> bool { + *self.0.borrow() + } +} + +#[wasm_bindgen::prelude::wasm_bindgen(start)] +pub fn main() { + wasm_logger::init(wasm_logger::Config::default()); + let document = web_sys::window().unwrap().document().unwrap(); + let clickable_area = document.query_selector(".clickable-area").unwrap().unwrap(); + let pin_state = ButtonInput::default(); + { + let pin_state_ref = pin_state.clone(); + let mouse_down_handler = Closure::wrap(Box::new(move |_: MouseEvent| { + *pin_state_ref.0.borrow_mut() = true; + }) as Box); + clickable_area + .add_event_listener_with_callback( + "mousedown", + mouse_down_handler.as_ref().unchecked_ref(), + ) + .unwrap(); + mouse_down_handler.forget(); + } + { + let pin_state_ref = pin_state.clone(); + let mouse_up_handler = Closure::wrap(Box::new(move |_: MouseEvent| { + *pin_state_ref.0.borrow_mut() = false; + }) as Box); + + clickable_area + .add_event_listener_with_callback("mouseup", mouse_up_handler.as_ref().unchecked_ref()) + .unwrap(); + mouse_up_handler.forget(); + } + { + let mut button = Button::<_, JsInstant>::new( + pin_state, + ButtonConfig { + mode: Mode::PullDown, + ..Default::default() + }, + ); + let callback = Closure::wrap(Box::new(move || { + button.tick(); + + if let Some(dur) = button.held_time() { + info!("Total holding time {:?}", dur); + if button.is_clicked() { + info!("Clicked + held"); + } else if button.is_double_clicked() { + info!("Double clicked + held"); + } else if button.holds() == 2 && button.clicks() > 0 { + info!("Held twice with {} clicks", button.clicks()); + } else if button.holds() == 2 { + info!("Held twice"); + } + } else { + if button.is_clicked() { + info!("Click"); + } else if button.is_double_clicked() { + info!("Double click"); + } else if button.is_triple_clicked() { + info!("Triple click"); + } else if let Some(dur) = button.current_holding_time() { + info!("Held for {:?}", dur); + } + } + + button.reset(); + }) as Box); + + web_sys::window() + .unwrap() + .set_interval_with_callback_and_timeout_and_arguments_0( + callback.as_ref().unchecked_ref(), + 20, + ) + .unwrap(); + callback.forget(); + } +} diff --git a/src/instant.rs b/src/instant.rs index 37059f0..d5361c1 100644 --- a/src/instant.rs +++ b/src/instant.rs @@ -31,3 +31,27 @@ impl InstantProvider for embassy_time::Instant { embassy_time::Instant::now() } } + +#[cfg(feature = "wasm")] +/// A wrapper around `js_sys::Date` that implements `InstantProvider`. +/// +/// This type stores the timestamp as milliseconds since the Unix epoch. +#[derive(Clone, PartialEq)] +pub struct JsInstant(f64); + +#[cfg(feature = "wasm")] +impl Sub for JsInstant { + type Output = Duration; + + fn sub(self, rhs: Self) -> Self::Output { + let delta_ms = self.0 - rhs.0; + Duration::from_millis(delta_ms as u64) + } +} + +#[cfg(feature = "wasm")] +impl InstantProvider for JsInstant { + fn now() -> Self { + JsInstant(js_sys::Date::now()) + } +} diff --git a/src/lib.rs b/src/lib.rs index 36e0a35..0fb0c05 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -8,6 +8,9 @@ pub use config::{ButtonConfig, Mode}; pub use instant::InstantProvider; pub use pin_wrapper::PinWrapper; +#[cfg(feature = "wasm")] +pub use instant::JsInstant; + /// Button configuration. pub mod config; /// Different current global time sources.