Do you want to give something back to this project? I'm interested in redesigning my java.net page. If you're any good at web design, please get in touch and help me give it a facelift.

Gradients: a GUI widget to design them

Kudos to Werner and Sébastien who encouraged me to publish this, and gave me useful feedback on the design.

Around March I designed a JComponent to manipulate a gradient. It's similar to a JSlider, except instead of 1 thumb it can have indefinitely many thumbs. (But it must always have a minimum of 2 thumbs.)

Each thumb can have the keyboard focus, and when it has the focus the arrow keys nudge it in the appropriate direction. Also this project by default is wired together with the ColorPicker project, so if you double-click or right-click a thumb the ColorPicker package is used to let you select/edit your color.

New thumbs are added simply by clicking inside the track of the slider. This is a property that you can turn off, if you really want to, but by default it is on. You can remove thumbs either by dragging them outside of the track, or by hitting the delete/backspace key when that thumb has focus. (Unless you are down to only 2 thumbs: then you can't remove any more.)

Here is a demo applet:


To use it, try clicking on any spot in the applet to create a new color/thumb. Then you can right-click a thumb to trigger a popup to pick the exact color you want. If you double-click or press the spacebar the ColorPicker dialog should be invoked.

(As an applet, this demo may look a little unsightly when you invoke a popup or a dialog. And the keyboard focus may not easily transfer back to the applet when the dialog is dismissed. I recommend running this as a stand-alone app for a much better experience.)


This demo (source included) is available here.

As you can see there are a few customizations you can make to its appearance, too:

  • The track can be drawn in a simple bevel, or it can be painted in a rounded rectangle.
  • The thumbs can fade in/out depending on whether the GradientSlider has focus or not.
  • The sliders shown here are compact, but they will fill the space they're given. So you can give a slider a preferred size and it will stretch appropriately.
  • What else? Tick marks, just like a JSlider. In fact most of the method signatures are designed to really closely match the JSlider ( isInverted(), getOrientation(), setPaintTicks(), etc.)
  • 3 comments:

    1. In fumbling around other projects, I noticed there's a JXGradientChooser in the SwingX project. Depending on your needs you may want to check that out too if this subject interests you. (I haven't had time to try it yet...)

      ReplyDelete
    2. Jeremy, double-clicking on a thumb to change a color only works the first time. Further double-clicks are ignored. The weird thing is, double-clicking works as expected when debugging your code (Netbeans 6.7.1 on OS X 10.6.1). Do you have any advice how this could be fixed?
      Thanks, Bernie

      ReplyDelete
    3. Bernie, I'm not sure how to reproduce what you're describing. If you have steps feel free to email me and I can help troubleshoot from there; it's hard to have this kind of discussion in a thread of comments. :)

      ReplyDelete