Live-Wetteranzeige mit CSS, jQuery und PHP

Im Jahr 2006 hatte ich die Idee, einen Live-Wetterfeed auf der Website eines Unternehmens anzuzeigen, wobei die Yahoo Weather API als Quelle diente. Damals war der einzige Weg, dies effektiv zu tun, die Verwendung von Flash, und dies war etwas, das das Unternehmen aufgrund des Entwicklungsaufwands nicht wollte.

Sechs Jahre später, als technischer Direktor meines eigenen Unternehmens, Engage Web, habe ich diese Idee für unser neu umgestaltetes Unternehmen wieder aufgegriffen und sie um einige Stufen weiterentwickelt. Im Jahr 2012 war Flash nicht mehr notwendig, da alles, was 2006 damit gemacht werden konnte, jetzt mit CSS3 Keyframes gemacht werden konnte.

Wir machten uns mit ehrgeizigen Plänen auf den Weg, damit unsere Website die Live-Wetterbedingungen für jeden, der sie betrachtete, anhand seiner Geolokalisierung anzeigt. Wir wollten, dass die Tageszeit je nach seinem Standort in der Welt reflektiert wird, sodass jemand, der die Website in London, England, betrachtete, einen anderen Stil sah als jemand, der die Website zur gleichen Zeit in San Diego, Kalifornien, betrachtete. Das Ziel war, dass die Leute durch den Blick auf unsere Website sehen konnten, wie das Wetter draußen vor ihrem Fenster war.

Hier sind nur einige Beispiele für den Endzustand, den der Header der Website zu jeder Zeit haben kann

Leider stießen wir auf einige unmittelbare technische Schwierigkeiten, die durch den alten Feind des Webentwicklers, den Internet Explorer, verursacht wurden. IE konnte die Geolokalisierung nicht verarbeiten, sodass eine genaue Annäherung des Standorts einer Person vom Browser aus nicht möglich war. Stattdessen mussten wir eine IP-Lookup-API verwenden, um den Standort des Benutzers zu ermitteln, die nur bis zur nächstgelegenen Hauptstadt (oder Großstadt) des Benutzers genau ist. Dafür haben wir ipinfodb.com verwendet. Basierend auf der auf dieser Website eingegebenen IP-Adresse gibt diese das Land, den Bundesstaat/die Provinz und die Stadt/Gemeinde des Benutzers zurück. Wir benötigten nur das Land und die Stadt/Gemeinde, die dann in die Yahoo Weather API eingespeist wurden und Live-Wetterdaten für die Region zurückgaben.

Wenn von ipinfodb.com keine Daten zurückgegeben werden (z. B. wenn die Website jemals ausgefallen wäre oder IP-Daten vom Benutzer nicht abgerufen werden könnten), wird der Standort standardmäßig auf London, England, gesetzt.

Sowohl die Yahoo Weather API als auch ipinfodb.com liefern Längen- und Breitengrade, die dann verwendet werden, um die Zeiten für Sonnenuntergang und Sonnenaufgang zu berechnen, was wiederum den Sonnenaufgang und Sonnenuntergang auf der Website auslöst.

Das letzte i-Tüpfelchen ist die Mondphase, die die komplizierteste aller Berechnungen war, obwohl sie nur das Datum als Variable benötigte.

Ob Regen oder Sonnenschein

Beginnen wir mit dem Wetter. Yahoo gibt die Wetterinformationen in Form einer Zahl zurück, derzeit zwischen 0-47, mit einer Fehlernummer 3200 für keine Informationen. Jede dieser Zahlen repräsentiert einen anderen Wettertyp.

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

Wir haben die Wettertypen dann in vier Zahlen aufgeteilt. Die erste Zahl steuert die Wolken, wie hell oder dunkel sie sind und wie dicht sie sind. Die zweite Zahl steuert den Regen. Es gibt verschiedene Abstufungen von Regen auf der Website, von leichten Schauern bis zu starken Güssen. Die dritte Zahl steuert Effekte wie Blitze oder Schnee, und die vierte Zahl ist für zufällige Effekte wie Staub oder Nebel.

$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);

