Search with style in Swing

You can run the WebStart demo or, as usual, download its source code. The code you want to look at is in SpotlightPanel and Spotlight classes.

Most of applications involve data manipulations. You create, edit, delete, move and… search for data items. A lot of common UI controls allow to display search results in a practical way but they all lack a bit of fancy. Apple's next version of MacOS X, Tiger, will introduce a cool new search technology called Spotlight. In the preferences dialog you can type in a query and see cool spots shedding light on the icons which lead to the function you were looking for. Should we wait a few months to give it a try? Or should we use Swing to use the same trick now?

While cool, this visual effect can only be applied to small sets of data. In today's demo, I've set up a fake books shelf application:

The text field at the bottom of the frame lets you enter a search query to know which books in the shelf are the ones you're looking for. In this demo, only the queries “sci-fi”, “adams”, “pratchett” and “books” will lead to some result, so don't be too original here. Enter one of this queries, press the Enter key and here is what you should see:

Pretty isn't it? In this example I have run the query for “sci-fi”. Here is the result for “pratchett”:

Did you notice how the black veil adapts its opacity according to the amount of light shed onto it? The more spots you create, the less black it appears. And don't worry, spots can overlap:

Setting up this cool effect is very easy and it is just a matter of a few lines of code. The trick uses, once again, a glass pane:

SpotlightPanel glassPane = new SpotlightPanel();
// a circular spotlight
glassPane.addSpotlight(50, 50, 100);
// an ellipse
glassPane.addSpotlight(100, 100, 25, 75);

Each call to addSpotlight() returns a Spotlight instance you can use to animate the spot. The big problem with the actual code is caused by the blurring filter in the paint method. I apply a ConvolveOp on the glass pane. As the frame is pretty big, it consumes a lot of CPU power. On slow computers you'll see drawing slowdowns while you will move the mouse cursor above the window. You can work around this by invoking the constructor new SpotlightPanel(false) to disable the blur. The result is less cool but you can now animate the spotlights! If you leave the blur turned on, no animation will ever run smooth enough, believe me.

So please, could somebody find a clever way to fake the blur on each spotlight? It would even allow to change the blur amount of each spot, depending on the relevance of each search result. A sharp spot would point out a very good result whereas a blurry one would point out a partial match. I've already tried to fake the blur by drawing smaller ellipses in each spot but I did not find a good way to compute the colors. Help me :)

Comments are closed.