Transparent PNG in the Cosmo calendar UI

2006-09-21 00:44:00

During a conversation with a Cosmo contributor, Jeremy Epstein, about the profusion of background graphic images used for the fancy gradients in Cosmo's calendar-event lozenges, he suggested the idea of transparent PNGs over a background color as a way to reduce the number of graphics we'd need.

As it turns out this works swimmingly on all our supported browsers ... except IE6, of course. You can get some basic PNG transparency in IE using the AlphaImageLoader hack, but it causes some ugly z-index isssues -- the div with the PNG background acts kind of like the form select element does in IE, floating to the top of stuff that should actually be in front of it.

You can get around in theory that by specifying z-indexes for the elements involved, but in Cosmo we're already making extensive use of z-index on those elements for the drag-and-drop of the lozenges, and it's only going to be more complicated once we start to implement calendar overlay.

So rather than continuing to be an old-IE-enabler, we decided that flat background colors for the event lozenges were fine and dandy for IE6, thank you very much. IE6 truly is the "new Netscape 4."

And I'm happy to note that after endless security downloads and updates to a fresh WinXP virtual machine, I have done an upgrade to IE7, which has actual transparent PNG support -- and it works fine there. The lozenge gradients and the Cosmo UI in general look great. Not so much the IE7 UI -- where the hell did all my menus go?

The nice thing about using these PNG gradient backgrounds is that now we can generate a number of different calendar color palettes from a single hue value, and not have to have a profusion of different graphics to go with each one.

Since we're using Dojo in Cosmo, I had a quick look and -- sure enough -- Dojo had some basic color conversion code living at dojo.gfx.color. Since the function for converting HSV to RBG values was using a non-standard 0-255 scale for all the input values, I sat down and hammered out a patch that would let me input values in the normal 360/100/100 range you see when working in the color-picker for GIMP or Photoshop.

The Dojo guys were kind enough to accept the patch, so now it'll be a snap to generate the color palettes for our event lozenges in the same colors as the ones used in our desktop client, Chandler. This will let us to show calendars in multiple colors, and eventually even do overlays. This is pretty exciting stuff -- the gradients look pretty sexy, and the groundwork is now there for us to do the kind of full-featured treatment we want for multiple calendars.


This is the blog for Matthew Eernisse. I currently work at Yammer as a developer, working mostly with JavaScript. All opinions expressed here are my own, not my employer's.


Previous posts

All previous posts ยป

This blog is a GeddyJS application.