Wetterkarten für eigene Wetterstation

Dashboard/Cards/Frontend
1

Hallo zusammen. Ich habe in meinen HA eine Ecowitt Wetterstation integriert. Jetzt überlege ich, wie ich da optisch schöne Karten in mein Dashboard bekomme. Die einfache Anzeige der Daten als Text ist halt nicht wirklich gut.

Wenn ich über Google Suche, finde ich ich nur irgendwelche Sachen um externe Wetterdienste einzubinden. Aber das will ich nicht, ich habe meine eigenen Daten. Sowohl für außen als auch für Innen (diverse Sensoren in den Räumen).

Gibt es da schöne Vorlagen die man integrieren kann? Was die Dashboards angeht bin ich noch ein Newbie. Könnt ihr was empfehlen? Es sollte Anfängerfreundlich sein.

VG

2

Hast Du die offizielle Integration schon mal probiert:
Ecowitt - Home Assistant

3

Klar, die nutze ich ja. Die integriert aber nur technisch die Wetterstation. Für die Optik ist da nix dabei. Man hat halt danach die ganzen Entitäten etc. drin. Das soll jetzt aber auch noch optisch sinnvoll angezeigt werden.

4

Hi,
ich habe auch eine Ecowitt Wetterstation und mein Dashboard für das Wetter sieht so aus:

grafik
grafik1920×806 85.3 KB

Ich habe auch gerne die Daten aus dem Garten… Ich mußte halt die State_class für die Regendaten anpassen, da Ecowitt die nicht mehr so liefert, wie HA sie fordrdert. Auch die Gesamte Regenmenge habe ich angepasst, da die Wetterstation die Daten für die gesamte Regenmenge auch am 01.01 immer löscht.
Wenn du möchtest kann ich die die YAML für die einzelnen Karten hier einstellen - müßtest nur halt die Entitäten anpassen.

Gruß
Christian

5

Coole Karte, besonders der Wolkenradar gefällt mir. Das fehlt mir noch. Wie hast das eingebunden bzw. wo kommt das her?

Was auf deiner Karte fehlt, ist die Pollenbelastung (DWD Pollenflug)

1 „Gefällt mir“
6

Hey!

Bevor ich HomeAssistant genutzt habe, hatte ich bereits eine WH1080 und dann eine Ecowitt Wittboy als Wetterstation laufen. Damit die beiden Stationen nicht “nur” an HomeAssistant Daten liefern, betreibe ich parallel einmal einen RaspberryPi für die WH1080 und eine virtuelle Maschine unter Proxmox für die Ecowitt, worauf jeweils Wetterseiten mit WeeWX generiert werden.

Link zum WeeWX - Projekt

Vielleicht wäre das ja eine Option, die sich dann wiederum in HomeAssistant auf dem Dashboard integrieren ließe.

Bis denn…

Bye, Markus

7

WeeWX nutze ich schon seit Jahren. Aber ich will bestimmte Infos ja in HA darstellen in einem Dashboard. Also hillft mir hier WeeWX leider nicht.

8

Hi, die Wetterkarte hatte ich in einem Tutorial gesehen - wie man halt den Ausschnitt für die eigene Region bekommt. Hier ist mal der Code für meine Gegend:

type: iframe
url: >-
  https://radar.wo-cloud.com/desktop/wr/compact?wrx=52.322,7.222&wrm=8&wry=52.322,7.222
aspect_ratio: 50%
grid_options:
  columns: 12
  rows: 6

Und der Link zu dem Video (weiter hinten wird die Karte zum Wetterradar gezeigt):

Gruß
Christian

1 „Gefällt mir“
9

Vielen Dank für den Link zum Video. Habe die Seite bereits mit meinen Koordinaten eingebunden.

1 „Gefällt mir“
10

Hier meine Wetterkarte

Screenshot_20260104-222335
Screenshot_20260104-2223351008×2244 275 KB

Screenshot_20260104-222324
Screenshot_20260104-2223241008×2244 175 KB

Screenshot_20260104-222309
Screenshot_20260104-2223091008×2244 175 KB

11

Vielleicht diese hier? Benutze ich für meine Ecowitt.

Weather Chart Card

Bildschirmfoto 2026-01-07 um 17.02.29
Bildschirmfoto 2026-01-07 um 17.02.29637×620 39 KB

Oder die hier: Lovelace Meteogram-Card

Bildschirmfoto 2026-01-07 um 17.07.11
Bildschirmfoto 2026-01-07 um 17.07.11595×584 31.3 KB

Suche Wetter Integration mit Vorhersage für Tagestiefst- und Höchstwert sowie aktuellem Wettersymbol
12

Hallo Christian @der-tueftler , ich hab mir nunmehr auch eine Ecowitt Wetterstation gekauft und beim suchen für einen schöne Karte auf Deinem Beitrag gestoßen. Du hattest angeboten Deine Yaml für diese tolle Karte zu teilen, steht das Angebot noch? Das wäre toll, und könnte ich gut gebrauchen. Vorab vielen Dank.

Gruß

Thomas

13

Gerne stelle ich den Code für das Dashboard zur Verfügung.
Die Entitäten müssen natürlich individuell angepasst werden.

Voraussetzungen

Für die Darstellung wird folgende HACS-Integration benötigt:

  • card-mod

  • horizon-card

Weitere spezielle HACS-Integrationen werden nicht zwingend benötigt (sofern nicht bereits im Code verwendet).

Layout-Hinweise

Das Dashboard basiert auf dem Sections-Layout mit folgender Konfiguration:

  • max_columns: 4

Innerhalb der Seite wurden drei Sections verwendet:

  • Section 1: Breite 1

  • Section 2: Breite 1

  • Section 3: Breite 2

Damit ergibt sich ein 4-Spalten-Gesamtlayout mit einer größeren rechten Spalte für umfangreichere Inhalte.

