HACS Wetterkarte

[scw2wi]

Nachdem ich mich jetzt schon einige Zeit mit HA beschäftigt und auch den HACS etwas genauer durchstöbert habe, bin ich immer mehr begeistert von dem, was hier geboten wird.

Die Möglichkeiten des Dashboards überzeugen mich so sehr, dass ich Edomi keine Träne mehr hinterher weine.

Wie so viele habe auch ich als erstes mit einer Wetterkarte begonnen - hier das Ergebnis.

HA-Wetterkarte.png

In der obersten Reihe ist ein Umschalter (realisiert mit der Button card | button-card) zwischen OpenWeatherMap und dem in der Standard Installation bereits vorhandenen Met.no (weather.forecast_home)

Daneben ist sich noch eine kleine Anzeige für den Air Quality Index ausgegangen (mushroom-chips-card), den ich von den 5 nächsten Mess-Stellen mittle. Die Icon-Farbe passt sich dem Wert an.

Die hourly-weather verwende ich, um das Wetter der nächsten Stunden anzuzeigen,
die weather-chart-card (Weather Chart Card) darunter zeigt das Wetter der nächsten Tage.
Beide Karten könnten auch die jeweils andere Ansicht, aber ich finde diese Form am besten.

Und jetzt kommt das beste daran.
Den gesamten Code dazu hat mir ChatGPT nach einer genauen Beschreibung meiner Wünsche ausgespuckt.
Das einzige, was nicht funktioniert hat, war die Farbänderung des Icons, da musste ich den YAML-Code entsprechend korrigieren.

