RavenRS · Rust GUI

Eyedropper

Edit and run the Eyedropper RavenRS example in your browser. Explore its Rust code and download a Cargo project for desktop and WebAssembly.

One declarative Rust interface, GPU rendering, reactive state and semantic design tokens. Free and open source under MIT OR Apache-2.0.

Rust source

fn eyedropper() -> impl View {
    let shown = State::new(Color::rgb(0.5, 0.5, 0.5));
    let told = shown.clone();
    let dropper = EyedropperState::new().on_pick(move |color| told.set(color));
    let ramp = |x: f32, y: f32| Color::rgb(x / 300.0, y / 130.0, 0.5);
    let picture = Canvas::new(move |frame, scene| {
        for i in 0..30 {
            let x = i as f32 * 10.0;
            let band = Rect::new(frame.x() + x, frame.y(), 10.0, frame.height());
            scene.push_quad(Quad::new(band, ramp(x, 65.0)));
        }
    })
    .size(300.0, 130.0);
    let swatch = Canvas::new(move |frame, scene| {
        scene.push_quad(Quad::new(frame, shown.get()).radius(4.0));
    })
    .size(28.0, 28.0);
    VStack::new((
        HStack::new((Eyedropper::new(&dropper), swatch)).spacing(8.0),
        EyedropperArea::new(&dropper, move |at| Some(ramp(at.x, at.y))).stage(picture),
    ))
    .spacing(8.0)
}

The interactive preview loads when JavaScript and WebGPU or WebGL2 are available. You can read the guide and examples here at any time.

More examples