Hi, ich bin endlich soweit, meine erste custom Card steht im ersten Release zur Verfügung und ich freue mich über Feedback von euch. Aktuell bin ich dabei auch noch die Mondphasen zu integrieren, erstmal als Textvariante, später auch über die Bildanzeige.
Dies ist eine benutzerdefinierte Lovelace-Karte zur Visualisierung der aktuellen Sonnenposition mit entsprechenden Sonnenstandbildern und zur Anzeige relevanter Sonnenzeiten inklusive berechneter Tageszeitlänge. Die Karte ist vollständig über die Benutzeroberfläche des Karteneditors konfigurierbar.
Wenn euch die custom Card gefällt, würde ich mich sehr über eine Sternebewertung auf github freuen. Das hilft, die Card weiter zu pushen. Lieben Dank.
Features
Visuelle Darstellung: Zeigt je nach Tageszeit unterschiedliche Sonnenstandbilder an.
Animierte Bilder Sonnenstandbilder Vormittag, Mittag, Nachmittag können animiert werden.
Anpassbare Zeiten: Wähle aus, welche Sonnenzeiten angezeigt werden sollen.
Flexibles Layout: Platziere die Zeitangaben über, unter oder rechts neben dem Bild.
Anpassbare Schwellenwerte: Passe die Azimut- und Höhenschwellenwerte an geografischen Standort an.
UI-Konfiguration: Konfiguriere alle Optionen bequem über den visuellen Editor, ohne YAML
Das github über den Link in Home Assistant einfügen.
Die “Sun Position Card” sollte nun in HACS verfügbar sein. Klicke auf “INSTALLIEREN”.
Die Ressource wird automatisch zu deiner Lovelace-Konfiguration hinzugefügt.
Manuelle Installation über Hacs
Manuelle Installation über Hacs
Öffne HACS in Home Assistant.
Gehe zu “Frontend” und klicke auf die drei Punkte in der oberen rechten Ecke.
Wähle “Benutzerdefinierte Repositories” (“Custom repositories”) aus.
Füge die URL zu Ihrem GitHub-Repository hinzu und wähle “Lovelace” als Kategorie.
Klicke auf “HINZUFÜGEN” (“ADD”).
Die “Sun Position Card” sollte nun in HACS verfügbar sein. Klicke auf “INSTALLIEREN” (“INSTALL”).
Die Ressource wird automatisch zu deiner Lovelace-Konfiguration hinzugefügt.
Manuelle Installation in HA
Manuelle Installation in HA
Dateien herunterladen:
Lade die sun-position-card.js, sun-position-card-editor.js und die PNG-Bilddateien aus diesem Repository herunter.
Dateien in Home Assistant hochladen:
Erstelle einen neuen Ordner namens Sun-Position-Card im www-Verzeichnis deiner Home Assistant-Konfiguration. (Das www-Verzeichnis befindet sich im selben Ordner wie deine configuration.yaml).
Kopiere alle heruntergeladenen Dateien in diesen neuen Ordner. Deine Ordnerstruktur sollte wie folgt aussehen:
/config/www/Sun-Position-Card/sun-position-card.js
/config/www/Sun-Position-Card/sun-position-card-editor.js
/config/www/Sun-Position-Card/images/morgen.png
/config/www/Sun-Position-Card/images/mittag.png
... (alle anderen Bilder)
Ressource zu Home Assistant hinzufügen:
Gehe in Home Assistant zu Einstellungen > Dashboards.
Klicke auf das Menü mit den drei Punkten oben rechts und wähle Ressourcen.
Klicke auf + Ressource hinzufügen.
Gebe als URL /local/Sun-Position-Card/sun-position-card.js ein.
Wähle als Ressourcentyp JavaScript-Modul.
Klicke auf Erstellen.
Konfiguration
Nach der Installation kannst du die Karte zu deinem Dashboard hinzufügen:
Bearbeitungsmodus aktivieren:
Öffne das Dashboard, zu dem die Karte hinzufügt werden soll, und klicke auf Bearbeiten.
Karte hinzufügen:
Klicke auf + Karte hinzufügen und suche nach der “Sun Position Card”.
Optionen konfigurieren:
Ein Konfigurationsfenster wird angezeigt, in dem alle Einstellungen bequem über Dropdown-Menüs, Kontrollkästchen und Eingabefelder angepasst werden können.
Sun Entity: Die Entität Sonne (normalerweise sun.sun).
Times to Display: Wähle die Zeiten aus, die du anzeigen möchtest.
Time Position: Lege fest, wo die Zeiten angezeigt werden sollen.
Thresholds (Advanced): Passe bei Bedarf die Azimut- und Höhenwerte an.
YAML-Modus (Alternative)
Obwohl die UI-Konfiguration empfohlen wird, kann die Karte auch manuell über den YAML-Editor konfiguriert werden:
Für mehr Details bitte aufklappen
Optionen
name
typ
required
description
standard
type
string
Yes
custom:sun-position-card
entity
string
Yes
Die Entität Ihrer Sonne, normalerweise sun.sun.
times_to_show
list
No
Eine Liste von Zeiten, die angezeigt werden sollen. Mögliche Werte: daylight_duration, next_rising, next_setting, next_dawn, next_dusk, next_noon, next_midnight.
['next_rising', 'next_setting']
time_position
string
No
Position der Zeitangaben im Verhältnis zum Bild. Mögliche Werte: above, below, right.
below
state_position
string
No
Position des aktuellen Status (über dem Bild, rechts vom Bild, unter dem Bild)
Hi, ich habe weitergebaut und ihr könnt jetzt die Mondphasen anzeigen, wenn der Mond Sensor zur Verfügung steht, anderenfalls wird ein standard-Mondbild angezeigt.
Weitere Details zum neuen Release: v_1.2
Die Zeitliste kann zentriert oder als Block dargestellt werden
Mondphasen hinzugefügt (8 Phasen pro Monat)
Mond-Sensor ist erforderlich, andernfalls wird ein standard-Mondbild angezeigt
Alle Bilder aktualisiert (neue Sonnenbilder)
Alle Bilder wurden in der Größe angepasst, damit sie zueinander passen
Englisch und Deutsch Übersetzung hinzugefügt
Um den Mond-Sensor zu erhalten, gehe zu Einstellungen → Geräte & Dienste → Integration hinzufügen und suche nach Mond. Dies ist die integrierte Mond-Integration von Home Assistant.
Ich habe eine neue Ansicht für die Sonne hinzugefügt. Jetzt kann die Sonne auch abhänig vom Horizont berechnet und dargestellt werden. Im Bild anbei sieht man die Sonne kurz vor dem Sonnenuntergang.
Berechnete Sonnenposition:
Zeigt abhängig von der Tageszeit die berechnete Position der Sonne am Horizont an.
Neues Bild zum Bilderordner hinzugefügt: calc-sun.png (kann bei Bedarf ausgetauscht werden).
Einige Verbesserungen am Ladeprozess der Karte bzw. des Karten-Editors.
ReadME aktualisiert.
Wahrscheinlich müsst ihr den Cache des Browsers oder der Companion-App leeren.
Aktuell bin ich dabei noch die letzte Anzeigeoption zu integrieren. Eine berechnete Anzeige der Sonne auf einem 180 Grad Bogen. Dann stehen 3 Optionen für die Anzeige zur Verfügung und ihr habt die Qual der Wahl.
Mahlzeit, neue Version ist online.
Jetzt könnt ihr euch zwischen drei Ansichtsoptionen für die Sonne entscheiden.
Die Animation läuft nun auch mit allen Ansichtsvarianten. Nur in der klassischen Ansicht ist das Morgen und Dämmerung Bild nicht animiert. Viel Freude mit der neuen Version.
Mahlzeit, ich habe hoffentlich den Fehler für das Cache Problem in meiner anderen Card gefunden und im neuen Release korrigiert. Jetzt sollten nach einem Update alle Felder im Editor der Card zur Verfügung stehen (eventuell noch Cache leeren, wie man es kennt).
In der neuen Version v_1.5 habe ich auch wie angekündigt, das Wetter implementiert. Ihr könnt euch den Wetter Status in der Zeitliste anzeigen lassen oder ihn als Badge mit im Hauptbild platzieren. Außerdem wurde die Berechnung für die Sonnenposition im großen Ansichtsmodus (wenn Zeitliste unter Sonnenstandbild liegt) korrigiert. Sonne wandert auch dort jetzt genau auf dem Bogen entlang.
Hi, kein Ding ich freue mich ja, dass jemand schreibt. In erster Linie ist es eine andere optische Darstellung und man hat drei verschiedene Optionen sich den Sonnenstand anzeigen zu lassen. Das ganze geht auch mit leichter Animation. Mir gefällt die Optik einfach besser. In der Nacht wird je nach Mondphase das passende Mondbild (8 Phasen) angezeigt und neu ist nun auch die Wetteranzeige, das hat die andere Card glaube ich nicht. Eines Tageszeitlänge kann ich bei der Card auch nicht entdecken, bei mir schon. Du kannst meine Card zudem vertikal oder horizontal gestalten (man ist da ziemlicht frei).
Na super, dann freue ich mich auf dein Feedback. Die Wetterimplementierung hatten sie sich im Nachbarforum gewünscht, daher habe ich das nun eingefügt.
Wetterkarten gibt es wirklich sehr viel und ist schwer da noch etwas neues zu machen.
Meine Vorstellung wäre noch wetterabhängig die Sonne darzustellen, also mit Wolken davor oder Regen usw.. Mal schauen was noch kommt.
Hi Wilfried, danke für die neue Inspiartion. Ich schaue was ich machen kann, aber machbar ist das auf jeden Fall. Es würde dann aber bei der Temperatur vielleicht noch Luftfeuchte bleiben, soll schließlich keine Wettercard sein, sondern nur als weitere Info dienen.
Hi, euer eigener Temperatur-Sensor sollte jetzt mit der v_1.5.1 hinterlegt werden können. Ich habe es so gestaltet: der Wetter-Sensor muss weiterhin eingetragen sein, im Anschluss erscheint ein neues Input Feld und ihr könnt dort euren Temperatur Sensor eintragen. Dieser Sensor überschreibt dann die Temperatur aus dem Wetter-Sensor. So hat man trotzdem immer schön den aktuellen Wetter Status (Sonne, bewölkt usw.) mit integriert. Ich denke das passt so am besten und ist dann auch besser für die Weiterentwicklung nutzbar.
Sachen die mir aufgefallen sind:
a) Wenn ich es aus HACS runterlade fehlt der Hinweis es den resource hinzufügen. Bei den anderen Komponenten kam das immer
b) In der Mitte und ganz unten ist ziemlich viel Platz vielleicht könnte man den gap einstellbar machen und/oder kleiner
c) Hinter dem Text (“Zunehmender Mond”) könntest auch noch einen kleinen Mond darstellen der zur Beschreibung passt.
d) Den Mond wenn die Uhrzeit passt auch noch darstellen.
Guten Start ins neue Jahr und viel Spaß mit der Karte
Sun Position Card
Aktuell bin ich dabei auch noch die Mondphasen zu integrieren, erstmal als Textvariante, später auch über die Bildanzeige.
auf github freuen. 
Das hilft, die Card weiter zu pushen. Lieben Dank.
| 
