v_2.0
This commit is contained in:
jayjojayson
GitHub
parent
c00804b6b4
commit
d75d4f3113
1 changed files with 38 additions and 280 deletions
|
|
@ -1,290 +1,48 @@
|
|||
[](https://github.com/hacs/plugin)
|
||||
[](https://github.com/jayjojayson/Sun-Position-Card/actions?query=workflow%3Avalidate)
|
||||
|
||||
[](https://github.com/jayjojayson/Sun-Position-Card/releases/)
|
||||
[](https://github.com/jayjojayson/Sun-Position-Card/blob/main/docs/README-de.md)
|
||||
[](https://www.paypal.me/quadFlyerFW)
|
||||
|
||||
Die **Power Flux Card** ist eine erweiterte, animierte Energiefluss-Karte für Home Assistant. Sie visualisiert die Energieverteilung zwischen Solar, Netz, Batterie und Verbrauchern mit wunderschönen Neon-Effekten und flüssigen Animationen.
|
||||
|
||||
<img width="85%" height="auto" alt="sun-position-card-ubersicht" src="https://github.com/jayjojayson/Sun-Position-Card/blob/main/docs/sun-position-card-ubersicht.png" />
|
||||
### ✨ 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.
|
||||
|
||||
|
||||
<img width="48%" height="auto" alt="image" src="https://github.com/jayjojayson/Sun-Position-Card/blob/main/docs/sun-positiion-card.png" /> <img width="48%" height="auto" alt="image" src="https://github.com/jayjojayson/Sun-Position-Card/blob/main/docs/sun-positiion-card2.png" />
|
||||
<img width="48%" height="auto" alt="image" src="https://github.com/jayjojayson/Sun-Position-Card/blob/main/docs/sun-positiion-card4.png" /> <img width="48%" height="auto" alt="image" src="https://github.com/jayjojayson/Sun-Position-Card/blob/main/docs/sun-positiion-card5.png" />
|
||||
|
||||
<details>
|
||||
<summary> <b>Animierte Card anschauen</b></summary>
|
||||
|
||||
<img width="48%" height="auto" alt="image" src="https://github.com/jayjojayson/Sun-Position-Card/blob/main/docs/sun-positiion-card-animation.gif" />
|
||||
</details>
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
### HACS (Empfohlen)
|
||||
|
||||
- Das github über den Link in Home Assistant einfügen.
|
||||
|
||||
[](https://my.home-assistant.io/redirect/hacs_repository/?owner=jayjojayson&repository=Sun-Position-Card&category=plugin)
|
||||
|
||||
- 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.
|
||||
|
||||
<details>
|
||||
<summary> <b>Manuelle Installation über Hacs</b></summary>
|
||||
|
||||
### 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.
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary> <b>Manuelle Installation in HA</b></summary>
|
||||
|
||||
### 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**.
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
<img width="70%" height="auto" alt="image" src="https://github.com/jayjojayson/Sun-Position-Card/blob/main/docs/sun-positiion-card%20config.gif" />
|
||||
|
||||
---
|
||||
|
||||
## 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 `<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.
|
||||
|
||||
<img width="30%" height="auto" alt="image" src="https://github.com/jayjojayson/Sun-Position-Card/blob/main/docs/sun-positiion-card3.png" />
|
||||
|
||||
|
||||
```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.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue