HowTo: Wetterdashboard für Anfänger

Schlumperdix · 15. Januar 2026 um 15:55

Hi,

hattest du diesen Beitrag und das Video darin gesehen. Hier erkläre ich das auch nochmal genauer:

Genau, ich habe eine private, lokale Wetterstation

Falls du keine eigene Wetterstation hast, dann ist das hier vielleicht auch was für dich:

Jensito · 16. Januar 2026 um 11:26

Hej Hej,

Leider nein, wie imemr sitze das Problem vor dem Rechner. Jetzt hat es geklappt, danke.

Habe ich mir schon gedacht. Ich habe eine und die Sensoren da auch verwendet, wo ich kann. Ist nur etwas limitiert.

Ich gucke mal welche Daten ich mir noch so aus dem Netz holen kann.

Danke dir

VG

Jens

compoundbow83 · 17. Januar 2026 um 13:23

@Schlumperdix Erst einmal finde ich dein WetterDashboard echt super. Habe davon teile mal in meins übernommen.

Jetzt aber noch eine Frage, woher hast du die Hintergrundbilder für das aktuelle Wetter.

Weil deine Beispielbilder sind ja für Bevölkt ich würde noch gerne das Bild für sonnig mit einblenden. Vielleicht sogar noch für Schnee und Nebel.

Schlumperdix · 17. Januar 2026 um 18:53

Das Hintergrundbild basiert auf dem orignalen .svg’s aus Home-Assistant. Etwas gedreht. Farbe geändert usw…

Hier findest du alle Icons:

compoundbow83 · 17. Januar 2026 um 19:25

Ok dankeschön, das mit der Farbe bekomme ich zwar so nicht hin. Aber Die Icons habe ich jetzt schon mal.

Edit, hab es mit den Farben jetzt doch hinbekommen.

Zingel1986 · 22. Januar 2026 um 14:52

Wow! Vielen dank für diesen Super Thread und den Aufwand, den Ihr hier betreibt. Ich habe mir gerade eine Ecowitt WS90 powered by Shelly bestellt und wollte mir schonmal Ideen für ein Wetterdashboard holen und da bin ich auf das hier gestoßen. Mega Cool!.

Vielen Dank an Alle und vor allem Schlumperdix, die hier so viel beitragen.

Schlumperdix · 22. Januar 2026 um 14:53

Vielen Dank für die Blumen

Optimizer · 30. Januar 2026 um 11:36

Servus Noosi,
sieht sehr sauber aus, gefällt mir die Idee.
Bei mir sieht es aktuell so aus:

- platform: statistics
        name: "Außen Temperatur Min"
        entity_id: sensor.helfer_temperaturen_aussen_mittelwert
        state_characteristic: value_min
        max_age:
            hours: 24
            
      - platform: statistics
        name: "Außen Temperatur Max"
        entity_id: sensor.helfer_temperaturen_aussen_mittelwert
        state_characteristic: value_max
        max_age:
            hours: 24

und in der yaml habe ich hinzugefügt:

      - platform: statistics
        name: "Außen Temperatur Min"
        entity_id: sensor.helfer_temperaturen_aussen_mittelwert
        state_characteristic: value_min
        max_age:
            hours: 24
            
      - platform: statistics
        name: "Außen Temperatur Max"
        entity_id: sensor.helfer_temperaturen_aussen_mittelwert
        state_characteristic: value_max
        max_age:
            hours: 24

Kannst du mir helfen, dass ich auch den Min. und Max-Wert links/rechts unten angezeigt bekomme?!
Hast du die Werte vom aktuellen Tag oder der letzten 24h?
Ich würde die letzten 24h bevorzugen…
Danke.

Noosi · 30. Januar 2026 um 12:23

type: markdown
content: |
  {{ states('sensor.temperature_48') | float | round(1) }} °C
view_layout:
  grid-area: ga-1
card_mod:
  style: |
    ha-card {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      text-align: center;
      padding: 0;
    }

    /* Hauptwert in der Mitte */
    ha-card > * {
      font-size: 80px;
      line-height: 1;
      font-weight: 500;
    }

    /* Oben links – fester Text "Garten" */
    ha-card::before {
      content: "Garten";
      position: absolute;
      top: 8px;
      left: 12px;
      font-size: 22px;
      opacity: 0.8;
    }

    /* Oben rechts – Minuten seit letzter Aktualisierung */
    ha-card::after {
      content: "vor {{ ((as_timestamp(now()) - as_timestamp(states.sensor.temperature_48.last_changed)) / 60) | int }} min";
      position: absolute;
      top: 2px;
      right: 8px;
      font-size: 12px;
      opacity: 0.8;
      font-weight: 500;
    }

    /* Unten links – dynamischer Wert aus input_text.garten_min (blau) */
    ha-markdown::before {
      content: "{{ states('input_text.garten_min') }} °C";
      position: absolute;
      bottom: 8px;
      left: 12px;
      font-size: 16px;
      opacity: 0.9;
      color: #2196F3; /* Blau */
      font-weight: 500;
    }

    /* Unten rechts – dynamischer Wert aus input_text.garten_max (rot) */
    ha-markdown::after {
      content: "{{ states('input_text.garten_max') }} °C";
      position: absolute;
      bottom: 8px;
      right: 12px;
      font-size: 16px;
      opacity: 0.9;
      color: #F44336; /* Rot */
      font-weight: 500;
    }

