Kleines Wetter Widget für externe Webseiten

Hallo zusammen,

habe mir die WMRS 200 Wetterstation zugelegt und bin sehr zufrieden.
Für alle, die die Wetterdaten zb. mit einem iFRAME auf die eigene Homepage einbinden möchten:

wetter..jpg

[ol]
[li]unterverzeichnis im ip-Symcon Ordner anlegen user\web_public
[/li][li]in IP-Symcon neue Webserver Instanz erstellen und z.B. auf Port 8082 legen, mit angabe des Verzeichnisses (user\web_public)
[/li][li]ggf. windows firewall anpassen, damit auf 8082 zugriff gestattet ist
[/li][li] nun mit dem Windows Explorer eine neue datei z.b wetter.php in diesem Ordner anlegen und folgenden Code einfügen und natürlich Variablen anpassen.
[/li][/ol]

In diesem Thread habe ich noch das Wunderground API Script für aktuelle Wetterdaten und Vorhersage.
Aus diesem wird auch das Icon für das aktuelle Wetter gezogen, das hier angezeigt werden kann :

In diesem Script muss dafür $cur_weather_icon = true sein (variable mit URL zum aktuellen Wetter wird angelegt).

dieses PHP Script unterstützt auch die GET Parameter für Hintergrundfarbe (bg), Textfarbe (fg) und Schriftart (font).
Zb.
…/wetter.php?fg=000000&bg=FFFFFF&font=Courier

So kann man es an die eigene Seite im Web anpassen.
Einbindung erfolgt dann auf einer anderen Webseite mit einem iframe


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <META http-equiv="refresh" content="1800">
  <link href="layout.css" rel="stylesheet" type="text/css" />
  <title>Aktuelles Wetter - MEIN_ORT</title>
  <style type="text/css">
  <?
	if(isset($_GET["bg"]))echo "body {background-color:#".cleanup($_GET["bg"]).";}";
	if(isset($_GET["fg"]))echo "body, div, span {color:#".cleanup($_GET["fg"]).";}";
	if(isset($_GET["font"]))echo "body, div, span {font-family:".cleanup($_GET["font"]).";}";
  ?>
  </style>
  
</head>
<body>
<div id="container">
	<div id="title">
		Aktuelle Wetterdaten <br>MEIN_ORT
		<div id="title_time"><?php echo date("d.m.Y, H:i")?> Uhr</div>
	</div>
<!--  Optional - wer das Wunderground Script nutzt, kann hier noch das aktuelle icon anzeigen lassen.
	<div id="icon">
	<img src="<?php echo utf8_encode(GetValue(50406)); ?>" border="0">
	</div>
-->
	<div id="data_field">
		<div class="value">
			<span class="label">Temperatur:</span><span class="data"><?php echo utf8_encode(GetValueFormatted(27750)); ?></span>
		</div>
		<div class="value">
			<span class="label">Regenmenge (60min):</span><span class="data"><?php echo utf8_encode(GetValueFormatted(52877)); ?></span>
		</div>
		<div class="value">
			<span class="label">Wind:</span><span class="data"><?php echo utf8_encode(GetValueFormatted(41674)); ?>, <?php echo utf8_encode(GetValueFormatted(31788)); ?></span>
		</div>		
		<div class="value">
			<span class="label">Luftdruck:</span><span class="data"><?php echo utf8_encode(GetValueFormatted(31161)); ?></span>
		</div>				
	</div>
	<div id="footer">
		MEIN_FOOTER TEXT
	</div>
</div>
</body>
</html>	
<?php
function cleanup($value){
  $value = htmlspecialchars($value, ENT_QUOTES);
  $value = trim($value);	
  return $value;
}
?>

Noch folgende layout.css anlegen


*{
	margin: 0 0 0 0;
	font-family: Arial, Tahmoa, Verdana;
	font-size: 13px;
	color: #000000;
}

body, #container{
	width: 220px;
}
#title,#icon{
	width: 100%; 
	margin-left: auto; 
	margin-right: auto;
	text-align: center;
	font-weight: bold;
	font-size: 15px;
}
#title_time{
	font-size: 12px;
	font-weight: normal;
}
#data_field{
	width: 100%;
	
	padding: 0 0 10 10;
}

.label {
	float: left;
}
.data {
	float:right;
}
.value {
	padding-top: 5px;
	clear:both;
	border-bottom: solid 1px #B6BAC0;
	min-height: 25px;
}

#footer{
	clear:both;
	width: 100%; 
	margin-left: auto; 
	margin-right: auto;
	text-align: center;
	font-size: 11px;
	color: #B6BAC0;
}

Anm:
Wenn man das natürlich im Web nutzen möchte, muss an der Firewall / Router natürlich noch Port-Forwarding eingestellt werden.