samedi 5 mai 2012

Javascript fisheye using CSS zoom

I've been trying to get together some cool javascript UI stuff to allow annotators to perform clustering over a given data set. Among the things I've been looking into are dragging and dropping one or more data nodes between existing or new clusters. My vision is to have the cluster stacked vertically. Because annotators can add as many clusters as they like, this vertical setup will cause clusters to go off screen, bringing about the need for scrolling (nooo!).
So, I've been thinking about how nice it would be if I had something like a zoomable dock (think Mac OSX) where all the clusters would be very small until the mouse got near it—this is called a fisheye effect. This way, lots of clusters can be on the screen, the user doesn't have to scroll, and the potentially very tiny clusters can be magnified just by moving the cursor near by.
Enter jQuery Interface (I'm not sure, but I believe this was the precursor to the current jQuery UI library...). This library has an interface for providing a fisheye effect to a collection of images. n.design Studio has a nice example:
(Go to full-sized demo)

The problem is, Interface only provides zooming of the actual image, not the text within. The clusters I want to magnify will be simple div's with text, so this solution doesn't really work. So, I hacked it to use the CSS zoom property. Zoom will magnify all aspects of a DOM node and its children, including any images. Merging this hack with the example Mac dock above yields the following:
(Go to full-sized demo)

Two things to note:
  1. the top menu has been changed to a bunch of text div's
  2. the text labels that appear over the icons in the bottom menu are magnified along with the icon themselves
If you'd like to play around with the hack, you can download all the source here (tar.gz file).
I'm planning to integrate this with the drag and drop code I've been working with and hopefully have a slick clustering platform. I'll try to post more about it along the way.

Update:
I've been doing all my development on Chrome lately. As such, I've been forgetting to cross check things with Firefox. Turns out that zoom is not supported by Firefox at all. While Firefox does support the -moz-transform: scale(.75) rule, scale does not work like zoom. So, the above will not work in Firefox. At some point, I'll update things to use scale properly.

Aucun commentaire:

Enregistrer un commentaire