Interessanter Ansatz bei Dir. Woher kommt der Wert? entity_id: sensor.helfer_temperaturen_aussen_mittelwert - Ich aktuallisiere meine Werte in einem Helper per Automation wenn der Sensor aktuallisiert

compoundbow83 · 31. Januar 2026 um 18:48

Jetzt habe ich doch noch einmal eine Frage dieses mal zum Regenmenge des Jahres im Monat.

mit diesem Code:

type: custom:apexcharts-card
update_interval: 24h
header:
  title: Niederschlag des Jahres
  show: true
  show_states: true
  standard_format: false
  colorize_states: true
graph_span: 12month
span:
  start: year
apex_config:
  chart:
    type: area
    height: 340
    width: 100%
  xaxis:
    type: datetime
    tickAmount: 12
    tickPlacement: between
    labels:
      hideOverlappingLabels: false
      rotate: -45
      rotateAlways: true
      trim: false
      style:
        fontSize: 13px
      datetimeFormatter:
        month: MMM
  plotOptions:
    bar:
      columnWidth: 35%
      borderRadius: 2
  dataLabels:
    enabled: true
  stroke:
    show: true
    width: 0
    curve: smooth
yaxis:
  - min: 0
    max: "|+5|"
series:
  - entity: sensor.regenmenge_monat
    name: Monatlicher Niederschlag
    unit: " mm"
    type: column
    color: "#4b75f1"
    opacity: 1
    group_by:
      duration: 1month
      func: max
grid_options:
  columns: 22
  rows: auto
visibility:
  - condition: numeric_state
    entity: sensor.regenmenge_jahr
    above: 0

Bekomme ich heute am 31.01.2026 diese Ausgabe:

Er zeigt mit für Februar schon einen Balken an mit dem gleichen Wert wie Januar.

für den Sensor sensor.regenmenge_monat habe ich einen Verbrauchszähler angelegt.

Was mache ich denn falsch?

Schlumperdix · 1. Februar 2026 um 12:03

Hi,

ja, ich hatte da auch meinen Struggle mit…

@Osorkon hatte in diesem Thema:

Eine gute Lösung gefunden.

Ich habe mittlerweile aber die Statistikkarte in Verwenung mit dieser Config:

chart_type: bar
period: month
type: statistics-graph
entities:
  - sensor.gw1100a_total_rain
stat_types:
  - change
hide_legend: false
title: Regen Jahresmenge
grid_options:
  columns: 24
  rows: 6
min_y_axis: 0
max_y_axis: 35
logarithmic_scale: false
fit_y_data: true
days_to_show: 365

Das funktioniert für mich gut.

Hier mal eine (mMn) Verbesserung des Codes für die Wetterlage:

Der Helfer für Wetterlage “sensor.wetterlage_wunderground“ wurde überarbeitet:

Es finden sich mehr wetterlagen die von WU übermittelt werden
Ich verwende ein dictionary anstatt alles mittels if/else abzufragen
Abfangen / bzw suchen nach Wetterlagen die Fehlen) → kann man auch entfernen
WU setzt den Wert “Fair” für Schön oder Freundlich sowohl Tags als auch in klaren Nächten (also Nachts). Es wird sun.sun und das Attribut “below-horizon” abgefragt und dann passend übersetzt. (Ansonsten müsste man Nachts auch mit einer gelben Sonnen Karte leben, wenn WU Fair setzt)

