Skip to content

$presentweather() (English)

Jump to bottom Edit New page
roe-dl edited this page Sep 11, 2024 · 1 revision

The weather forecast as well as some measuring instruments provide a code "ww". It stand for the actual weather as standardized by the WMO. There is an icon accompanied with the code. There are also icons for the cloud coverage.

The searchlist extension $presentweather() provides symbols and icons for the present weather "ww" or "wawa" and the cloud coverage "N". Symbols that are image files (.png) are to be saved on the server and referenced using the <img>. The symbols of Erik Flowers are a character set (font), which has to be referenced in the <head> section of the web page using <link>. The WMO symbols and SVG icons are vector graphics, which can be included into the page directly. You find an example below.

Symbol overview

cloud coverage symbols

image

Symbols for present weather

The list is too long to present here. You will find an overview on the wiki page Wettersymbole (Icons) and the overview page Wetterzustand. Here you find examples

SVG-Icons

glace ice fog drizzle freezing drizzle rain freezing rain sleet snow hail thunderstorm wind, storm 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-Symbols

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

Configuration

In skin.conf include the following:

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

Is there already a key search_list_extensions, add the value at the end, separated by a comma

Using in skins

$presentweather() is used as a tag. Parameters are "ww" (or "wawa") and/or the cloud coverage "N". Is there a day and night version of the symbol, you will have to specify this as well.

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

The parameters are:

  • ww: the present weather code or a list of them, of which the "worst" is used
  • n: cloud coverage in percent (only for $ww<4 and $ww==18 required)
  • night: True, for the night symbol
  • wawa: the present weather code wawa or a list of them, of which the "worst" is used
  • In case of station as attr more parameters can be used.

All parameters are optional. At least one of ww, n und wawa has to be other than None. If ww as well as wawa are present, ww is used and wawa is ignored. n is used, if ww and wawa are None or less than 4.

attr is one of the following:

  • ww: the present weather code, which is selected out of the list
  • text: description of the weather
  • belchertown_icon: file name of the icon of the Belchertown icon set
  • dwd_icon: file name of the icon of the DWD icon set
  • aeris_icon: file name of the icon of the Aeris icon set
  • wi_icon: icon out of the icon set of Erik Flowers
  • svg_icon: weather icon in SVG vector image format
  • svg_icon($width=128,$x=None,$y=None,$with_tooltip=True): weather icon in SVG vector format including size
  • svg_icon_filename: file name of the SVG icon out of the weather symbol set in weathericons
  • wmo_symbol: meteorological symbol of the present weather
  • wmo_symbol($width,color=$color): symbol of the present weather including size and color
  • n: cloud coverage (if n was provided only)
  • okta: cloud coverage in Okta (if n was provided only)
  • station: station model in SVG vector format

The file names are used together with HTML tag <img>, for example:

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

wmo_symbol, svg_icon and station are used directly:

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

If a color is specified, the symbol is in that color only, otherwise it is presented in original colors.

The same way wi_icon is used, for example:

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

Examples

  • Rain

    Instead of the number 61 a variable can be used. File names are used together with <img>.

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

    Ergebnis:

  • cloudy weather

    Instead of the number a variable can be used. SVG graphics are included directly:

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

    Result:

    cloudy

  • WMO symbol rain after thunderstorm

    Instead of the number 91 a variable can be used. width=50 scales the image to 50px.

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

    Result:

Symbol table as example

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>

The result is shown here.

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