25.04.
2010

Erstellen einer Wetterkarte mit Hilfe des wetter.com-Api

(posted by admin, No Comments »)

Als Roundup zum Thema Webseiten-Wetter möchte ich Euch in diesem Artikel nun zeigen, wie sich eine Wetterkarte für die Region Oberfranken mit 6 eingetragenen Städten (Bamberg, Bayreuth, Forchheim, Coburg, Kronach und Hof) und eine Vorhersagetabelle für einen Standort (Bamberg) mit Hilfe des wetter.com-Api erstellen lässt. Hierfür wird lediglich ein kostenloses wetter.com-Account sowie PHP in einer Version 5.x benötigt, da für das Auslesen der Wetterdaten die simple_xml – Bibliothek  verwendet wird.

1. Vorbereitungen

Registrierung und Anlegen eines Projekts bei wetter.com

Um das wetter.com – Api (openweather-Schnittstelle) nutzen zu können, müsst Ihr Euch zunächst auf wetter.com kostenlos registrieren. Nach erfolgreicher Anmeldung legt Ihr im Api-Center (der Link versteckt sich in der Fußleiste von wetter.com)  unter Projektverwaltung ein neues Projekt an und bestätigt die Nutzungsbedingungen. Bitte beachtet  in diesem Zusammenhang, dass die Anzahl der maximalen Zugriffe auf die openweather-Schnittstelle derzeit auf 10000 pro Monat und pro Projekt beschränkt ist und das wetter.com-Logo, das Ihr im Api-Bereich unter Downloads findet, zwingend in den Quelltext einzubinden ist.

Unter dem Punkt "Übersicht"  findet Ihr nun den eindeutigen API Key, der im weiteren Verlauf für die Abfrage der Wetterdaten benötigt wird. Zudem ist die URL der Webseite anzugeben, unter der Ihr die Wetterkarte/Wetterdaten veröffentlichen wollt.

Mit  Hilfe der Liste "Felder der Ortssuche" unter Sucheinstellungen können die Parameter festgelegt werden, die für die eindeutige Identifikation des Standorts bei der Abfrage der Wetterdaten dienen sollen. In der Regel sind die Werte "Suche nach City-Code", "Suche nach PLZ" etc. bereits voreingestellt.

Die Optionen, die sich unter dem Menüpunkt  "Vorhersageeinstellungen" befinden, legen schließlich fest, welche Daten von wetter.com zurückgeliefert werden sollen.  Zuerst werdet Ihr nach der Anzahl der Vorhersagetage gefragt. In der kostenlosen Version stehen maximal 3 Vorhersagetage (Wetter von heute, morgen und übermorgen) zur Verfügung.

Nun könnt Ihr per Drag and Drop die Parameter auswählen, die für Eure Wetterkarte benötigt werden. Die wichtigsten hierbei sind sicherlich die Minimal- und Maximaltemperatur (tn,tx) und der Code für den Wetterzustand (w). Da ich in diesem Beispiel eine möglichst detaillierte Vorhersage erreichen möchte, habe ich zusätzlich noch die Angaben für den Wind (wd,ws) und die Niederschlagswahrscheinlichkeit (pc) selektiert.

Wetter.com City-Code ermitteln

Der City-Code des gewünschten Standorts lässt sich am einfachsten über das Suchfeld auf der Startseite von wetter.com ermitteln, wo Ihr die PLZ oder den Ortsnamen des gewünschten Ortes eintragt. Ihr werdet nach dem Absenden auf die URL für die Stadt weitergeleitet, an deren Ende sich der City-Code befindet. Der 9-stellige Code hat für Orte in Deutschland stets die Form:  DExxxxxxx. Für dieses Beispiel ergibt sich somit :

Bamberg (DE0000772)
Bayreuth (DE0000856)
Forchheim (DE0002952)
Coburg (DE0001794)
Kronach (DE0005784)
Hof (DE0004666)

Benötigtes Material

-Karte: Frei nutzbares und noch dazu optisch ansprechendes Kartenmaterial ist im Web nicht gerade einfach zu finden. Falls Ihr die Wetterkarte selbst erstellen wollt, sucht in der Google Bilder-Suche nach einer möglichst einfarbigen Karte der Region. Öffnet diese in Eurem Bildbearbeitungsprogramm und erstellt eine Auswahl um die Region. Skaliert  die Auswahl nun auf die gewünschte Größe und füllt diese nach Belieben. Mit einem leichten Schatten bringt Ihr, insbesondere bei hellen Hintergründen, etwas mehr Tiefe ins Spiel. Speichert die Karte nun entweder als PNG mit transparentem Hintergrund oder als JPG mit  der selben Hintergrundfarbe, wie Ihr Sie in Eurem Seitenlayout verwendet, ab.

Wetterkarte

-Icons: Im Api-Bereich findet Ihr unter Downloads das Wetter- und Wind Icon-Set von wetter.com.

Wettericons

Der Dateiname der Icons setzt sich dabei wiefolgt zusammen:

d_<erste Ziffer des Wetterzustandcodes>_b.png   (Tagicons)
n_<erste Ziffer des Wetterzustandcodes>_b.png   (Nachticons)
<Windrichtung>.png (Windicons)

Natürlich könnt Ihr jederzeit eigene Wetter-Icons verwenden. Es empfiehlt sich jedoch, die von wetter.com vorgeschlagene Namenskonvention einzuhalten.

 

2. automatisierte Wetterkarte

Zu Beginn des Codes wird zunächst die CSS-Datei (styles.css) festgelegt, die unsere Wetterkarte und Vorhersagetabelle formatiert.

HTML:

1

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

Bevor wir die Wetterdaten von wetter.com abfragen, brauchen wir zunächst einen Div-Container mit der Wetterkarte als Hintergrundbild. In diesen werden im weiteren Verlauf die Divs für die sechs Städte eingefügt.  Höhe und Breite entsprechen dabei den Maßen des Karten-Images.

HTML:

1

<div class="wetterkarte">Hier kommen die PHP-generierten Staedteboxen rein</div>

CSS:

1
2
3
4
5
6
7
8
9

.wetterkarte{
	position:relative;
	width:400px;
	height:400px;
	background-image:url(../img/Wetterkarte.png);
	background-repeat:no-repeat;
	font-family:Georgia, &quot;Times New Roman&quot;, Times, serif;
	font-size:11px;    
}

Der Container wurde im Beispiel relativ positioniert, da sich die Städteboxen später absolut an diesem orientieren sollen. Für jede dieser Städte habe ich eine CSS Klasse angelegt, die u.a. deren absolute Position und Breite definiert. Die Klassennamen  sind bewusst gewählt und sollten eine fortlaufende Zahl enthalten. Der Grund hierfür wird später ersichtlich. Die Nummerierung muss allerdings zwingend der Reihenfolge der Städte im Array entsprechen. Da die Boxen über der Wetterkarte angezeigt werden sollen, erhalten diese zusätzlich den z-index 2. Die weiteren CSS-Klassen dienen der Formatierung der Städteboxen.

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

.city_0{ /*Bamberg*/
	width:100px;
	position:absolute;
	top:190px;
	left:55px;
	z-index:3;
	text-align:center;
	}
 
.city_1{ /*Bayreuth*/
	width:100px;
	position:absolute;
	top:181px;
	left:213px;
	z-index:3;
	text-align:center;
	}
 
.city_2{ /*Forchheim*/
	width:100px;
	position:absolute;
	top:250px;
	left:113px;
	z-index:3;
	text-align:center;
	}
 
.city_3{ /*Coburg*/
	width:100px;
	position:absolute;
	top:75px;
	left:80px;
	z-index:3;
	text-align:center;
	}
 
.city_4{ /*Kronach*/
	width:100px;
	position:absolute;
	top:90px;
	left:177px;
	z-index:3;
	text-align:center;
	}
 
