Hi,
versuch doch mal mit Sys_GetURLContent
z.B.
echo Sys_GetURLContent("http://www.google.de");
Gruß, Peter
Ich glaube ehr an das https Problem, wie ich schon vermutet hatte.
Was haste für ein System ? OpenSSL installiert?
Wenn man googelt findet man schnell Lösungsvorschläge für die einzelnen Betriebssysteme.
Gruß Heiko
Gesendet von iPhone mit Tapatalk
Guten Morgen,
wenn ich es richtig gemacht habe, hat openSSL nix gebracht. Man muss bedenken, dass der Kellerrechner auch lange keine Updates gemacht hat. Musste er auch nicht. Es lief alles.
Grüße Jens
Guten Morgen,
auf meinem Laptop passiert das gleiche. An den Updates kann es also nicht liegen. Was ist eigentlich ein Wrapper?
Grüße Jens
Danke schon mal für das Skript, klappt soweit wunderbar.
Mit Wunderground hatte ich das so im Einsatz bzw. das war das Ergebnis.
Wie beim zweiten Bild zu sehen wenn man drüber geht bekommt man noch die Vorhersage angezeigt. Finde ich eigentlich ganz schick und wäre toll wenn das wieder klappt.
Irgendwie bin ich jetzt nicht in der Lage das mir mit den neuen Daten eine ähnliche Ansicht erstellt wird.
<?
$Weathernow = WD_Weathernow(56496,"all" );
$WetterNextDays = WD_Weathernextdays(56496);
$WetterStunden = WD_Weathernexthours(56496);
$WetterWarnung = WD_Weatheralerts(56496);
echo ' <head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Wetter</title>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default;acme:n4:default;bilbo:n4:default.js" type="text/javascript"></script>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,400" rel="stylesheet" type="text/css">
<link href="../css/wundergroundweather.css" rel="stylesheet" type="text/css">
</head>
<body class="body">
<table>';
//foreach ($WetterWarnung as $Warnung=>$ID){
// echo ' <tr>
// <td style="color:'.$ID['Color'].'" colspan="5"> <i class="fa fa-info-circle"></i>
// '.$ID['Text'].'
// Hallo zusammen
// </td>
// </tr>';
// }
foreach ($WetterNextDays as $day=> $data){
if (isToday($data['Date'])){
$Wochentag = "Heute";
} else {
$tag = array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
$Wochentag = $tag[date("w",intval($data['Date']))];
}
echo' <td>
<figure class="Rechteck">
<h1>'.$Wochentag.'</h1>
<img class="picture" src="'.$data['Icon'].'">
<figcaption>'.$data['Text'].'</figcaption>
<div class="TextTemphoch" >'.$data['TempHigh'].' °C</div>
<div class="TextTempgefuehlt">'.$data['TempLow'].' °C</div>
<section class="weatherpicbottom">
<p1>Luftfeuchtigkeit: '.$data['Humidity'].'%</p1>
<p1>Ø Wind: '.$data['Wind'].' km/h</p1>
<p1>Max Wind: '.$data['MaxWind'].' km/h</p1>
<p1>Regen: '.$data['Rain'].' Liter/m²</p1>
<p1>Regenwahrsch. '.$data['Pop'].' % </p1>
</section>
</figure>
</td>';
}
echo' </tr>';
echo' </tr>
</table>
</body>';
//----------------------------------------------------
//Funktion um zu Prüfen ob der UNIX Time Stamp heute ist
function isToday($time)
{
$begin = mktime(0, 0, 0);
$end = mktime(23, 59, 59);
// check if given time is between begin and end
if($time >= $begin && $time <= $end)
return true;
else
return false;
}
?>
Wie habt ihr das gemacht bzw. kann mir da bitte jemand helfen?
Danke!
Gruß
Stephan
Guten Morgen,
ich habe herausgefunden, dass man den wrapper über die php.ini mit extension = php_openssl.dll aufrufen kann. Nur löscht mir IPS diese Zeile beim starten vom Dienst wieder heraus. 
Was ist zu tun?
Grüße Jens
Dazu musst Du entsprechend die Werte anpassen, die angezeigt werden sollen und auch das CSS.
Vom Grundprinzip sieht das so aus, must Du dann eben noch mit den Werten ergänzen die Du angezeigt haben willst bzw. das Layout an die persönlichen Vorlieben anpassen.
$api_secret = "XXXXXXXXX";
$latitude = "51.06";
$longitude = "9.47";
define ('ID_WEATHER_NEXT_DAYS', 18506 /*[Info\Wetter\DarkSky\DarkSky Visualisierung\Wetterbericht Dark Sky Daily]*/); // ObjektID einer String Variable mit Variablenprofil HTMLBox
define ('ID_WEATHER_NOW', 14937 /*[Info\Wetter\DarkSky\DarkSky Visualisierung\Wetterbericht Dark Sky Now]*/); // ObjektID einer String Variable mit Variablenprofil HTMLBox
$url = "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?exclude=minutely,hourlylang=de&units=si";
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
$result = curl_exec($ch);
curl_close($ch);
$darksky_data = json_decode($result, true);
$weather_now = $darksky_data["currently"];
$weather_daily = $darksky_data["daily"]["data"];
SetValue(ID_WEATHER_NOW, Weather_Now($weather_now));
SetValue(ID_WEATHER_NEXT_DAYS, Weather_Now_And_Next_Days($weather_daily));
function Weather_Now($weather_now)
{
$html = '<head>
<meta charset="utf-8">
<title>Wetter</title>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default;acme:n4:default;bilbo:n4:default.js" type="text/javascript"></script>'.
Get_CSS().'
</head>
<body>';
$html .= '<table>';
$html.= '<tr>
<td class="weathertablecell">
<section class="weatherframe">
<div class="weathertitledate">Aktuell</div>
<figure class="cap-bot"><img src="https://darksky.net/images/weather-icons/'.$weather_now['icon'].'.png" alt="Wettericon" width="70" height="70"><figcaption>'.$weather_now['summary'].'</figcaption></figure>
<section class="weatherpicright">
<div class="temperature">'.round($weather_now['temperature'], 1).' °C</div>
<div class="humidity">'.$weather_now['humidity'].'%</div>
</section>
<section class="weatherpicbottom">
<div class="wind">Ø Wind: '.$weather_now['windSpeed'].' km/h</div>
<div class="temperaturefeel">'.round($weather_now['apparentTemperature'], 1).' °C gefühlt</div>
<div class="pressure">'.$weather_now['pressure'].' hPa</div>
<div class="visibility">Sichtweite '.$weather_now['visibility'].' km</div>
</section>
</section>
</td>';
$html .= "</tr>
</table>";
$html .= '</body>
</html>';
return $html;
}
function Weather_Now_And_Next_Days($weather_daily)
{
$html = '<head>
<meta charset="utf-8">
<title>Wetter</title>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default;acme:n4:default;bilbo:n4:default.js" type="text/javascript"></script>'.
Get_CSS().'
</head>
<body>';
$html .= '<table>';
$html.= '<tr>';
foreach ($weather_daily as $day => $data){
if (isToday($data['time'])){
$weekday = "Heute";
} else {
$day_names = array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
$weekday = $day_names[date("w",intval($data['time']))];
}
$html.= '<td class="weathertablecell">
<section class="weatherframe">
<div class="weathertitledate">'.$weekday.'</div>
<figure class="cap-bot"><img src="https://darksky.net/images/weather-icons/'.$data['icon'].'.png" alt="Wettericon" width="70" height="70"><figcaption>'.$data['summary'].'</figcaption></figure>
<section class="weatherpicright">
<div class="temperaturemax">'.round($data['temperatureHigh'], 1).' °C</div>
<div class="temperaturemin">'.round($data['temperatureLow'], 1).' °C</div>
</section>
<section class="weatherpicbottom">
<div class="wind">Ø Wind: '.$data['windSpeed'].' km/h</div>
<div class="wind">Ø Wind Böen: '.$data['windGust'].' km/h</div>
<div class="cloud">Wolken: '.ConvertPercent($data['cloudCover']).' %</div>
<div class="humidity">Ø Feuchtigkeit: '.ConvertPercent($data['humidity']).' %</div>';
if(isset($data['precipType']))
{
$precipitation_type = Get_PrecipitationType($data['precipType']);
if($precipitation_type != "")
{
$html.= '<div class="precipitationtype">Niederschlagstyp: '.$precipitation_type.'</div>';
}
}
$html.= '<div class="precipitationprobability">Regen: '.ConvertPercent($data['precipProbability']).' %</div>
</section>
</section>
</td>';
}
$html .= "</tr>
</table>";
$html .= '</body>
</html>';
return $html;
}
function Get_PrecipitationType($precipitation_type)
{
$precipitation_type = "";
if ($precipitation_type == "rain")
{
$precipitation_type = "Regen";
}
if ($precipitation_type == "snow")
{
$precipitation_type = "Schnee";
}
if ($precipitation_type == "sleet")
{
$precipitation_type = "Schneeregen";
}
return $precipitation_type;
}
function isToday($time){
$begin = mktime(0, 0, 0);
$end = mktime(23, 59, 59);
// check if given time is between begin and end
return (($time >= $begin) && ($time <= $end));
}
function ConvertPercent($value)
{
$percentage = $value * 100;
return $percentage;
}
function Get_CSS()
{
$style = '<style>
body { background-color:transparent; }
.weathertablecell {
width: 170px;
text-shadow: 1px 1px 0px rgba(66,66,66,1.00);
vertical-align: top;
padding-bottom: 0px;
padding-top: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.weatherframe {
background-color: rgba(136,123,123,0.55);
border-radius: 25px;
padding-left: 0px;
margin-left: 4px;
margin-right: 4px;
padding-top: 0px;
margin-top: 3px;
-webkit-box-shadow: 2px 2px 13px 0px rgba(50,49,49,1.00);
box-shadow: 2px 2px 13px 0px rgba(50,49,49,1.00);
padding-bottom: 0px;
margin-bottom: 0px;
position: relative;
height: 275px;
}
.weathertitlehour {
color: rgba(241,241,241,1.00);
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-align: center;
padding-top: 6px;
}
figure {
display: block;
position: relative;
overflow: hidden;
margin-left: 1px;
margin-right: 1px;
margin-top: 0px;
}
figcaption {
position: absolute;
background: rgba(0,0,0,0.55);
color: white;
padding: 10px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: xx-small;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
figure:before {
content: "?";
position: absolute;
background: rgba(255,255,255,0.75);
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
/* Only Fx 4 supporting transitions on psuedo elements so far... */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}
.temperature {
position: relative;
text-align: right;
color: rgba(235,235,235,1.00);
padding-right: 5px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
}
.humidity {
position: relative;
text-align: right;
color: rgba(235,235,235,1.00);
padding-right: 5px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
}
.wind {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.weathertitledate {
padding-top: 6px;
text-align: center;
color: rgba(241,241,241,1.00);
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
.temperaturefeel {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.pressure {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.rain {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.precipitationtype {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.precipitationprobability {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.cloud {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.humidity {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.weatherframe .weatherpicright {
position: relative;
top: -18px;
}
.weatherframe .weatherpicbottom {
position: relative;
left: auto;
right: auto;
top: -20px;
}
.visibility {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.temperaturemax {
position: relative;
text-align: right;
color: rgba(235,235,235,1.00);
padding-right: 5px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
}
.temperaturemin {
position: relative;
text-align: right;
color: rgba(235,235,235,1.00);
padding-right: 5px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
}
</style>';
return $style;
}
Hallo Fonzo, kannst Du mir sagen wie das mit dem einbinden funktioniert?
Gruß
Thomas
Ein String Variable erstellen und der Variable das Profil ~HTMLBox zuweisen. Auf WeatherWidget.io den Ort einstellen sowie persönliche Anpassungen machen, dann mit „Get Code“ den Code kopieren. Anschließend ein Skript in IP-Symcon erstellen und dort dann den kopierten Code von WeatherWidget.io einfügen und das Skript einmal ausführen um die Variable einmal zu befüllen, dann sollte das angezeigt werden.
Beispiel:
// bei $html Code des Widgets einfügen ' müssen im Code mit \ auskommentiert werden
$html = '<a class="weatherwidget-io" href="https://forecast7.com/de/53d559d99/hamburg/" data-label_1="HAMBURG" data-label_2="WEATHER" data-theme="original" >HAMBURG WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=\'https://weatherwidget.io/js/widget.min.js\';fjs.parentNode.insertBefore(js,fjs);}}(document,\'script\',\'weatherwidget-io-js\');
</script>';
Setvalue(12345 /*[Info\Wetter\DarkSky\Dark Sky Widget]*/, $html); // Objekt ID der String Variable mit Profil ~HTMLBox
Hallo Fonzo, vielen Dank!!
Du weißt ja ich bin noch Anfänger aber nach deiner Anleitung klappte dies einwandfrei. In einer Zeile musste ich ein wenig fummeln aber es war kein Problem.
Ich benutze die animierten Icons und das sieht ganz gut aus.
Vielen Dank nochmal und wenn Du bei einem Script mal nicht weiter weißt ich helfe dir gerne musst keine scheu haben zu fragen. haha:D
Gruß
Thomas
Moin,
und noch eine blödere Anfängerfrage… Ich hab den Code des Widgets jetz in die Variable eingelesen und wie lass ich mir die Box anzeigen im Webfront? Hab die Variable in eine Kategorie verlinkt und lass diese anzeigen, sieht dann aber so aus wie in der Doku:
HTML-Box IP-Symcon :: Automatisierungssoftware
Grüße
Matthias
Vielen Dank für das Script, sieht echt super aus. Langsam kommt der durchblick:)
Habe noch einen Fehler in der Anzeige. Es wird links vom Wettersymbol ein Fragezeichen angezeigt. Konnte jedoch nicht erkennen an was das liegt.
Kannst Du feststellen an was das liegt?
Das ist kein Fehler sondern eine persönliche Einstellungssache ob man man das will oder nicht. Solche Dinge werden alle im CSS festgelegt, das ? ist in dem Fall nur exemplarisch da, weil man ja wissen muss wann bzw. wo ein hover Effekt auftritt. Wenn Dir persönlich bekannt ist wenn Du über ein Element gehst dass dann weitere Information eingeblendet wird kannst Du das ? auch einfach wegnehmen.
Das gesamte Layout wie Farbe, Schriftart, Schriftgröße usw. wird im CSS definiert, damit kannst Du das individuell anpassen. Das ? wird im figure:before Element im CSS unter content definiert. Das kannst Du im CSS anpassen siehe auch Tutorial Bilder mit Bildunterschriften.
Also einfach
figure:before {
content: "?";
position: absolute;
background: rgba(255,255,255,0.75);
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
/* Only Fx 4 supporting transitions on psuedo elements so far... */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}
löschen, dann wird auch kein Fragezeichen mehr angezeigt, dann must man aber eben auch wissen, dass dort etwas eingeblendet wird, wenn man in dem Bereich geht. Das ist also persönliche Ansicht, wie man das eben haben will.
Hallo Fonzo,
vielen Dank für deine Antwort und das Script. Es funktioniert sehr gut. Ich habe allerdings noch zwei Fragen, wie kann man denn die Anzahl an Tagen eingrenzen. Mir würde die Anzeige 4 Tagen vollkommen reichen.
Und ist es möglich den „Hover Text“ auch auf deutsch zu bekommen, bei mir ist dieser Englisch.
Wäre super wenn du mir das noch beantworten könntest.
Vielen Dank und Grüße
Stephan
Dazu must Du nur eine if Prüfung mit dem Wert in der foreach Schleife einfügen, die beim Limit die Schleife unterbricht (Anzahl der Tage wird in Zeile 6 angegeben).
<?php
$api_secret = "XXXXX";
$latitude = "51.7";
$longitude = "9.8";
$limit = 4; // maximale Anzahl der Tage
define ('ID_WEATHER_NEXT_DAYS', 18506 /*[Info\Wetter\DarkSky\DarkSky Visualisierung\Wetterbericht Dark Sky Daily]*/); // ObjektID einer String Variable mit Variablenprofil HTMLBox
define ('ID_WEATHER_NOW', 14937 /*[Info\Wetter\DarkSky\DarkSky Visualisierung\Wetterbericht Dark Sky Now]*/); // ObjektID einer String Variable mit Variablenprofil HTMLBox
$url = "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?lang=de&units=si";
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
$result = curl_exec($ch);
curl_close($ch);
$darksky_data = json_decode($result, true);
$weather_now = $darksky_data["currently"];
$weather_daily = $darksky_data["daily"]["data"];
$weather_hourly = $darksky_data["hourly"]["data"];
SetValue(ID_WEATHER_NOW, Weather_Now($weather_now));
SetValue(ID_WEATHER_NEXT_DAYS, Weather_Now_And_Next_Days($weather_daily, $limit));
function Weather_Now($weather_now)
{
$html = '<head>
<meta charset="utf-8">
<title>Wetter</title>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default;acme:n4:default;bilbo:n4:default.js" type="text/javascript"></script>'.
Get_CSS().'
</head>
<body>';
$html .= '<table>';
$html.= '<tr>
<td class="weathertablecell">
<section class="weatherframe">
<div class="weathertitledate">Aktuell</div>
<figure class="cap-bot"><img src="https://darksky.net/images/weather-icons/'.$weather_now['icon'].'.png" alt="Wettericon" width="70" height="70"><figcaption>'.$weather_now['summary'].'</figcaption></figure>
<section class="weatherpicright">
<div class="temperature">'.round($weather_now['temperature'], 1).' °C</div>
<div class="humidity">'.$weather_now['humidity'].'%</div>
</section>
<section class="weatherpicbottom">
<div class="wind">Ø Wind: '.$weather_now['windSpeed'].' km/h</div>
<div class="temperaturefeel">'.round($weather_now['apparentTemperature'], 1).' °C gefühlt</div>
<div class="pressure">'.$weather_now['pressure'].' hPa</div>
<div class="visibility">Sichtweite '.$weather_now['visibility'].' km</div>
</section>
</section>
</td>';
$html .= "</tr>
</table>";
$html .= '</body>
</html>';
return $html;
}
function Weather_Now_And_Next_Days($weather_daily, $limit)
{
$html = '<head>
<meta charset="utf-8">
<title>Wetter</title>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default;acme:n4:default;bilbo:n4:default.js" type="text/javascript"></script>'.
Get_CSS().'
</head>
<body>';
$html .= '<table>';
$html.= '<tr>';
$i = 1;
foreach ($weather_daily as $day => $data){
if (isToday($data['time'])){
$weekday = "Heute";
} else {
$day_names = array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
$weekday = $day_names[date("w",intval($data['time']))];
}
$html.= '<td class="weathertablecell">
<section class="weatherframe">
<div class="weathertitledate">'.$weekday.'</div>
<figure class="cap-bot"><img src="https://darksky.net/images/weather-icons/'.$data['icon'].'.png" alt="Wettericon" width="70" height="70"><figcaption>'.$data['summary'].'</figcaption></figure>
<section class="weatherpicright">
<div class="temperaturemax">'.round($data['temperatureHigh'], 1).' °C</div>
<div class="temperaturemin">'.round($data['temperatureLow'], 1).' °C</div>
</section>
<section class="weatherpicbottom">
<div class="wind">Ø Wind: '.$data['windSpeed'].' km/h</div>
<div class="wind">Ø Wind Böen: '.$data['windGust'].' km/h</div>
<div class="cloud">Wolken: '.ConvertPercent($data['cloudCover']).' %</div>
<div class="humidity">Ø Feuchtigkeit: '.ConvertPercent($data['humidity']).' %</div>';
if(isset($data['precipType']))
{
$precipitation_type = Get_PrecipitationType($data['precipType']);
if($precipitation_type != "")
{
$html.= '<div class="precipitationtype">Niederschlagstyp: '.$precipitation_type.'</div>';
}
}
$html.= '<div class="precipitationprobability">Regen: '.ConvertPercent($data['precipProbability']).' %</div>
</section>
</section>
</td>';
$i++;
if($limit < $i)
{
break;
}
}
$html .= "</tr>
</table>";
$html .= '</body>
</html>';
return $html;
}
function Get_PrecipitationType($precipitation_type)
{
$precipitation_type = "";
if ($precipitation_type == "rain")
{
$precipitation_type = "Regen";
}
if ($precipitation_type == "snow")
{
$precipitation_type = "Schnee";
}
if ($precipitation_type == "sleet")
{
$precipitation_type = "Schneeregen";
}
return $precipitation_type;
}
function isToday($time){
$begin = mktime(0, 0, 0);
$end = mktime(23, 59, 59);
// check if given time is between begin and end
return (($time >= $begin) && ($time <= $end));
}
function ConvertPercent($value)
{
$percentage = $value * 100;
return $percentage;
}
function Get_CSS()
{
$style = '<style>
body { background-color:transparent; }
.weathertablecell {
width: 170px;
text-shadow: 1px 1px 0px rgba(66,66,66,1.00);
vertical-align: top;
padding-bottom: 0px;
padding-top: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.weatherframe {
background-color: rgba(136,123,123,0.55);
border-radius: 25px;
padding-left: 0px;
margin-left: 4px;
margin-right: 4px;
padding-top: 0px;
margin-top: 3px;
-webkit-box-shadow: 2px 2px 13px 0px rgba(50,49,49,1.00);
box-shadow: 2px 2px 13px 0px rgba(50,49,49,1.00);
padding-bottom: 0px;
margin-bottom: 0px;
position: relative;
height: 275px;
}
.weathertitlehour {
color: rgba(241,241,241,1.00);
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-align: center;
padding-top: 6px;
}
figure {
display: block;
position: relative;
overflow: hidden;
margin-left: 1px;
margin-right: 1px;
margin-top: 0px;
}
figcaption {
position: absolute;
background: rgba(0,0,0,0.55);
color: white;
padding: 10px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: xx-small;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
figure:before {
content: "?";
position: absolute;
background: rgba(255,255,255,0.75);
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
/* Only Fx 4 supporting transitions on psuedo elements so far... */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}
.temperature {
position: relative;
text-align: right;
color: rgba(235,235,235,1.00);
padding-right: 5px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
}
.humidity {
position: relative;
text-align: right;
color: rgba(235,235,235,1.00);
padding-right: 5px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
}
.wind {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.weathertitledate {
padding-top: 6px;
text-align: center;
color: rgba(241,241,241,1.00);
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
.temperaturefeel {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.pressure {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.rain {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.precipitationtype {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.precipitationprobability {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.cloud {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.humidity {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.weatherframe .weatherpicright {
position: relative;
top: -18px;
}
.weatherframe .weatherpicbottom {
position: relative;
left: auto;
right: auto;
top: -20px;
}
.visibility {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color: rgba(225,225,225,1.00);
font-size: x-small;
text-align: center;
text-shadow: 1px 1px 1px rgba(37,36,36,1.00);
}
.temperaturemax {
position: relative;
text-align: right;
color: rgba(235,235,235,1.00);
padding-right: 5px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
}
.temperaturemin {
position: relative;
text-align: right;
color: rgba(235,235,235,1.00);
padding-right: 5px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-shadow: 2px 2px 4px rgba(51,51,51,1.00);
}
</style>';
return $style;
}
Kann ich nicht nachvollziehen, da ja lang=de eingestellt ist, daher sollte das auf deutsch abgefragt werden bzw. wird bei mir auch in deutsch angezeigt.
…
Das ist kein Fehler sondern eine persönliche Einstellungssache ob man man das will oder nicht. Solche Dinge werden alle im CSS festgelegt, das ? ist in dem Fall nur exemplarisch da, weil man ja wissen muss wann bzw. wo ein hover Effekt auftritt. Wenn Dir persönlich bekannt ist wenn Du über ein Element gehst dass dann weitere Information eingeblendet wird kannst Du das ? auch einfach wegnehmen.Das gesamte Layout wie Farbe, Schriftart, Schriftgröße usw. wird im CSS definiert, damit kannst Du das individuell anpassen. Das ? wird im figure:before Element im CSS unter content definiert. Das kannst Du im CSS anpassen siehe auch Tutorial Bilder mit Bildunterschriften.
…
Danke, soweit klar.
Und ist es möglich den „Hover Text“ auch auf deutsch zu bekommen, bei mir ist dieser Englisch.
@fonzo
Kann ich nicht nachvollziehen, da ja lang=de eingestellt ist, daher sollte das auf deutsch abgefragt werden bzw. wird bei mir auch in deutsch angezeigt.
Also bei mir am PC ist der HoverText an allen Tagen auch in Englisch!
Wenn Du eine Anfrage in deutsch anforderst bekommst Du eine Antwort in english?
$api_secret = "XXXX";
$latitude = "51.9";
$longitude = "9.6";
$url = "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?lang=de&units=si";
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
$result = curl_exec($ch);
curl_close($ch);
$darksky_data = json_decode($result, true);
var_dump($darksky_data);
Mein HoverText ist auf Deutsch.
Welcher Text von Fonzos VarDump ist gemeint? (Damit wir vom gleichen reden)
$url = "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?lang=de&units=si";
Hi Fonzo,
so ist der Text jetzt auch bei mir auf deutsch.
Davor sah die Zeile so aus und es kam auf englisch.
$url = "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?exclude=minutely,hourlylang=de&units=si";
Grüße
Stephan
Da fehlt ein & deshalb geht das nicht:
$url = "https://api.darksky.net/forecast/".$api_secret."/".$latitude.",".$longitude."?exclude=minutely,hourly&lang=de&units=si";