Ankündigung

**scw2wi** · 23.12.2024, 16:07

Hier noch ein Beispiel, was jemand mit multiple-entity-row gebaut hat.

HACS-multiple-entity-row.png

Da diese Card die Werte nicht runden kann, muss man das bei Bedarf mit einem Template-Sensor vorab bearbeiten (ChatGPT liefert dazu gerne Lösungen).

Achtung: Der YAML-Code hat Unicode Symbole, daher nicht als ASCII behandeln!

HTML-Code:

type: entities
card_mod:
  style: |
    .card-content {
      padding: 2px 2px 2px 0px;
      spacing: -10px;
    } :host {
      --paper-item-icon-color:
      {% set beaufort = states('sensor.wind_speed_beaufort') | int %}
      {% if 1 <= beaufort <= 2 %} green;
      {% elif 3 <= beaufort <= 4 %} yellow;
      {% elif 5 <= beaufort <= 6 %} orange;
      {% elif 7 <= beaufort <= 8 %} red;
      {% else %} purple;
      {% endif %} !important;
    }
entities:
  - type: custom:multiple-entity-row
    entity: sensor.wind_speed
    icon: mdi:windsock
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            display: none;
          }
        .: |
          .entities-row {
           align-items: start !important;
           width: 100%;
           justify-content: space-evenly !important;
          }
    show_state: false
    entities:
      - entity: sensor.wind_speed
        name: Windspeed 🚩
      - entity: sensor.wind_speed_beaufort
        name: Bft 🍃
      - entity: sensor.wind_bearing_cardinal
        name: Richtung 🧭
      - entity: sensor.temperature
        name: Temp 🌡
      - entity: sensor.feels_like_temperature
        name: gefühlt 🌡
      - entity: sensor.weather_condition
        name: Wetter 🚨

**Tom Bombadil** · 23.12.2024, 19:48

Danke für die (erneut) schöne Zusammenfassung!

Zur custom:button-card sollte vielleicht noch erwähnt werden, dass bei der Verwendung von Grids jedes Grid-Element wiederum eine weitere Karte aufnehmen kann. Dadurch lassen sich Dinge wunderbar ineinander stapeln. Durch Weglassen von (Innen)Rahmen, individuelle Größenangaben der einzelnen Elemente usw lassen sich ganz passable und sehr kompakte GUI-Elemente bauen:

image.png buttoncards.png image.png image.png

Solche 'Grids' kann man zB mit Online-Tools entwerfen - hier mal ein Beispiel:

1. Entwuf im Online-Tool

klick

2. Überführung des Codes in HA

Code:

type: custom:button-card
title: Trovis-Regler-komplett
name: ""
styles:
  grid:
    - grid-template-areas: |
        "samson modell anlage"
        "button1 display display"
        "button1 display display"
        "button2 display display"
        "button2 chart chart"
        "button3 chart chart"
        "button3 chart chart"
    - grid-template-rows: 1fr min-content min-content min-content min-content 1fr
    - grid-template-columns: 1fr 2fr 1fr
    - gap: .1rem
  custom_fields:
    samson:
      - background: blue
    modell:
      - background: blue
    anlage:
      - background: blue
    button1:
      - background: blue
    button2:
      - background: blue
    button3:
      - background: blue
    display:
      - background: blue
      - height: 100%
    chart:
      - background: blue
      - height: 100%
custom_fields:
  samson: .
  modell: .
  anlage: .
  button1: .
  button2: .
  button3: .
  display: .
  chart: .

image.png

3. Einige Tage und viel Arbeit später
Das fertige Bildschirmelement, wobei das Grid bzw. dessen Elemente ('custom_fields') aus Unter-Karten wie zB weiteren custom:button-cards, einem plotly-graph sowie einer markdown-Karte und Bildelementen bestehen. Das ganze ist einfach eine riesige custom:button-card mit diversen gezielt angeordneten Unterkarten:

image.png

