Last weekend I decided that I would try my hand at developing a Windows Sidebar Gadget. I’ve got a few ideas about gadgets that I’d like to make, so I thought I’d whip up a quick, useful gadget to get familiar with the platform. I ended up making the TopProcess gadget. It’s basically a version of the standard UNIX top command. It’ll show the top X processes on your computer, which are the processes taking the most CPU. It just sits there in the sidebar updating that list every few seconds, letting you know what’s chewing up your dual cores.
TopProcess is pretty simple. It uses WMI, which is very straightforward, to get the kernel and user time for each process on your system, figures out the difference in times between now and the last time it looked, sorts them, and displays the top X (configurable) on the gadget. I got a little fancy with the display side of things, making the text fade between updates, and making the gadget scale correctly when you change the number of processes to display.
As an example of how frustrating it was to make this gadget, take the feature of fading text. This should be simple - the new text fades in while the old text fades out. Immediately I was hit by a problem - Internet Explorer doesn’t support the opacity CSS keyword. So I had to insert a filter key that put on some crazy DirectX filter on the text. The most immediate effect of this was disabling ClearType on the text, and inexplicably bolding my font. I still can’t explain this. Frustrated with my subpar text rendering, I turned to the gText object. It took me lots of searching just to figure out that, unlike gBackground, there is no corresponding HTML element for gText. It must be created, in script, from gBackground. So I made myself a gBackground, and struggled for a while before realizing that it’s essentially a stunted version of the canvas object in HTML5. So I needed a gBackground that spanned my whole gadget. But I didn’t have a single background image for the whole gadget - I intended to compose the background of multiple images, so it could scale correctly with more or less processes displayed. gBackground requires you specify a single image before you can add more images onto it. So I had to make a 1px by 1px transparent PNG that I stretched over the background of the gadget. Remember doing that from the old days with table-layout HTML design? It brings me back. Anyway, now I could add my gText objects. These guys do support an opacity property, and after working out how to track them between updates (they aren’t included in the DOM), I had replicated the fading behavior that I had done with HTML. The result? Exactly the same. Except it’s harder to use gText , and there’s no way to remove gText objects once you’ve added them to a gBackground unless you remove all the objects on the gBackground. It’s really nuts. I ended up rolling back all my changes and just going with the HTML fading. Sorry about the awful font rendering, but I think at this point it’s not my fault.
There are more problems with the Sidebar platform of course. For example, in the manifest for a gadget there’s a way to specify your copyright, but no way to link to a license. I know Microsoft is starting to get Open Source - they should understand that licensing is important. And if they want people to be able to find new gadgets for their Sidebar, Windows Live Gallery is not the way to do it. It suffers from the same confusion as all the Live products, including Live Spaces gadgets on the same page as Sidebar gadgets without really indicating which is which. It’s just really depressing that the Sidebar ended up being such a lame feature. I remember the coverage before the “Longhorn reset” that promised the Sidebar as a unification of the disparate notification methods in Windows, replacing the system tray as well as providing hosting for mini WPF applications. Instead we get a lame reimplementation of Yahoo! Widgets or Apple’s Dashboard, without any polish or documentation. It’s really just sad.