Weather Custom Server Control

By Milan Negovan

Print Download

About a month ago I started looking around for a server control I could simply drop in my page template, configure it really quick and have it display weather information for my area to make things a little more fun. I wanted a control which used a reliable feed of weather information, not a third-party service, not a (God forbid!) screen scraping approach. I think we're done with screen scraping in the era of web services and XML feeds, with the exception of extreme cases when you do need to parse raw HTML. I couldn't find such a control, so decided to write one myself.

As I mentioned, I wanted a highly customizable control. Knowing that most of them out there either produce table galore or lock you into specific markup I wanted my control to allow developers to style it with CSS and come up with their own layouts. Scott Mitchell pointed me to his article at MSDN, and the project got going.

This is not an article on how to write a templated custom server control. Feel free to download the source code along with binaries, documentation and a sample. This is more of a discussion of how to use it on your site, blog, etc.

Getting Registered

One of my requirements was a reliable weather feed. To make things easy and efficient I wanted it to be an XML feed. Weather.com happens to provide a feed free of charge.

Here's how it works: you need to sign up for a Partner ID and License Key. In a way, they are your public/private keys. Once you register, they email them to you. You will need these Partner ID and License Key to place queries to their server(s). The whole process is very easy. When you register they allows you to download an SDK, but you don't need to worry about it unless your want to develop your own widget.

The weather server control I wrote takes these two parameters. The only thing left to give it is the ID of your location (or whichever location in the world, for that matter). In the US a zip code is a valid location ID, but you may still use an alpha-numeric one issued by weather.com. For locations outside of the US you have to use an alpha-numeric location ID. For example, Amsterdam, Netherlands has NLXX0002 assigned to it.

Normally, to resolve a location to its ID you have to place a special query to a weather.com server, but I've put together an online tool to do the same. Please, visit see Weather Location ID Resolver in my Tools section.

Now that you have those three bits in place, you're all set!

Paint Me An Icon

Let's go over all the nifty stuff weather.com offers. They allow you to display current weather conditions as an icon 32x32, 64x64, or 128x128 pixels. The control has all of them embedded into it. All you need to do is set its IconSize property to Small, Medium (default) or Large. Or simply leave the default, Medium.

At run time, the control will try to unpack an appropriate weather glyph on the disk if one isn't there yet. The default path is ccimages and it goes in the root, but you may specify another location via the IconLocation property. If your site is hosted elsewhere, you'll need to be sure you grant ASP.NET (or Everyone) write permissions to this folder.

All weather icons are PNG images. I tried converting them all to GIFs but the converted images suffered from loss of quality. At weather.com they use GIFs but their quality suffers, therefore I'm leaving them as PNGs. It's well known that Internet Explorer/Win has a problem with transparency in PNG images. All other major browsers handle transparency just right. When you look through the sample code you'll see I used a CSS hack to put a border around weather icons in IE/Win so their background won't look that ugly. Lack of appropriate support of PNGs in IE/Win in a bummer, but we have to live with it for now.

Localization

The control does a lot of heavy lifting: it figures out what size of a weather icon you want to display, unpacks and saves it, and builds a complete URL to it. I also wanted to utilize resource files and supply a couple of translations of its output, but weather.com folks painted text right over the images—not a localizable approach. I also asked them to share what textual values to expect, but I never heard back. For example, wind can be calm or variant. Nobody knows if there are other variations. Hence English only it is for now. Bummer.

Ground Rules

To be nice to the provider, we need to obey their attribution rules, which are: Your application must include text attribution and a logo that attributes the weather data to TWCi and links users directly to the weather.com Web site.

I've implemented two properties, WeatherProviderLogo and WeatherProviderLink, both of them build complete HTML tags of an image and a link to weather.com, just like the SDK states. Again, the sample demonstrates proper attribution.

Online Demo

The same sample page you will find in the download is running online. It displays weather information at Smithtown, NY, and Amsterdam. The page validates as XHTML 1.0 Strict and its CSS validates as well. It's only one example of how to customize weather widget output with CSS and structural markup. If you prefer tables, go ahead and knock yourselves out (figuratively speaking).

That's really it. I will post updates here, so stay tuned. I've been running this weather control on my site for over a month now so it has seen some action and has gone through a couple of iterations! I will appreciate comments, bug reports, suggestions.

Sept 30, 2004, update: Tonight my local weather station totally defaulted and returned "N/A" for pretty much everything which blew up where integer values were expected. So much for accuracy of the weather.com schema. I've replaced several ints in weather.xsd with strings to safeguarg against these screw-ups.

If you only deploy the binary, grab the latest download and simply redeploy the DLL.

Also, I'm including a JavaScript file for the demo which fixes PNG transparency in IE 5.5 and up.

Nov 28, 2004, update: Version 1.7 with a new property, LocationID, is out. Please download the source code and binary, and see readme.

Jan 5, 2005, update: Version 1.8 comes with an event, Error, which you can use to trap exceptions. When the control encounters a problem during its initialization, it displays a frienly message to the user and raises a server-side event for the developer.

Discuss

Liked it? Hated it? Discuss this article