.city_5{ /*Hof*/
	width:100px;
	position:absolute;
	top:55px;
	left:275px;
	z-index:3;
	text-align:center;
	}
 
.cityname{
margin:0;
padding:0;
margin-top:-10px;
text-align:center;
color:#FFFFFF;
	}	
 
.temperature{ 
text-align:center;
margin:0;
padding:0;	
color:#FFFFFF;
	}
 
.temp_min{
	color:#06C;
	font-size:13px;
	}
 
.temp_max{
	color:#C00;
	font-size:13px;
}

Kommen wir nun zum Teil, der unsere Wetterkarte mit Informationen füllt, dem PHP-Skript. Damit wir später jedem City-Code den Namen der Stadt wieder eindeutig zuordnen können, legen wir für die Codes und für die Städtenamen jeweils ein Array an und füllen diese in der gleichen Reihenfolge. Anschließend ermitteln wir deren Länge.

PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$citycodes[0]="DE0000772"; //Bamberg
$cityname[0]="Bamberg";
 
$citycodes[1]="DE0000856"; //Bayreuth
$cityname[1]="Bayreuth";
 
$citycodes[2]="DE0002952"; //Forchheim
$cityname[2]="Forchheim";
 
$citycodes[3]="DE0001794"; //Coburg
$cityname[3]="Coburg";
 
$citycodes[4]="DE0005784"; //Kronach
$cityname[4]="Kronach";
 
$citycodes[5]="DE0004666"; //Hof
$cityname[5]="Hof";
 
$length=count($citycodes);
$tag=0;

Mit Hilfe der Variable $tag wird der Vorhersagetag festgelegt, für den die auf der Karte angezeigten Wetterdaten gelten sollen. In einer for-Schleife sollen nun für jeden Ort im Array zunächst die Wetterdaten abgefragt und im weiteren Verlauf die Städtebox erzeugt werden.

PHP:

1
2
3
4
5
6
7
8
9
10
11

for($i=0;$i<$length;$i++){
	$sSearchUrl="";
	$sSearchUrl     = "http://api.wetter.com/forecast/weather";
	$sProjectName   = "wetterartikel";
	$sApiKey = "74c7845b29a513b86e8bda764398be67";
	$sChecksum  = md5($sProjectName . $sApiKey .  $citycodes[$i]);
	$sSearchUrl .= "/city/" . $citycodes[$i];
	$sSearchUrl .= "/project/" . $sProjectName;
	$sSearchUrl .= "/cs/" . $sChecksum;	
...
}

Das Format einer gültigen Suchanfrage lautet:

http://api.wetter.com/forecast/weather/city/<citycode>/project/<projektname>/cs/<checksumme>

Entsprechend dieser Vorlage wird der URL-String $sSearchUrl mit den in der Projektverwaltung von wetter.com angegebenen Werten schrittweise zusammengesetzt. Die Checksumme egibt sich dabei aus dem MD5-Hashwert der Zeichenkette, die sich wiederum aus dem angegeben Projektnamen, dem von wetter.com zugeteilten Api-Key und dem City-Code zusammensetzt. Um den URL-String zu testen, gebt Ihr diesen mit einem "echo"- Befehl aus und kopiert die URL anschließend in die Adresszeile des Browsers. Bei korrekter Zusammensetzung sollte der HTTP-Request mit der XML-Struktur der Wettervorhersage für den gewünschten Standort beantwortet und diese im Browser wie folgt angezeigt werden:

