Animierte Card anschauen
[](https://community.home-assistant.io/t/sun-moon-position-card-another-implementation/965201)
[](https://community-smarthome.com/t/custom-sun-position-card-fuer-home-assistant-sonnenstand-card-hacs/9389)
---
Die 🔆 Sun Position Card ist eine benutzerdefinierte Lovelace-Karte zur Visualisierung der aktuellen Sonnenposition mit verschiedenen Optionen, sowie der aktuellen Mondphase und Anzeige weiterer relevanter Sonnenzeiten.
Die Karte ist vollständig über die Benutzeroberfläche des Karteneditors konfigurierbar.
Du benötigst die sun.sun-Entität, die von Home Assistant bereitgestellt wird, sobald dein Home-Standort konfiguriert ist. Die moon.phase-Entität ist optional und wird nur benötigt, um die aktuelle Mondphase anzuzeigen.
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.
Wenn euch die custom Card gefällt, würde ich mich sehr über eine Sternebewertung ⭐ freuen. 🤗
## Features
- ### 🔆 **Sonnestand klassische Darstellung**
- ### 🌅 **Sonnestand berechnete Darstellung**
- ### 🌄 **Sonnestand berechneter Bogen**
- ### 🌙 **Mondphasen – visuelle Darstellung**
- ### 🎞️ **Animierter Sonnenstand**
- ### ⏰ **Anpassbare Zeiten**
- ### 🌤️ **Wetter Status** - NEU
- ### 📐 **Flexibles Layout**
- ### 📍 **Anpassbare Schwellenwerte**
- ### ⚙️ **UI-Konfiguration**
---
## YAML-Modus (Alternative)
Obwohl die UI-Konfiguration empfohlen wird, kann die Karte auch manuell über den YAML-Editor konfiguriert werden:
### Optionen
| name | typ | required | description | standard |
| --------------------- | -------- | ---------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
| `type` | `string` | Yes | `custom:sun-position-card` | |
| `entity` | `string` | Yes | Die Entität Sonne, normalerweise `sun.sun`. | |
| `moon_entity` | `string` | No | Die Entität Mond, normalerweise `sensor.moon_phase`. | |
| `moon_phase_position` | `string` | No | Position Text Mondphase im Verhältnis zum Bild. | `above`, `in_list` |
| `times_to_show` | `list` | No | Eine Liste von Zeiten, die angezeigt werden sollen. | `daylight_duration, next_rising`, `next_setting`, `next_dawn`, `next_dusk`, `next_noon`, `next_midnight` |
| `time_position` | `string` | No | Position der Zeitangaben im Verhältnis zum Bild. | `above`, `below`, `right` |
| `time_list_format` | `string` | No | Format der Zeitangaben Blocksatz oder Zentriert | `block`, `centered` |
| `state_position` | `string` | No | Position des aktuellen Status (über dem Bild, in der Time-Liste). | `above`, `in_list` |
| `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` |
| `view_mode` | `string` | No | Ansichtsoption klassich mit Bildern oder berechneter Sonnenstand. | `classic`, `calculated`, `arc` |
| `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:
```yaml
type: custom:sun-position-card
entity: sun.sun
times_to_show:
- next_rising
- next_setting
time_position: right
show_image: false
```
erweitertes Beispiel:
```yaml
type: custom:sun-position-card
entity: sun.sun
moon_entity: sensor.moon_phase
moon_phase_position: above
state_position: above
show_dividers: true
show_degrees: true
show_degrees_in_list: false
times_to_show:
- next_rising
- next_setting
- daylight_duration
- moon_phase
time_position: right
show_image: true
morning_azimuth: 155
dusk_elevation: 5
noon_azimuth: 200
afternoon_azimuth: 255
animate_images: false
time_list_format: block
view_mode: arc
```
---
## CSS Elemente die bearbeitet werden können:
| Selector | Description |
| ----------------------- | --------------------------------------------------------------------------- |
| `ha-card` | The entire card container. |
| `.card-content` | The main container wrapping all elements inside the card. |
| `.sun-image-container` | The container `
```yaml
type: custom:sun-position-card
entity: sun.sun
state_position: above # State must be 'above' to see the effect on .state
card_mod:
style: |
.state {
font-size: 24px;
color: dodgerblue;
}
.time-entry {
font-size: 14px;
color: #888;
}
```
#### Bild bearbeiten
Fügt dem Bild einen Rahmen hinzu und macht es leicht transparent.
```yaml
type: custom:sun-position-card
entity: sun.sun
card_mod:
style: |
.sun-image {
border: 2px solid var(--primary-color);
border-radius: 10px;
opacity: 0.9;
}
```
#### Background ändern und Shadows entfernen
Setzt einen hellgelben Hintergrund für die Card und entfernt den standardmäßigen Schatten (Box Shadow).
```yaml
type: custom:sun-position-card
entity: sun.sun
card_mod:
style: |
ha-card {
background: #FFFACD;
box-shadow: none;
}
```
#### Trennlinien bearbeiten
Macht die Trennlinie dicker und formatiert sie als gestrichelte rote Linie.
```yaml
type: custom:sun-position-card
entity: sun.sun
show_dividers: true
card_mod:
style: |
.divider {
border-top: 2px dashed red;
}
```
---
## Forum-Discussion
[](https://community-smarthome.com/t/custom-sun-position-card-fuer-home-assistant-sonnenstand-card-hacs/9389) [](https://community.simon42.com/t/custom-sun-position-card-fuer-home-assistant-sonnenstand-card-hacs/72199)