Einer der häufigsten Effekte, die wir in Großbritannien sehen, ist Regen (wir haben viel Regen), also hier ist, wie der Regen-Effekt auf unserer Seite gemacht wird. Das untenstehende animierte Regen-GIF wird mit einer geeigneten Opazität angezeigt, abhängig davon, wie stark der Regen laut Yahoo Weather API gemeldet wird. Unser früherer Code nimmt die Informationen von Yahoo und weist Variablen für die Regenintensität zu, und diese Variablen steuern die Opazität des animierten Regen-GIFs im folgenden 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; 
}

Vollmond, Halbmond, totale Finsternis

Der schwierigste Teil des gesamten Prozesses war die Mondphase. Dazu haben wir ein großes Bild erstellt, das 10 verschiedene Variationen der Mondphasen anzeigt. CSS entscheidet dann, wie das richtige Bild basierend auf den Daten angezeigt wird, die von einem PHP-Skript zurückgegeben werden (dessen Berechnungen buchstäblich astronomisch sind).

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



Das Skript zur Berechnung der Mondphase wurde aus Code abgeleitet, der hier zu finden ist.

300 Sekunden bis Sonnenuntergang

Das i-Tüpfelchen des Projekts ist der Sonnenuntergangs- und Sonnenaufgangseffekt, der je nach tatsächlichen Sonnenuntergangs- und Sonnenaufgangszeiten am Standort der Person, die die Website betrachtet, auftritt. Mithilfe der zuvor erwähnten Längen- und Breitengrade wird die Zeit des Sonnenuntergangs und Sonnenaufgangs (abhängig davon, ob es gerade Tag oder Nacht ist) extrapoliert, in einen Unix-Zeitstempel umgewandelt und als Variable gespeichert.

Die aktuelle Zeit wird ebenfalls in einen Unix-Zeitstempel umgewandelt und die Differenz zwischen der Sonnenuntergangs- oder Sonnenaufgangszeit und der aktuellen Zeit wird als Timeout auf eine jQuery-Funktion angewendet, die die Übergänge zwischen Tag und Nacht und umgekehrt steuert.

Das folgende jQuery steuert den Übergang zwischen drei Phasen. Beim Sonnenuntergang wird der „Tageslicht“-Hintergrund ausgeblendet und durch einen orangefarbenen Glüh-Hintergrund (für Sonnenuntergang und Sonnenaufgang verwendet) ersetzt, der dann in einen Nacht-Hintergrund ausgeblendet wird. Während dies geschieht, beginnt die Sonne ihren Abstieg von der Oberseite der Seite zur Unterseite, was 300 Sekunden dauert.

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

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

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

Während dies geschieht, werden auch alle relevanten Wettereffekte auf den Bildschirm gelegt, wie Regen, Schnee, Blitze und Wolkenbewegungen. Als zusätzlicher Effekt wechselt auch die Skyline von einem Tag- zu einem Nacht-Thema, um zu zeigen, wie die Gebäude in Dunkelheit versinken und die Lichter der Stadt angehen.

Arbeitstag und Nacht

Als zusätzlicher Effekt werden die zusätzlichen Stilelemente der Website, wie z. B. Farbgebungseffekte, geändert, je nachdem, ob die Zeit Tag oder Nacht ist. Dies geschieht durch die Verwendung einer PHP-Datei als CSS, nachdem die Variablen festgelegt wurden.

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

Wenn Sie die Website jedoch gerade beim Sonnenuntergang oder Sonnenaufgang erwischen, sehen Sie, wie sich die Skyline und das Website-Thema ändern, wenn der Tag in die Nacht übergeht und umgekehrt. Der folgende Code steuert dies mit 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' );

Test, Test, 123

Beim Erstellen von etwas, das durch die Sonnenuntergangs- und Sonnenaufgangszeiten ausgelöst wird, die aus der Längen- und Breitengrad des Benutzers abgeleitet werden, war das Testen des Effekts eine eigene Mission. Dies erforderte die Ermittlung, wo auf der Welt die Sonne gerade aufging, und dann die Verbindung zur Website über einen Proxyserver in diesem Land, um die Zeitpläne zu überprüfen. Wir haben bei diesem Projekt viel über Geografie, Zeitzonen und Sonnenaufgangszeiten gelernt!

Hier ist ein Screenshot von der Website mit dem funktionierenden Effekt

Dank an den Designer/Entwickler Steven Morris für die Designarbeit an diesem Projekt.