XML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<city>
<city_code>DE0000772</city_code>
<name>Bamberg</name>
<post_code>96047</post_code>
   <credit>
     <!--
     In order to use the free weather data from wetter.com you HAVE TO display at least two out of three of the following possibilities: text, link, logo
      -->
     <text>Powered by wetter.com</text>
     <link>http://www.wetter.com</link>
     <logo> Download at http://www.wetter.com/api/downloads/#logos</logo>
   </credit>
   <forecast>
      <date value="2010-04-24">
        <du>1272081600</du>
        <d>1272088800</d>
        <dhu>2010-04-24 04:00</dhu>
        <dhl>2010-04-24 06:00</dhl>
        <p>24</p>
        <w>10</w>
        <pc>0</pc>
        <wd>90</wd>
        <ws>9.3</ws>
          <time value="06:00">
            <du>1272081600</du>
            <d>1272088800</d>
            <dhu>2010-04-24 04:00</dhu>
            <dhl>2010-04-24 06:00</dhl>
            <p>5</p>
            <w>0</w>
            <pc>0</pc>
            <tn>6</tn>
            <tx>14</tx>
            <wd>90</wd>
            <ws>7.4</ws>
            <w_txt>sonnig</w_txt>
            <wd_txt>O</wd_txt>
          </time>
          ...

 

Nachdem Ihr den String erfolgreich getestet habt, ist es nun an der Zeit den HTTP Request mittels PHP automatisiert an wetter.com zu senden und die Wetterdaten abzufragen:

PHP: 

1

$api = simplexml_load_string(file_get_contents($sSearchUrl));

Die Funktion file_get_contents sendet die Anfrage und erzeugt aus der Antwort des wetter.com-Servers eine Zeichenkette. Dieser String wird anschließend in ein simple_XML- Objekt umgewandelt. Aus diesem lassen sich nun die Parameter für den heutigen Tag auslesen:

PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

	$wetter=$api->forecast->date[$tag]->w;
	$wetter_symbol=substr($wetter,0,1);
        $wetter_text= $api->forecast->date[$tag]->w_txt;
 
	/*Maximumtemperatur/Minimumtemperatur ermitteln*/
	$tmax=-100;
	$tmin=100;
 
	for ($a=0;$a<4;$a++){
		$tmax_curr=(int)$api->forecast->date[$tag]->time[$a]->tx;
		$tmin_curr=(int)$api->forecast->date[$tag]->time[$a]->tn;
 
		if($tmax_curr>=$tmax){
			$tmax=$tmax_curr;
		}
		if($tmin_curr<=$tmin)
		{
			$tmin=$tmin_curr;
		}
	}

Beginnen wir mit dem Wetter für den heutigen Tag. Alle Parameter, die sich auf den gesamten heutigen Tag und nicht auf eine Vorhersage zu einer bestimmten Uhrzeit beziehen, befinden sich unterhalb des ersten <date value="…"> Knotenpunktes außerhalb der <time >-Angaben. Das Wettersymbol verbirgt sich dabei im Parameter w, und zwar genau in der ersten Stelle des Wertes. Mit Hilfe der XML Notation (->) hangeln wir uns vom Basisknoten <city> aus über <forecast>,  dem ersten darin aufgeführten <date>-Knoten (date[0]) hin zum Knoten w und legen den Wert in $wetter ab. Danach verwenden wir die substr – Funktion, um die Zeichenkette ("10")  in zwei Teilstrings ("1"|"0")  zu zerlegen und die erste Stelle ("1")  in der Variable $wetter_symbol ("1")  zu speichern. Zusätzlich lesen wir noch den Zustand des Wetters in Textform (w_txt) aus. Fertig.

Nun wird es ein klein wenig komplizierter, es folgt die Ermittlung der minimalen bzw. maximalen Tagestemperatur. Da von wetter.com keine Höchst-/Tiefsttemperatur für den gesamten Tag geliefert wird, müssen wir aus den Daten der vier Zeitpunkte (06:00 ,11:00, 17:00, und 23:00 UTC) die höchste(tx) bzw. niedrigste Temperatur(tn) ermitteln. In einer for-Schleife lesen wir deshalb die vorhergesagte Maximal-/Minimaltemperatur zu den Zeitpunkten time[0], time [1], time[2], time[3] aus. Da beim Zugriff auf XML-Knoten immer Zeichenketten zurückgeliefert werden, wandeln wir die gewonnenen Temperaturen in einen ganzzahligen Wert (integer) um und legen sie jeweils in $tmax_curr/ $tmin_curr ab.

