Misc · Codes and checks: a QR code scanner and a captcha

misc::QrCodeScanner reads QR codes with rqrr 0.11 from the frames the
host hands in, one at a time off the main thread, and hands each code
to the owner once. misc::Captcha shows the owner's picture over an
answer field that empties and keeps focus with each answer; the owner
says how it stood. BarcodeDisplay, Signature and Rating Widget point
to their homes.

src/misc/captcha.rs

@@ -0,0 +1,193 @@
+use std::rc::Rc;
+
+use gpui::{
+    App, ElementId, ImageSource, InteractiveElement, IntoElement, ParentElement, RenderOnce,
+    SharedString, Styled, Window, div, prelude::*,
+};
+
+use crate::{
+    buttons::{Button, ButtonVariant, IconButton},
+    feedback::InlineMessage,
+    forms::{Enter, Input, TextInput},
+    primitives::{FocusRing, Icon, IconName, Image, Severity, checked_ratio, framed, tab_stop},
+    theme::{ActiveTheme, ControlSize, IconSize, Radius},
+};
+
+type OnAnswer = Rc<dyn Fn(&SharedString, &mut Window, &mut App)>;
+type OnRefresh = Rc<dyn Fn(&mut Window, &mut App)>;
+
+/// Where a captcha stands, as its owner says.
+#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
+pub enum CaptchaState {
+    #[default]
+    Asking,
+    /// The owner checks the answer: Verify spins and takes no press.
+    Checking,
+    /// The answer did not match.
+    Wrong,
+    /// The field rests, and Verify becomes a mark that keeps its focus.
+    Passed,
+}
+
+/// A picture of characters to copy, from the owner, over a field to type them. Verify or Enter hands the answer to the owner, who checks it and says how it stood; the field empties with each answer and keeps focus. With `on_refresh`, a button asks the owner for a new picture.
+#[derive(IntoElement)]
+pub struct Captcha {
+    id: ElementId,
+    picture: ImageSource,
+    ratio: f32,
+    state: CaptchaState,
+    on_answer: Option<OnAnswer>,
+    on_refresh: Option<OnRefresh>,
+}
+
+impl Captcha {
+    /// `ratio` is the picture's width over its height.
+    pub fn new(id: impl Into<ElementId>, picture: impl Into<ImageSource>, ratio: f32) -> Self {
+        Self {
+            id: id.into(),
+            picture: picture.into(),
+            ratio: checked_ratio(ratio),
+            state: CaptchaState::default(),
+            on_answer: None,
+            on_refresh: None,
+        }
+    }
+
+    pub fn state(mut self, state: CaptchaState) -> Self {
+        self.state = state;
+        self
+    }
+
+    /// Runs with the typed answer, trimmed.
+    pub fn on_answer(
+        mut self,
+        handler: impl Fn(&SharedString, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_answer = Some(Rc::new(handler));
+        self
+    }
+
+    /// Asks for a new picture.
+    pub fn on_refresh(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
+        self.on_refresh = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for Captcha {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let id = self.id;
+        let on_answer = self
+            .on_answer
+            .unwrap_or_else(|| panic!("captcha {id:?} has no on_answer"));
+        let field = window.use_keyed_state((id.clone(), "field"), cx, |window, cx| {
+            TextInput::new(window, cx).placeholder("Type the characters")
+        });
+        let passed = self.state == CaptchaState::Passed;
+        if field.read(cx).is_disabled() != passed {
+            field.update(cx, |field, cx| field.set_disabled(passed, cx));
+        }
+        let verify = tab_stop((id.clone(), "verify").into(), !passed, window, cx);
+        let empty = field.read(cx).text().trim().is_empty();
+        let answer = {
+            let field = field.clone();
+            Rc::new(move |window: &mut Window, cx: &mut App| {
+                let text = SharedString::from(field.read(cx).text().trim().to_string());
+                if text.is_empty() {
+                    return;
+                }
+                log::info!("captcha: answered");
+                on_answer(&text, window, cx);
+                field.update(cx, |field, cx| field.set_text("", cx));
+                window.focus(field.read(cx).focus());
+            })
+        };
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let radius = theme.radius(Radius::Md);
+        let action = match passed {
+            true => div()
+                .id((id.clone(), "verified"))
+                .debug_selector(|| "captcha-verified".into())
+                .track_focus(&verify)
+                .flex()
+                .flex_none()
+                .items_center()
+                .gap_1()
+                .h(theme.control_height(ControlSize::Md))
+                .px(theme.control_padding(ControlSize::Md))
+                .rounded(radius)
+                .border_1()
+                .border_color(colors.border.alpha(0.0))
+                .focus_ring(cx)
+                .text_color(colors.success)
+                .child(
+                    Icon::new(IconName::Check)
+                        .size(IconSize::Sm)
+                        .color(colors.success),
+                )
+                .child("Verified")
+                .into_any_element(),
+            false => {
+                let answer = answer.clone();
+                Button::new((id.clone(), "verify-button"), "Verify")
+                    .variant(ButtonVariant::Primary)
+                    .focus_handle(&verify)
+                    .loading(self.state == CaptchaState::Checking)
+                    .disabled(empty && self.state != CaptchaState::Checking)
+                    .on_click(move |_, window, cx| answer(window, cx))
+                    .into_any_element()
+            }
+        };
+        let refresh = self.on_refresh.map(|on_refresh| {
+            IconButton::new((id.clone(), "refresh"), IconName::RefreshCw)
+                .tooltip("New picture")
+                .on_click(move |_, window, cx| {
+                    log::info!("captcha: asked for a new picture");
+                    on_refresh(window, cx)
+                })
+        });
+        div()
+            .flex()
+            .flex_col()
+            .gap_2()
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .gap_2()
+                    .child(
+                        div().flex_1().min_w_0().child(
+                            framed(self.ratio, cx).rounded(radius).child(
+                                Image::new((id.clone(), "picture"), self.picture)
+                                    .size_full()
+                                    .rounded(radius),
+                            ),
+                        ),
+                    )
+                    .children(refresh),
+            )
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .gap_2()
+                    .child(
+                        div()
+                            .flex_1()
+                            .min_w_0()
+                            .capture_action(move |_: &Enter, window, cx| {
+                                cx.stop_propagation();
+                                answer(window, cx);
+                            })
+                            .child(Input::new(&field)),
+                    )
+                    .child(action),
+            )
+            .when(self.state == CaptchaState::Wrong, |captcha| {
+                captcha.child(div().debug_selector(|| "captcha-wrong".into()).child(
+                    InlineMessage::new(Severity::Danger, "That did not match; try again."),
+                ))
+            })
+    }
+}

