Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 03. Dezember 2016 13:03

pWorker
probiert CMS/ms aus
Registriert: 20. Oktober 2016
Beiträge: 78

Dynamisch & Einfach | Wetteranzeige/ Vorhersage

Moin,

noch so ein leidiges Thema, die Wetteranzeige. Hässlich verlässlich auch immer die Verlinkung zum Mutterschiff...
Deshalb hier nun ein Tutorial, für eine Wetteranzeige mit der aktuellen Temparatur und der für die nächsten zwei Folgetage, ohne Verlinkung und mit einfach zu ersetzenden icons.

Ermöglicht wird das ganze über yahoo`s simpleweather.js. Nachteil ist, dass die manchmal 3 Sekunden braucht um die gewünschten Informationen abzurufen, deshalb auch in diesem how to included, eine Spinneranimation die die Ladezeit überbrücken soll.


Schritt 1: Container anlegen
Im ersten Schritt sollte ein Zielcontainer an der entprechenden Stelle erstellt werden. Die Klassen können beliebig benannt werden, müssen dann aber auch konsequent bei den weiteren Aufrufen verwendet werden.


Seiten-/Templateinhalt:

<div id="wetter-box">

<div class="wetter-box-inner">
<div class="two-column"><p><strong>Wetter DEINWUNSCHORT</strong></p></div>
<div class="wetter-heute">
      <div id="wetter-DEINWUNSCHORT" class="wetter">

<div class="one-column bged">
<div class="loader">Loading...</div>
</div>
</div>
</div>
</div>

</div>

Schritt 2: CSS Einfügen/Stylen
Ich paste hier mal den entscheidenen Teil. Ja, Ihr seht richtig 47 Einzelfiles. Es gibt viele Sammlungen im Web.
Wenn man seinen passenden Stil gefunden hat, sucht man via google nach den "Yahoo simpleweather codes" und ändert die Pfade, wie untenstehend durch mich passiert, ab. Viele Codeentsprechungen ähneln sich auch. Man kann auch icons wie von font awesome z.B. verwenden.

--

Der zweite Teil styled den Spinner in der div-class "loader". Den Spinner hab ich so gestylt (*hässliches Wort), dass der dem anzuzeigenden Endergebnis optisch nahe kommt.

Entsprechender Stylesheet:

i {
  color: #000;
  font-family: weather;
  font-weight: normal;
  font-style: normal;
  text-transform: none;
margin-left:20px;
}


.icon-0:before { content: url('/uploads/images/WetterIcons/cloudywindy.png'); }
.icon-1:before { content: url('/uploads/images/WetterIcons/cloudywindy.png'); }
.icon-2:before { content: url('/uploads/images/WetterIcons/cloudywindy.png'); }
.icon-3:before { content: url('/uploads/images/WetterIcons/clear.png'); }
.icon-4:before { content: url('/uploads/images/WetterIcons/thunderstorms02.png'); }
.icon-5:before { content: url('/uploads/images/WetterIcons/sleet.png'); }
.icon-6:before { content: url('/uploads/images/WetterIcons/sleet.png'); }
.icon-7:before { content: url('/uploads/images/WetterIcons/sleet.png'); }
.icon-8:before { content: url('/uploads/images/WetterIcons/freezingsnow.png'); }
.icon-9:before { content: url('/uploads/images/WetterIcons/flurries.png'); }
.icon-10:before { content: url('/uploads/images/WetterIcons/cloundysnow.png'); }
.icon-11:before { content: url('/uploads/images/WetterIcons/rain01.png'); }
.icon-12:before { content: url('/uploads/images/WetterIcons/rain01.png'); }
.icon-13:before { content: url('/uploads/images/WetterIcons/sleet.png'); }
.icon-14:before { content: url('/uploads/images/WetterIcons/sleet.png'); }
.icon-15:before { content: url('/uploads/images/WetterIcons/snow.png'); }
.icon-16:before { content: url('/uploads/images/WetterIcons/snow01.png'); }
.icon-17:before { content: url('/uploads/images/WetterIcons/frost.png'); }
.icon-18:before { content: url('/uploads/images/WetterIcons/sleet.png'); }
.icon-19:before { content: url('/uploads/images/WetterIcons/fog.png'); }
.icon-20:before { content: url('/uploads/images/WetterIcons/fog.png'); }
.icon-21:before { content: url('/uploads/images/WetterIcons/fog.png'); }
.icon-22:before { content: url('/uploads/images/WetterIcons/fog.png'); }
.icon-23:before { content: url('/uploads/images/WetterIcons/fog.png'); }
.icon-24:before { content: url('/uploads/images/WetterIcons/cloudywindy02.png'); }
.icon-25:before { content: url('/uploads/images/WetterIcons/freezing.png'); }
.icon-26:before { content: url('/uploads/images/WetterIcons/cloudy.png'); }
.icon-27:before { content: url('/uploads/images/WetterIcons/cloudynight.png'); }
.icon-28:before { content: url('/uploads/images/WetterIcons/partlysunny.png'); }
.icon-29:before { content: url('/uploads/images/WetterIcons/partlycloundynight.png'); }
.icon-30:before { content: url('/uploads/images/WetterIcons/partlycloudy.png'); }
.icon-31:before { content: url('/uploads/images/WetterIcons/clearnight.png'); }
.icon-32:before { content: url('/uploads/images/WetterIcons/clear.png'); }
.icon-33:before { content: url('/uploads/images/WetterIcons/partlycloundynight.png'); }
.icon-34:before { content: url('/uploads/images/WetterIcons/mostlysunny.png'); }
.icon-35:before { content: url('/uploads/images/WetterIcons/sleet.png'); }
.icon-36:before { content: url('/uploads/images/WetterIcons/hot02.png'); }
.icon-37:before { content: url('/uploads/images/WetterIcons/thunderstorms02.png'); }
.icon-38:before { content: url('/uploads/images/WetterIcons/storms.png'); }
.icon-39:before { content: url('/uploads/images/WetterIcons/storms.png'); }
.icon-40:before { content: url('/uploads/images/WetterIcons/flurries.png'); }
.icon-41:before { content: url('/uploads/images/WetterIcons/snow.png'); }
.icon-42:before { content: url('/uploads/images/WetterIcons/snow.png'); }
.icon-43:before { content: url('/uploads/images/WetterIcons/snow.png'); }
.icon-44:before { content: url('/uploads/images/WetterIcons/partlycloudy.png'); }
.icon-45:before { content: url('/uploads/images/WetterIcons/thunderstorms01.png'); }
.icon-46:before { content: url('/uploads/images/WetterIcons/cloundysnow.png'); }
.icon-47:before { content: url('/uploads/images/WetterIcons/thunderstorms01.png'); }

---

.loader {
  color: #000;
  font-size: 30px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin:30px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease;
  animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

Schritt 3: Javascript laden
Die Funktion lädt zunächst die Informationen und gibt diese bei Erhalt (success) aus. Das Gute, bei Erhalt wird der html code in der <div id="wetter-DEINWUNSCHORT" class="wetter"> ersetzt und der Spinner (class "loader") verschwindet. Bei Nichterhalt (errror) kann man einen Hinweis einfügen, dass die Seite neu geladen werden soll.


Seiten-Inhaltsspezifische Templatedatei (bei mir z.B. xydefault.tpl):

<script src="{root_url}/uploads/scripts/jquery.simpleWeather.min.js"></script>

{literal} <script type="text/javascript">

$(document).ready(function() {


$.simpleWeather({
    location: 'DEINWUNSCHORT,Deutschland',
    woeid: '',
    unit: 'C',

    success: function(weather) {
      html = '<div class="one-column bged">'+'<div class="two-column">'+'<i class="icon-'+weather.code+'"></i>'+'</div>'+'<div class="two-column">'+'<h2><strong>Heute:</strong> '+'<br/>'+weather.temp+'&deg;'+weather.units.temp+'</h2>'+'</div>'+'</div>';
      
 for(var i=8;i<weather.forecast.length;i++) {
        html += '<div class="wetter-forecast">'+'<div class="four-column">'+'<i class="icon-'+weather.code+'"></i>'+'</div>'+'<div class="four-column">'+'<p><strong>'+weather.forecast[i].day+': '+'</strong><br/>'+weather.forecast[i].high+'&deg;'+weather.units.temp+'</p>'+'</div>'+'</div>';
      }
  
      $("#wetter-DEINWUNSCHORT").html(html);
    },
    error: function(error) {
      $("#wetter-DEINWUNSCHORT").html('<div class="one-column bged"><p>Seite neu laden um aktuelle Wetterinformationen zu erhalten.</p></div>');
    }
  });

});

 </script>{/literal}

MfG

Beitrag geändert von pWorker (03. Dezember 2016 13:14)

Offline

#2 04. Dezember 2016 07:04

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: Dynamisch & Einfach | Wetteranzeige/ Vorhersage

Danke für das HowTo!!

pWorker schrieb:

Nachteil ist, dass die manchmal 3 Sekunden braucht

3 Sekunden sind IMHO deutlich zu viel ... ein guter Grund, die Werte zu cachen - so schnell ändert sich das Wetter ja dann doch nicht wink.

Offline

#3 04. Dezember 2016 12:21

pWorker
probiert CMS/ms aus
Registriert: 20. Oktober 2016
Beiträge: 78

Re: Dynamisch & Einfach | Wetteranzeige/ Vorhersage

cyberman schrieb:

Danke für das HowTo!!

pWorker schrieb:

Nachteil ist, dass die manchmal 3 Sekunden braucht

3 Sekunden sind IMHO deutlich zu viel ... ein guter Grund, die Werte zu cachen - so schnell ändert sich das Wetter ja dann doch nicht wink.

Hey, genau das ist auch meine Idee, ich suche gerade nach nem "how-to" cache wink

Offline

#4 04. Dezember 2016 12:37

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: Dynamisch & Einfach | Wetteranzeige/ Vorhersage

Schau dir mal das CGExtension Modul genauer an ... da gibt's für derartiges ein {cge_cache} Befehl.

Offline

#5 07. Januar 2017 12:30

pWorker
probiert CMS/ms aus
Registriert: 20. Oktober 2016
Beiträge: 78

Re: Dynamisch & Einfach | Wetteranzeige/ Vorhersage

Update:

Die Wetteranzeige funktioniert zwar und ist korrekt eingebunden, der Yahoo Wetterdienst/ die Schnitstelle wird aber zur Zeit nicht gut versorgt.

Offline

#6 07. Januar 2017 13:31

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: Dynamisch & Einfach | Wetteranzeige/ Vorhersage

pWorker schrieb:

ich suche gerade nach nem "how-to" cache wink

Bist du an der Stelle weitergekommen?

Offline