{% set state = states('sensor.web_scrape') %}
{% set mapping = {
    'Sunny': 'Sonnig',
    'Mostly Sunny': 'Überwiegend sonnig',
    'Sunny/Wind': 'Sonnig / windig',

    'Fair/Wind': 'Freundlich / windig',
    'Fair': 'Freundlich',

    'Clear/Wind': 'Klare Nacht / windig',
    'Clear': 'Klare Nacht',

    'Windy': 'Windig',
    'Hail': 'Hagel',

    'Rain': 'Regnerisch',
    'Rain Shower': 'Schauer',
    'Light Rain Shower': 'Leichte Schauer',
    'Showers in the Vicinity': 'Örtliche Schauer',
    'Light Rain': 'Leichter Regen',
    'Light Rain with Thunder': 'Leichter Regen und Gewitter',
    'Light Drizzle': 'Leichter Nieselregen',
    'Drizzle': 'Nieselregen',
    'Rain Shower/Wind': 'Regenschauer / windig',
    'Light Rain Shower/Wind': 'Leichte Schauer / windig',
    'Rain/Wind': 'Regen / windig',
    'Light Rain/Wind': 'Leichter Regen / windig',
    'Rain/Freezing Rain/Wind': 'Gefrierender Regen / windig',
    'Rain/Freezing': 'Gefrierender Regen',
    'Light Freezing Rain': 'Leichter gefrierender Regen',
    'Freezing Rain': 'Gefrierender Regen',
    'Light Freezing Drizzle': 'Gefrierender Nieselregen',
    'Heavy Rain': 'Starkregen',
    'Heavy Rain Shower': 'Starkregenschauer',

    'Thunder in the Vicinity': 'Örtliche Gewitter',
    'Thunderstorms': 'Gewitter',

    'Snow Shower': 'Schnee Schauer',
    'Light Snow': 'Leichter Schneefall',
    'Snowy': 'Schnee',
    'Snow': 'Schnee',
    'Light Snow Shower': 'Leichte Schneeschauer',
    'Heavy Snow': 'Starker Schneefall',
    'Heavy Snow Shower': 'Starke Schneeschauer',
    'Wintry Mix': 'Winterlich',
    'Snow/Wind': 'Schnee / windig',
    'Rain and Snow': 'Schneeregen',

    'Cloudy': 'Bewölkt',
    'Partly Cloudy': 'Teilweise bewölkt',
    'Mostly Cloudy': 'Überwiegend bewölkt',
    'Cloudy/Wind': 'Bewölkt / windig',
    'Mostly Cloudy/Wind': 'Überwiegend bewölkt / windig',
    'Partly Cloudy/Wind': 'Teilweise bewölkt / windig',

    'Mist': 'Nebelig',
    'Fog': 'Nebel',
    'Haze': 'Dunst',
    'Drizzle and Fog': 'Nieselregen und Nebel'
} %}

{% if states('sensor.web_scrape') in ['unavailable', 'unknown'] %}
    Unbekannt
{% else %}
    {% set translated = mapping.get(state, 'FEHLT: ' ~ states('sensor.web_scrape')) %}
    {% if translated == 'Freundlich' and is_state('sun.sun', 'below_horizon') %}
        Klare Nacht
    {% elif translated == 'Freundlich / windig' and is_state('sun.sun', 'below_horizon') %}
        Klare Nacht / windig
    {% else %}
        {{ translated }}
    {% endif %}
{% endif %}

Außerdem wurde auch die custom Button Card überarbeitet:

Deutliche Code Verschlankung. Es muss nicht mehr für jeden Zweig (Icon, card, label, background-image, background-color, color) alle Übersetzungen aus dem Helfer wiederholt werden.

Es werden anfangs die Variablen definiert und später im Code immer wieder verwendet.

Zusammenfassung

type: custom:button-card
entity: sensor.wetterlage_wunderground
layout: icon_name_state
show_state: true
show_name: false
show_label: true

# Variablen: Wetterzustaende

