Incubator - Rolodex widget contribution

[chris.f.jones]

I showed our application, which makes heavy use of GWT (Yesmail
Enterprise) at the conference last week and got some great feedback on
our rolodex widget. A quick demo of it can be found here:
http://devcenter.yesmail.com/com.yesmail.magellan.gwt.rolodexdemo.RolodexDemoApp/RolodexDemoApp.html

Since this was developed for Yesmail (owned by InfoUSA) I'll need to
go through the Corporate CLA process, but before doing so I wanted to
see if this is something that would be useful in the incubator\
.

There are several TODOs, mainly:
* Write a generator to perform the image transforms at compile time
(currently these are done manually at design time). I'm nearly
finished with this, its been a fun process armed with Ray's talk on de
\
ferred binding.
* remove dojo dependency for slide animation
* Go through the steps layed out in Joel and Kelly's talk on library
creation (make sure it supports all browsers, make sure its
optimizable, etc.)

If there is interest, I can lay out the rough API as it would be used.

Thanks,
-Chris

[Emily Crutcher]

That's a pretty darn impressive widget! Especially how smooth it is.  It looks like it uses a stack of images for the navigation, which seems like it could be generalized very easily.

So +1 for my vote.

--
"There are only 10 types of people in the world: Those who understand binary, and those who don't"

[Ray Cromwell]

Chris, I'd be happy to help in any way I can. I'm also pretty versed
at Java2D if you run into trouble. Boy of boy does it look cool!

-Ray

[chris.f.jones]

The demo client code goes something like this:

public class RolodexDemoApp implements EntryPoint {
public void onModuleLoad() {
HelpMovies helpMovies = (HelpMovies)
GWT.create(HelpMovies.class);
RolodexCard targetingClip =
helpMovies.welcome_clip_targeting();
targetingClip.addClickListener(new ClickListener() {
public void onClick(Widget widget) {
Window.alert("targeting clip clicked!");
}
});
RolodexPanel rolodex = new RolodexPanel(helpMovies);
rolodex.select(helpMovies.welcome_clip_custom_view_basics());
RootPanel.get().add(rolodex);
}
}


... the HelpMovies interface looks suspiciously like an ImageBundle
whose methods return a RolodexCard instead:

public interface HelpMovies extends RolodexCardBundle {
RolodexCard welcome_clip_targeting();
RolodexCard welcome_clip_preview_content();
RolodexCard welcome_clip_schedule_master();
RolodexCard welcome_clip_basic_attributes();
etc...

The only thing I'm having trouble with at the moment is with the
perspective transform of the images during the compile process (I used
photoshop to manually do the transform in previous versions). Standard
J2SE 2D api doesn't support perspective transform, only affine. I
could depend on JAI to do a real transform, but I gather this wouldn't
be a good dependency to introduce.
The only other idea I've explored so far is to break up the image in
strips, scale them independently and stitch them back together. This
won't look as good, however, since it won't account for interpolation.

Anyone have any other ideas?

(p.s. I've also tried to chop the image into sections and do
independent shears, but that ends up looking horrible)

[Ray Cromwell]

Chris,
I think to avoid JAI, you'll essentially have to code a simple
perspective correct texture mapper. Since you'd be dealing with just a
single rectangle, it should be simpler than doing it for a game :)
Something like looping y=0 to image height, calculate start and end x
positions (edge of rectangle), loop for each pixel on the row,
calculate interpolated (perspective correct) texture coordinates, map
those into the original BufferedImage, fetch 4 pixels and bilinearly
filter them, write output to x,y. :) I'd check Google Codesearch and
see if there's not some open source code already out there. I'm sure
there's atleast 1 "rotating texture mapped cube" applet that must
exist. :)

-Ray

[Freeland Abbott]

There's a SplineDeformationGenerator available for ImageJ... you'd need to write a macro to repeatedly do the spline.  That shouldn't be too hard, but I haven't tried it personally!

[Ray Cromwell]

Nice find. I looked at the source, and it has no JAI dependencies, and
only a few ImageJ dependencies (non-Java2D image representation, e.g.
ImageProcessor) I think Chris will have to contact the authors to get
permission however, because the license says: "Please, feel free to
use this software for research or non-commercial purposes. No license
is required. We just expect you to include an acknowledgment or
citation (to any of the reference papers) whenever you present or
publish results that are based on it. "

Since GWT is an open source project, one could conceivably say it is
'non-commercial', but with heavy backing by Google, and GWT usage in
real commercial apps, it's kind of a grey area.

-Ray

[dka...@gmail.com]

This may not be an ideal or even practical solution, but the Reflex
library (http://www.netzgesta.de/reflex/) will allow you to fake some
of this on a canvas. Haven't tried it out to see if it performs for
animations, etc. And, of course, it doesn't work on a whole lot of
Browser/OS combinations.

Dietrich
----------
http://blogs.pathf.com/agileajax/

[chris.f.jones]

I ended up posting this here:
http://code.google.com/p/gwt-rolodex/

If it makes sense for this to be part of the incubator or another
widget library in the future, I'd be happy to move it over. Thanks
again to Ray for the deferred binding inspiration and to Dietrich for
the nice plug ;)

Next steps, I'm hoping to create a JAI-dependent version that could do
things like a real perspective transform (yes, I'm lazy) and possibly
a depth-of-field effect.