HowTo: Wetterdashboard für Anfänger

Danke, mit dunklem Design sehe ich diese auch :slight_smile:

Hast du denn einen Helfer für den Wetterzustand angelegt? Wenn ja holst dir den Wetterzustand von Wunderground, oder hast du eine andere Entität dafür?

Die Fehlermeldung sieht ja eher so aus als hättest du gar keine Entität dafür.

Ansonsten bitte den Code mal posten in Code Tags </>

Tolle Arbeit und sehr schönes Dashboard. Vielen Dank für diesen Beitrag und den Code dazu.
Ich würde gerne einen Teil davon nachbauen und habe leider ein Problem mit den Mini-graph-cards.
Ich habe über die DWD-Integration eine Wetterstation bei mir in der Nähe eingebunden. Wenn ich die entities von DWD in deinem Chart-Code verwende, wird mir leider nichts angezeigt. Das Chart hört nicht auf zu laden:

Auch in einem Apex-Chart lädt es endlos.

Benutze ich jedoch meinen eigenen Temperatur-Sensor (von HomematicIP), wird mir das Chart angezeigt:

Ich habe das Gefühl, es liegt an den Wetter-entities der DWD-Integration, habe aber absolut keine Ahnung wieso.
Hat jemand eine Idee?

Nachtrag / Lösung:
Ich habe noch ein wenig bzgl. ApexChart recherchiert und will Interessierten nicht die Lösung vorenthalten.
Unter diesem Link
https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/272877/651
habe ich einen Hinweis gefunden:
The recorder is probably not enabled for your entity and that is why it probably doesn’t work

Ich habe meinen recorder zwar mit einem yaml konfiguriert, konnte aber nicht erkennen, dass die DWD-Wetter-Sensoren (sensor.meineWetteratation_..) ausgeschlossen wären.
Nachdem ich sie explizit hinzugefügt und HA neu gestartet hatte, haben die Charts funktioniert :see_no_evil_monkey:

include:
  entity_globs:
    #####   Wetterdaten (DWD) ::
    - sensor.meineWetterstation*

hi und vielen Dank für deine Rückmeldung.

Ich kann dir dazu nur zurückgeben, dass ich in meiner Configuration.yaml nichts zusätzlich eingetragen habe. In DWD muss deine eigene Wetterstation erstellt werden. Dazu muss ja der Regionalcode aus der DWD liste übernommen werden. Erst danach kann für dich auch die Vorhersage erstellt werden. Und dann kommen auch die Wetterentitäten (von DWD)

Die Wetter-Entitäten der DWD Integration sind bei mir aber alle deaktiviert.

Die verwendeten Entitäten aus den MiniGraph Cards stammen bei mir nicht aus der DWD Integration. Die kommen alle aus meiner eigenen Wetterstation hier vor Ort.

Daher kannst du aus dem Beispielcode die Entitäten nicht übernehmen. Die musst du alle gegen eigene austauschen. Daher funktioniert das bei dir auch mit deinem eigenen Temperatursensor.

type: custom:button-card
entity: sensor.wetterlage_wunderground
layout: icon_name_state
show_state: true
show_name: false
show_label: true
icon: |
  [[[
    if (
      entity.state == "Nieselregen" || 
      entity.state == "Leichte Schauer" || 
      entity.state == "Leichter Regen"
    )
      return "mdi:weather-rainy";
    if (
      entity.state == "Bewölkt" || 
      entity.state == "Teilweise bewölkt" || 
      entity.state == "Überwiegend bewölkt"
    )
      return "mdi:weather-cloudy";
    if (
      entity.state == "Regnerisch" || 
      entity.state == "Schauer" || 
      entity.state == "Örtliche Schauer"
    )
      return "mdi:weather-pouring";
    if (
      entity.state == "Überwiegend bewölkt / windig" || 
      entity.state == "Teilweise bewölkt / windig" || 
      entity.state == "Freundlich / windig" ||
      entity.state == "Klar / windig"
    )
      return "mdi:weather-windy";
    if (
      entity.state == "Nebelig" || 
      entity.state == "Nebel"
    )
      return "mdi:weather-fog";
    if (
      entity.state == "Leichter Regen und Gewitter"
    )
      return "mdi:weather-lightning-rainy";
    if (
      entity.state == "Örtliche Gewitter"
    )
      return "mdi:weather-partly-lightning";
    if (
      entity.state == "Gewitter"
    )
      return "mdi:weather-lightning";
    if (
      entity.state == "Schnee"
    )
      return "mdi:weather-snowy-heavy";
    else
      return "mdi:weather-sunny";
  ]]]