Wir vergleichen diese nun mit zwei vorher festgelegten Hilfsparametern $tmax=-100,$tmin=100, die die bisherige maximale / minimale Tagestemperatur bilden:

Die aus dem ersten Zeitknoten (06:00 UTC) ermittelte Tageshöchsttemperatur wird mit 100%iger Sicherheit höher sein als -100°C. Die -100°C werden daher durch die ausgelesene Maximaltemperatur ersetzt. Im nächsten Schritt wird die Maximaltemperatur von 09:00 UTC ermittelt. Ist diese höher als die bisherige Tages-Maximaltemperatur,  wird $tmax wiederum durch den neuen Wert ersetzt. Ist diese kleiner, bleibt $tmax unverändert. Dies wiederholt sich für die Zeitpunkte 17:00, 23:00 zwei weitere Male.

Die gleiche Prozedur wird auch für die Tages-Tiefsttemperatur $tmin durchgeführt, allerdings mit umgekehrten Vorzeichen. Am Ende befinden sich in $tmax und $tmin die gewünschten Werte.

Nachdem wir die Wetterdaten nun vorliegen haben, können wir die Städtebox zusammensetzen und in den Wetterkartencontainer einfügen:

PHP:

1
2
3
4
5
6
7
8
9
10
11

echo 
 
"<div class=\"city_".$i."\"> 
   <div>
     <img title=\"".$wetter_text."\" src=\"img/icons/d_".$wetter_symbol."_b.png\"/>
   </div>
  <div class=\"cityname\">".$cityname[$i]."</div>
  <div class=\"temperature\">
    <span class=\"temp_min\">".$tmin."</span>|<span class=\"temp_max\">".$tmax."</span>
  </div>
</div>";

Der Div-Container erhält die CSS-Klasse der entsprechenden Stadt (city_0,city_1 usw.). In diesen wird zunächst das korrespondierende Wettersymbol eingefügt. Mit der Angabe des Wettertextes im title des Images wird erreicht, dass der Wetterzustand in Textform beim Überfahren mit der Maus angezeigt wird. Schließlich folgt der Name der Stadt sowie die Ausgabe der minimalen / maximalen Tagestemperatur, Das war's. Unsere Wetterkarte ist fertig.

3. Vorhersagetabelle für die nächsten 3 Tage

Im zweiten Teil dieses Tutorials möchte ich Euch nun zeigen, wie Ihr für einen bestimmten Ort eine Vorhersagetabelle für die nächsten Tage erstellt. Der Aufbau ist im Grunde identisch mit dem der Wetterkarte. Die Unterschiede bestehen lediglich darin, dass wir uns bei der Wettervorhersage nun auf einen Ort  konzentrieren, den Vorhersagezeitraum auf 3 Tage (heute, morgen übermorgen) erweitern und den Detailgrad der Vorschau erhöhen. Neben den zusätzlichen Parametern Niederschlagswahrscheinlichkeit, Windrichtung und Wingeschwindigkeit soll zudem das Wetter an den Vorhersagezeitpunkten (06:00, 11:00, 17:00 und 23:00 UTC)  des jeweiligen Tages angezeigt werden. Das Ganze soll in etwa so aussehen:

Für das Layout der Tabelle benötigen wir deshalb ein paar ergänzende CSS-Klassen:

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.weather_table{
	text-align:center;
        font-family:Georgia, &quot;Times New Roman&quot;, Times, serif;
        font-size:11px;	
        color:#4a4a4a;
        background-color:#acc1ff;
	}
 
.weather_table tr{
	height:25px;
	}	
.weather_table tr td{
	padding-left:8px;
	padding-right:8px;
	}		
#headline{
	height:45px;
	font-weight:bold;
	}
.even{
background-color:#bccdff;
	}
.legend{
	text-align:right;
	font-weight:bold;
	}	
}

 

