Skip to content

Kleines Wetterbild

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

Unter dem Stichwort "Homepage-Wetter" bieten einige Dienste so kleine Bildchen an, die grundlegende Wetterdaten enthalten. Wie können wir unseren Nutzern etwas Ähnliches bieten, aber mit den aktuellen Daten unserer Wetterstation? Hier ist ein Beispiel für ein WeeWX-Template, das eine SVG-Datei erzeugt, die wiederum die Leute in ihre Homepage als Bild einbinden können.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
##
## configuration
#set $use_presentweather_tag = True
#set $use_png = False
#set $text_color = "#333"
#set $background_color = "#FFFFFF"
#set $background_opacity = 0
#set $credits = "© Wetterstation Wöllsdorf"
##
## temperature color
#def get_outTemp_color(x)
#if $x is not None
#set $outTemp=$x.degree_C.raw
#if $outTemp is not None
#if $outTemp <= -17.8 
#return "#1278c8",1
#else if $outTemp <= -3.8
#return "#30bfef",1
#else if $outTemp <= 0 
#return "#1fafdd",1
#else if $outTemp <= 4.4
#return "#00ACDF",1
#else if $outTemp <= 10
#return "#71bc3c",1
#else if $outTemp <= 12.7
#return "#5AB329",0.8
#else if $outTemp <= 18.3
#return "#83AD2D",1
#else if $outTemp <= 21.1
#return "#CEB862",1
#else if $outTemp <= 23.8
#return "#FFAE00",0.9
#else if $outTemp <= 26.6
#return "#FF9900",0.9
#else if $outTemp <= 29.4
#return "#FF7F00",1
#else if $outTemp <= 32.2
#return "#FF4F00",0.9
#else if $outTemp <= 35
#return "#FF4545",1
#else if $outTemp <= 43.3
#return "#FF6868",1
#else 
#return "#DA7171",1
#end if
#end if
#end if
#return $text_color,1
#end def
## UV index color
#def get_UV_color(x)
#if $x is not None
#set $uv=x.raw
#if uv<=2.5
#return "#8CD600",1
#else if uv<=5.5
#return "#F9E814",1
#else if uv<=7.5
#return "#F77F00",1
#else if uv<=10.5
#return "#EF3340",1
#else
#return "#9663C4",1
#end if
#end if
#return "#000000",1 
#end def
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 300 300">
  <style>
    text {
        font-family: Roboto, sans-serif;
        font-weight: 300;
        line-height: 1.625;
        margin: 0;
    }
    text.big {
        font-size: 40px;
    }
    text.small {
        font-size: 24px;
    }
    text.timestamp {
        font-size: 12px;
    }
    text.outTemp {
        font-size: 56px;
    }
    text.forecast {
        font-size: 18px;
    }
  </style>
  <a href="$station.station_url/" hreflang="de" target="_blank">
  <rect x="0" y="0" width="300" height="300" stroke="none" fill="$background_color" fill-opacity="$background_opacity" />
  #if use_presentweather_tag
  #set $wxicon_binder = $presentweather(ww=int($current.ww.raw),n=$hour($data_binding='dwd_binding').cloudcover.avg.raw,night=$almanac.sun.alt<0)
  #set $wxicon_file = $wxicon_binder.belchertown_icon
  #set $wxicon_text = $wxicon_binder.text
  #else
  #set $wxicon_file = $current_obs_icon
  #set $wxicon_text = $current_obs_text
  #end if
  #if use_png
  <image id="wxicon" href="$station.station_url/images/$wxicon_file" width="128" height="100" x="5" y="5">
    <title>$wxicon_text</title>
  </image>
  #else
  $wxicon_binder.svg_icon(width=128,x=5,y=5)
  #end if
  ## temperature readings
  #set $outTemp_color,$outTemp_opacity = $get_outTemp_color($current.outTemp)
  <text x="260" y="60" class="outTemp" fill="$outTemp_color" fill-opacity="$outTemp_opacity" text-anchor="end">$current.outTemp.format(add_label=False)</text>
  <text x="295" y="30" class="small" fill="$outTemp_color" fill-opacity="$outTemp_opacity" text-anchor="end">$unit.label.outTemp.strip()</text>
  <text x="295" y="95" class="small" fill="$text_color" text-anchor="end">gefühlt $current.THSW</text>
  ## UV
  #if $current.UV.raw is not None
  #set $uv_color,$uv_opacity = $get_UV_color($current.UV)
  <text x="138" y="130" class="small" fill="$uv_color" fill-opacity="$uv_opacity">UV$current.UV.format("%.0f",add_label=False)</text>
  #end if
  ## rain
  <text x="295" y="130" class="small" fill="#7CB5EC" text-anchor="end"><title>Regen heute</title>$day.rain.sum</text>
  ## wind
  <text x="34" y="130" class="small" fill="$text_color">$current.windSpeed</text>
  #set $dir=$current.windDir.raw
  #if $dir is not None 
  <g transform="rotate($dir,17,121)" stroke-linecap="round">
    <title>$current.windDir.ordinal_compass</title>
    <path stroke="$text_color" stroke-width="2" fill="none"
    d="M17,121 m0,-12 v24" />
    <path stroke="$text_color" stroke-width="2" fill="$text_color"
    d="M17,121 m0,12 l-3,-8 h6 z" />
  </g>
  #end if
  ## timestamp
  <text x="295" y="295" class="timestamp" fill="$text_color" text-anchor="end">$current.dateTime.format("%d.%m. %H:%M")</text>
  ## forecast
  <rect x="5" y="145" width="290" height="130" stroke="$text_color" stroke-width="2" fill="none" />
  <text x="10" y="240" class="forecast" fill="$text_color">max</text>
  <text x="10" y="265" class="forecast" fill="$text_color">min</text>
  <text x="290" y="240" class="forecast" fill="$text_color" text-anchor="end">°C</text>
  <text x="290" y="265" class="forecast" fill="$text_color" text-anchor="end">°C</text>
  #for $ii in range(3)
  #set $xx=$ii*80+50
  #set $ago=-$ii
  #set $tag=('heute','morgen','übermorgen')[$ii]
  #set $wxicon_binder = $presentweather(ww=$day($data_binding="dwd_binding",$days_ago=$ago).ww.max,n=$day($data_binding='dwd_binding',$days_ago=$ago).cloudcover.avg.raw,night=False)
  #set $wxicon_file = $wxicon_binder.belchertown_icon
  #set $wxicon_text = $wxicon_binder.text
  #if len($tag)>6
  <text x="$xx" y="165" class="forecast" fill="$text_color" textLength="64" lengthAdjust="spacingAndGlyphs">$tag</text>
  #else
  <text x="$xx" y="165" class="forecast" fill="$text_color" >$tag</text>
  #end if
  #if $use_png
  <image x="$xx" y="172" width="64" height="50" href="$station.station_url/images/$wxicon_file">
    <title>$wxicon_text</title>
  </image>
  #else
  $wxicon_binder.svg_icon(x=$xx,y=172,width=64)
  #end if
  #set $outTemp=$day($data_binding="dwd_binding",$days_ago=$ago).outTemp.max
  #set $outTemp_color,$outTemp_opacity = $get_outTemp_color($outTemp)
  <text x="$xx" y="240" class="forecast" fill="$outTemp_color" fill-opacity="$outTemp_opacity">$outTemp.format(add_label=False)</text>
  #set $outTemp=$day($data_binding="dwd_binding",$days_ago=$ago).outTemp.min
  #set $outTemp_color,$outTemp_opacity = $get_outTemp_color($outTemp)
  <text x="$xx" y="265" class="forecast" fill="$outTemp_color" fill-opacity="$outTemp_opacity">$outTemp.format(add_label=False)</text>
  #end for
  ## credits text
  <text x="5" y="295" class="forecast" fill="$text_color">$credits</text>
  </a>
</svg>

Beispiel für das Ergebnis:

mini weather card

Sollte die direkte Einbindung der SVG-Datei nicht funktionieren, kann man die Datei mit weewx-svg2png noch in eine PNG-Datei verwandeln.

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