Animierte Card anschauen
- -
-
+### ✨ Funktionen
-
-[](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)
+- **Echtzeit-Animation**: Visualisiert den Energiefluss mit bewegten Partikeln.
+- **Mehrere Quellen & Verbraucher**: Unterstützt Solar, Netz, Batterie und bis zu 3 zusätzliche Verbraucher (z.B. E-Auto, Heizung, Pool).
+- **Kompakte Ansicht**: Eine minimalistische Balkendiagramm-Ansicht (inspiriert von evcc).
+- **Anpassbares Aussehen**:
+ - **Neon Glow**: Leuchteffekte für aktive Stromleitungen.
+ - **Donut Chart**: Optionales Donut-Diagramm um das Haus-Icon, das den Energiemix zeigt.
+ - **Kometenschweif / Gestrichelte Linien**: Wählen Sie Ihren bevorzugten Animationsstil.
+ - **Zoom**: Anpassbare Größe für Ihr Dashboard.
+- **Lokalisierung**: Vollständig übersetzt in Deutsch und Englisch.
+- **Visueller Editor**: Einfache Konfiguration über die Home Assistant UI.
+### 🚀 Installation
----
+#### HACS (Empfohlen)
+1. Stellen Sie sicher, dass HACS installiert ist.
+2. Fügen Sie dieses Repository als benutzerdefiniertes Repository in HACS hinzu.
+3. Suchen Sie nach "Power Flux Card" und installieren Sie es.
+4. Laden Sie die Ressourcen neu, falls Sie dazu aufgefordert werden.
-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.
+#### Manuelle Installation
+1. Laden Sie die Datei `power-flux-card.js` von der [Releases](../../releases)-Seite herunter.
+2. Laden Sie sie in Ihren `www`-Ordner in Home Assistant hoch.
+3. Fügen Sie die Ressource in Ihrer Dashboard-Konfiguration hinzu:
+ - URL: `/local/power-flux-card.js`
+ - Typ: JavaScript Module
-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.
+### ⚙️ Konfiguration
-Wenn euch die custom Card gefällt, würde ich mich sehr über eine Sternebewertung ⭐ freuen. 🤗
+Sie können die Karte direkt über den visuellen Editor in Home Assistant konfigurieren.
-## Features
+**Haupt-Entitäten:**
+- **Solar**: Erzeugung (W).
+- **Netz**: Netzleistung (W). Positiv = Import, Negativ = Export (oder separate Entitäten).
+- **Batterie**: Batterieleistung (W) und Ladestand (%).
-- ### 🔆 **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**
+**Zusätzliche Verbraucher:**
+- Sie können bis zu 3 individuelle Verbraucher (z.B. Auto, Heizung, Pool) mit eigenen Icons und Beschriftungen hinzufügen.
-
-
-
-
-
-
-
----
-
-## 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)
+**Optionen:**
+- **Zoom**: Passen Sie die Größe der Karte an.
+- **Neon Glow**: Aktivieren/Deaktivieren des Leuchteffekts.
+- **Donut Chart**: Zeigt den Energiemix als Ring um das Haus an.
+- **Kometenschweif / Gestrichelte Linie**: Ändern Sie den Stil der Flussanimation.
+- **Kompakte Ansicht**: Wechseln Sie zum Balkendiagramm-Layout.