Custom Sun Position Card für Home Assistant (Sonnenstand Card) - HACS

jayjojayson · 11. Dezember 2025 um 19:43

Sun Position Card

Hi, ich bin endlich soweit, meine erste custom Card steht im ersten Release zur Verfügung und ich freue mich über Feedback von euch.

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

Animierte Card anschauen

sun-positiion-card-animation

Installation

HACS (Empfohlen)

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.

sun-positiion-card config

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)	`above`, `right`, `below`
`show_degrees`	`boolean`	No	Zeige Gradzahlen für Azimuth und Elevation	`true`, `false`
`show_degrees_in_list`	`boolean`	No	Zeige Gradzahlen in der Timeliste	`true`, `false`
`show_dividers`	`boolean`	No	Zeige Trennlinien zwischen den Zeiten	`true`, `false`
`animate_images`	`boolean`	No	Animiere die Sonnenstandsbilder	`true`, `false`
`morning_azimuth`	`number`	No	Azimut-Grenzwert für den Morgen.	`150`
`noon_azimuth`	`number`	No	Azimut-Grenzwert für den Mittag.	`200`
`afternoon_azimuth`	`number`	No	Azimut-Grenzwert für den Nachmittag.	`255`
`dusk_elevation`	`number`	No	Höhen-Grenzwert für die Dämmerung.	`10`

Beispielkonfiguration

einfaches Beispiel:

type: custom:sun-position-card
entity: sun.sun
times_to_show:
  - next_rising
  - next_setting
time_position: right
show_image: false

| | | |

Master67 · 12. Dezember 2025 um 06:26

Ich bekomme leider diese Fehlermeldung;

"Respository jayjojayson/Sun-Position-Card nicht gefunden

MarzyHA · 12. Dezember 2025 um 06:27

Hast du den Cache vom Browser geleert? Hast du in HACS auch nochmal auf „Herunterladen“ geklickt, nachdem du den Link geöffnet hast?
Bei mir funktioniert es nämlich ohne Probleme

Master67 · 12. Dezember 2025 um 06:30

Hmmm… warum?
Wollte das erst auf meinem Test-HA installieren, da erst vor 2 Tagen erstellt sollte davon noch nichts im Cache sein, werde aber mal einen anderen Browser
versuchen.

Edit: das hat wohl was mit meinem neu Installierten TEst-HA zutun,
im Hauptsystem funktioniert der Link, ich weiß zwar nicht warum, die Adresse (Hauptsystem) zickt nicht rum.

Die des Test-Systems, also am ende …132:8123 zeigt diesen Fehler an.

mafe68 · 12. Dezember 2025 um 06:53

Habe gearde mal die Repo eingebunden und mal eine Karte erstellt und muss sagen das geht super und ist easy zum einrichten!
Danke für das Repo und deine Bemühungen!

Master67 · 12. Dezember 2025 um 06:56

Kann ich, als Anfänger, so Unterschreiben
Das passt gut unter meine Wetterkarte

@jayjojayson danke dafür

jayjojayson · 12. Dezember 2025 um 08:13

Moin, freut mich zu hören und zu sehen, wenn die Card bei den ersten installiert ist. Man ist ja sehr frei in der Gestaltung, es wäre auch möglich nur den Sonnenstand über das Bild anzuzeigen und alles andere auszublenden, wie man es mag.

In der neuen Version ist dann auch das neue Mondbild dabei und die animierten Bilder für Vormittag, Mittag und Nachmittag. Da hatte ich noch Problem, weil die Animation nicht flüssig war. Mal schauen wie es heute mit meiner geänderten Testversion läuft.

Popey · 12. Dezember 2025 um 09:41

Ich finde es immer ganz toll wenn sich Menschen so selbstlos für eine Sache einsetzen.
Ich kann leider nicht Programmiren dafür bin ich in der FFW.

So fällt es mir natürlich auch immer schwer hier aktiv teil zu haben und dann so unverschämt zu sein auch noch Kritik zu üben. So hoffe ich das meine Kritik nicht so ernst genommen wird sondern als Anregung auf Verbesserung gesehen wird.