Ich habe mir auch (neben der Standard Weather Card von HA einige andere HACS Lösungen angesehen.
Die Weather Radar Card verwende ich ebenfalls. Sie wird zwar nicht mehr gepflegt, funktioniert aber noch.
animated-weather-card hat mir weniger gefallen, bin nicht so der Typ für Bewegung am Dashboard.
clock-weather-card war nicht schlecht, wenn auch nur in YAML bearbeitbar (aber von CharGPT gibt es eh nichts anderes)
Simple Weather Card war mir dann doch zu simpel, wer aber das Wetter noch kompakter will, sollte sie sich ansehen.
platinum-weather-card wäre nicht schlecht, baut aber noch auf dem alten Datenmodell auf, daher nicht direkt verwendbar
weather-conditions-card sieht mir noch besser aus, hat aber leider den gleichen Nachteil.
Wer sich trotzdem die Mühe antun will, eine der alten Karten auf das neue Datenmodell zu mappen, hier die Anleitung dazu.
Für mich als Anfänger war es trotz dieser Anleitung nicht machbar.

Ich bin noch am testen weiterer HACS Cards, dann gibt es wieder eine kurze Zusammenfassung.

Die Mushroom Cards kann ich jedem empfehlen dem die Standard Cards gefallen, da sie das gleiche Look&Feel haben, aber mehr können.

Aktuell kennt meine Begeisterung für HA und das Team dahinter jedenfalls keine Grenzen.

Hier geht's zu weiteren Beiträgen:

HACS Sonne & Mond (inkl. Tipps zur configuration.yaml)
HACS Schieberegler (inkl. Möglichkeiten der Icon Farbanpassung & erste Vorstellung Farbschema)
HACS Gauges (Tachoanzeigen, inkl. senkrechte Balken-Cards)
HACS stack-in-card für Raum-Card (inkl. Beispiel-Prompt für ChatGPT)
HACS Graph-Cards
HACS Thermostat-Cards
HACS Entity Cards (inkl. stacking Beispiele mit der custom:button-card)
HACS Reminder (trash-card, atomic-calendar-revive)
HACS Person- & Öffi-Card (inkl. Geschichte zu ChatGPT)
HA-Behaglichkeits-Diagramm
HA Kurzeinführung
HACS Sidebar & Dashboard-Entwurf
HACS Bewässerung
HA & Node-Red
HA Notifications
HA Recorder, SQLite, InfluxDB, Grafana
HA Python Scripts

[Amokd0c]

Tolle Sache!
Wie hast du das in ChatGPT formuliert? Oder wie formuliert man sowas am besten, um zu einem vernünftigen Ergebnis zu kommen?

[scw2wi]

Wie hast du das in ChatGPT formuliert?

Ich mach das iterativ, nicht in einem Schritt.

Zuerst suche ich mir selbst die Karte aus, die ich haben möchte, da ChatGPT da zu wenig intuitiv ist.
Dann nenne ich meinen Sensor und was ich dargestellt haben will, das könnte man auch noch durch nachlesen selbst ermitteln, bei manchen Karten ist das aber ganz schön umfangreich, dann liegt aber auch ChatGPT manchmal daneben. Wenn ich selbst Änderungen am Code mache, dann übergebe ich den geänderten Code auch wieder als neue Basis an ChatGPT.

Am schwierigsten war für mich die Umschaltung zwischen den Wetterstationen, das hat ChatGPT aber auf Anhieb hinbekommen.

Die Farbänderung des Icons hab ich dann selbst gelöst, hier der YAML-Code dafür:

                  card_mod:
                    style: |
                      ha-card {
                        {% set aqi_str = states('sensor.aqi_luftqualitatsindex') %}
                        {% if aqi_str == 'unknown' %}
                          --card-mod-icon-color: grey;
                        {% else %}
                          {% set aqi = aqi_str | int %}
                          {% if aqi <= 50 %}
                            --card-mod-icon-color: green;
                          {% elif aqi <= 100 %}
                            --card-mod-icon-color: yellow;
                          {% elif aqi <= 150 %}
                            --card-mod-icon-color: orange;
                          {% elif aqi <= 200 %}
                            --card-mod-icon-color: red;
                          {% elif aqi <= 300 %}
                            --card-mod-icon-color: purple;
                          {% else %}
                            --card-mod-icon-color: maroon;
                          {% endif %}
                        {% endif %}
                        margin-bottom: -50px
                      }
​

[panzaeron]

Screenshot Wettervorhersage.pngIch finde es sehr gut, dass du die unterscheidlichen Varainten hier vorstellst.
Vielleicht auch interessant, ich nutze eine Kombination aus zwei HACS Erweiterungen für die Wettervorhersage auf dem Dashbord:

• Oben ist die Clock-Weather-Card
• Darunter die von dir auch genutzte Erweiterung Hourly Weather
• Unten ist wieder die Clock-Weather-Card, wovon ich nur die Vorschau eingeblendet habe.

Edit: Die drei Karten habe ich mit der vertical-stack-in-card verbunden.

[scw2wi]

Die Idee des direkten Zusammenfügens der einzelnen Karten ohne sichtbare Trennung finde ich super.
Meine Karte durfte deine Ideen auch gleich übernehmen, es gibt sie jetzt auch in etwas bunter.

Leider musste ich aber die Wochenvorschau über die Stunden-Vorschau stellen, denn umgekehrt hat es mir optisch nicht gefallen. Ich werde mich an die verkehrte Logik schon gewöhnen. Man kann bei der weather-chart-card zwar den oberen und den mittleren Teil ausblenden (was ich rechts auch gemacht hab), der untere Teil ist jedoch fix und leider nicht ausblendbar, sonst hätte ich sie so wie du ebenfalls stückeln können.

HACS-Wetterkarte2.png

[DerSeppel]

Am schwierigsten war für mich die Umschaltung zwischen den Wetterstationen, das hat ChatGPT aber auf Anhieb hinbekommen.
Die Farbänderung des Icons hab ich dann selbst gelöst.
Ist irgend jemandem bekannt, wie man hier Code mit Einrückungen einfügen kann, denn der Code hier wird ohne Einrückung nicht funktionieren.

Beim ganzen Thema Front-End bin ich echt nicht kreativ. Deshalb freu ich mich über deine Beiträge. Die Ergebnisse sehen echt toll aus.
Wie hast du das mit der Umschaltung gelöst? Ich bekomme es auch nicht hin.
Habe einen input_select angegeben. Und beim Button-Klick wird der Zustand auch korrekt gesetzt. Aber die Karten verwenden die Entität nicht sondern zeigen nur "Please, check your weather entity".

Das Template wird eigentlich korrekt geparsed:

card:
type: vertical-stack
cards:
- type: custom:weather-chart-card
entity: >
weather.metno
- type: custom:hourly-weather
entity: >
weather.metno​

[henfri]

Sieht toll aus.
Ich habe aktuell kein Wetter in der Visualisierung.
Welche Vorteile bietet das, gegenüber einer spezialisierten Wetter-App?

[DerSeppel]

Sieht toll aus.
Ich habe aktuell kein Wetter in der Visualisierung.
Welche Vorteile bietet das, gegenüber einer spezialisierten Wetter-App?

Es kommt auf den Anwendungsfall an.
Ich verwende die gleiche Visu auf dem Panel in der Küche und auf den Mobilgeräten. In der Küche will ich direkt das Wetter sehen können. In der Mobil-Visu wird das Wetter dann ausgeblendet.

[scw2wi]

Wie hast du das mit der Umschaltung gelöst?

Ich hab mich einfach an die Anweisungen von ChatGPT gehalten, und (zumindest die Umschaltung) hat auf Anhieb funktioniert. Wenn ich wüsste, wie man hier YAML-Code im Forum einstellen kann, dann könnte ich die Lösung posten, aber du hast doch sicher auch ein ChatGPT zur Hand, oder etwa nicht?

In mein input_selects.yaml hab ich jedenfalls diesen Code dafür reingepostet.

weather_source:
  name: Wetterquelle
  options:
    - OpenWeatherMap
    - Met.no
  initial: OpenWeatherMap​

input_selects.yaml.txt

Auf meinem Dashboard gibt es übrigens nicht nur diese Wetter-Karte mit den Daten, sondern auch noch ein Satellitenbild mit den nächsten 2,5h Wettervorschau.

Das alles sehe ich dann auf einen Blick wenn ich draufschaue, also innerhalb von Sekundenbruchteilen.
Ich hab mal gestoppt, wie lange ich brauche, die gleiche Info übers Handy abzurufen.

• Handy herausholen
• Handy entsperren
• Erste App für die Wetterdaten aufrufen
• warten bis die App die Daten geladen hat (gut, das geht recht schnell)
• zweite App für das Satellitenbild aufrufen
• wieder warten, bis auch diese App die Daten geladen hat

Egal wie schnell das Handy auch immer sein mag, es ist auf jeden Fall um Größenordnungen langsamer und bei den meisten Apps (ich verwende dafür Flowx) auch nicht so frei konfigurierbar, da ist also ein Wand-Tablett mit Server dahinter ganz klar im Vorteil, denn der ruft die Daten sogar über Nacht alle 15 min ab und hat sie daher, wenn ich aufstehe, bereits längst geladen.

[henfri]

Leider gehen halt die Einrückungen hier im Forum verloren, daher kannst du diesen Code nicht 1:1 bei dir reinkopieren.

Nicht wenn du vor dem Paste oben links auf das <> symbol klickst (raw Modus)

[Punker Deluxe]

wie man hier YAML-Code im Forum einstellen

Strg+C , dann Wasweißichyaml.txt Datei erstellen und dort reinkopieren mit Strg+V, speichern und die Datei hier hochladen.

[henfri]

Mein Tipp ist besser

[scw2wi]

und die Datei hier hochladen.

Super, das ist die Lösung, oben gleich ausprobiert und funktioniert.
Ich hab die nächsten Tage leider wenig Zeit, aber wenn es sich ausgeht dann ergänze ich die Screenshots auch noch durch den Code.

[Punker Deluxe]

Meinen Tipp hab ich nicht mal ausprobiert, hoffen wir das er funktioniert, oder deiner. Aber Einrückungen hin oder her, muß mich mehr mit yaml beschäftigen.

[scw2wi]

Mein Tipp ist besser

Super, jetzt gibt es 2 Lösungen. Für kurzen Code werde ich die HTML quotes verwenden und für längeren die Textdateien.