Pro Cards: Flexible und gut designte Karten für Pros ;)

[malte-wessel]

Hallo Leute!

Ich würde gerne ein Projekt vorstellen. Und zwar: Pro Cards
Ich habe nie wirklich gute custom cards für meine Dashboards gefunden, daher habe ich diese recht umfangreiche Sammlung entwickelt.

Disclaimer, ich bin zwar selber Software Entwickler, den Code hat allerdings größtenteils Claude geschrieben. Nichtsdestotrotz finde ich die Sammlung sehr gelungen und hoffe dass für den ein oder anderen was dabei ist!

Hier einige Screenshots von Dashboards mit unterschiedlichen Karten

Freue mich über euer Feedback!

Malte

Pro Cards

[mkonline]

Sehr schön. Muss ich mir mal genauer ansehen

[mkonline]

Hab das gerade mal installiert, kann aber keine von den Karten finden. Auch Code einfügen geht nicht, HA meldet dann das die nicht vorhanden sind. Hab ich was übersehen?

[rapahl]

Hab ich auch gerade installiert. Allerdings manuell, ohne HACS. Code eingefügt und funktioniert.
Werde ich mir morgen mal genauer anschauen. Mal sehen, wie die Smartphone-Ansicht ist.

[Roddi]

Ich habe den ganzen Tag heute (mit Hilfe von Claude) die Karten mal so nach und nach Durchprobiert und bin von der bunten Anzeige meiner Tabs begeistert.

An dieser Stelle ein großen Dank an malte-wessel für das zur Verfügung stellen.

[malte-wessel]

@mkonline Klingt, als wäre die Ressource nicht eingetragen. Schau mal unter Einstellungen → Dashboards → Drei-Punkte-Menü → Ressourcen, ob da /hacsfiles/pro-cards/pro-cards.js als JavaScript-Modul steht. Wenn nicht, einfach so eintragen (bei YAML-Dashboards gehört das in die configuration.yaml unter lovelace: resources:). Danach den Browser hard neu laden (Strg+Shift+R) bzw. in der App den Frontend-Cache zurücksetzen.

Falls es dann immer noch nicht geht, sag mir kurz deine HA-Version und ob die Dashboards per UI oder YAML laufen, dann schau ich rein.

Lg, Malte

[malte-wessel]

Danke für das Feedback. Habe gesehen dass du das Azimuth in deinem Dashboard hast. Dafür bastel ich gerade auch an einer Karte, hier ein Screenshot, falls das interessant ist für dich!

PR hier: Add the sun azimuth card by malte-wessel · Pull Request #10 · malte-wessel/pro-cards · GitHub

Lg, Malte

[Roddi]

Schaue ich mir gerne mal an wenn es soweit ist.

[mkonline]

Ja, steht drin

Yaml Dashboard? Ich habe versucht, das über Dashboard bearbeiten, Karte hinzufügen versucht.

Versionen: immer alles aktuell

Mir scheint, als läge es an den Namen der Karten. Wenn ich custom: weather-card nehme, dann kann ich eine Wetter Karte einfügen, aber nicht deine.

[Roddi]

Schon mal direkt mit dem YAML Code von der Webseite probiert? Dort sind viele Beispiele zu finden.

Und hier der Schnippel dazu:

type: custom:weather-card
entity: weather.home
sections:
  - type: hero
  - type: row
    entities:
      - humidity
      - wind_speed
      - { entity: sensor.uv_index, name: UV, visual: ring, min: 0, max: 11, rules: [{ below: 3, color: green }, { above: 3, color: amber }] }
  - type: table
    title: More
    divider: true
    entities: [pressure, dew_point, visibility]

Die richtigen Sensoren müssen natürlich eingetragen werden die in dem System auch vorhanden sind.

[rapahl]

Benenn die Card und die Ressource in weather2-card.js um.

[rapahl]

Hallo malte-wessel,
ich habe da mal ein paar Fragen zur Power-Flow-Card:

Ich hoffe, die Grafiken erklären meine Frage.
VG
Rainer

[Roddi]

Kurze mal dazwischen gesprungen “10000” = kWh ? Sind nicht “1000” Wh = 1 kWh ?

[rapahl]