src/misc/mod.rs

@@ -1,11 +1,15 @@
 mod calculator;
+mod captcha;
 mod clock;
+mod scanner;
 mod stopwatch;
 #[cfg(all(test, feature = "test-support"))]
 mod tests;
 mod units;
 
 pub use calculator::Calculator;
+pub use captcha::{Captcha, CaptchaState};
 pub use clock::{Clock, WorldClock};
+pub use scanner::QrCodeScanner;
 pub use stopwatch::Stopwatch;
 pub use units::UnitConverter;

src/misc/scanner.rs

@@ -0,0 +1,216 @@
+use std::{rc::Rc, sync::Arc};
+
+use gpui::{
+    App, ElementId, ImageId, IntoElement, ParentElement, RenderImage, RenderOnce, SharedString,
+    Styled, Task, Window, div, prelude::*, relative,
+};
+
+use crate::{
+    media::CameraPreview,
+    primitives::{Icon, IconName},
+    theme::{ActiveTheme, IconSize, Radius, TextSize},
+    typography::literal,
+};
+
+type OnScan = Rc<dyn Fn(&SharedString, &mut Window, &mut App)>;
+
+/// The text of the first QR code that decodes in a frame of gpui's BGRA pixels.
+pub(crate) fn read(frame: &RenderImage) -> Option<String> {
+    let pixels = frame.as_bytes(0).expect("a frame has pixels");
+    let size = frame.size(0);
+    let (width, height) = (size.width.0 as usize, size.height.0 as usize);
+    let mut image = rqrr::PreparedImage::prepare_from_greyscale(width, height, |x, y| {
+        let at = (y * width + x) * 4;
+        let [blue, green, red] = [pixels[at], pixels[at + 1], pixels[at + 2]].map(u32::from);
+        ((red * 299 + green * 587 + blue * 114) / 1000) as u8
+    });
+    image
+        .detect_grids()
+        .into_iter()
+        .find_map(|grid| grid.decode().ok().map(|(_, text)| text))
+}
+
+/// The scanner's own: the frame last read, the text last found, the read under way, and the owner's handler.
+#[derive(Default)]
+struct Scan {
+    seen: Option<ImageId>,
+    found: Option<SharedString>,
+    reading: Option<Task<()>>,
+    on_scan: Option<OnScan>,
+}
+
+/// A camera's view with a square to aim at, reading QR codes off the main thread from the frames the host hands in; frames that come while one is read are passed over. Each code goes to the owner once, when it differs from the last, and shows under the view.
+#[derive(IntoElement)]
+pub struct QrCodeScanner {
+    id: ElementId,
+    ratio: f32,
+    frame: Option<Arc<RenderImage>>,
+    on_scan: Option<OnScan>,
+}
+
+impl QrCodeScanner {
+    /// `ratio` is the camera's width over its height.
+    pub fn new(id: impl Into<ElementId>, ratio: f32) -> Self {
+        Self {
+            id: id.into(),
+            ratio,
+            frame: None,
+            on_scan: None,
+        }
+    }
+
+    /// The frame to show and read now, in gpui's BGRA pixels.
+    pub fn frame(mut self, frame: Arc<RenderImage>) -> Self {
+        self.frame = Some(frame);
+        self
+    }
+
+    /// Runs with the text of each code read.
+    pub fn on_scan(
+        mut self,
+        handler: impl Fn(&SharedString, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_scan = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for QrCodeScanner {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let id = self.id;
+        let on_scan = self
+            .on_scan
+            .unwrap_or_else(|| panic!("qr code scanner {id:?} has no on_scan"));
+        let scan = window.use_keyed_state((id.clone(), "scan"), cx, |_, _| Scan::default());
+        scan.update(cx, |scan, _| scan.on_scan = Some(on_scan));
+        let fresh = self.frame.clone().filter(|frame| {
+            let scan = scan.read(cx);
+            scan.reading.is_none() && scan.seen != Some(frame.id)
+        });
+        if let Some(frame) = fresh {
+            let (weak, seen) = (scan.downgrade(), frame.id);
+            let task = window.spawn(cx, async move |cx| {
+                let text = cx
+                    .background_executor()
+                    .spawn(async move { read(&frame) })
+                    .await;
+                let _ = cx.update(|window, cx| {
+                    let Ok(Some((text, on_scan))) = weak.update(cx, |scan, cx| {
+                        scan.reading = None;
+                        cx.notify();
+                        let text = SharedString::from(text?);
+                        (scan.found.as_ref() != Some(&text)).then(|| {
+                            scan.found = Some(text.clone());
+                            (text, scan.on_scan.clone())
+                        })
+                    }) else {
+                        return;
+                    };
+                    log::info!("qr code scanner: read {text}");
+                    if let Some(on_scan) = on_scan {
+                        on_scan(&text, window, cx);
+                    }
+                });
+            });
+            scan.update(cx, |scan, _| {
+                scan.seen = Some(seen);
+                scan.reading = Some(task);
+            });
+        }
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let found = scan.read(cx).found.clone();
+        let live = self.frame.is_some();
+        let mut camera = CameraPreview::new((id, "camera"), self.ratio);
+        if let Some(frame) = self.frame {
+            camera = camera.frame(frame);
+        }
+        let mut aim = div()
+            .h(relative(0.62))
+            .border_2()
+            .border_color(colors.on_media.alpha(0.9))
+            .rounded(theme.radius(Radius::Md));
+        aim.style().aspect_ratio = Some(1.0);
+        let status = match found {
+            Some(text) => div()
+                .flex()
+                .items_start()
+                .gap_2()
+                .child(
+                    Icon::new(IconName::CircleCheck)
+                        .size(IconSize::Sm)
+                        .color(colors.success),
+                )
+                .child(
+                    literal(div())
+                        .flex_1()
+                        .min_w_0()
+                        .debug_selector(|| format!("scanned-{text}"))
+                        .text_color(colors.fg)
+                        .child(text),
+                ),
+            None => div()
+                .text_color(colors.fg_muted)
+                .child("Point the camera at a QR code"),
+        };
+        div()
+            .flex()
+            .flex_col()
+            .gap_2()
+            .text_size(theme.text_size(TextSize::Sm))
+            .child(div().relative().child(camera).when(live, |view| {
+                view.child(
+                    div()
+                        .absolute()
+                        .inset_0()
+                        .flex()
+                        .items_center()
+                        .justify_center()
+                        .child(aim),
+                )
+            }))
+            .child(status)
+    }
+}
+
+/// A frame of gpui's BGRA pixels showing `text` as a QR code, four pixels a module, inside the quiet margin.
+#[cfg(test)]
+pub(crate) fn frame_of(text: &str) -> Arc<RenderImage> {
+    let code = qrcode::QrCode::new(text).expect("the text fits a QR code");
+    let (width, scale, quiet) = (code.width(), 4, 4);
+    let side = ((width + quiet * 2) * scale) as u32;
+    let mut pixels = image::RgbaImage::from_pixel(side, side, image::Rgba([255; 4]));
+    for (ix, color) in code.to_colors().into_iter().enumerate() {
+        if color == qrcode::Color::Dark {
+            let (x, y) = ((ix % width + quiet) * scale, (ix / width + quiet) * scale);
+            for (dx, dy) in (0..scale).flat_map(|dx| (0..scale).map(move |dy| (dx, dy))) {
+                pixels.put_pixel(
+                    (x + dx) as u32,
+                    (y + dy) as u32,
+                    image::Rgba([0, 0, 0, 255]),
+                );
+            }
+        }
+    }
+    Arc::new(RenderImage::new(vec![image::Frame::new(pixels)]))
+}
+
+#[cfg(test)]
+mod tests {
+    use gpui::RenderImage;
+
+    use super::{frame_of, read};
+
+    #[test]
+    fn a_frame_reads_as_the_code_it_shows() {
+        assert_eq!(
+            read(&frame_of("https://example.com/ely")).as_deref(),
+            Some("https://example.com/ely")
+        );
+        let blank = image::RgbaImage::from_pixel(64, 64, image::Rgba([255; 4]));
+        assert_eq!(
+            read(&RenderImage::new(vec![image::Frame::new(blank)])),
+            None
+        );
+    }
+}

src/misc/tests/codes.rs

@@ -0,0 +1,135 @@
+use std::{
+    cell::{Cell, RefCell},
+    sync::Arc,
+};
+
+use gpui::{AnyElement, IntoElement, RenderImage, TestAppContext, VisualTestContext};
+
+use super::{at_root, press, settle, shown, stage};
+use crate::misc::{Captcha, CaptchaState, QrCodeScanner, scanner::frame_of};
+
+thread_local! {
+    static FRAME: RefCell<Option<Arc<RenderImage>>> = const { RefCell::new(None) };
+    static SAID: RefCell<Vec<String>> = const { RefCell::new(Vec::new()) };
+    static STATE: Cell<CaptchaState> = const { Cell::new(CaptchaState::Asking) };
+}
+
+fn said() -> Vec<String> {
+    SAID.with(|said| said.borrow().clone())
+}
+
+fn say(text: &str) {
+    SAID.with(|said| said.borrow_mut().push(text.to_string()));
+}
+
+/// Hands the stage a new frame, or state, and lets it draw and read.
+fn show(cx: &mut VisualTestContext) {
+    cx.update(|window, _| window.refresh());
+    settle(cx);
+}
+
+fn scanner() -> AnyElement {
+    let scanner = QrCodeScanner::new("scanner", 1.0).on_scan(|text, _, _| say(text));
+    match FRAME.with(|frame| frame.borrow().clone()) {
+        Some(frame) => scanner.frame(frame),
+        None => scanner,
+    }
+    .into_any_element()
+}
+
+/// Frames read off the main thread; a code goes to the owner once, and a new one after it.
+#[gpui::test]
+fn a_scanner_reads_each_code_once(cx: &mut TestAppContext) {
+    FRAME.with(|frame| frame.replace(Some(frame_of("first"))));
+    let (_, cx) = stage(scanner, cx);
+    assert_eq!(said(), ["first"]);
+    assert!(shown("scanned-first", cx));
+    FRAME.with(|frame| frame.replace(Some(frame_of("first"))));
+    show(cx);
+    assert_eq!(
+        said(),
+        ["first"],
+        "a new frame of the same code says nothing"
+    );
+    FRAME.with(|frame| frame.replace(Some(frame_of("second"))));
+    show(cx);
+    assert_eq!(said(), ["first", "second"]);
+}
+
+/// A frame that comes while one is read waits: the read's end redraws, and the newest frame is read next.
+#[gpui::test]
+fn a_frame_that_comes_mid_read_is_read_next(cx: &mut TestAppContext) {
+    let (_, cx) = stage(scanner, cx);
+    for text in ["first", "second"] {
+        FRAME.with(|frame| frame.replace(Some(frame_of(text))));
+        cx.update(|window, _| window.refresh());
+    }
+    assert!(said().is_empty(), "both frames drew before any read ended");
+    cx.run_until_parked();
+    assert_eq!(said(), ["first", "second"], "only the read's end redrew");
+}
+
+fn captcha() -> AnyElement {
+    Captcha::new("captcha", frame_of("W7XK"), 1.0)
+        .state(STATE.get())
+        .on_answer(|text, _, _| say(text))
+        .into_any_element()
+}
+
+/// Enter hands the answer over and empties the field, which keeps focus through the owner's verdict.
+#[gpui::test]
+fn a_captcha_hands_over_answers_and_keeps_focus(cx: &mut TestAppContext) {
+    let (_, cx) = stage(captcha, cx);
+    press("tab", cx);
+    press("enter", cx);
+    assert!(said().is_empty(), "nothing typed, nothing handed over");
+    cx.simulate_input(" w7xk ");
+    press("enter", cx);
+    assert_eq!(said(), ["w7xk"]);
+    STATE.set(CaptchaState::Wrong);
+    show(cx);
+    assert!(shown("captcha-wrong", cx));
+    cx.simulate_input("W7XK");
+    press("enter", cx);
+    assert_eq!(
+        said(),
+        ["w7xk", "W7XK"],
+        "the field emptied for the next try"
+    );
+    STATE.set(CaptchaState::Passed);
+    show(cx);
+    assert!(
+        shown("captcha-verified", cx) && !at_root(cx),
+        "the field kept focus"
+    );
+    cx.simulate_input("again");
+    press("enter", cx);
+    assert_eq!(said().len(), 2, "a passed captcha takes no more answers");
+}
+
+/// Enter on Verify hands the answer over and focus to the emptied field, as Verify rests.
+#[gpui::test]
+fn verify_hands_focus_to_the_field(cx: &mut TestAppContext) {
+    let (_, cx) = stage(captcha, cx);
+    press("tab", cx);
+    cx.simulate_input("W7XK");
+    press("tab", cx);
+    press("enter", cx);
+    assert_eq!(said(), ["W7XK"]);
+    assert!(!at_root(cx), "focus went to the field, not the root");
+}
+
+/// Verify spins while the owner checks, and its mark keeps its focus once passed.
+#[gpui::test]
+fn verify_keeps_its_focus_through_the_check(cx: &mut TestAppContext) {
+    let (_, cx) = stage(captcha, cx);
+    press("tab", cx);
+    cx.simulate_input("W7XK");
+    press("tab", cx);
+    STATE.set(CaptchaState::Checking);
+    show(cx);
+    assert!(!at_root(cx), "a spinning Verify stays a stop");
+    STATE.set(CaptchaState::Passed);
+    show(cx);
+    assert!(!at_root(cx), "the Verified mark took Verify's focus");
+}

src/misc/tests/mod.rs

@@ -13,6 +13,7 @@ use crate::{
     theme::Theme,
 };
 
+mod codes;
 mod numbers;
 
 struct Stage {
@@ -29,7 +30,7 @@ impl Render for Stage {
     }
 }
 
-fn settle(cx: &mut VisualTestContext) {
+pub(super) fn settle(cx: &mut VisualTestContext) {
     for _ in 0..3 {
         cx.run_until_parked();
         cx.update(|window, _| window.refresh());
@@ -55,6 +56,7 @@ pub(super) fn stage(
         part,
     });
     let root = view.read_with(cx, |stage, _| stage.root.clone());
+    ROOT.with(|kept| kept.replace(Some(root.clone())));
     let wakes = Rc::new(Cell::new(0));
     let count = wakes.clone();
     cx.update(|window, cx| {
@@ -66,6 +68,16 @@ pub(super) fn stage(
     (wakes, cx)
 }
 
+thread_local! {
+    static ROOT: std::cell::RefCell<Option<FocusHandle>> = const { std::cell::RefCell::new(None) };
+}
+
+/// Whether focus fell to the stage's root scope.
+pub(super) fn at_root(cx: &mut VisualTestContext) -> bool {
+    let root = ROOT.with(|root| root.borrow().clone().expect("a staged root"));
+    cx.update(|window, _| root.is_focused(window))
+}
+
 pub(super) fn press(key: &str, cx: &mut VisualTestContext) {
     cx.simulate_keystrokes(key);
     settle(cx);