PHP:

1
2
3
4
5
6
7
8
9

	$sSearchUrl     = "http://api.wetter.com/forecast/weather";
        $sProjectName   = "wetterartikel";
        $sApiKey = "74c7845b29a513b86e8bda764398be67";
        $citycode="DE0000772";
        $sChecksum  = md5($sProjectName . $sApiKey .  $citycode);
        $sSearchUrl .= "/city/" . $citycode;
        $sSearchUrl .= "/project/" . $sProjectName;
        $sSearchUrl .= "/cs/" . $sChecksum; 
        $api = simplexml_load_string(file_get_contents($sSearchUrl));

Der Quelltext für die Abfrage der Wetterdaten bei wetter.com ist nahezu identisch. Diesmal brauchen wir allerdings nur den City-Code des gewünschten Standortes und kommen somit ohne die for-Schleife aus.

Auch das Auslesen der Parameter aus dem simpleXML-Objekt funktioniert nach dem selben Prinzip. Über die "->" Schreibweise greifen wir auf die Wetterdaten für den aktuellen Tag (date[0]) zu und ermitteln an den vier Vorhersagezeitpunkten (time[0], time[1], time[2], time[3]) die minimale / maximale Tagestemperatur, die Niederschlagswahrscheinlichkeit, die Windgeschwindigkeit und die Windrichtung und legen die Daten jeweils in einer Variablen ab.

PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

$datum_heute= date("d.m.Y");
 
$wetter=$api->forecast->date[0]->time[0]->w;
$wetter_heute_frueh=substr($wetter,0,1);
 
$wetter=$api->forecast->date[0]->time[1]->w;
$wetter_heute_mittag=substr($wetter,0,1);
 
$wetter=$api->forecast->date[0]->time[2]->w;
$wetter_heute_abend=substr($wetter,0,1);
 
$wetter=$api->forecast->date[0]->time[3]->w;
$wetter_heute_nacht=substr($wetter,0,1);
 
$tmax_heute=-100;
$tmin_heute=100;
 
for ($a=0;$a<4;$a++){
  $tmax_curr=(int)$api->forecast->date[0]->time[$a]->tx;
  $tmin_curr=(int)$api->forecast->date[0]->time[$a]->tn;
 
  if($tmax_curr>=$tmax_heute){
    $tmax_heute=$tmax_curr;
  }
  if($tmin_curr< =$tmin_heute){
    $tmin_heute=$tmin_curr;
  }
}
 
$niederschlags_ws_heute=$api->forecast->date[0]->pc;
$wind_geschwindigkeit_heute = $api->forecast->date[0]->ws;
$wind_richtung_heute = $api->forecast->date[0]->wd_txt;
 
 
/* Parameter morgen*/
$datum_morgen = date("d.m.Y", time()+86400);
$wetter=$api->forecast->date[1]->time[0]->w;
$wetter_morgen_frueh=substr($wetter,0,1);
 
$wetter=$api->forecast->date[1]->time[1]->w;
$wetter_morgen_mittag=substr($wetter,0,1);
 
$wetter=$api->forecast->date[1]->time[2]->w;
$wetter_morgen_abend=substr($wetter,0,1);
 
$wetter=$api->forecast->date[1]->time[3]->w;
$wetter_morgen_nacht=substr($wetter,0,1);
 
$tmax_morgen=-100;
$tmin_morgen=100;
for ($a=0;$a<4;$a++){
$tmax_curr=(int)$api->forecast->date[1]->time[$a]->tx;
$tmin_curr=(int)$api->forecast->date[1]->time[$a]->tn;
 
if($tmax_curr>=$tmax_morgen){
$tmax_morgen=$tmax_curr;
}
if($tmin_curr< =$tmin_morgen)
{
$tmin_morgen=$tmin_curr;
}
}
 