Hallo Roddi,
das ist wohl wahr. Hier wird aber schon ab 1000 Watt in KW umgewandelt. Ich finde es bis 10 KW (10000 Watt) immer realistischer, die Watt-Zahl anzugeben. Mein Föhn zieht z.B. 1500 Watt, 1,5 KW passen irgendwie nicht so recht zu z.B. 950 Watt Solar-Leistung. Die meisten Leistungen spielen sich irgendwo unter 10 KW ab. Da ist eine Wattangabe angenehmer. Deswegen habe ich ja hier in der Flow-Card die Dezimalstellen auf 3 erweitert. Ist ja schon mal ein guter Kompromiss. Das ist aber nur mein persönlicher Vorschlag.
VG
Rainer
Es geht nur um die Anzeige.

[mkonline]

Vermutlich nicht sehr Updatefest…

[mkonline]

Ja. Wie du oben im Screenshot erkennen kannst.

[rapahl]

Hallo,
so ganz funktioniert der Flow-Chart bei mir nicht. Solarleistung und Batterie-Ladung werden addiert. “Sonstiges” ist nicht plausibel.
Animation u. Flussrichtung ist nur auf dem Smartphone, aber nicht (Chrome, Edge, Firefox) auf dem PC sichtbar. Keine Richtungsanzeige von Solar zu Battery. Animation auf dem Handy viel zu schnell.

type: custom:power-flow-card
home: sensor.power_consumption
sources:
  - type: solar
    entity: sensor.conf_solar_gesamt_watt
    name: Solar Gesamtleistung
    decimals: 3
  - type: battery
    power: sensor.batterien_lade_entladeleistung
    decimals: 3
    name: PV-Akku
    soc: sensor.batterien_batterieladung
  - type: grid
    power: sensor.stromzahler_wirkleistung
    name: Netzbezug
    decimals: 3
consumers:
  - type: house
    entity: sensor.watt_haus
    name: Hausverbrauch
    decimals: 3

[malte-wessel]

Das scheint tatsächlich ein Problem mit den Namen zu sein. Ich werde eine v2 releasen mit “pro” suffix per Karte, dann sollte das hoffentlich funktionieren.

[malte-wessel]

Hallo Rainer,

danke für die ausführlichen Screenshots, das hilft sehr! Ein paar Dinge auf einmal:

Solar + Batterie werden addiert. Das ist ein Vorzeichen-Thema. Die Karte erwartet beim Batterie-Sensor „positiv = entladen". Dein Sensor meldet beim Laden vermutlich positiv, deshalb sieht die Karte 3,1 kW, die aus dem Akku kommen, und rechnet die zum Hausverbrauch dazu. Mit invert: true an der Batterie-Quelle passt es:

- type: battery
  power: sensor.batterien_lade_entladeleistung
  soc: sensor.batterien_batterieladung
  invert: true
  name: PV-Akku

Dann läuft auch der Fluss von Solar in den Akku, und „Sonstiges" wird plausibel (Haus 9 kW minus 2,76 kW Hausverbrauch waren die 6,3 kW Rest).

home: sensor.power_consumption ist das Beispiel aus der Doku, den Sensor gibt es bei dir nicht (deshalb „Haus · 0 W" in deinem ersten Screenshot). Entweder deinen echten Gesamtsensor eintragen oder home einfach weglassen, dann rechnet die Karte das Haus aus den Quellen zusammen.

Erst ab 10 kW in kW anzeigen: geht schon, mit kw_above: 10000 auf Kartenebene. Und die „18,000 W" am Netz kommen daher, dass decimals: 3 auch auf Watt angewendet wird. Besser getrennt setzen: decimals: { w: 0, kw: 3 }, dann steht da „18 W" und „2,448 kW".

Rubrik „Haus" als Verbraucher: guter Punkt, Ich gucke mal was ich da machen kann, sage Bescheid wenn ich eine Lösung habe.

Animation nur auf dem Handy, auf dem PC nicht: das kann ich so nicht nachstellen, bei mir läuft sie in Chrome, Edge und Firefox. Hast du am PC vielleicht „Bewegung reduzieren" im Betriebssystem an? Dann pausiert die Karte die Animation absichtlich. Falls nicht, sag mir kurz Browser-Version und ob es im Inkognito-Fenster auch so ist.

VG
Malte

[mkonline]

Cool, das wäre perfekt