styles:
  card:
    - background-color: |
        [[[
          if (
            entity.state == "Regnerisch" || 
            entity.state == "Nieselregen" ||
            entity.state == "Schauer" || 
            entity.state == "Leichte Schauer" || 
            entity.state == "Örtliche Schauer" || 
            entity.state == "Leichter Regen"
          )
            return "#122f5a";
          if (
            entity.state == "Leichter Regen und Gewitter" ||
            entity.state == "Örtliche Gewitter" ||
            entity.state == "Gewitter"
          )
            return "#04152d";
          if (
            entity.state == "Bewölkt" || 
            entity.state == "Überwiegend bewölkt" ||
            entity.state == "Teilweise bewölkt"
          )
            return "#25252d";
          if (
            entity.state == "Überwiegend bewölkt / windig" || 
            entity.state == "Teilweise bewölkt / windig"
          )
            return "#487890";
          if (
            entity.state == "Nebelig" || 
            entity.state == "Nebel"
          )
            return "#787878";
          if (
            entity.state == "Schnee" 
          )
            return "#b1b1b1";
          else
            return "#e4b532";
        ]]]
    - color: |
        [[[
          if (
            entity.state == "Freundlich" || 
            entity.state == "Sonnig" ||
            entity.state == "Überwiegend sonnig" ||
            entity.state == "Schön" || 
            entity.state == "Klar" ||
            entity.state == "Freundlich / windig" ||
            entity.state == "Klar / windig"
          )
            return "#a73d03";
          if (
            entity.state == "Schnee" 
          )
            return "#2a374b";
          else
            return "#b1b1b1";
        ]]]
    - background-image: |
        [[[
          if (
            entity.state == "Freundlich" || 
            entity.state == "Sonnig" ||
            entity.state == "Überwiegend sonnig" ||
            entity.state == "Schön" || 
            entity.state == "Klar" ||
            entity.state == "Freundlich / windig" ||
            entity.state == "Klar / windig"
          )
            return "url(/local/bg_img/weather-partly-cloudy22.png)";
          else
            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 (
            entity.state == "Freundlich" || 
            entity.state == "Sonnig" ||
            entity.state == "Überwiegend sonnig" ||
            entity.state == "Schön" || 
            entity.state == "Klar" ||
            entity.state == "Freundlich / windig" ||
            entity.state == "Klar / windig"
          )
            return "#a73d03";
          if (
            entity.state == "Schnee" 
          )
            return "#2a374b";
          else
            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

ein problem hab ich noch und komm nicht drauf. beim Niederschlag des Jahres wird die monatsmenge nicht summiert. d.h. gerade regnets, 6,8mm stimmt für heute…aber die regenmenge vom oktober vor heute wird hier nicht berücksichtigt bzw. wurde bis heute berücksichtigt, nun wurde mit der heutigen regenmenge überschrieben. hab ich die falsche entitiy?

ausgewählt hab ich die entität: regen gesamt

Das Problem besteht leider auch bei mir. Siehe dieses Thema:

Mal ein Nachtrag, weil schon mal der ein oder andere nachgefragt hat wie das mit dem Scrapen der Wetterdaten funktioniert:

Die Wetterlage wird anders als die direkten Wetterdaten aus der REST API direkt von der Webseite ausgelesen. Das heißt: Das was auf der Webseite ausgegeben wird, wird auch bei euch im Dashboard angezeigt. 1:1

Dazu benötigt man die Integration Scrape.

In Scrape legt man eine Ressource und einen Sensor an.

Die Ressource ist die Webseite wo die Daten stehen. Die Methode zum Holen ist GET.

z.B. also

https://www.wunderground.com/weather/de/HIER`` DEINE STATION ERGÄNZEN, oder eben auf Wunderground aufrufen und aus der Browser Adresszeile kopieren

Im Sensor dann den genauen Platz suchen, wo die Info steht. Das kann man am Besten machen wenn man sich den Quelltext anzeigen lässt, oder noch besser die Funktion “Untersuchen wählt“

Hier ist das mMn gut erklärt:

Bei mir sähe das dann für die Wetterlage so aus:

#inner-content > div.region-content-main > div:nth-child(1) > div > div:nth-child(1) > div:nth-child(1) > lib-city-current-conditions > div > div.conditions-extra.small-9.medium-5.columns.small-centered.medium-uncentered > div > div.condition-icon.small-6.medium-12.columns > p

In HA wird dann eine Entität erstellt. Die nennt sich dann sensor.web_scrape (je nach euerer Benennung)

Diese kann dann wie oben beschrieben mit dem Helfer für die Wetterlage ergänzt werden, um die Daten der Webseite (die sind auf Englisch) zu übersetzen (mehr macht der Helfer nicht).

Bei der Gelegenheit, habe ich oben im Beitrag einmal die Daten für den Wetterlage Helfer anpassen lassen (danke @tarag ).

Außerdem den Gegenpart dazu die custom Button Card ebenfalls auf die Wetterlagen angepasst. und ebenfalls im Leitbeitrag ganz oben angepasst.

2 „Gefällt mir“

Zum Scrapen gibt es gerade für Weather Underground auch eine Alternative, das ist für den ein oder anderen vielleicht auch interessant: Aktuelle lokale Wetterdaten ohne eigene Wetterstation und ohne Kosten

Der Nachteil, dass man dann die configuration.yaml editieren muss, soll aber auch nicht verschwiegen werden. Persönlich find ich’s aber eleganter als ein Webseiten-Scraping.

Auf jeden Fall aber eine tolle Arbeit, die du hier zusammengestellt und sehr gut beschrieben hast. Danke @Schlumperdix!

1 „Gefällt mir“

Vielen lieben Dank :slight_smile:

Das ist absolut korrekt. Allerdings bekommt man darüber nicht die Wetterlage am Standort der entsprechenden Station? Wenn doch, dann hilf mir gerne auf die Sprünge.

Das ist zwar ansich korrekt. Die Sensoren können aber mittlerweile alle über die UI angelegt werden.

Einzig die REST resource muss so weit ich weiß in der Configuration.yaml angelegt werden, was ich nicht so schlimm finde.

Ansonsten einfach einen Sensor Helfer erstellen mit bspw folgendem Inhalt für die Temperatur:

{{ states.sensor.DEINE-STATION.state }}

oder aus dem Attribut:

{{ state_attr('sensor.DEINE-STATION', 'observations') [0] ['metric']['temp'] }}

ich hab das Anfangs auch alles genau so gemacht, allerdings ist die Station in meiner Näher immer wieder nicht erreichbar gewesen. Wenn man sich nur die Wetterdaten ansehen möchte, kann man das bestimmt verschmerzen, wenn mal was nicht erreichbar ist. Ich verwende allerdings gerade auch die Außen Temperatur in diversen Automationen. Ist die nicht erreichbar liegt auch direkt einiges brach. Auch den Lichtsensor verwende ich mehrfach in Automationen. Daher habe ich mich entschieden eine eigene Wetterstation anzuschaffen.

doch, genau die bekommt man.

Ich bezog mich hier nicht auf deinen Ansatz sondern den von mir als Alternative zum Web-Scraping genannten.

Du hast aber einen Punkt, weil die configuration.yaml tatsächlich in beiden Wegen manuell angepasst werden muss.

Die Nicht-Erreichbarkeit der “fremden” Wetterstation bleibt doch so oder so ein Problem? Also egal ob man die jetzt per Scraping oder anders einbindet.

Ganz ehrlich würde ich mich zur Steuerung einer Automation darauf nicht wirklich verlassen wollen. Wenn es nur die Außentemp. ist, dann ist es wahrscheinlich unkritisch. Aber ein Redesign der Webseite von WUnderground würde dein Scraping schon fehlschlagen lassen und damit auch deine Automation. Aber das ist ein eigenes Thema und das darf jeder für sich entscheiden. Bei kritischen Automationen aber bitte ganz bewusst. Es gab da mal einen Fall hier mit Markisen-Steuerung bei Regen… Kann man machen mit einer fremden Station, aber… nur auf eigenes Risiko?

Äh nein…

ich scrape doch nicht von einer anderen Wetterstation. Die Daten der Wetterlage kommen nicht von einer Wetterstation in der Nähe, sondern direkt von Wunderground. was da für ein Dienst genutzt wird ist mir nicht bekannt.

Dann hau mal raus… habe nochmal in alle Attribute geschaut… Ich bekomme da keine Wetterlage:

:wink: Naja… das läuft seit nem Jahr sehrt gut. Und ich bin auch in der Lage das Scraping anzupassen, wenn sich die Seite ändert :slight_smile: Da sind auch noch viele Andere Sensoren beteiligt.

Aber du wolltest mir ja noch mitteilen wie man die Wetterlage sonst bekommt… Da bin ich tatsächlich sehr heiß drauf… Einmal die Stunde die Wetterlage von DWD oder so reicht mir übrigens nicht…

Sorry, ich war fokussiert auf die Daten der Wetterstation, nicht die allgemeine Wetterlage.

Wetter, da bin ich dabei.. :slight_smile: Danke für das nette Wiki. Die Windcard kannte ich noch nicht. Muss ich mir wohl mal installieren. Ich habe im Nachbarforum Anfang des Jahres auch mal ein Wiki dazu erstellt. Ergänzt sich eigentlich ganz gut zu deinem. Ich hoffe es ist in Ordnung, wenn ich das hier verlinke.

community-smarthome.com/t/tutorial-wetterkarten-radar-bilder-wetterdaten-in-home-assistant-einbinden

Mein Wetterdashboard schaut aktuell so aus. Wetterwarnung in Textform werden nur angezeigt, wenn es welche gibt. Fehlt daher im Screenshot.

Die Cards dazu findet ihr in meinem Wiki zum Dashboard (Github), falls einer Interesse hat.

4 „Gefällt mir“

Grüß Dich :slight_smile:

Schöne Ergänzung.

Ich denke nicht das hier jemand etwas gegen einen Link in ein freundliches Gleichgesinnten Forum hat :slight_smile:

1 „Gefällt mir“

Gibt’s auch eine Möglichkeit, dass der Loop der Karte gleich startet (wenn zB das Tablet sich einschaltet durch einen BMW.)?

Hi, ich glaube nicht, da es nur ein iframe ist. Vielleicht funktioniert es, wenn man hinten an den Link so etwas wie &play=true oder &autoplay=1 anhängt. Ansonsten wüsste ich nicht wie.

Uff, was für ein Aufwand für ein Wetter Dashboard. Respekt!

Ich hab es ein wenig pragmatischer. Ist auch gleich der Homescreen des Tablets. Temperaturen kommen von lokalen Sensoren. Die kleinen blau/roten zahlen bilden tiefst/höchst temp seit 24 Uhr ab. Oben links eine HTTP card erzeugt von Grafana und oben rechts ein “beschnittenes” widget in einer http card von meteoblue (Tage können angeklickt werden).

Weil ich das hier gerade zufällig lese.

Geht es da jetzt nur um den Regenradar? Falls ja nutzt @jayjojayson dafür ja die Einbindung der DWD *.gif

type: horizontal-stack
cards:
  - type: picture
    image: https://www.dwd.de/DWD/wetter/radar/radfilm_brd_akt.gif
    tap_action:
      action: navigate
      navigation_path: "#wetter"
usw.

Ich habe hier bei mir nicht so ein “aufwendiges” Wetter-Dashboard :slightly_smiling_face: und für den Regenradar habe ich einfach die URL mit der *.gif-Datei von https://morgenwirdes.de per Generic camera Stream eingebunden. Morgenwirdes.de nutzt auch den DWD Regenradar.

Damit startet die *.gif und somit der Loop der Radaranzeige


auch direkt sobald die entsprechende Ansicht unter HA aufgerufen wird. Für HA ist die *.gif per Generic camera Integration ja ein Stream der durchgängig “gestreamt” wird.

Das gleiche ist dann ja auch mit der URL vom DWD …/DWD/wetter/radar/radfilm_brd_akt.gif möglich und sollte sich dann ja auch in dieses Wetter-Dashboard von @jayjojayson integrieren lassen.

VG Jim

1 „Gefällt mir“

Vielen Dank für das schöne Dashboard.

Ich habe ein paar Fragen: :wink:

  1. Ich bekomme Scrape nicht eingerichtet. Im verlinkten Video wird da leider nichts besprochen und ich bin wohl leider auch zu unerfahren um das sauber zu integrieren.
  2. Bei deinen Sensordaten gw1100… handelt es sich um eine private Wetterstation bei dir oder? Sonst frage ich mich gerade nämlich wo ich die Daten herbekomme.

Danke und liebe Grüße

Jens