power-flux-card/docs/README-de.md

---

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

Animierte Card anschauen

---

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" ("INSTALL").

• 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

1. Dateien herunterladen:

   • Lade die sun-position-card.js, sun-position-card-editor.js und die PNG-Bilddateien aus diesem Repository herunter.

2. 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)
     

3. 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:

1. Bearbeitungsmodus aktivieren:

   • Öffne das Dashboard, zu dem die Karte hinzufügt werden soll, und klicke auf Bearbeiten.

2. Karte hinzufügen:

   • Klicke auf + Karte hinzufügen und suche nach der "Sun Position Card".

3. 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:

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:

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

erweitertes Beispiel:

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 <div> for the sun image.
.sun-image	The image <img> element itself.
.times-container	The container for the list of times.
.time-entry	An individual row/entry in the times list (e.g., "Aufgang: 06:30").
.state	The current state text (e.g., "Mittag") when positioned above the image.
.moon-phase-state	The current state text (e.g., "Full-Moon") when positioned above the image.
.degrees	The Azimuth/Elevation text when positioned above the image.
.degrees-in-list	The Azimuth/Elevation text when positioned inside the times list.
.divider	The horizontal line <hr> used as a separator between time entries.

Beispiele

Hier sind einige Beispiele, wie du card-mod in der YAML-Konfiguration deiner Card verwenden kannst.

Schriftgröße und Farbe ändern

Macht den Hauptstatus-Text größer und blau und die Zeiteinträge etwas kleiner und grau.

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.

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).

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.

type: custom:sun-position-card
entity: sun.sun
show_dividers: true
card_mod:
  style: |
    .divider {
      border-top: 2px dashed red;
    }

---

Forum-Discussion