variables:
  is_light_rain: >
    [[[
        return [
            "Leichter Nieselregen",
            "Nieselregen",
            "Leichte Schauer",
            "Leichter Regen"
        ].includes(entity.state);
    ]]]
  is_rain: >
    [[[
        return [
            "Regnerisch",
            "Schauer",
            "Örtliche Schauer",
            "Starkregen",
            "Starkregenschauer"
        ].includes(entity.state);
    ]]]
  is_cloudy: >
    [[[
        return [
            "Bewölkt",
            "Überwiegend bewölkt"
        ].includes(entity.state);
    ]]]
  is_partly_cloudy: >
    [[[
        return [
            "Teilweise bewölkt"
        ].includes(entity.state);
    ]]]
  is_cloudy_windy: >
    [[[
        return [
            "Windig",
            "Überwiegend bewölkt / windig",
            "Teilweise bewölkt / windig",
            "Bewölkt / windig"
        ].includes(entity.state);
    ]]]
  is_rainy_windy: >
    [[[
        return [
            "Regenschauer / windig",
            "Leichte Schauer / windig",
            "Regen / windig"
        ].includes(entity.state);
    ]]]
  is_sunny_windy: >
    [[[
        return [
            "Freundlich / windig",
            "Sonnig / windig"
        ].includes(entity.state);
    ]]]
  is_foggy: >
    [[[
        return [
            "Nebelig",
            "Nebel",
            "Nieselregen und Nebel",
            "Dunst"
        ].includes(entity.state);
    ]]]
  is_clear_night: >
    [[[
        return [
            "Klare Nacht"
        ].includes(entity.state);
    ]]]
  is_clear_night_windy: >
    [[[
        return [
            "Klare Nacht / windig"
        ].includes(entity.state);
    ]]]
  is_snowy: >
    [[[
        return [
            "Schnee Schauer",
            "Schnee",
            "Schneeregen",
            "Winterlich",
            "Schnee / windig",
            "Leichter Schneefall",
            "Leichte Schneeschauer",
            "Starker Schneefall",
            "Starke Schneeschauer"
        ].includes(entity.state);
    ]]]
  is_black_ice: >
    [[[
        return [
            "Gefrierender Regen / windig",
            "Gefrierender Regen",
            "Gefrierender Nieselregen",
            "Leichter gefrierender Regen"
        ].includes(entity.state);
    ]]]
  is_hail: >
    [[[
        return [
            "Hagel"
        ].includes(entity.state);
    ]]]
  is_light_t_storm: >
    [[[
        return [
            "Leichter Regen und Gewitter"
        ].includes(entity.state);
    ]]]
  is_partly_t_storm: >
    [[[
        return [
            "Örtliche Gewitter"
        ].includes(entity.state);
    ]]]
  is_t_storm: >
    [[[
        return [
            "Gewitter"
        ].includes(entity.state);
    ]]]
  is_fair: >
    [[[
        return [
            "Freundlich"
        ].includes(entity.state);
    ]]]
  is_sunny: >
    [[[
        return [
            "Sonnig",
            "Überwiegend sonnig"
        ].includes(entity.state);
    ]]]

icon: |
  [[[
    if (variables.is_light_rain) return "mdi:weather-rainy";
    if (variables.is_rain) return "mdi:weather-pouring";
    if (variables.is_cloudy) return "mdi:weather-cloudy";
    if (variables.is_partly_cloudy) return "mdi:weather-partly-cloudy";
    if (variables.is_cloudy_windy) return "mdi:weather-windy";
    if (variables.is_rainy_windy) return "mdi:weather-windy";
    if (variables.is_sunny_windy) return "mdi:weather-windy";
    if (variables.is_foggy) return "mdi:weather-fog";
    if (variables.is_clear_night) return "mdi:weather-night";
    if (variables.is_clear_night_windy) return "mdi:weather-windy";
    if (variables.is_snowy) return "mdi:weather-snowy-heavy";
    if (variables.is_black_ice) return "mdi:snowflake-alert";
    if (variables.is_hail) return "mdi:weather-hail";
    if (variables.is_light_t_storm) return "mdi:weather-lightning-rainy";
    if (variables.is_partly_t_storm) return "mdi:weather-partly-lightning";
    if (variables.is_t_storm) return "mdi:weather-lightning";
    return "mdi:weather-sunny";
  ]]]

styles:
  card:
    - background-color: |
        [[[
          if (variables.is_light_rain) return "#122f5a";
          if (variables.is_rain) return "#122f5a";
          if (variables.is_cloudy) return "#25252d";
          if (variables.is_partly_cloudy) return "#25252d";
          if (variables.is_cloudy_windy) return "#487890";
          if (variables.is_rainy_windy) return "#122f5a";
          if (variables.is_sunny_windy) return "#e4b532";
          if (variables.is_foggy) return "#787878";
          if (variables.is_clear_night) return "#0b084c";
          if (variables.is_clear_night_windy) return "#0b084c";
          if (variables.is_snowy) return "#b1b1b1";
          if (variables.is_black_ice) return "#b1b1b1";
          if (variables.is_hail) return "#b1b1b1";
          if (variables.is_light_t_storm) return "#04152d";
          if (variables.is_partly_t_storm) return "#04152d";
          if (variables.is_t_storm) return "#04152d";
          return "#e4b532";
        ]]]
    - color: |
        [[[
          if (variables.is_sunny) return "#a73d03";
          if (variables.is_sunny_windy) return "#a73d03";
          if (variables.is_fair) return "#a73d03";
          if (variables.is_snowy) return "#2a374b";
          if (variables.is_black_ice) return "#2a374b";
          if (variables.is_hail) return "#2a374b";
          return "#b1b1b1";
        ]]]
    - background-image: |
        [[[
          if (variables.is_sunny) return "url(/local/bg_img/weather-partly-cloudy22.png)";
          if (variables.is_sunny_windy) return "url(/local/bg_img/weather-partly-cloudy22.png)";
          if (variables.is_fair) return "url(/local/bg_img/weather-partly-cloudy22.png)";
          return "url(/local/bg_img/weather-partly-cloudy10.png)";
        ]]]
    - background-repeat: no-repeat
    - background-position: right -10px top 23px
    - background-size: 130px
  icon:
    - color: |
        [[[
          if (variables.is_sunny) return "#a73d03";
          if (variables.is_sunny_windy) return "#a73d03";
          if (variables.is_fair) return "#a73d03";
          if (variables.is_snowy) return "#2a374b";
          if (variables.is_black_ice) return "#2a374b";
          if (variables.is_hail) return "#2a374b";
          return "#e1e1e1";
        ]]]
    - padding: 0
    - margin: 0 0 0 -40px
  name:
    - display: flex
    - align-items: center
    - font-weight: normal
    - width: 100%
    - font-size: 22px
    - white-space: wrap
    - text-overflow: unset
    - text-align: left
    - padding: 0 10px 0 0
    - margin: 0 0 0 -70px
  label:
    - margin: "-160px 0 0 0"
    - text-align: right
    - width: 100%
    - padding: 0 19px 0 0
