Display the Weather in your Header

Displaying the weather on a webpage … one of those things that (I would guess) everybody does at one point or another. I personally don’t see much benefit at all in displaying current weather conditions. Much the same with displaying the current time … what’s the point. Displaying a forecast is more useful, but I would say leave the weather up to sites like weather.com. With that said, I find it amusing that one of the most popular things I’ve ever placed in a webpage has to do with the weather.

Save yourself some headache. You’ll need PHP 5+ to work along with my examples.

I am currently the webmaster for Quince Orchard High School in Gaithersburg, MD, USA. Within some margin of error (usually the result of cached weather data), if it is raining outside it rains in the header of our webpage; if it is snowing, it snows in the header; and if it is thundering and lightening … you get the idea.

Play with it

Here is a demonstration for your playing enjoyment.

How it works

The quick and dirty.

• Create a flash movie that represents snow/rain/thunder.
• Send the appropriate information to Yahoo or weather.com and, with your language of choice (I choose PHP) retrieve the current weather conditions back.
• If the text that represents the current conditions contains certain words (snow/flurries/sleet for example), serve up the appropriate flash movie.

In my original work I consumed a web service from weather.com to grab the current conditions. As I have since found their licensing arrangements to be a bit overbearing, the example I discuss will use Yahoo’s Weather RSS Feed.

The Flash Movies

The flash movies I will be working with include movies for snow, rain, and thunder. Unfortunately, the only one for which I can find the source file is the one for snow. If I remember correctly, much thanks goes to Kirupa.com for their snow tutorial.

Grab the Weather Conditions

1. $xml = new SimpleXMLElement( "http://weather.yahooapis.com/ forecastrss?p=loc", NULL, true);
2. $args = $xml->xpath('channel/item/yweather:condition');
3. $condition = $args[0]['text'];

In line one of our example we are creating a Simple XML Element. It is important to note that loc represents the location id or zip code for your city/region. Replace that information as necessary.

In line two we are traversing down the nodes of the xml document to the yweather:condition node, using a simple xpath location path. In this particular example, the attributes of the yweather:condition node are stored in the $args variable as an array. The result of line two produces a result similar to the following:

1. Array
2. (
3. [0] => SimpleXMLElement Object
4. (
5. [@attributes] => Array
6. (
7. [text] => Cloudy
8. [code] => 26
9. [temp] => 59
10. [date] => Thu, 26 Apr 2007 7:52 pm EDT
11. )
12. )
13. )

Line 3 of our first code portion takes the result, a two-dimensional array, and grabs the piece of data it needs. In this case, the text key, which contains the text condition.

Which Flash Movie to Play

The following code demonstrates one way to figure out which flash movie will play according to the appropriate weather conditions.

1. //hash of possible weather conditions.
2. //the key represents the flash movie which will play.
3. //see http://developer.yahoo.com/weather/#codes
4. $weather = array(
5. 'snow' => array('snow','flurries','sleet'),
6. 'rain' => array('rain','drizzle','showers'),
7. 'thunder' => array('thunderstorms') );
9. //checking to see if our current conditions exist as a
10. //word (or a portion of a word) in our weather array
11. foreach($weather as $key => $arr){
12. foreach ($arr as $value) {
13. if(stristr($condition, $value) !== FALSE) {
14. $show_movie = $key;
15. break(2);
16. }
17. }
18. }

In the above code, the first section is setting up a weather array. The names of the flash movies (without the extension of course) correspond to the keys of the array. The array values associated with the keys represent the words we will look for in the text of our weather condition.

The second section of code in the above example simply iterates through our weather array (and each nested array), and compares each text value to the weather conditions. If the conditions contain the word we are looking for (for example, showers), we know which flash movie we need, and the loop breaks.

Displaying the Movie

Finally, we display the movie associated with the current weather conditions. A review of the following code should provide sufficient detail.

1. <div id="head">
2. <?php if(!empty($show_movie)):?>
3. <div id="weather">
4. <object type="application/x-shockwave-flash" data="./flash/<?php echo $show_movie;?>.swf" width="750" height="225" title="Weather">
5. <param name="movie" value="./flash/<?php echo $show_movie;?>.swf" />
6. <param name="wmode" value="transparent" />
7. </object>
8. </div>
9. <? endif; ?>
10. <a href="http://www.qohs.org" title="Quince Orchard High School"><img src="./gr/2.jpg" alt="" height="225" width="750" /></a>
11. </div>

And finally, some CSS.

1. #head {
2. position: relative;
3. }
4. #weather{
5. position: absolute;
6. }

Conclusion

As you have seen, getting a flash movie to play based on the weather conditions (as provided by Yahoo) isn’t difficult at all. Enjoy!