Josue's Blog

Cooking a Meteora's weather widget

Ever since I re-design my blog, writing a post about how to generate the “weather effect of the header” had been one of my to-dos.

Now we will learn how to write a weather widget on an easy way, like the Meteora's calculator the first step is know how our widget will be look.

To build the widget like the image we will need :

A nice weather image: I use the Tango Icon Project for this part.
A service that gives the climatic information of a specific zone (service.php)
A Javascript class to get the request (weather.js)
HTML and CSS files

Service.php

We can build our own service for weather reading the RSS of Weather.com.

<?PHP
$url = "http://rss.weather.com/weather/rss/local/{$_GET['code']}";
$content= file_get_contents($url);
$content = str_replace(array('<![CDATA',' ]>',']>','&'),'',$content);

$xml = simplexml_load_string($content);
$data = $xml->channel->item[0]->description;
preg_match("/\[(.*), and (?<digit>\d+)/", $data, $matches, PREG_OFFSET_CAPTURE);

switch(strtolower($matches[1][0])){
case 'rain': case 'light rain': $img ='rain'; break;
case 'clear': $img = 'moon'; break;
case 'fair': $img = 'fair'; break;
case 'partly cloudy': $img = 'partly'; break;
case 'cloudy': $img = 'cloudy'; break;
case 'fog': $img = 'fog'; break;
case 'storm': $img = 'storm'; break;
case 'light rain with thunder': $img = 'electric'; break;
default: $img = 'sun';
}

$weather = array(
"name" => $_GET['name'],
"condition"=> $matches['digit'][0]."° F",
"icon" => "media/".$img.'.gif',
"weather" => $matches[1][0]
);
echo json_encode($weather);
?>

That service will read a code of our city and will return a json responde with the next structure:

{"name":CITY NAME,"condition":TEMPERATURE ,"icon": IMAGE,"weather": WEATHER}

Weather.js

To do the Ajax Request to the service we use the next Javascript Class.

And finally we build the HTML and the CSS file.

index.html

<html>
<head>
<title>Weather</title>
<script type="text/javascript" src="meteora/meteora.js"></script>
<script type="text/javascript" src="weather.js"></script>
<script type="text/javascript">
Meteora.onStart(
function(){
Mx = new Weather('Mexico City','MXDF0132');
Mx.display('mexicocity');
}
);
</script>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<body>
<div class="weather" id="mexicocity"></div>
</body>
</html>

style.css

body{background:#FCFCFC;font-family:'Lucida Grande','Trebuchet MS','Helvetica','Arial',sans-serif;color:#666;}
.weather{background:url("media/container.gif") no-repeat;height:109px;width:327px;float:left;margin:18px}
.weather .img{float:left;width:142px;text-align:center;}
.weather .information{float:left;margin-top:5px;width:180px;margin-left:5px;}
.weather .name{display:block;font-size:26px;color:#000;}
.weather .now{display:block;font-size:15px}
.weather .condition{display:block;font-size:13px;}
.clear{clear:both}

To know the code to write we only must search the city that we wished to display the information, for example, if we search “mexico city” the last part of the URL start with “MXDF0132” (that's the code that we need), and that's all.