label: Aktuelles Wetter
tap_action: none
hold_action: none
double_tap_action: none
section_mode: true
grid_options:
  rows: 2
  columns: full

Die alte Variante funktioniert natürlich auch weiterhin..

Schlumperdix · 3. Februar 2026 um 18:58

Ich habe mal den Code für die Windrichtung in der Custom Button Card angepasst. Der oben gezeigte Helfer hat sich nicht verändert.

Warum?

Code wurde deutlich verschlankt.
Keine unnötigen if-Abfragen mehr.
Keine verschiedenen Symbole für verschiendene Windrichtungen zugewiesen.

Nur 1 Symbol, das abhängig von der Windrichtung mit einer schönen Animation gedreht wird.
Wenn der Sensor keine Zahl ausgibt (also z.B. bei unavailable) wird das Symbol rot und zeigt nach oben (0 Degree)

Gerne mitnehmen wer’s gebrauchen kann.

type: custom:button-card
entity: sensor.windrichtung
layout: icon_name_state
show_state: true
show_label: true
show_name: false
triggers_update:
  - sensor.gw1100a_wind_direction
variables:
  winkel: |
    [[[
      /* SLANG: In eine Fließkommazahl umwandeln und Status des Sensors in die Varibale laden */
      return parseFloat(states['sensor.gw1100a_wind_direction'].state);
    ]]]
icon: mdi:arrow-up-thin-circle-outline
styles:
  icon:
    - color: |
        [[[
          /* SLANG: Prüfen ob es eine gültige Zahl ist, wenn nicht wird der Pfeil rot. */
          return (isNaN(variables.winkel)) ? '#f00' : '#e1e1e1';
        ]]]
    - padding: 0
    - margin: 0 0 0 -40px
    - transition: all 0.5s ease
    - transform: |
        [[[
          /* SLANG: Prüfen ob es eine gültige Zahl ist, wenn nicht zeigt der Pfeil nach oben. */
          return (isNaN(variables.winkel)) ? 'rotate(0deg)' : `rotate(${variables.winkel}deg)`;
        ]]]
  card:
    - background-color: "#323232"
    - background-image: url(/local/bg_img/compass-rose-tn10.png)
    - background-repeat: no-repeat
    - background-position: right -20px top 29px
    - background-size: 160px
    - color: "#e1e1e1"
  name:
    - display: flex
    - align-items: center
    - font-weight: normal
    - width: 100%
    - font-size: 22px
    - white-space: wrap
    - text-overflow: unset
    - text-align: left
    - padding: 0 10px 0 0
    - margin: 0 0 0 -70px
  label:
    - margin: "-160px 0 0 0"
    - text-align: right
    - width: 100%
    - padding: 0 19px 0 0
label: Windrichtung
tap_action: none
hold_action: none
double_tap_action: none
section_mode: true
grid_options:
  rows: 2
  columns: full

TomGross · 25. Februar 2026 um 16:25

Wow - cooles Dashboard und tolle Anleitung. Das erspart viel Entwicklungsarbeit.

Danke dafür!

Gruß

Tom

pfaelzerbube · 30. März 2026 um 16:17

Meine Kachel mit dem aktuell Wetterzustand ändert leider weder die Hintergrundfarbe noch das Symbol. Lediglich der Text ändert von von “sonnig” auf “bewölkt” usw.

Was mach ich da falsch?

Schlumperdix · 30. März 2026 um 17:54

