Live Weather Display Using CSS, jQuery and PHP

In 2006 I had an idea which involved displaying a live weather feed on a company’s website, using the Yahoo Weather API as the source. At the time however, the only way to do this effectively was by using Flash, and this was something the company was unwilling to do due to the development time involved.

Six years later, as the technical director of my own business, Engage Web, I revisited this idea for our newly rebranded company – and moved it on a couple of stages. In 2012, Flash was no longer necessary, as everything it could do in 2006 could now be done with CSS3 Keyframes.

We set out with ambitious plans to have our website feature the live weather conditions using the geo location from anyone who looked at it. We wanted the time of day to be reflected depending on where they were based in the world, so somebody looking at the website in London, England would see a different style to someone looking at the website at the exact same time in San Diego, California. The goal was that people could see what the weather was like outside their window by looking at our website.

Here are just a few examples of the final state the header of the site can look like at any given time:

Unfortunately, we ran into some immediate snags of a technical nature caused by the old nemesis of the web developer, Internet Explorer. IE wasn’t able to handle geolocation, so getting an accurate approximation of a person’s location from their browser wasn’t possible. Instead we had to use an IP lookup API to get the location of the user, which is only accurate to the user’s nearest capital city (or large city). For this we have used ipinfodb.com. Based on the IP Address entered into this site, it returns the Country, State/Province and City/Town of the user. We only needed the Country and the Town/City, which is then fed into Yahoo’s Weather API, giving back live weather data for the area.

If no data is fed back from ipinfodb.com (for example if the website ever went down, or IP data couldn’t be retrieved from the user) the location is defaulted to London, England.

Both the Yahoo Weather API and ipinfodb.com feed back longitude and latitude, which is then used to calculate the sunset and sunrise times, which in turn trigger the sunrise and sunset on the website.

The final egg in the pudding is the moon phase, which was the most complicated of all the calculations, even though it required just the date as a variable.

Whether the Weather is Rain or Shine

Let’s start with the weather. Yahoo returns the weather information in the form of a number, currently between 0-47, with an error number 3200 for no information. Each one of those numbers represents a different weather type.

0  	tornado
1 	tropical storm
2 	hurricane
3 	severe thunderstorms
4 	thunderstorms
5 	mixed rain and snow
6 	mixed rain and sleet
7 	mixed snow and sleet
8 	freezing drizzle
9 	drizzle
10 	freezing rain
11 	showers
12 	showers
13 	snow flurries
14 	light snow showers
15 	blowing snow
16 	snow
17 	hail
18 	sleet
19 	dust
20 	foggy
21 	haze
22 	smoky
23 	blustery
24 	windy
25 	cold
26 	cloudy
27 	mostly cloudy (night)
28 	mostly cloudy (day)
29 	partly cloudy (night)
30 	partly cloudy (day)
31 	clear (night)
32 	sunny
33 	fair (night)
34 	fair (day)
35 	mixed rain and hail
36 	hot
37 	isolated thunderstorms
38 	scattered thunderstorms
39 	scattered thunderstorms
40 	scattered showers
41 	heavy snow
42 	scattered snow showers
43 	heavy snow
44 	partly cloudy
45 	thundershowers
46 	snow showers
47 	isolated thundershowers

We then split the weather types into four numbers. The first number controls the clouds, how light or dark they are and how heavy they are. The second number controls the rain. There are several degrees of rain on the website, ranging from light showers to heavy downpours. The third number controls effects, such as lightning or snow, and the fourth number is for incidental effects, such as dust or fog.

$weatherarray[39]=array('scattered thunderstorms',3,2,5,2);
$weatherarray[40]=array('scattered showers',3,2,0,2);
$weatherarray[41]=array('heavy snow',1,0,3,0);

One of the more common effects we see in the UK is rain (we get a lot of rain) so here is how the rain effect is done on our site. The below animated rain gif is displayed with a suitable opacity, depending on how heavy the rain is reported as being in the weather API from Yahoo. Our previous code takes the information from Yahoo and assigns variables for the rain strength, and these variables control the opacity of the animated rain gif in the below code.



switch ( $effect1) {
    case 0:
        $weathercode.= '
             jQuery(\'#rain\').css("opacity", "0.0"); 
       ';
        break;    
     case 1:
        $weathercode.= '
             jQuery(\'#rain\').css("opacity", "0.10"); 
       ';
        break;     
      case 2:
        $weathercode.= '
             jQuery(\'#rain\').css("opacity", "0.30"); 
       ';
        break;
      case 3:
        $weathercode.= '
             jQuery(\'#rain\').css("opacity", "0.50"); 
       ';
        break; 
}

Full Moon, Half Moon, Total Eclipse

The most difficult part of the whole process was the moon phase. To do this we created a large image displaying 10 different variations of moon phase. The CSS then decides how to display the correct image based on the data fed back from a PHP script (the calculations for which are, quite literally, astronomical).

background-position: <?php echo $moonbgimagepos; ?>px 0;



The script to calculate the moon phase was derived from code which can be found here.

300 seconds to Sundown

The pièce de résistance of the project is the sunset and sunrise effect, which happens depending on the actual sunset and sunrise times at the location of the person looking at the website. Using the longitude and latitude we have previously mentioned, the sundown and sunrise time (depending on whether is currently day or night) is extrapolated, converted to a unix timestamp, and stored as a variable.

The current time is also converted to a unix timestamp, and the difference between the sunset or sunrise time and the current time is applied as a timeout to a jQuery function which handles the transitions between day and night, and vice versa.

The following jQuery controls the transition between three stages. For sunset the ‘daytime’ background is faded out, and is replaced by an orangey glow background (used for sundown and sun-up) which itself is then faded out into a night time background. While this is happening, the sun itself begins its decent from the top of the page to the bottom, which takes 300 seconds to complete.

jQuery('#daytime').fadeOut(200000, 'linear', function() {

  jQuery('#sill').fadeOut(100000, 'linear', function() {});

  jQuery('#sunset').fadeOut(100000, 'linear', function() {});
});   

While this is occurring, any relevant weather effects are also overlaid on the screen, such as rain, snow, lightening and cloud movement. As an added effect, the skyline also transitions from a day theme to a night theme to show the buildings descent into darkness, and the city lights come on.

Working Day and Night

As an added effect, the additional style elements of the website, such as colouring effects, are changed depending on whether the is time is day or night. This is done by using a PHP file as CSS once the variables have been established.

<link rel="stylesheet" type="text/css" href="/css/styleweather.php" />

If you happen to catch the website while the sun is setting or rising however, you see the skyline and site theme change as the day transitions to night, and vice versa. The following code controls this using jQuery:

jQuery('#backmask').animate( {
    color: '#fff',
    backgroundColor: '#48508b'
    },300000, 'linear' );
jQuery('#menu-top-menu li,#blogmenu,#searchbox, #times').animate( {
    color: '#fff',
    backgroundColor: '#48508b'
    },300000, 'linear' );
jQuery('#Phone').animate( {
    color: '#fff',
    backgroundColor: '#48508b',
    boxShadow: '0 -10px 10px 4px #2A3160 inset'
    },300000, 'linear' );

Testing, Testing, 123

When building something which is triggered by the sunset and sunrise times derived from the longitude and latitude of the user, testing the effect was a mission in itself. This required working out where in the world the sun was about to rise, and then connecting to the website via a proxy server in that country to check the timings. We learned a lot about geography, time zones and sunrise times working on this project!

Here’s a screenshot of the website with the effect working:

Credit to designer/developer Steven Morris for the design work on this project.