Aber nun genug bla-bla

Was mir momentan missfällt ist das ich auf der Karte eine ganz tolle Sonne sehe, wenn ich aber aus dem Fenster schaue dies draußen ganz anders aussieht, da sehe ich nur grau.
Ich weiß du kannst am Wetter nichts ändern aber vielleicht schaffst du es ja die Bewölkung noch mit einfließen zu lassen , oder bei Nacht klare siecht und Sterne oder eben auch bewölkt.

Jochen · 12. Dezember 2025 um 10:06

Super Karte weiter so !!. Ich freue mich schon auf die Tageslänge.
Übrigens bei mir sieht es draussen genau so aus wie auf der Karte. Meine
PV erzeugt gerade 4kW.

Master67 · 12. Dezember 2025 um 10:11

Bei mir auch habe grade meine „Teilzeit-Inselanlage“ Aktiviert

Die Idee finde ist gut

KingJosef · 12. Dezember 2025 um 18:57

jayjojayson · 12. Dezember 2025 um 23:03

Guten Abend, war heute mit Weihnachtfeier beschäftigt. Vielen lieben Dank für das weitere Feedback. Da freue ich mich sehr, wenn die Card gefällt und auch genutzt wird. @Jochen Ich habe meinen Test für die Tageszeitberechnung abgeschlossen und nun sollte auch korrekt am nächsten Tag wieder die Tageszeitlänge berechnet werden. Die Animation der Bilder für Vormittag, Mittag und Nachmittag sind ebenfalls implementiert und müssten jetzt flüssig laufen. Bei mir klappt es jedenfalls. Kann hier nur ein gif zeigen, aber so hat man eine Vorstellung. Ach ja und das Mondbild ist getauscht, so wie in der Vorschau oben. Die neue Version steht zum Download bereit.

sun-positiion-card-animation

@Popey FFW ist super, so tragen wir alle zur Gemeinschaft bei. Der eine so der andere so, finde ich Klasse. Deine beschriebene Idee kam mir tatsächlich auch schon in den Kopf, aber das Problem daran ist, es würde eine Wetterintegration benötigt. Die Sun Position Card funktioniert halt mit der internen HA sun.sun Entität, die hat eigentlich jeder und soll auch nur den aktuellen Stand der Entität bildlich darstellen (ändern sich ja über den Tag hinweg).
Beim Wetter braucht man halt noch eine extra Integration, die einem eine Entität mit aktuellen Wetterstand (sonnig, wolkig, usw.) bereitstellt. Dann müsste man entsprechend mehr Bilder erstellen und für die ganzen möglichen Szenerien hinterlegen. Das ist daher leider keine leichte Sache und mal schnell gemacht. Aber mal schauen was noch so kommt. Aktuell baue ich an etwas, wäre schön wenn ich das hinbekomme, dass den Stand anders darstellen kann.

RMortan · 13. Dezember 2025 um 14:03

Mach weiter so mit deiner Karte… Bei mir hat sie auch schon Einzug gehalten… Muss nur noch den Endplatz auf dem Hauptdashboard finden

Popey · 13. Dezember 2025 um 14:11

Ich hab mir schon gedacht das die Programmierung wesentlich schwieriger ist als so mit Leichtigkeit niedergeschriebenen Visionen. Und im nachträglich hab ich mir das auch noch mal überlegt, und bin dabei zu dem gleichen Ergebnis gekommen wie du. Das eigentlich die Wetterkarte integriert gehört, oder die Sun-Pos in die Wetterkarte.
Wie dem auch sei sicherlich alles nicht so einfach.
Aber mal ein etwas einfacheres Thema, vielleicht ist es sogar bereits schon umgesetzt und bisher nur nicht zu sehen. Und das wäre die Richtung des Mondes Zunehmend und abnehmend bereits integriert? Denke dies ist sicherlich eine leichtere Aufgabe ist.
Aber ganz egal. Für alle Home-Assistant Benutzer die wie ich keine Ahnung vom Programmieren und Yamelkod haben ist jede Karte die so einfach zu handhaben ist ein wahrer Segen. Von dem her vielen dank für deine Arbeit.

