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
AccordionAlertAnchorAppShellAreaChartAspectRatioAttachmentStripAudioPlayerButtonAvatarBadgeBarChartBarcodeBreadcrumbButtonButtonGroupCalendarCanvasCardCardViewCarouselChartChartCardChartReferenceChatCheckboxCodeBlockCodeEditorCollapseColorPairColorPickerColorSwatchColorWheelComboboxCommandPaletteCompareViewConfirmDialogContextMenuCountUpCropOverlayCurveEditorDataGridDatePickerDateRangePickerDateTimePickerDaySeparatorDialogDisclosureDividerDockAreaDocumentTabsDotDropdownMenuDropZoneEmptyStateEventCalendarExpressionEditorEyedropperFavoriteToggleFileBrowserFileUploadFilmstripFilterBuilderFloatingPanelFloatingToolbarFooterFormFieldFormLayoutGlassCardGridHelpTipHeroBannerHistogramHoverCardHStackIconIconButtonIconTileImageImageFieldImageLightboxInlineRenameInputOtpKbdLabelLinkListLookupFieldLottieMarqueeMaskedFieldMenubarMinimapModelPickerMovieAssistantMoviePlayerMultiProgressNinePointAnchorNumberFieldOverlayBadgePagedDocumentViewPageHeaderPaginationPlaygroundPopoverProgressBarPropertyRowProtractorQuadFieldRadioGroupRatingRecurrenceEditorReleaseNotesRibbonRichTextRubberBandRuleOfThirdsGridRulerSankeyChartSchedulerScrollEdgeArrowScrollLinkedScrollSceneScrollViewSectionSegmentedControlSelectSelectionBarSheetShimmerTextShortcutHintBarShortcutSheetSidebarSidebarBrandSkeletonSliderSortableListSpacerSpinnerSplashScreenSplitButtonSplitHandleSplitPanesSplitterStatStatusBarStepBadgeStepIndicatorStepperStickySwatchGridTableTabsTagBoxTextTextAreaTextFieldThemeEditorThemePickerThemeSwitcherTickerTileLayoutTimelineTimePickerTitleBarToasterToggleToggleButtonToggleGroupToolbarToolRailTooltipTransformHandlesTreeViewValueSliderVirtualListVStackWizardYearViewZoomControlZoomPanViewZStack