Ein weiterer, riesiger Vorteil der custom:button-card ist die Möglichkeit, [[[ JavaScript ]]] an beliebiger Stelle zu integrieren. Ist die Hauptkarte eine custom:button-card, erhalten auch alle darin eingebetteten Unterkarten diese Möglichkeit (selbst, wenn sie von sich aus gar keine JS-Einbettung unterstützen). Damit steht einem die gesamte Welt der Programmierung und Datenanholung/Manipulation innerhalb der Visu zur Verfügung (ja, man kann so direkt auf Entitäten zugreifen und mit diesen rechnen, sie manipulieren etc).

Code:

      styles:
        card:
          - border-width: 0px
          - font-size: 35px
        state:
          - animation: |
              [[[
                if (states['sensor.my_mobile_phone'].state >= 0)                      
                  return "blink 2s";
              ]]]

Man merkt schon: Bin ein Riesen-Fan der Karte. Weitere Anregungen hier - einfach mal 5 Minuten runterscrollen, Bilder ansehen und wirken lassen. Sind auch extrem viele Codebeispiele dabei. Je weiter sich die Karte im Laufe der Jahre entwickelt hat, desto schicker wird es ...

/tom

**scw2wi** · 23.12.2024, 20:55

CSS Card_Mod, Jinja2 Templating und JavaScript sind mächtige Möglichkeiten der individuellen Anpassung. Ich muss noch ganz schön viel lernen, um das auch effizient einsetzen zu können. Leider ist auch ChatGPT hier in den meisten Fällen überfordert.

**Tom Bombadil** · 24.12.2024, 00:08

Auch ich bin da nach wie vor im 'Einsteigermodus'. Allerdings nutze ich so gut wie nie die grafische Konfiguration von Dingen, sondern eigentlich immer die textbasierte Variante (mein innerer Monk aka "Das Frontschwein" lässt eine andere Arbeitsweise nicht zu). Den Menüpunkt 'Helfer', über den hier regelmäßig gesprochen wird, hab ich z.B. nie bewusst angesehen - das sind vermutlich einfach template sensors, die da angelegt werden; irgendwann muss ich das mal ausprobieren.

Ich habe mich am Anfang auch schwer getan, die Gesamtzusammenhänge zu verstehen, obwohl ich in SmartHomeNG/smartVISU bereits einiges an YAML und auch diverse eigene Macros für die Template Engine TWIG geschrieben hatte. Also hier nochmal die Basics für 'Otto Normalanwender', aus meiner heutigen 'learning-by-doing' Sicht geschrieben:

Alles wird in YAML geschrieben/abgelegt, da YAML die Organisationsstruktur vorgibt, die HA 'kennt' und interpretieren kann.
Dem müssen sich alle Funktionalitäten unterordnen, auf die der Endanwender normalerweise Zugriff hat.
Netterweise gibt es oft draufgepropfte grafische Helfer, die ein Zusammenklicken ermöglichen und YAML produzieren.
Diese bieten aber oft nicht alle Möglichkeiten an; deshalb wird dann irgendwann in den YAML-Text-Modus gewechselt.
HA benötigt aus internenGründen zum Funktionieren unter anderem: Python (Programmiersprache), Jinja2 (Template Engine), JavaScript (Programmiersprache). Denn damit (und etlichem anderen) wurde HA programmiert.
Python und JavaScript sind reguläre Programmiersprachen.
Beide können in eigene Projekte eingebunden werden.
Jinja2 kann man sich wie einen 'Maskengenerator' vorstellen - wiederkehrende Bildschirmmasken ('Templates') werden per Programmierung mit Feldern bestückt, befüllt wird dann bei der Ausgabe. Dazu wird eine vollständige Programmiersprache benötigt, deren Kommandos man sich auch anderweitig zu Nutze machen kann.
HA unterscheidet zwischen Backend ("HA") und Frontend (GUI, "Lovelace", Dashboards und Karten).
Beide werden über YAML konfiguriert. Backend KANN eine Brücke zu Jinja öffnen (über spezielle Sensoren), Frontend zu JavaScript (nur wenige Karten).
Den letzten Stichpunkt nochmal lesen und verstehen.

Ok - jetzt wissen wir, dass es YAML und 'darunter' Jinja und Javascript gibt. Wo kann ich was einsetzen?

