Skip to content

$presentweather()

Jump to bottom Edit New page
roe-dl edited this page Nov 8, 2023 · 13 revisions

Die Wettervorhersage und auch manche Meßgeräte liefern einen Code "ww" für das aktuelle Wetter, wie er von der WMO standardisiert worden ist. Diesen Codes ist jeweils ein passendes Icon zugeordnet. Auch für die Wolkenbedeckung "N" sind entsprechende Icons definiert.

Die Searchlist-Erweiterung $presentweather() liefert Wettersymbole aus verschiedenen Symbolsätzen nach dem Wetterzustand "ww" bzw. "wawa" und der Wolkenbedeckung "N". Symbole, die als Bilddateien (.png) vorliegen, müssen auf der Website abgelegt und mittels <img> eingebunden werden. Die Symbole von Erik Flowers sind ein Zeichensatz (Font), der im <head> der HTML-Seite mittels <link> eingebunden werden muß. Die WMO-Symbole und SVG-Icons sind Vektorgraphiken (SVG), die von $presentweather() direkt eingebunden werden. Ein Beispiel ist unten angegeben.

Symbolübersicht

Bewölkungssymbole

image

Symbole für den Wetterzustand

Die Liste ist für eine direkte Darstellung an dieser Stelle zu lang. Eine Übersicht bietet die Wiki-Seite Wettersymbole (Icons) und die Übersichtsseite Wetterzustand. Hier sind nur Beispiele angegeben.

SVG-Icons

Glatteis Nebel Niesel gefrierender Niesel Regen gefrierender Regen Schneeregen Schnee Hagel Gewitter Wind, Sturm Tornado
24 40...49 50...55 56, 57 60...65 66, 67 68, 69 70...75 87...90 91...99 30...39, 18 19

WMO-Symbole

WMO-Code-Tabelle 4677 ww WMO-Code-Tabelle 4680 wawa
WMO-Code-Tabelle 4677 WMO-Code-Tabelle 4680

Konfiguration

In skin.conf ist folgende Eintragung nötig:

[CheetahGenerator]
    search_list_extensions = user.weathercodes.WeatherSearchList
    ...

Gibt es die Zeile search_list_extensions schon, ist der Wert am Schluß mit Komma getrennt anzufügen.

Nutzung in Skins

$presentweather() wird als Platzhalter (tag) verwendet. Als Parameter werden je nach gewünschter Darstellung der Wetterzustand "ww" (alternativ "wawa") oder die Wolkenbedeckung "N" oder auch beide übergeben. Gibt es das Symbol (Icon) in einer Tag- und einer Nacht-Variante, muß auch diese Information als Parameter übergeben werden. Welcher Symbolsatz verwendet werden soll, wird durch Punkt getrennt als Attribut angefügt:

$presentweather(ww=Wetterzustand, wawa=Wetterzustand, n=Wolkenbedeckung, night=Tag_Nacht_Auswahl, ...).attr

Die Parameter sind:

  • ww: der Wettercode ww oder eine Liste von Wettercodes, von denen der "schlimmste" verwendet wird
  • n: die Wolkenbedeckung in Prozent (nur bei $ww<4 nötig und bei $ww==18 möglich)
  • night: True, wenn das Nachtsymbol verwendet werden soll
  • wawa: der Wettercode wawa oder eine Liste von Wettercodes, von denen der "schlimmste" verwendet wird
  • Im Falle von station als attr können weitere Parameter hinzugefügt werden, die Meßgrößen bestimmen, die mit in die Darstellung aufgenommen werden sollen.

Alle Parameter sind optional. Wenigstens einer von den Parametern ww, n und wawa muß ungleich None sein. Wenn sowohl ww als auch wawa vorhanden sind, wird ww verwendet und wawa ignoriert. n wird verwendet, wenn ww und wawa None oder kleiner 4 sind.

attr ist eine der folgenden Möglichkeiten:

  • ww: der Wettercode, der aus der Liste herausgesucht wurde
  • text: Beschreibung des zugehörigen Wetterereignisses
  • belchertown_icon: Dateiname des Icons aus dem Belchertown-Icon-Satz
  • dwd_icon: Dateiname des Icons aus dem DWD-Icon-Satz
  • aeris_icon: Dateiname des Icons aus dem Aeris-Icon-Satz
  • wi_icon: Icon aus dem Icon-Satz von Erik Flowers
  • svg_icon: Wetter-Icon im SVG-Format
  • svg_icon($width=128,$x=None,$y=None,$with_tooltip=True): Wetter-Icon im SVG-Format mit Größenangabe und Koordinaten
  • svg_icon_filename: Dateiname des SVG-Icons aus dem Wettersymbolesatz in weathericons
  • wmo_symbol: Symbol der Meteorologen für den Wetterzustand
  • wmo_symbol($width,color=$color): Symbol der Meteorologen für den Wetterzustand mit Größenangabe und optionaler Farbangabe.
  • n: Wolkenbedeckung in Prozent (nur wenn nur n übergeben wurde)
  • okta: Wolkenbedeckung in Okta (nur wenn nur n übergeben wurde)
  • station: Erzeugung des Stationsmodells für Wetterkarten als SVG-Graphik