views:
  - title: Wetter
    path: wetter
    max_columns: 4
    type: sections
    sections:
      - type: grid
        cards:
          - type: custom:mushroom-empty-card
            grid_options:
              columns: 12
              rows: 1
          - type: entities
            title: Temperaturen
            entities:
              - entity: sensor.wetterstation_outdoor_temperature
                name: Außentemperatur
              - entity: sensor.wetterstation_feels_like_temperature
                name: Gefühlte Temperatur
              - entity: sensor.thermometer_01_temperatur
                name: Terrasse
            grid_options:
              columns: 12
              rows: 4.5
            card_mod:
              style: |
                ha-card {
                  border-radius: 10px;
                  background-color: #000000;
                  color: white;
                  box-shadow: 4px 4px 15px -3px rgba(255, 255, 255, 0.35)
                  
                }
          - type: entities
            title: Regen
            entities:
              - entity: sensor.wetterstation_event_rain_rate
                name: Regenmenge seit Regenbeginn
                secondary_info: last-updated
              - entity: sensor.wetterstation_hourly_rain_rate
                name: Stündliche Regenmenge
              - entity: sensor.wetterstation_daily_rain_rate
                name: Tägliche Regenmenge
              - entity: sensor.wetterstation_monthly_rain_rate
                name: Monatliche Regenmenge
              - entity: sensor.wetterstation_yearly_rain_rate
                name: Jährliche Regenmenge
              - entity: sensor.regenmenge_gesamt_sensor
                name: Gesamte Regenmenge
                icon: mdi:weather-rainy
                secondary_info: last-changed
            grid_options:
              columns: 12
              rows: 6
            card_mod:
              style: |
                ha-card {
                  border-radius: 10px;
                  background-color: #000000;
                  color: white;
                  box-shadow: 4px 4px 15px -3px rgba(255, 255, 255, 0.35);
                }
      - type: grid
        cards:
          - type: custom:mushroom-empty-card
            grid_options:
              columns: 12
              rows: 1
          - type: entities
            title: Wind
            entities:
              - entity: sensor.wetterstation_wind_speed
                name: Windgeschwindigkeit
              - entity: sensor.wetterstation_wind_gust
                name: Böen
              - entity: sensor.wetterstation_max_daily_gust
                name: Tägl. Höchstgeschwindigkeit
              - entity: sensor.windrichtung
            grid_options:
              columns: 12
              rows: 4.5
            card_mod:
              style: |
                ha-card {
                  border-radius: 10px;
                  background-color: #000000;
                  color: white;
                  box-shadow: 4px 4px 15px -3px rgba(255, 255, 255, 0.35);
                }
          - type: entities
            title: Feuchtigkeit / Luftdruck / Licht
            entities:
              - entity: sensor.wetterstation_humidity
                name: Luftfeuchtigkeit
              - entity: sensor.wetterstation_absolute_pressure
                name: Luftdruck
              - entity: sensor.wetterstation_solar_lux
                name: Helligkeit in LUX
              - entity: sensor.wetterstation_solar_radiation
                name: Sonnenstrahlung
              - entity: sensor.wetterstation_uv_index
                name: UV Index
            grid_options:
              columns: 12
              rows: 6
            card_mod:
              style: |
                ha-card {
                  border-radius: 10px;
                  background-color: #000000;
                  color: white;
                  box-shadow: 4px 4px 15px -3px rgba(255, 255, 255, 0.35);
                }
      - type: grid
        cards:
          - type: custom:mushroom-empty-card
            grid_options:
              columns: 12
              rows: 1
          - type: weather-forecast
            entity: weather.forecast_home
            show_current: true
            show_forecast: true
            forecast_type: daily
            grid_options:
              columns: 24
              rows: 4.5
            card_mod:
              style: |
                ha-card {
                  border-radius: 10px;
                  background-color: #000000;
                  color: white;
                  box-shadow: 4px 4px 15px -3px rgba(255, 255, 255, 0.35);
                }
          - type: iframe
            url: >-
              https://radar.wo-cloud.com/desktop/wr/compact?wrx=52.322,7.222&wrm=8&wry=52.322,7.222
            aspect_ratio: 50%
            grid_options:
              columns: 12
              rows: 6
            card_mod:
              style: |
                ha-card {
                  border-radius: 10px;
                  background-color: #000000;
                  color: white;
                  box-shadow: 4px 4px 15px -3px rgba(255, 255, 255, 0.35);
                }
          - type: custom:mushroom-empty-card
            grid_options:
              columns: 12
              rows: 1.4
          - type: custom:horizon-card
            card_mod:
              style: |
                ha-card {
                  border-radius: 10px;
                  background-color: #000000;
                  color: white;
                  box-shadow: 4px 4px 15px -3px rgba(255, 255, 255, 0.35);
                }
        column_span: 2

Gruß
Christian

14

Hallo Christian @Der-Tueftler

danke für das Teilen, habe ich auch gerade bei mir zum testen eingebunden.
Wie generierst Du denn die Entität “sensor.regenmenge_gesamt_sensor”?

Gruß Thomas

15

Da die Wetterstation die Gesamtmenge am 01.01 jedes Jahr auf null setzt, habe ich mir einen Template-Sensor erstellt, der jeden Abend den Wert der Tagesmenge dazu bekommt.

alias: Regen - Tagesmenge zu Gesamtmenge addieren
description: ""
triggers:
  - at: "23:59:00"
    trigger: time
actions:
  - data:
      entity_id: input_number.regenmenge_gesamt
      value: |
        {{ states('input_number.regenmenge_gesamt')|float +
           states('sensor.wetterstation_daily_rain_rate')|float }}
    action: input_number.set_value
mode: single

So habe ich die gesamte Regenmenge seit Aufstellung der Wetterstation.

Gruß
Christian

1 „Gefällt mir“