A Spinner Widget

Dietrich Kappe, Friday, December 14, 2007 @ 9:57 am

Update: I've added the controls to spin forward an backward, mouseover effects on the image and a simple onclick action.

I've been working on a spinner widget. "What is a spinner widget?" I heard you cry. If you've seen those flash widgets on Amazon that spin product images around in 3D, you know what I mean. I wanted to see if this could be done in pure DHTML. Well, it can, see image below and a demo here.

The widget uses projection geometry (a view point and calculating image size and position based on where lines pass through the z=0 plane) and a little bit of trigonometry for the circle. Also, zIndex is set based on an object's z coordinate. At this stage the implementation definitely performs differently based on machine horsepower and browser platform. It performs pretty well on IE7 and Safari 3, less well on Firefox.

The implementation is in GWT 1.5 (built from SVN), but could be done in pure JavaScript (obviously). Next steps include direct manipulation of the spinner (drag to spin the circle) and drag and drop, response to clicks on images, the ability to spin arbitrary DOM elements, etc. Also, I want to squeeze some better performance by using an image strip (clipped with CSS). Stay tuned.

Technorati Tags: ajax, gwt, widget, 3D

agile ajax

Comments: 9 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   That’s really nice. We don’t have the capability to skew as the items rotate to the back, but eventually DHTML and SVG combined would give us that.

   Comment by Shelley, Friday, December 14, 2007 @ 11:37 am

2. 

   That’s a very neat application. I’ve long thought about trying to design a sort of “Product Demo” using all DHTML, where you can click different parts of the product and get more info about it. You see things like that alot, but it’s always flash based. It’s good to see that something like is doable, especially being so lightweight for its size. As for performance, it works better in Firefox than IE7 on my machine.

   Comment by T.J., Friday, December 14, 2007 @ 12:20 pm

3. 

   Very nicely done. Ditto T.J.’s comment - the performance, smoothness is better in FF v2.0.0.4 than IE v7.0.5730.11 on my machine.

   Comment by ewb, Friday, December 14, 2007 @ 9:55 pm

4. 

   Very Nice.
   Where can i download the widget ?
   Regards

   Comment by Luciano, Saturday, December 29, 2007 @ 4:14 am

5. 

   rock solid-one !! after seeing ur work i realised the GWT
   ..can i see the source code for that?>?

   Comment by teja, Tuesday, January 8, 2008 @ 3:03 am

6. 

   Nice work!
   I’ve been working on another graphically-centered widget for the incubator:
   http://devcenter.yesmail.com/com.yesmail.magellan.gwt.rolodexdemo.RolodexDemoApp/RolodexDemoApp.html
   This uses an ImageBundle-like interface to let the big image manipulation work to happen at compile time (via deferred binding).

   This works well as an api, since you can do things like this:

   public interface HelpMovies extends RolodexCardBundle {
   RolodexCard welcome_clip1_btn();
   }

   …in onModuleLoad

   HelpMovies helpMovies = (HelpMovies) GWT.create(HelpMovies.class);
   RolodexCard clip1 = helpMovies.welcome_clip1_btn();
   clip1.addClickListener(new ClickListener() {
   public void onClick(Widget widget) {
   Window.alert(”clip1 clicked!”);
   }
   });
   RolodexPanel rolodex = new RolodexPanel(helpMovies);

   …which is a nice intuitive way to deal with drag-and-drop and click handling.

   Comment by Chris Jones, Monday, January 28, 2008 @ 1:08 pm

7. 

   Is the source code available for both or either of those two awesome widgets?
   The “Spinner” and “Rolodex”

   Thanks

   Comment by Matt Weiler, Friday, March 14, 2008 @ 10:10 am

8. 

   Very Nice widget…but if you can not share the code, why the hell are you telling about this?Look bro always try to share your knowledge with others….

   Comment by WebEye, Wednesday, July 9, 2008 @ 6:15 pm

9. 

   @WebEye

   No desire to hide the code, just a lack to time to make it more generally useful and package it up. Also, there’s a bug with the initial loading and positioning of images that I’d like to fix.

   Comment by Dietrich Kappe, Thursday, July 10, 2008 @ 10:13 am

Leave a comment