Die Dateinamen werden zusammen mit dem HTML-Tag <img> verwendet, zum Beispiel:

<img src="$relative_url/images/$presentweather(ww=$ww,n=$n,night=$night).belchertown_icon" />

wmo_symbol, svg_icon und stationwerden dagegen direkt verwendet, zum Beispiel:

$presentweather(ww=$ww,n=$n,night=$night).wmo_symbol(width=30)

Wird eine Farbe angegeben, wird das ganze Symbol einfarbig in dieser Farbe dargestellt. Wird keine Farbe angegeben, wird das Symbol in der Originalfarbgebung (ggf. mehrfarbig) dargestellt.

Ebenso wird wi_icon direkt verwendet, zum Beispiel:

$presentweather(ww=$ww,n=$n,night=$night).wi_icon

Beispiele

  • Regen

    Anstelle der Zahl 61 kann eine Variable benutzt werden. Dateinamen werden zusammen mit <img> verwendet

    <img src="$station.station_url/images/$presentweather(ww=61).svg_icon_filename" />

    Ergebnis:

  • wolkiges Wetter

    Anstelle der Zahl kann eine Variable benutzt werden, die die aktuelle Wolkenbedeckung in Prozent enthält. SVG-Graphiken werden direkt eingefügt.

    $presentweather(n=50,night=False).svg_icon
$presentweather(n=50,night=False).text

    Ergebnis:

    wolkig

  • WMO-Symbol für Regen nach Gewitter

    Anstelle der Zahl 91 kann auch hier eine Variable genutzt werden. width=50 skaliert die Graphik auf eine Größe von 50px.

    $presentweather(ww=91).wmo_symbol(width=50)

    Ergebnis:

Symboltabelle als Beispiel

Als Beispiel dient hier ein Template, das eine Tabelle der ganzen Symbole erzeugt, die mit $presentweather() dargestellt werden können. Das ist natürlich nicht der eigentliche Verwendungszweck, bietet aber die Gelegenheit, alle Möglichkeiten zu zeigen.

<!DOCTYPE html>
#set $font_url = '//fonts.googleapis.com/css?family=Roboto%3A300%2C400%2C700&#038;ver=1.0'
#set $wi_url = '//cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css?ver=4.7.4'
#set $bootstrap_url = '//stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'
#set global $belchertown_icon_url = "https://www.woellsdorf-wetter.de/images"
#set global $dwd_icon_url = "https://www.woellsdorf-wetter.de/dwd/wettericons"
#set global $aeris_icon_url = "https://cdn.aerisapi.com/wxicons/v2"
#set custom_css_exists = True
<html lang="$lang">
  <head>
        <link rel='stylesheet' href='$font_url' type='text/css' media='all' />
        <link rel='stylesheet' href='$wi_url' type='text/css' media='all' />
        <link rel='stylesheet' href='$bootstrap_url' type='text/css' media='all' />
        <style>
          html { 
          }
          body {
            font-family: Roboto, sans-serif;
            font-size: 18px;
            font-weight: 300;
            line-height: 1.625;
            margin: 0;
          }
          table {
            border-collapse: collapse;
            border-spacing: 0;
            #line-height: 2;
            width: 100%;
          }
          tbody {
          }
          th {
            /* top right bottom left */
            padding: 0.25em 0.5em 0.25em 0.5em;
          }
          td {
            /* top right bottom left */
            padding: 0.25em 0.5em 0.25em 0.5em;
          }
          .wi-size {
            font-size: 35px;
            line-height: 1;
          }
        </style>
  </head>
  <body>
    <h1>Wettersymbole für \$presentweather()</h2>
    <h2>Wetterzustand</h2>
    <table class="table-striped" cellpadding="5px">
      <tr>
        <th>ww</th>
        <th>Belchertown</th>
        <th>DWD</th>
        <th>Aeris</th>
        <th>E. Flowers</th>
        <th>WMO</th>
        <th>ww</th>
        <th>Beschreibung</th>
      </tr>
      #for $ww in range(0,100)
        <tr>
          <td>$('%02d' % $ww)</td>
          <td>
            #if $ww>3 and $ww not in (5,6,7,8,14,15,16,20,21,22,23,24,25,26,27,28,29)
            #set $fn=$presentweather($ww).belchertown_icon
            <img src="$belchertown_icon_url/$fn" width="50px" title="$fn" />
            #else if $ww==0
            #set $fn=$presentweather($ww,n=0,night=False).belchertown_icon
            <img src="$belchertown_icon_url/$fn" width="50px" title="$fn" />
            #set $fn=$presentweather($ww,n=0,night=True).belchertown_icon
            <img src="$belchertown_icon_url/$fn" width="50px" title="$fn" />
            #else
            <span title="Bei diesem Code ist das passende