$niederschlags_ws_morgen=$api->forecast->date[1]->pc;
$wind_geschwindigkeit_morgen = $api->forecast->date[1]->ws;
$wind_richtung_morgen = $api->forecast->date[1]->wd_txt;
 
 
/*Parameter uebermorgen*/
$datum_uebermorgen = date("d.m.Y", time()+172800);
$wetter=$api->forecast->date[2]->time[0]->w;
$wetter_uebermorgen_frueh=substr($wetter,0,1);
 
$wetter=$api->forecast->date[2]->time[1]->w;
$wetter_uebermorgen_mittag=substr($wetter,0,1);
 
$wetter=$api->forecast->date[2]->time[2]->w;
$wetter_uebermorgen_abend=substr($wetter,0,1);
 
$wetter=$api->forecast->date[2]->time[3]->w;
$wetter_uebermorgen_nacht=substr($wetter,0,1);
 
$tmax_uebermorgen=-100;
$tmin_uebermorgen=100;
for ($a=0;$a<4;$a++){
$tmax_curr=(int)$api->forecast->date[2]->time[$a]->tx;
$tmin_curr=(int)$api->forecast->date[2]->time[$a]->tn;
 
if($tmax_curr>=$tmax_uebermorgen){
$tmax_uebermorgen=$tmax_curr;
}
if($tmin_curr< =$tmin_uebermorgen)
{
$tmin_uebermorgen=$tmin_curr;
}
}
$niederschlags_ws_uebermorgen=$api->forecast->date[2]->pc;
$wind_geschwindigkeit_uebermorgen = $api->forecast->date[2]->ws;
$wind_richtung_uebermorgen = $api->forecast->date[2]->wd_txt;

Dies wiederholen wir jeweils für den morgigen (date[1]) und den übernächsten Tag (date[2]).  Mit Hilfe der PHP-Funktion date("d.m.Y") lässt sich das jeweilige Datum errechnen und in der Form TT.MM.JJJJ ausgeben. Um an das morgige Datum zu gelangen, besitzt die Funktion einen zweiten Parameter für die Definition eines bestimmten Zeitpunktes. Zum aktuellen Zeitpunkt time() werden also 24 (h) *60 (min) *60 (s)= 86400 Sekunden addiert date("d.m.Y", time()+86400), für das Datum am übernächsten Tag 172800.

Abschließend puzzlen wir die Tabelle mit den gewonnenen Wetterdaten zusammen:

PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

