Top Processes Windows Sidebar Gadget

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 Screenshot

You can grab it from me on my new Sidebar Gadgets page, or from Windows Live Gallery. If you like it, please rate it or review it on Windows Live Gallery, so more people get to see it.

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.

When I first got Windows Vista, I was pretty surprised that there weren’t more gadgets available. As time has passed, not a ton of gadgets have shown up on Windows Live Gallery. I was sure somebody would have made a top process gadget already. But after actually doing it myself, I understand why people haven’t been pumping these things out. Making a Windows Sidebar Gadget is really, really frustrating. First, instead of going with .NET and WPF, two awesome Windows-only technologies, the Sidebar team went with HTML and JavaScript as the basis of all gadgets. And if you do want more capability than JavaScript gives you, you need to start pulling in ActiveX objects, VBScript-style. So if you were dreaming of easy animation, drawing, and UI, and access to the power and ease of use of the .NET platform and Visual Studio, forget it. Think of it more like developing web pages for Internet Explorer (no Firebug here), but without even an error dialog to tell you if your script has failed. It’s a mess of HTML, CSS, and JavaScript bugs and quirks. Compounding this is the fact that the MSDN documentation for Sidebar is some of the worst documentation I’ve ever seen. It ranges from completely unhelpful to misleading, and it’s missing any examples or even code snippets that would give you an idea of how to actually use it. Who goes through the trouble to build what’s essentially an application development platform, and then not even bother to write half-decent documentation?

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.

I'm Benjamin Hollis, a software developer in Seattle. Check out my website.