Bewölkungssymbol nach dem 
Parameter n darzustellen.">Bewölkung</span>
            #end if
          </td>
          <td>
            #if $ww>3
            #set $fn=$presentweather($ww).dwd_icon
            <img src="$dwd_icon_url/$fn" width="40px" title="$fn" />
            #else if $ww==0
            #set $fn=$presentweather($ww,n=0).dwd_icon
            <img src="$dwd_icon_url/$fn" width="40px" title="$fn" />
            #else
            <span title="Bei diesem Code ist das passende
Bewölkungssymbol nach dem 
Parameter n darzustellen.">Bewölkung</span>
            #end if
          </td>
          <td>
            #if $ww>3
            #set $fn=$presentweather($ww).aeris_icon
            <img src="$aeris_icon_url/$fn" width="40" title="$fn" />
            #else if $ww==0
            #set $fn=$presentweather($ww,n=0,night=False).aeris_icon
            <img src="$aeris_icon_url/$fn" width="40" title="$fn" />
            #set $fn=$presentweather($ww,n=0,night=True).aeris_icon
            <img src="$aeris_icon_url/$fn" width="40" title="$fn" />
            #else
            <span title="Bei diesem Code ist das passende
Bewölkungssymbol nach dem 
Parameter n darzustellen.">Bewölkung</span>
            #end if
          </td>
          <td>
            #if $ww>3
            <span class="wi-size">$presentweather($ww).wi_icon</span>
            #else if $ww==0
            <span class="wi-size">$presentweather($ww,n=0,night=False).wi_icon
            $presentweather($ww,n=0,night=True).wi_icon</span>
            #end if
          </td>
          <td>$presentweather($ww).wmo_symbol(width=40)</td>
          <td>$('%02d' % $ww)</td>
          <td>$presentweather($ww).text</td>
        </tr>
      #end for
    </table>
    <h2>Bewölkung</h2>
    <table class="table-striped" cellpadding="5px">
      <tr>
        <th>N</th>
        <th>Belchertown</th>
        <th>DWD</th>
        <th>Aeris</th>
        <th>E. Flowers</th>
        <th>WMO</th>
        <th>Okta</th>
        <th>Beschreibung</th>
      </tr>
      #for $n in (0,12.5,25,37.5,50,62.5,75,87.5,100,112.5,125):
        <tr>
          <td>$presentweather(n=$n).n</td>
          <td>
            #set $fn=$presentweather(n=$n,night=False).belchertown_icon
            <img src="$belchertown_icon_url/$fn" width="50px" title="$fn" />
            #set $fn=$presentweather(n=$n,night=True).belchertown_icon
            <img src="$belchertown_icon_url/$fn" width="50px" title="$fn" />
          </td>
          <td>
            #set $fn=$presentweather(n=$n).dwd_icon
            <img src="$dwd_icon_url/$fn" width="40px" title="$fn" />
          </td>
          <td>
            #set $fn=$presentweather(n=$n,night=False).aeris_icon
            <img src="$aeris_icon_url/$fn" width="40" title="$fn" />
            #set $fn=$presentweather(n=$n,night=True).aeris_icon
            <img src="$aeris_icon_url/$fn" width="40" title="$fn" />
          </td>
          <td>
            <span class="wi-size">$presentweather(n=$n,night=False).wi_icon</span>
            <span class="wi-size">$presentweather(n=$n,night=True).wi_icon</span>
          </td>
          <td>$presentweather(n=$n).wmo_symbol(width=30)</td>
          <td>$presentweather(n=$n).okta</td>
          <td>$presentweather(n=$n).text</td>
        </tr>
      #end for
    </table>
  </body>
</html>

Das Ergebnis ist hier zu sehen.

Add a custom footer
Add a custom sidebar
Clone this wiki locally