<table class="weather_table" border="0" cellspacing="0" cellpadding="0">
  <tr class="even" id="headline">
    <td></td>
 
    <td>heute<br />
    <?php echo $datum_heute; ?>
    </td>
 
    <td>morgen<br />
    <?php echo $datum_morgen; ?>
    </td>
 
    <td>&uuml;bermorgen<br />
    <?php echo $datum_uebermorgen; ?>
    </td>
  </tr>
 
  <tr>
    <td class="legend">Fr&uuml;h:</td>
    <td>
      <img src="img/icons/d_<?php echo $wetter_heute_frueh; ?>_b.png" 
      width="73" height="63" />
    </td>
 
    <td>
      <img src="img/icons/d_<?php echo $wetter_morgen_frueh; ?>_b.png" 
      width="73" height="63" />
    </td>
 
    <td>
      <img src="img/icons/d_<?php echo $wetter_uebermorgen_frueh; ?>_b.png" alt="" 
      width="73" height="63" />
    </td>
  </tr>
 
  <tr class="even">
    <td class="legend">Mittags:
    </td>
 
    <td>
      <img src="img/icons/d_<?php echo $wetter_heute_mittag; ?>_b.png" 
      alt="" width="73" height="63" />
    </td>
 
    <td>
      <img src="img/icons/d_<?php echo $wetter_morgen_mittag; ?>_b.png" alt="" 
      width="73" height="63" />
    </td>
 
    <td>
      <img src="img/icons/d_<?php echo $wetter_uebermorgen_mittag; ?>_b.png" alt=""
      width="73" height="63" />
    </td>
  </tr>
  <tr>
    <td class="legend">Abends:</td>
    <td>
      <img src="img/icons/d_<?php echo $wetter_heute_abend; ?>_b.png" alt=""
      width="73" height="63" />
    </td>
    <td>
      <img src="img/icons/d_<?php echo $wetter_morgen_abend; ?>_b.png" alt="" 
      width="73" height="63" />
    </td>
    <td>
      <img src="img/icons/d_<?php echo $wetter_uebermorgen_abend; ?>_b.png" alt=""
      width="73" height="63" />
    </td>
  </tr>
 
  <tr class="even">
    <td class="legend">Nachts:</td>
    <td>
      <img src="img/icons/n_<?php echo $wetter_heute_nacht; ?>_b.png" 
      width="73" height="63" />
    </td>
    <td>
      <img src="img/icons/n_<?php echo $wetter_morgen_nacht; ?>_b.png" alt="" 
      width="73" height="63" />
    </td>
 
    <td>
      <img src="img/icons/n_<?php echo $wetter_uebermorgen_nacht; ?>_b.png" alt="" 
      width="73" height="63" />
    </td>
  </tr>
 
  <tr>
    <td class="legend">Temperatur:<br />
    (min/max)
    </td>
 
    <td>
      <span class="temp_min"><?php echo $tmin_heute; ?></span>|
      <span class="temp_max"><?php echo $tmax_heute; ?></span>
    </td>
 
    <td>
      <span class="temp_min"><?php echo $tmin_morgen; ?></span>|
      <span class="temp_max"><?php echo $tmax_morgen; ?></span></td>
    <td>
      <span class="temp_min"><?php echo $tmin_uebermorgen; ?></span>|
      <span class="temp_max"><?php echo $tmax_uebermorgen; ?></span>
    </td>
  </tr>
 
  <tr class="even">
    <td class="legend">Niederschlagsrisiko:</td>
    <td><?php echo $niederschlags_ws_heute;?>%</td>
    <td><?php echo $niederschlags_ws_morgen;?>%</td>
    <td><?php echo $niederschlags_ws_uebermorgen;?>%</td>
  </tr>
 
  <tr>
    <td class="legend">Windrichtung:</td>
 
    <td>
      <img src="img/icons/<?php echo $wind_richtung_heute;?>.png"
      alt="<?php echo $wind_richtung_heute;?>" 
      title="<?php echo $wind_richtung_heute;?>" width="50" height="50"/>
    </td>
 
    <td>
      <img src="img/icons/<?php echo $wind_richtung_morgen;?>.png" 
      alt="<?php echo $wind_richtung_morgen;?>" 
      title="<?php echo $wind_richtung_morgen;?>" width="50" height="50"/>
    </td>
 
    <td>
      <img src="img/icons/<?php echo $wind_richtung_uebermorgen;?>.png" 
      alt="<?php echo $wind_richtung_uebermorgen;?>" 
      title="<?php echo $wind_richtung_uebermorgen;?>" width="50" height="50"/>
    </td>
  </tr>
 
  <tr class="even">
    <td class="legend">Wind:</td>
 
    <td><?php echo $wind_geschwindigkeit_heute;?> km/h</td>
 
    <td><?php echo $wind_geschwindigkeit_morgen;?> km/h</td>
 
    <td><?php echo $wind_geschwindigkeit_uebermorgen;?> km/h</td>
  </tr>
</table>

Das war's. Das fertige Ergebnis könnt Ihr Euch nun hier ansehen und alle Meterialien und Skripte herunterladen:

stay connected

Schlagwörter: , , , ,

Kommentar verfassen

Name:
*
Email:
*
Webseite:

Artikelsuche

suche

Blog-Archiv

Kategorien

Aktuelle Browserstatistik

(Quelle: webmasterpro.de , 16.07.2010)
  Kann Spuren von Kreativität enthalten
Copyright © 2010

Anzeigen:
Blogverzeichnis - Blog Verzeichnis bloggerei.de Blogverzeichnis