back to index

Buzztracker Dashboard Widget

Buzztracker on your desktop

The buzztracker widget allows you to add live buzztracker images and data to your desktop using Apple OS X 10.4's Dashboard.

The widget features hooks into buzztracker.org, allowing you to instantly access the day's top location data and newest maps.

Creative Commons License
This work (widget) is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.0 License.

Release Notes

v1.2 - Fixed update bugs: Widget now works in "development mode" on your desktop. No longer gets stuck after prolonged use.


Here are some notes/details about the development of the buzztracker widget. By all means dig through the buzztracker widget javascript code. I've tried to comment it as thoroughly as possible.

Widget Resources

From Apple:
   - Apple's "Developing Dashboard Widgets" (a good primer)
   - Apple's Dashboard Programming Guide
   - Apple's Dashboard Reference
   - Apple notes on the XMLHttpdRequest object
Other Resources:
   - Nice breakdown on designing a widget for the non-designer
   - Dashboardwidgets.com forums

General Annoyances/Bugs

   - Widgets crash. Often. Don't be afraid to reload them from the Finder if craziness starts to happen.
   - Changes to info.plist don't appear until you reload the widget from Finder. Using CMD-R does not refresh the info.plist settings (this is especially annoying when you first start working with widgets and wonder why your info.plist settings are being ignored).
   - Widgets are unpredictable in the way they interpret your interface design. For example, don't rely on the standard cursor changes to indicate links -- make sure you hard-code in good tactile/visual feedback for your interface.
   - The widget.openURL function can not open URLs with spaces in them. As far as I can tell this is a bug on the part of Apple. Encoding the URL with encodeURL() doesn't remedy the problem. Replacing spaces with the escape code %20 doesn't fix it either. As such, locations in the topLocationsLists with spaces in their names won't open a browser window when clicked. We'll just have to wait for Apple to address this problem. UPDATE: Sean from dashboardwidgets.com provides a temporary solution: make a system call with widget.system('/usr/bin/open URL', null);. The "open" program opens a file with its default viewer. In this case open is smart enough to know what a URL is and open your default browser. While not ideal, this solution works until Apple posts a fix for openURL().

The Map

In order to keep the widget as streamlined as possible I decided to use the smallest dailyBuzz map. Since this isn't meant to replace buzztracker.org's functionality, I felt that even the smallest map provided enough information to be useful, especially in conjunction with the top locations list below. If something looks interesting, clicking on the map or a location will bring you to the fully functional site for deeper investigation.

I modified the preferences button functions provided by Apple to fade in the Apple-esque "glass" image overlaid above the map. I think tactile feel is extremely important in interfaces and felt this was a simple, elegant way to indicate click-ability on the map. The overlays are 24bit PNG files with varying levels of transparency.

The two map overlays with borders for clarity:

Loading the Data

The data for the widget is literally scraped off of buzztracker.org's index file (buzztracker.org/index.html). The loading of the external file is handled with the Javascript XMLHttpRequest function. Apple has a great page explaining the XMLHttpRequest Object. They also have an easy-to-understand example.

One problem I ran into, however, is that since the buzztracker index file (and probably most html online) isn't perfect xml, you can't treat the data returned from the XMLHttpRequest call as XML data. This is unfortunate because you could otherwise interact with the data on a very specific level with minimal effort. Instead you must treat it as a text file. This text representation of the data is found in the responseText component of the XMLHttpRequest object. Since our index.html is pretty simple and clean, the text returned can be parsed trivially with regular expressions.

Reworking the Data

The regular expression to grab the date:
var regExp = /(\d{4})-(\d{2})-(\d{2})/;

The regular expression to grab the location links:
var urlGrab =
/< li >(< a href="(http:\/\/(.+))">)(.+)<\/a><\/li>/;

(I have to be honest, every time I go and try to write a regular expression I feel like I'm starting from almost 0 knowledge. This is probably because I so infrequently write them. However awkward they might seem, they're fantastic tools and well worth the small amount of effort required to use them. I highly recommend the Javascript: The Definitive Guide, Fourth Edition chapter 3.10 on regular expressions. It's concise and easy to understand and a good way to jumpstart your brain.)

The data returned from the date regExp is inserted into the "date" div. The data returned from the location data needs to be slightly modified before it can be split and used in the two topLocations divs. Widgets only load links in an external browser via a widget.openURL('url') call. Using a standard a href="link" call will open the page in your widget window -- probably not what you want. To correct for this, I changed the a href statements to the form:
a href="#" onclick='widget.openURL("http://www.buzztracker.org/url");.

Download v1.2

6/23/05 - Buzztracker.zip (64k)


OS X 10.4 (Tiger)


Mac OS X v.10.4 Tiger is required. If you're using Safari, click the download link. When the widget download is complete, show Dashboard, click the Plus sign to display the Widget Bar and click the widget's icon in the Widget Bar to open it. If you're using a browser other than Safari, click the download link.