Im Backend, wo Entitäten ("Dingsbumse", Sensoren", "Messpunkte") nach Domain ("Dingsbums-Typ" wie sensor, binary_sensor, switch usw) definiert werden, gibt es spezielle Dingsbumse, 'Template Sensors' genannt.

Diese können mit Jinja Scripts bestückt werden. Alles im Script ausserhalb geschweifter Klammern und / oder was innerhalb von {{ Wert }} steht, wird dabei als Ergebnis bzw. errechneter Sensorwert verstanden.

image.png

Jinja Scripts kann man sogar für wiederkehrende Dinge in Macros ablegen (=die eigentliche Aufgabe einer Template Engine).
Anmerkung: Es gibt unterschiedliche Klammern für unterschiedliche Zwecke in Jinja, führt hier aber zu weit. --> Jinja Docs

Im Frontend -also der Benutzer-Oberfläche mit ihren Karten- gibt es einige Karten, die einen 'Tunnel' zum eingebauten JavaScript von HA beherrschen. Der Tunnelaufbau ist nicht genormt; custom:button-card verwendet z.B. [[[ das_script ]]], custom: plotly-graph verwendet $ex { das_script }. Über JS sind sämtliche Entitäten und auch Attribute zugreifbar, auslesbar und manipulierbar:

image.png

Das auf einer Picture Elements Card auf dem Grundriss des Hauses positionierte Ergebnis:
image.png

Anmerkung: Die meisten Karten implementieren JS nicht, da mit Aufwand und Support für den Programmierer verbunden.
Auch ist mir keine 'default' Lovelace Karte bekannt, die JS kann (nur die zusätzlich über HACS installierten).
Tip zur Anmerkung: Gewünschte 'non-JS' Karte in eine übergeordnete Karte mit JS-Support einbetten (zB in eine custom:button-card), dann wird die JS-Fähigkeit vererbt, und es geht doch.

Zusammenfassung:

- Backend + Template-fähige Entitäten = YAML & Jinja,
- Frontend + JS-fähige Karten = YAML & JavaScript.

Hoffe, das hilft dem einen oder anderen weiter ...

/tom

Angehängte Dateien

image.png (44,2 KB, 670x aufgerufen)

**Punker Deluxe** · 24.12.2024, 02:31

Tom Bombadil, vielen Dank

Ich versuche auch ständig dazuzulernen, JS ist lange her bei mir, jeden Kommentar von dir versuche ich nachzuvollziehen/umzusetzen.

Auf jeden Fall dir und deiner Familie frohe Feiertage.

**scw2wi** · 24.12.2024, 10:37

Zitat von Tom Bombadil Beitrag anzeigen

Hoffe, das hilft dem einen oder anderen weiter ...

Ich würde sagen, mehr als das.
Obwohl ich schon sehr viel Doku zu HA gelesen habe, bin ich noch auf keine so übersichtliche Zusammenfassung der verschiedenen Möglichkeiten gestoßen.
Jetzt wird mir auch klar, warum die Karten sich so unterschiedlich verhalten. Das ist zwar schade, aber so ist es nun mal.

**scw2wi** · 26.12.2024, 10:34

Zitat von Tom Bombadil Beitrag anzeigen

Zur custom:button-card sollte vielleicht noch erwähnt werden, dass bei der Verwendung von Grids jedes Grid-Element wiederum eine weitere Karte aufnehmen kann.

Du hast mich da auf eine tolle Idee gebracht.

Bisher habe ich zum stacken von mehreren Karten eine der stack cards verwendet (vertical-stack, horizontal-stack, stack-in-card). Das funktioniert auch recht gut, solange die Karten alle die gleiche Größe haben. Wenn ich unterschiedlich große Karten gestackt habe, war die Anpassung an ein brauchbares Layout recht mühsam.

Nicht so bei der button-card, die kann alles stacken, egal wie groß die einzelnen Karten sind. Ich verwende sie daher jetzt nicht nur wenn ich ein 2-dimensionales grid benötige, sondern auch bei 1-dimensionalen grids mit unterschiedlich großen Karten.

Hier nun das Ergebnis.

HACS Button-Card und Canvas-Gauge für Leistung.png

Die obere Karte besteht aus 5 Anzeigen mit button-card gruppiert.
In der Mitte eine canvas-gauge zur Anzeige von Lieferung/Bezug.
In den 4 Ecken kleine button-cards zur Anzeige von Haus-Akku, PV, Wallbox, Haus-Verbrauch.

Hier ein kurzer Code-Auszug, der vollständige YAML-Code ist attached, die Sensoren sind aber derzeit noch gefakt.

HTML-Code:

type: custom:button-card
styles:
  card:
    - overflow: unset
  grid:
    - grid-template-areas: "'akku bezug pv' 'pwk2 bezug heiz' 'pkw bezug haus'"
    - grid-template-columns: 1fr 2fr 1fr
    - grid-template-rows: min-content min-content min-content
  custom_fields:
    bezug:
      - align-self: auto
      - justify-self: auto
    akku:
      - align-self: start
      - justify-self: start
      - padding-left: 20px
    pv:
      - align-self: start
      - justify-self: end
      - padding-right: 20px
    pkw:
      - align-self: end
      - justify-self: start
      - padding-left: 20px
    haus:
      - align-self: end
      - justify-self: end
      - padding-right: 20px
custom_fields:
  bezug:
    card:
      type: custom:canvas-gauge-card
      # code der Bezugs Karte
  akku:
    card:
      type: custom:button-card
      # code der Akku Karte
  pv:
    card:
      type: custom:button-card
      # code der PV Karte
  pkw:
    card:
      type: custom:button-card
      # code der Auto Karte
  haus:
    card:
      type: custom:button-card
      # code der Haus Karte

Die untere Karte hatte ich früher mit einer stack card gestackt, aber die mittlere Anzeige war nicht in die Mitte zu bekommen. Jetzt ist auch das mit einer button-card gestackt und es war für diese Karte kein Problem, die unterschiedlich großen cards zu stacken.

Links hab ich die canvas-gauge-card mit type: linear-gauge verwendet und etwas abgeschnitten, damit man unten nicht den Knubbel vom Fieberthermometer sieht.
Die Anzeige von 0 und 100 hab ich leider nicht größer hinbekommen, wenn da jemand eine card_mod Lösung kennt, bitte melden.

Bei der mittleren Card hab ich mit barStartPosition: right die Skala vertauscht, damit links die Ladung positiv und rechts die Entladung negativ angezeigt wird.

Anbei wie immer der YAML-Code, aber derzeit noch ohne Sensoren also mit hardcodierten Werten.
Diese sollten daher auch nicht auf Plausibilität geprüft werden, da ich bei dieser PV-Leistung vermutlich keinen Netzbezug benötigen würde.
Die Energie-Anzeige bei PV und Haus werde ich jeweils für die letzten 24h berechnen, da mir das am aussagekräftigsten erscheint.
Die Icons und Texte werde ich auch noch etwas bunter gestalten, um z.B. einen tiefen Akkustand deutlich sichtbar zu machen.

Angehängte Dateien

**scw2wi** · 26.12.2024, 15:27

Und gleich das nächste Beispiel einer Button-Card, diesmal aber wieder herkömmlich gestackt.

HACS-button-card Server.png

Es ist das bekannte Beispiel wie es auch auf Github zu finden ist, jedoch hat bei mir aspect_ratio nicht zufriedenstellend funktioniert und ich musste die Größe mit width und height vorgeben. Für die Werte habe ich eigene Felder definiert, da es so besser lesbar ist. Im Code sind (wie bei mir zur Zeit noch üblich) alle Werte hardcodiert.

Ich hab mir mal ausgerechnet, wie groß mein Wandtablett werden muss, um all das anzeigen zu können, was ich jetzt entwerfe.

Auf meinem 24 Zoll 16:10 Monitor benötigt das Dashboard einen Platz von 295 x 490 mm und viel kleiner sollte es am Wand-Display dann auch nicht sein. Das häufigste Waveshare Display ist jedoch "nur" 15 Zoll groß, es gibt aber auch welche mit 18 oder 21 Zoll, aber so groß wollte ich es eigentlich nicht haben.

15.6 Zoll: 193 x 344 mm
18.5 Zoll: 230 x 409 mm
21.5 Zoll: 260 x 479 mm

Leider ist Waveshare irgendwie bei den eigentlich schon wieder veralteten 16:9 hängen geblieben, daher muss ich mir überlegen, was ich mit dem seitlichen Platz machen soll. Vielleicht kann ich das Menü von oben zur Seite verlegen, dann wäre der Platz gut genutzt.

Angehängte Dateien

HACS-button-card Server.yaml.txt (8,5 KB, 27x aufgerufen)

**scw2wi** · 27.12.2024, 10:06

Hier das nächste Beispiel einer gestackten Karte.

Alle Karten, die ich kenne, stellen die Lichtfarbe in Kelvin ein, nur ich wollte es unbedingt anders machen und die Farbe in fixen Mired-Schritten verstellen. Das hat den Vorteil, dass konstante Mired-Schritte einen linearen Farbverlauf ergeben, was konstante Kelvin Schritte nicht leisten können. Ich hab dazu in der input_numbers.yaml folgendes für den Mired-Wert definiert.

HTML-Code:

haus_lichtfarbe_mired:
  name: Lichtfarbe im Haus in Mired
  initial: 330 # 3.030 Kelvin (~3.000 Kelvin)
  min: 200 # 5.000 Kelvin
  max: 420 # 2.380 Kelvin (~2.400 Kelvin)
  step: 10

und in template_sensors.yaml die Umrechnung in Kelvin und eine Rundung auf 3 signifikante Stellen.
Das hier definierte Farb-Attribut wird in der Card dann die Textfarbe umschalten, das könnte man auch noch in kleinere Schritte aufteilen.

HTML-Code:

- platform: template
  sensors:
   haus_lichtfarbe_kelvin:
      friendly_name: "Lichtfarbe im Haus in Kelvin"
      unit_of_measurement: "K"
      value_template: >
        {% (1000000 / states('input_number.haus_lichtfarbe_mired') | int / 10 ) | round(0) | int * 10 %}
      attribute_templates:
        color: >
          {% set mired = states('input_number.haus_lichtfarbe_mired') | int %}
          {% if mired < 270 %}
            lightskyblue
          {% elif mired > 350 %}
            burlywood
          {% else %}
            darkgray
          {% endif %}

Als Karte kommt eine entities card zum Einsatz. Mir gefällt der Card-Modifier numberbox-card recht gut, wo man den Wert mit Plus/Minus Tasten verstellen kann. Die Icons dazu hab ich durch Thermometer-Icons ersetzt, die ich eigentlich noch einfärben wollte, aber das hab ich nicht geschafft. So ganz zufrieden war ich dann doch nicht mit der Lösung, denn auch der Schieberegler hat seine Vorteile, und so hab ich ganz einfach (naja, so ganz einfach war's dann doch nicht) eine Mischung gebaut, die beides kann.

HACS-numberbox-card für Lichtfarbe.png

Hier der gekürzte YAML-Code, der gesamte Code ist wie immer attached.

HTML-Code:

type: vertical-stack
cards:
  - type: entities
    entities:
      - type: custom:numberbox-card
        entity: input_number.haus_lichtfarbe_mired
        .......
        secondary_info: >
          Mired: %input_number.haus_lichtfarbe_mired:state:~0 <br/>
          Kelvin: %sensor.haus_lichtfarbe_kelvin:state <br/>
        card_mod:
        .......
            div.secondary {
              color: {{ state_attr('sensor.haus_lichtfarbe_kelvin', 'color') }};
            }
  - type: entities
    entities:
      - entity: input_number.haus_lichtfarbe_mired
        .......
    card_mod:
      style: |
        ha-card {
          .......
          background-color: transparent;
          pointer-events: none !important;
        }

Ich hab mit card_mod sowohl den Slider als auch die Plus/Minus Buttons etwas herumschieben müssen, damit sie sich gut zusammenfügen.

Mit background-color: transparent hab ich die untere Card sichtbar gemacht, damit sie aber auch bedienbar wird, war noch pointer-events: none nötig. Den Trick hab ich von ChatGPT, das ich zwar immer seltener bemühen muss, in manchen Fällen aber doch noch sehr hilfreich ist.

So eine Card könnte man auch recht gut zum Einstellen der Lautstärke verwenden, aber dafür hab ich im HA-Forum mit paper-buttons-row eine bessere Lösung gefunden.

Angehängte Dateien

HACS-numberbox-card für Lichtfarbe.yaml.txt (1,6 KB, 3x aufgerufen)

**scw2wi** · 31.12.2024, 19:00

Da ich am Dashboard in der obersten Ebene keine Verstellmöglichkeit haben möchte (das erfolgt immer erst eine Ebene darunter), habe ich für's Dashboard eine neue Karte gebaut, wo die Farbtemperatur nur angezeigt aber nicht verstellt werden kann.

HACS-button-card zur Anzeige der Lichtfarbe.png

Die Basis bildet wieder die custom:button-card zum stacken der weiteren Karten.
Die mushroom-template-card ist für das Icon und den Text daneben.
Die canvas-gauge-card zeigt sich diesmal als liegende linear-gauge und war hier überraschend einfach in den Griff zu bekommen.
Die markdown card ist gleich 2x im Einsatz für die bunten Kelvin Werte links und rechts unten.
Das Ganze ist noch garniert mit ein wenig card_mod.
Um die Karte am Monitor und am Handy halbwegs gleich aussehen zu lassen, habe ich die Werte häufig als % und nicht als Pixel angegeben.

Und wer sich für eine Spritpreis-Karte mit Tankstellen-Symbolen interessiert, der Code ist hier zu finden.
Wer eine Karte zur Anzeige der Flugdaten von Flightradar24 benötigt, der findet hier einen Code dazu.

Angehängte Dateien

HACS-button-card zur Anzeige der Lichtfarbe.yaml.txt (3,1 KB, 2x aufgerufen)

**scw2wi** · 01.01.2025, 10:10

Ein weiterer Vorteil der custom:button-card beim stacken ist, dass ich damit den Inhalt in einem gemeinsamen Rahmen anzeigen und auch enger zusammen rücken kann. Hier ein Beispiel.

HACS stacking Vergleich.png

HTML-Code:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: gauge
        ..... # code der Karte 1
      - type: gauge
        .....# code der Karte 2
  - type: horizontal-stack
    cards:
      - type: gauge
        .....# code der Karte 3
      - type: gauge
        .....# code der Karte 4

Im Vergleich dazu ist die button-card mit den entsprechenden card_mods natürlich aufwendiger und muss auch komplett in YAML definiert werden, wobei ich das jetzt nicht mehr als Nachteil ansehe und für mich das Ergebnis wichtiger ist.

HTML-Code:

type: custom:button-card
styles:
  card:
    - height: 18em
  grid:
    - grid-template-areas: "'g1 g2' 'g3 g4'"
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr 1fr
custom_fields:
  g1:
    card:
      type: gauge
        ..... # code der Karte 1
  g2:
    card:
      type: gauge
        ..... # code der Karte 2
  g3:
    card:
      type: gauge
        ..... # code der Karte 3
  g4:
    card:
      type: gauge
      entity: sensor.dummy_nas_hdd
      name: NAS HDD
      needle: true
      min: 0
      max: 100
      segments:
        - from: 0
          color: LightGreen
        - from: 33
          color: SkyBlue
        - from: 67
          color: khaki
        - from: 78
          color: SandyBrown
        - from: 89
          color: LightCoral
      card_mod:
        style:
          ha-gauge $: |
            .needle {
              fill: #ee877c !important;
            }
            .value-text {
              font-size: 30px !important;
              fill: {{ state_attr('sensor.dummy_nas_hdd', 'color') }} !important;
            }
          .: |
            ha-card {
              border: none;
              bottom: 3.0em;
              background: transparent;
            }
card_mod:
  style: |
    ha-card {
      height: 13em !important;
    }

**scw2wi** · 02.01.2025, 10:29

Es gibt nun eine best-of-both Karte, mit der ich die Lichtfarbe mittels Pfeil-Tasten sowohl in 10 Mired Schritten als auch mittels Slider direkt einstellen kann.
Darunter zeigt die canvas-gauge-card die Lichtfarbe als Balken an.

HACS-layout-card zur Einstellung der Lichtfarbe.png

Das Ganze war nur mit viel Trickserei machbar, da beim Übereinanderlegen von Karten die untere bedienbar bleiben muss.
pointer-events: none hat bei einer Ebene leider nicht mehr funktioniert, auch z-index war keine Hilfe, daher hab ich nach einer anderen Lösung gesucht.
Erst ein komplett neuer Ansatz, zum stacken die layout-card einzusetzen, hat dann zum Ziel geführt.
Die Kelvin-Werte unter der Skala stacke ich nicht mehr mit der markdown-card, dafür hab ich einen neuen Trick gelernt und füge das mit ha-card::before und ha-card::after ein.

Hier die Struktur im Überblick, der gesamte YAML-Code ist wie üblich attached.

HTML-Code:

type: custom:mod-card /* war notwendig, da ich anders nicht die gesamte Höhe der Karte festlegen konnte */
card:
  type: custom:layout-card /* das war meine neue Basis des Zusammenfügens der gauge mit dem Rest,
                              die button-card hat an dieser Stelle nicht so gut funktioniert */
  layout_type: custom:grid-layout
  layout: {}
  cards:
    - type: custom:button-card /* dieser Teil ist gleich geblieben, das hab ich benötigt,
                                  da sich die gauge sonst nicht in der Größe anpassen lässt */
      aspect_ratio: 2.1
      styles:
        card:
          - overflow: unset
        grid:
          - grid-template-areas: "'g1'"
          - grid-template-columns: 1fr
          - grid-template-rows: 1fr
        custom_fields:
          g1:
            - align-self: end
            - justify-self: end
            - padding-bottom: 20px
            - padding-right: 30px
      custom_fields:
        g1:
          card:
            type: custom:canvas-gauge-card
            entity: input_number.haus_lichtfarbe_mired
            card_height: 47
            gauge:
              ....  /* Code der Gauge, wie bereits bekannt */
      card_mod:
        style: |
          ha-card {
            box-shadow: none;
          }
          ha-card::before { /* das ist ein neuer Trick, den ich gefunden habe,
                               damit kann ich Texte einblenden ohne die markdown Karte bemühen zu müssen */
            content: '5.000';
            position: absolute;
            font-size: 0.8em;
            color: lightskyblue;
            top: 82%;
            left: 15%;
          }
          ha-card::after {
            content: '2.400';
            position: absolute;
            font-size: 0.8em;
            color: burlywood;
            top: 82%;
            right: 10%;
          }
    - type: vertical-stack /* auch dieser Teil ist unverändert, damit stacke ich den slider zu den plus/minus Buttons */
      cards:
        - type: entities
          entities:
            - type: custom:numberbox-card
              entity: input_number.haus_lichtfarbe_mired
              ....  /* Code der Numberbox, wie bereits bekannt */
        - type: entities
          entities:
            - entity: input_number.haus_lichtfarbe_mired
             name: " "
              icon: " "
              ....  /* Code des Sliders, wie bereits bekannt */
card_mod:
  style: |
    ha-card {
      height: 12em !important; /* das ist notwendig, da die gesamte Karte
                                  vor lauter card_mod ihre eigene Größe nicht mehr kennt */
    }

Diese unscheinbare Karte hat nun fast so viel Zeit gekostet wie die Wetter-Karte aber ich hab ne Menge dabei gelernt und kein einziges Mal ChatGPT gefragt, denn das hätte mir dabei ohnehin nicht helfen können. Das Problem dabei ist, dass jede Karte etwas anders funktioniert, jede hat ihre Vor- und Nachteile und oft ist man mit einer Karte zwar schneller kurz vorm Ziel, aber wirklich erreichen kann man es dann doch nur mit einer anderen Karte. Bei mir war's der Wechsel von der button-card zur layout-card, der dann die Lösung gebracht hat.

Update: Noch ein Trick, den ich hier erstmals eingesetzt habe.

HTML-Code:

              card_mod:
                style: |
                  ha-slider {
                    position: relative !important;
                    bottom: 0.4em !important;
                    width: 8em !important;
                    @media (orientation: landscape) {
                      left: 2.5em !important;
                    }
                  }

Am Monitor muss ich den Slider um 2.5em nach rechts schieben, am Handy im Hochformat aber nicht.

Angehängte Dateien

HACS-layout-card zur Einstellung der Lichtfarbe.yaml.txt (4,5 KB, 0x aufgerufen)

**henfri** · 09.01.2025, 23:04

Hallo,

ich suche nach einer Card, die der tile-card ähnelt, aber die Icon-Farbe abhängig vom entity.state anpassen kann.
Ich habe eine Entity erzeugt:

Code:

      - name: "Fensterstatus Gästebad"
        unique_id: "fensterstatus_gaestebad"
        state: >
          {% if is_state('binary_sensor.eg_gaestebad_reed_fenster_gekippt', 'off') %}
            gekippt
          {% elif is_state('binary_sensor.eg_gaestebad_reed_fenster_geschlossen', 'off') %}
            geschlossen
          {% else %}
            offen
          {% endif %}
        icon: >
          {% if is_state('binary_sensor.eg_gaestebad_reed_fenster_gekippt', 'off') %}
            kuf:fts_window_1w_tilt
          {% elif is_state('binary_sensor.eg_gaestebad_reed_fenster_geschlossen', 'off') %}
            kuf:fts_window_1w
          {% else %}
            kuf:fts_window_1w_open
          {% endif %}

Mit der button-card geht das

Code:

type: custom:button-card
entity: sensor.fensterstatus_gastebad
name: Gästebad
size: 40%
layout: icon_name_state2nd
state:
  - value: geschlossen
    color: green
  - value: offen
    color: red
  - value: gekippt
    color: orange
show_icon: true
show_name: true
show_state: true
grid_options:
  columns: 6
styles:
  card:
    - font-size: 12px
  name:
    - justify-self: left
  state:
    - justify-self: start
    - font-size: 10px

25-01-09__58-23.01.43_Home_–_Home_Assistant_-_Google_Chrome.png

Aber es sieht leider doch ne ecke anders aus. Auch sieht man, dass die Card nicht so recht mit den flexiblen Layouts, wo die Höhe&Breite in einem Raster ist klarkommt (die Höhe stimmt hier nicht mit den Anderen überein).

Hat jemand einen Tipp für eine geeignetere Card?

Gruß,
Hendrik

**zenvy** · 09.01.2025, 23:29

Die mushroom template card kann das. Das ist quasi eine Tile card nur komplett templatable:

Code:

type: custom:mushroom-template-card
primary: >-
  {%- set r = {"on": "Bereit", "off": "Gestoppt", "unknown": "Unbekannt",
  "unavailable": "Nicht verfügbar"} -%}

  {{ r[states('binary_sensor.buro_beschattung_bereit')] }}
secondary: >-
  {%- set r = {"on": "freigegeben", "off": "gesperrt", "unknown": "?",
  "unavailable": "~"} -%}

  {{ r[states(entity)] }}
icon: mdi:sunglasses
icon_color: >-
  {%- set r = {"on": "green", "off": "red", "unknown": "gray", "unavailable":
  "orange"} -%}

  {{ r[states('binary_sensor.buro_beschattung_bereit')] }}
entity: switch.buro_beschattung_freigeben
badge_icon: >-
  {%- set r = {"on": "mdi:check-bold", "off": "mdi:cancel", "unknown":
  "mdi:help", "unavailable": "mdi:exclamation-thick"} -%}

  {{ r[states(entity)] }}
badge_color: >-
  {%- set r = {"on": "green", "off": "red", "unknown": "gray", "unavailable":
  "orange"} -%}

  {{ r[states(entity)] }}

Ankündigung

HACS Entity Cards

HACS Entity Cards

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar