search

emilk / egui

egui: an easy-to-use immediate mode GUI in Rust that runs on both web and native
https://www.egui.rs/
Apache License 2.0
22.59k stars 1.62k forks source link

Feature request: Gradient picker widget #3822

Closed alufers closed 10 months ago

alufers commented 10 months ago

Is your feature request related to a problem? Please describe.

Many graphical applications would benefit from user-editable gradients (Game level editors, animation tools, data visualization tools etc.) There is no easy way to create and edit gradients with egui controls.

Describe the solution you'd like

It would be nice if a gradient picker similar to the color picker that is already present. Additionally a data structure for representing gradients should be added (maybe it needs to be coordinated with the styling subsystem, so egui widgets can be styled with those gradients?)

Describe alternatives you've considered

One thing to ponder about is whether the gradient data structure and editor should include the "shape" of the gradient (linear, radial, circular, diamond etc.) or just represent a mapping between [0, 1] -> Color32. Including the shape might make no sense for some applications (i.e. color mapping for a plot, where the color depends on some value and not the position).

Personally I believe there should be one data structure for just the mapping, and later a structure wrapping it could be added, which contains the type of gradient, if needed.

Additional context

I have collected some samples of gradient editors from different software and toolkits:

Figma

A screenshot of the figma gradient picker

A bar with the color stops and a preview of the gradient is visible above a standard color picker. The color stops can be clicked to focus them and edit their colors, as well as dragged around to change their position the gradient. Clicking the empty space between them adds another stop. To delete a stop one must press delete or backspace while one of the stops is focused. When a color has some transparency the stop gizmo splits in half, and one half shows the solid color, while another is multiplied with the alpha.

Overall, pretty solid gradient picker.

Blender

A screenshot of the Blender gradient picker

In blender the gradient preview is shown between two sets of additional controls, and above a color preview. To change the color one must click the color preview, and then a color picker appears. Adding and removing color stops can only be done via the +/- buttons on the top (no keyboard shortcuts for them). The + button always adds the gradient stop halfway between the currently selected stop, and the previous one. The markers on the gradient strip can only be dragged around, clicking inbetween them does nothing. Additionally the number and fractional position of the stop are displayed textually as separate edit boxes.

Additionally there is an utility menu for automatically distributing the stops, and select boxes for the color mode and interpolation type:

image

I think this one is somewhat clunky, but it does contain some advanced graphical features.

imgui_gradient

Animated gif showing how imgui gradient works

https://github.com/CoolLibs/imgui_gradient

A sort of blend between the two above, stops can be added by clicking but it also includes the textual representation and pop up color editor.

PS. If you think it is an OK feature to add to egui, I might be able to create a PR with one.

emilk commented 10 months ago

Like imgui_gradient, I think this makes more sense as a 3rd-party crate (egui_gradient). Build it and link to it from https://github.com/emilk/egui/issues/1942 !