Gute Frage…

Wenn sich der Zustand ändert, scheint das Scrapen der Daten schonmal zu funktionieren… Dann kann eigentlich nur noch ein Problem beim abgleich der Daten des Helfers und dem Script in der Button Card bestehen…

Aktuell sieht es so aus:
Helfer (sensor.wetterlage):

{% set state = states('sensor.web_scrape') %}
{% set mapping = {
    'Sunny': 'Sonnig',
    'Mostly Sunny': 'Überwiegend sonnig',
    'Sunny/Wind': 'Sonnig / windig',

    'Fair/Wind': 'Freundlich / windig',
    'Fair': 'Freundlich',

    'Clear/Wind': 'Klare Nacht / windig',
    'Clear': 'Klare Nacht',
    
    'Windy': 'Windig',
    'Hail': 'Hagel',

    'Rain': 'Regnerisch',
    'Rain Shower': 'Schauer',
    'Light Rain Shower': 'Leichte Schauer',
    'Showers in the Vicinity': 'Örtliche Schauer',
    'Light Rain': 'Leichter Regen',
    'Light Rain with Thunder': 'Leichter Regen und Gewitter',
    'Light Drizzle': 'Leichter Nieselregen',
    'Drizzle': 'Nieselregen',
    'Heavy Rain': 'Starkregen',
    'Heavy Rain Shower': 'Starkregenschauer',

    'Rain Shower/Wind': 'Regenschauer / windig',
    'Light Rain Shower/Wind': 'Leichte Schauer / windig',
    'Rain/Wind': 'Regen / windig',
    'Light Rain/Wind': 'Leichter Regen / windig',
    'Rain/Freezing Rain/Wind': 'Gefrierender Regen / windig',

    'Thunder in the Vicinity': 'Örtliche Gewitter',
    'Thunderstorms': 'Gewitter',

    'Snow Shower': 'Schnee Schauer',
    'Light Snow': 'Leichter Schneefall',
    'Snowy': 'Schnee',
    'Snow': 'Schnee',
    'Light Snow Shower': 'Leichte Schneeschauer',
    'Heavy Snow': 'Starker Schneefall',
    'Heavy Snow Shower': 'Starke Schneeschauer',
    'Wintry Mix': 'Winterlich',
    'Snow/Wind': 'Schnee / windig',
    'Rain and Snow': 'Schneeregen',
    'Freezing Rain': 'Gefrierender Regen',
    'Rain/Freezing Rain': 'Gefrierender Regen',
    'Rain/Freezing': 'Gefrierender Regen',
    'Light Freezing Rain': 'Leichter gefrierender Regen',
    'Light Rain/Freezing Rain': 'Leichter gefrierender Regen',
    'Light Freezing Drizzle': 'Gefrierender Nieselregen',

    'Cloudy': 'Bewölkt',
    'Partly Cloudy': 'Teilweise bewölkt',
    'Mostly Cloudy': 'Überwiegend bewölkt',
    'Cloudy/Wind': 'Bewölkt / windig',
    'Mostly Cloudy/Wind': 'Überwiegend bewölkt / windig',
    'Partly Cloudy/Wind': 'Teilweise bewölkt / windig',

    'Mist': 'Nebelig',
    'Fog': 'Nebel',
    'Haze': 'Dunst',
    'Drizzle and Fog': 'Nieselregen und Nebel'
} %}

{% if states('sensor.web_scrape') in ['unavailable', 'unknown'] %}
    Unbekannt
{% else %}
    {% set translated = mapping.get(state, 'FEHLT: ' ~ states('sensor.web_scrape')) %}
    
    {% if translated == 'Freundlich' and is_state('sun.sun', 'below_horizon') %}
        Klare Nacht
    {% elif translated == 'Freundlich / windig' and is_state('sun.sun', 'below_horizon') %}
        Klare Nacht / windig
    {% else %}
        {{ translated }}
    {% endif %}
{% endif %}

Das ist die ButtonCard:

type: custom:button-card
entity: sensor.wetterlage
layout: icon_name_state
show_state: true
show_name: false
show_label: true
variables:
  is_light_rain: |
    [[[
        return [
            "Leichter Nieselregen",
            "Nieselregen",
            "Leichte Schauer",
            "Leichter Regen"
        ].includes(entity.state);
    ]]]
  is_rain: |
    [[[
        return [
            "Regnerisch",
            "Schauer",
            "Örtliche Schauer",
            "Starkregen",
            "Starkregenschauer"
        ].includes(entity.state);
    ]]]
  is_cloudy: |
    [[[
        return [
            "Bewölkt",
            "Überwiegend bewölkt"
        ].includes(entity.state);
    ]]]
  is_partly_cloudy: |
    [[[
        return [
            "Teilweise bewölkt"
        ].includes(entity.state);
    ]]]
  is_cloudy_windy: |
    [[[
        return [
            "Windig",
            "Überwiegend bewölkt / windig",
            "Teilweise bewölkt / windig",
            "Bewölkt / windig"
        ].includes(entity.state);
    ]]]
  is_rainy_windy: |
    [[[
        return [
            "Regenschauer / windig",
            "Leichte Schauer / windig",
            "Regen / windig"
        ].includes(entity.state);
    ]]]
  is_sunny_windy: |
    [[[
        return [
            "Freundlich / windig",
            "Sonnig / windig"
        ].includes(entity.state);
    ]]]
  is_foggy: |
    [[[
        return [
            "Nebelig",
            "Nebel",
            "Nieselregen und Nebel",
            "Dunst"
        ].includes(entity.state);
    ]]]
  is_clear_night: |
    [[[
        return [
            "Klare Nacht"
        ].includes(entity.state);
    ]]]
  is_clear_night_windy: |
    [[[
        return [
            "Klare Nacht / windig"
        ].includes(entity.state);
    ]]]
  is_snowy: |
    [[[
        return [
            "Schnee Schauer",
            "Schnee",
            "Schneeregen",
            "Winterlich",
            "Schnee / windig",
            "Leichter Schneefall",
            "Leichte Schneeschauer",
            "Starker Schneefall",
            "Starke Schneeschauer"
        ].includes(entity.state);
    ]]]
  is_black_ice: |
    [[[
        return [
            "Gefrierender Regen / windig",
            "Gefrierender Regen",
            "Gefrierender Nieselregen",
            "Leichter gefrierender Regen"
        ].includes(entity.state);
    ]]]
  is_hail: |
    [[[
        return [
            "Hagel"
        ].includes(entity.state);
    ]]]    
  is_light_t_storm: |
    [[[
        return [
            "Leichter Regen und Gewitter"
        ].includes(entity.state);
    ]]]
  is_partly_t_storm: |
    [[[
        return [
            "Örtliche Gewitter"
        ].includes(entity.state);
    ]]]
  is_t_storm: |
    [[[
        return [
            "Gewitter"
        ].includes(entity.state);
    ]]]
  is_fair: |
    [[[
        return [
            "Freundlich"
        ].includes(entity.state);
    ]]]
  is_sunny: |
    [[[
        return [
            "Sonnig",
            "Überwiegend sonnig"
        ].includes(entity.state);
    ]]]
icon: |
  [[[
    if (variables.is_light_rain) return "mdi:weather-rainy";
    if (variables.is_rain) return "mdi:weather-pouring";
    if (variables.is_cloudy) return "mdi:weather-cloudy";
    if (variables.is_partly_cloudy) return "mdi:weather-partly-cloudy";
    if (variables.is_cloudy_windy) return "mdi:weather-windy";
    if (variables.is_rainy_windy) return "mdi:weather-windy";
    if (variables.is_sunny_windy) return "mdi:weather-windy";
    if (variables.is_foggy) return "mdi:weather-fog";
    if (variables.is_clear_night) return "mdi:weather-night";
    if (variables.is_clear_night_windy) return "mdi:weather-windy";
    if (variables.is_snowy) return "mdi:weather-snowy-heavy";
    if (variables.is_black_ice) return "mdi:snowflake-alert";
    if (variables.is_hail) return "mdi:weather-hail";
    if (variables.is_light_t_storm) return "mdi:weather-lightning-rainy";
    if (variables.is_partly_t_storm) return "mdi:weather-partly-lightning";
    if (variables.is_t_storm) return "mdi:weather-lightning";
    return "mdi:weather-sunny";
  ]]]