jayjojayson · 13. Dezember 2025 um 14:18

Danke. Ich habe Sie bei mir mit in die große Wettervorhersage Card eingebaut. Passt dort top hin.

Neue Erweiterung ist auch schon fertig, so dass Zeiten zentriert oder im block-Satz konfiguriert werden können. Scheint auch direkt so zu funktionieren, wie dachte. Jetzt versuche ich mich an der Übersetzung für Englisch und Deutsch.

@Popey Den Ansatz mit dem Mond verfolge ich weiter, aber auch hier liefert die sun.sun Entität dazu leider keine weiteren Details. Die Daten für den aktuellen Stand des Mondes müssen woanders herkommen. Mal schauen wie das in Zukunft lösen könnte.

RMortan · 13. Dezember 2025 um 15:38

@jayjojayson Die Wetter Karte ist cool… Ich nehme an du stellst diese wieder online auf dein Github…

Mach weiter so

jayjojayson · 13. Dezember 2025 um 16:09

Na klar, die ist sogar schon drin (Wetterbericht Card), nur noch nicht mit aktueller Sun-Postion-Card aktualisiert. Da musst du einfach im Code die markdown-card gegen die Sun-Postion-Card austauschen, der Rest ist dann so wie im Bild zu sehen.

AndyHA1964 · 14. Dezember 2025 um 12:12

……… coole Karte, danke dafür, hab sie auch sofort auf meinem Dashboard für meine PV platziert, tolle Idee weiter so…

jayjojayson · 14. Dezember 2025 um 15:41

Ich war wieder fleißig, war eine lange Nacht, aber hat Spaß gemacht und ich habe einiges verändert. Musste heute noch ein paar Dinge korrigieren, sollte nun alles passen. 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.

ToDo für die nächsten Tage, die Berechnung von @Technikperry für Sonnenstand hat mir sehr gut gefallen und wir mit in die Card aufgenommen. Dann kann man zwischen klassischer und berechneter Ansicht der Sonne wechseln.

Technikperry · 14. Dezember 2025 um 16:10

Echt gut gelungen
Du kannst den Mond aber auch animieren:

type: custom:button-card
entity: sensor.moon
name: Mond
show_state: true
show_icon: false
aspect_ratio: 1/1
triggers_update:
  - sensor.nasa_mondbild_url
  - sensor.time
styles:
  card:
    - background-color: "#4398C3"
    - border-radius: 50%
    - box-shadow: 3px 8px 8px
    - padding: 10px
    - background-repeat: no-repeat
    - background-position: center
    - background-size: 115%
    - background-image: |
        [[[
          const url = states['sensor.nasa_mondbild_url']?.state;
          return (url && url !== 'unknown')
            ? `url("${url}")`
            : 'none';
        ]]]
  name:
    - justify-self: center
    - align-self: end
    - padding-bottom: 6px
    - font-size: 16px
    - color: "#ffffff"
  state:
    - justify-self: center
    - align-self: start
    - padding-top: 6px
    - font-size: 14px
    - color: "#ffffff"
tap_action:
  action: more-info

Der Sensor:

sensor:  
  - platform: rest
    name: "NASA Mondbild URL"
    unique_id: nasa_moon_image_url
    resource_template: >-
      https://svs.gsfc.nasa.gov/api/dialamoon/{{ states('sensor.nasa_mond_datum') }}
    value_template: >-
      {% if value_json is defined
            and value_json.image is defined
            and value_json.image.url is defined %}
        {{ value_json.image.url }}
      {% else %}
        unknown
      {% endif %}
    scan_interval: 3600

  - name: "NASA Mond Datum"
    unique_id: nasa_moon_datetime
    state: "{{ now().strftime('%Y-%m-%dT%H:%M') }}"

wird dann alle Stunde aktualisiert. Nachteil ist nur, wenn die NASA mal kein Bock mehr darauf hat ist auch der Mond weg
Den name und state-Block braucht man eigentlich nicht. War im Endeffekt auch nur eine Bastelei für meine Mondkarte.