maxwase · maxwase · Nov 16, 2025 · Jul 5, 2024
diff --git a/.github/workflows/rust.yml b/.github/workflows/rust.yml
@@ -27,18 +27,25 @@ 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
       run: cargo clippy -- -D warnings
     - 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
@@ -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
@@ -0,0 +1,2 @@
+/target
+/dist
diff --git a/examples/wasm/Cargo.lock b/examples/wasm/Cargo.lock
diff --git a/examples/wasm/Cargo.toml 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
@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Button example</title>
+    <style>
+      .clickable-area {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 200px;
+        height: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <button class="clickable-area" type="button">Button</button>
+    <br>
+    <p>
+      Please open developer tools console to view log.
+    </p>
+  </body>
+</html>
diff --git a/examples/wasm/src/lib.rs 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<RefCell<bool>>);
+
+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<dyn FnMut(_)>);
+        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<dyn FnMut(_)>);
+
+        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<dyn FnMut()>);
+
+        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
@@ -31,3 +31,27 @@ impl InstantProvider<embassy_time::Duration> 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<Duration> for JsInstant {
+    fn now() -> Self {
+        JsInstant(js_sys::Date::now())
+    }
+}
diff --git 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.