styles:
  card:
    - background-color: |
        [[[
          if (variables.is_light_rain) return "#122f5a";
          if (variables.is_rain) return "#122f5a";
          if (variables.is_cloudy) return "#25252d";
          if (variables.is_partly_cloudy) return "#25252d";
          if (variables.is_cloudy_windy) return "#487890";
          if (variables.is_rainy_windy) return "#122f5a";
          if (variables.is_sunny_windy) return "#e4b532";
          if (variables.is_foggy) return "#787878";
          if (variables.is_clear_night) return "#0b084c";
          if (variables.is_clear_night_windy) return "#0b084c";
          if (variables.is_snowy) return "#b1b1b1";
          if (variables.is_black_ice) return "#b1b1b1";
          if (variables.is_hail) return "#b1b1b1";
          if (variables.is_light_t_storm) return "#04152d";
          if (variables.is_partly_t_storm) return "#04152d";
          if (variables.is_t_storm) return "#04152d";
          return "#e4b532";
        ]]]
    - color: |
        [[[
          if (variables.is_sunny) return "#a73d03";
          if (variables.is_sunny_windy) return "#a73d03";
          if (variables.is_fair) return "#a73d03";
          if (variables.is_snowy) return "#2a374b";
          if (variables.is_black_ice) return "#2a374b";
          if (variables.is_hail) return "#2a374b";
          return "#b1b1b1";
        ]]]
    - background-image: |
        [[[
          if (variables.is_sunny) return "url(/local/bg_img/weather-partly-cloudy22.png)";
          if (variables.is_sunny_windy) return "url(/local/bg_img/weather-partly-cloudy22.png)";
          if (variables.is_fair) return "url(/local/bg_img/weather-partly-cloudy22.png)";
          return "url(/local/bg_img/weather-partly-cloudy10.png)";
        ]]]
    - background-repeat: no-repeat
    - background-position: right -10px top 23px
    - background-size: 130px
  icon:
    - color: |
        [[[
          if (variables.is_sunny) return "#a73d03";
          if (variables.is_sunny_windy) return "#a73d03";
          if (variables.is_fair) return "#a73d03";
          if (variables.is_snowy) return "#2a374b";
          if (variables.is_black_ice) return "#2a374b";
          if (variables.is_hail) return "#2a374b";
          return "#e1e1e1";
        ]]]
    - padding: 0
    - margin: 0 0 0 -40px
  name:
    - display: flex
    - align-items: center
    - font-weight: normal
    - width: 100%
    - font-size: 22px
    - white-space: wrap
    - text-overflow: unset
    - text-align: left
    - padding: 0 10px 0 0
    - margin: 0 0 0 -70px
  label:
    - margin: "-160px 0 0 0"
    - text-align: right
    - width: 100%
    - padding: 0 19px 0 0
label: Aktuelles Wetter
tap_action: none
hold_action: none
double_tap_action: none
section_mode: true
grid_options:
  rows: 2
  columns: full

Passen Helfer und Button Card zusammen muss es auch funktionieren, dass die Styles funktionieren

pfaelzerbube · 31. März 2026 um 13:10

Also das mit dem Scrapen hab ich überhaupt nicht verstanden. Warum muss ich das denn machen? Vor allem wenn ich eine eigene Wetterstation mache.

Wie gesagt, Wetterlage in Text funktioniert einwandfrei, nur farbe der Karte und das Symbol ändert sich nie

Schlumperdix · 31. März 2026 um 15:56

Machen musst du das gar nicht. Das ist und bleibt ganz allein deine Entscheidung.

Du bekommst von deiner lokalen Wetterstation doch keinen Wetterzustand? Wo soll der herkommen? Sonnig, Bewölkt, teilweise bewökt… usw… Wenn du das nicht brauchst… nicht willst… bau es einfach nicht ein…

pfaelzerbube · 31. März 2026 um 17:20

Hab es heraus gefunden. Lag an Groß- Kleinschreibung. Jetzt scheint es zu funktionieren

pfaelzerbube · 1. April 2026 um 16:38

kannst du das auch wieder anpassen, damit der Pfeil in die andere Richtung zeigt?

Schlumperdix · 2. April 2026 um 05:11

Was ist denn an der Pfeilrichtung falsch?

Derzeit bei mir (live):

Der Wind weht von Nord nach Süd.
Die Windfahne meiner Wetterstation zeigt nach Süd.

Die Karte zeigt:

Windrichtung steht auf Süd.
Der Pfeil zeigt nach Süd.

MMn passt das alles ziemlich gut zusammen.
An dem Helfer hat sich nichts geändert. Den Code für die Windrichtung in der Karte habe ich optimiert. Hattest du das bemerkt?

Ansonsten würde ich da nichts ändern, da es ansonsten falsch wäre.

Wo hakt es denn bei dir?

Thema		Antworten	Aufrufe
Wetterkarten für eigene Wetterstation Dashboard/Cards/Frontend wetter	15	1756	15. Juni 2026
Dashboard Wetteransicht ändern mit DWD? Dashboard/Cards/Frontend wetter	7	241	19. Juni 2026
Aktuelle lokale Wetterdaten ohne eigene Wetterstation und ohne Kosten Showroom templating , yaml , wetter	140	17264	26. Juli 2026
Wetter Dashboard in mein Homeassistant einfügen Integrationen yaml , wetter	18	4584	21. Oktober 2025
Einfache Windrose Allgemein	3	166	9. Juni 2026

HowTo: Wetterdashboard für Anfänger

Verwandte Themen