16th August 2010

Posted in

Blog :: Raphael is really cool

Even if I don't know what character that "e with dots over it" character is supposed to be.

I'm talking of course about Raphael JS - a Javascript library for drawing svg based vector graphics in the browser. I'd seen Raphael a bit ago and was thinking about it for some charting I had to do for a client's web app. Raphael wasn't exactly the right fit but I've been meaning to learn it forever so I added it to a little side project.

learnchordmelody.com is a site I made to keep track of resources I find online about Chord Melody/Jazz Guitar playing and theory. I partly made it to clear out my bookmarks folder and partly because I wanted to make a clean slate site - It's html5 (I LOVE doctype html - finally a doctype I can remember) with some CSS3 features like rounded borders, drop shadows, multi-column layout, and embedded fonts. I used a handrolled microframework in PHP that makes it easy to update. I don't really have design chops but I sketched an outline of a Jazz guitar for the header, picked a handwritten font from Google's Font API and I think it looks decent.

I added the touch of Raphael to replace the sort of thing people use Flash for - a bit of animation. If you visit the site and mouse over the menu items using a decent browser the little treble clef morphs into an eighth note. (This works in tested IE7, Chrome, and Firefox 3 - your results may vary). The animation even worked in IE6 (Raphael uses VML in IE) but it created a layout bug I'm too lazy to fix so I disabled it for IE6. This wasn't rocket science but it's kind of cute (really Mom, check it out!)

Working with Raphael was fairly easy - I got copyright free svg drawings from WikiMedia Commons, scaled them and copied and pasted the svg path information from Inkscape into a javascript file. I then drew a little canvas in each menu item and started the animation on mouseover. I wanted to animate back to the treble clef on mouseout but Raphael doesn't have an animation queue built in and the quick solution I hacked together looked too abrupt. Besides - I wanted to keep this short and (excluding the svg path info) I've only got 14 lines of JS.

The only other issue I ran into was getting the canvas objects (Raphael calls them "Paper" as it isn't an html5 canvas) from the mouseover event on another DOM object. Using Jquery I would typically select a DOM object and manipulate it. I could select the dom node representing the svg object but I couldn't figure out how to get back to the Paper (Raphael object with animation methods) from the DOM node. I ended up making a javascript list of Paper objects and matching the menu item that had the event to the ith item in the Javascript list - there might be a better way of doing this...

Anyways - take a look - If I can come up with a better use case than animated icons I'll definitely revisit Raphael.

Posted on August 16th 2010, 11:47 PM

blog comments powered by Disqus