Startseite>Programmierbezogen>Anderer Quellcode
Herunterladen

Karten-Mod 3

Ermöglicht die Anwendung von CSS-Stilen auf verschiedene Elemente des Home Assistant-Frontends.

Installieren

Installieren Sie mit HACS oder sehen Sie sich diese Anleitung an.

Leistungsverbesserungen

Während Card-Mod als Lovelace-Ressource installiert werden kann, werden einige Funktionen stark davon profitieren, wenn es stattdessen als Frontend-Modul installiert wird.

Fügen Sie dazu Folgendes zu Ihrer Datei configuration.yaml hinzu und starten Sie Home Assistant neu: 

 frontend :
  extra_module_url :
    - /local/card-mod.js

Sie müssen diesen Pfad entsprechend dem Installationsort card-mod.js anpassen. Wenn Sie über HACS installiert haben, ist dies wahrscheinlich /hacsfiles/lovelace-card-mod/card-mod.js .

Alle von HACS automatisch hinzugefügten Ressourcendefinitionen können auch nach dem Hinzufügen von extra_module_url unverändert beibehalten werden.

Schnellstart

  • Öffnen Sie Ihre Karte im GUI-Editor
  • Klicken Sie unten auf die Schaltfläche „CODE-EDITOR ANZEIGEN“.
  • Fügen Sie am Ende des Codes Folgendes hinzu: 
 card_mod :
  style : |
    ha-card {
      color: red;
    }

Während Sie tippen, sollte der Text der Karte rot werden.
Außerdem sollte neben der Schaltfläche „VISUAL EDITOR ANZEIGEN“ ein kleines Pinselsymbol angezeigt werden. Dies weist darauf hin, dass diese Karte über einen Karten-Mod-Code verfügt, der im visuellen Editor nicht angezeigt wird.

Schnellstart

Verwendung

Styling-Karten

Karten werden gestaltet, indem der Kartenkonfiguration Folgendes hinzugefügt wird: 

 card_mod :
  style : <STYLES>

In der einfachsten Form ist <STYLES> eine CSS-Zeichenfolge, die in das <ha-card> -Element der Karte eingefügt wird.

HINWEIS: Card-Mod funktioniert nur auf Karten, die ein Ha-Card-Element enthalten. Dazu gehört fast jede Karte, die sichtbar ist, aber nicht z. B. conditional , entity_filter , vertical-stack , horizontal-stack oder grid .

Beachten Sie jedoch, dass diese Karten häufig andere Karten enthalten, an denen Card-Mod arbeiten kann .
Informationen zum Festlegen der Parameter für die enthaltene(n) Karte(n) finden Sie im Handbuch der jeweiligen Karte.

Das unterste Element, das gestylt werden kann, ist die <ha-card> .

Screenshot des ha-card-Elements im Chrome DOM-Inspektor

ha-Karte

TIPP: Home Assistant-Designs nutzen CSS-Variablen. Diese können sowohl im Card-Mod eingestellt als auch verwendet werden – mit vorangestellten zwei Bindestrichen: 

 card_mod :
  style : |
    ha-card {
      --ha-card-background: teal;
      color: var(--primary-color);
    }

Styling-Entitäten, Abzeichen und Elemente

In entities und glance kann jede Entität Optionen haben. Diese Elemente können individuell gestaltet werden, indem der Entitätskonfiguration ein card_mod -Parameter hinzugefügt wird.

In diesen Fällen werden die Stile in eine ShadowRoot eingefügt, und auf das unterste Element wird somit über :host zugegriffen.

Dies gilt auch für Ansichtsabzeichen und Elemente in picture-elements . 

 type : entities
entities :
  - entity : light.bed_light
    card_mod :
      style : |
        :host {
          color: red;
          }
  - entity : light.ceiling_lights
    card_mod :
      style : |
        :host {
          color: green;
        }
  - entity : light.kitchen_lights
    card_mod :
      style : |
        :host {
          color: blue;
        }

Ändern von Symbolen

Wenn Card-Mod installiert ist, setzt das <ha-icon> -Element – ​​das z. B. von entities , glance und vielen weiteren Karten verwendet wird – sein Symbol auf den Wert, der in der CSS-Variablen --card-mod-icon (falls vorhanden) gefunden wird.

Außerdem wird die Symbolfarbe auf den Wert gesetzt, der in der CSS-Variablen --card-mod-icon-color gefunden wird, falls vorhanden. Dies ignoriert den Entitätsstatus, wird jedoch weiterhin abgeblendet, es sei denn, Sie setzen auch --card-mod-icon-dim auf none . 

- entity : light.bed_light
  card_mod :
    style : |
      :host {
        --card-mod-icon: mdi:bed;
      }

Vorlagen

Alle Stile können Jinja2-Vorlagen enthalten, die vom Home Assistant-Backend verarbeitet werden.

Card-Mod stellt außerdem die folgenden Variablen für Vorlagen zur Verfügung:

  • config – Die gesamte Konfiguration der Karte, Entität oder des Badges – ( config.entity könnte von besonderem Interesse sein)
  • user – Der Name des aktuell angemeldeten Benutzers
  • browser – Die browser_id Ihres Browsers, wenn Sie browser_mod installiert haben
  • hash – Was auch immer nach # in der aktuellen URL kommt (Dies wird nur beim ersten Laden berücksichtigt. Es wird nicht dynamisch aktualisiert)

DOM-Navigation

Home Assistant nutzt in großem Umfang etwas namens Shadow DOM. Dies ermöglicht eine einfache Wiederverwendung von Komponenten (z. B. ha-card oder ha-icon ), verursacht jedoch einige Probleme, wenn versucht wird, CSS-Stile auf Dinge anzuwenden.

Beim Durchsuchen der Karten im Elementinspektor Ihres Browsers sind Sie möglicherweise auf eine Zeile gestoßen, in der etwa „ #shadow-root (open) “ steht (was genau dort steht, hängt von Ihrem Browser ab) und Sie haben festgestellt, dass Elemente darin das nicht erben Stile von außen.

Um Elemente innerhalb eines Schattenstamms zu formatieren, müssen Sie Ihren style: ein Wörterbuch statt einer Zeichenfolge.

Für jeden Wörterbucheintrag wird die Taste verwendet, um ein oder mehrere Elemente über eine modifizierte querySelector() Funktion auszuwählen. Der Wert des Eintrags wird dann in diese Elemente eingefügt.

HINWEIS: Die geänderte Funktion querySelector() ersetzt ein Dollarzeichen ( $ ) durch ein #shadow-root im Selektor.

Der Prozess ist rekursiv, daher kann der Wert auch ein Wörterbuch sein. Mit der Taste „ . “ (ein Punkt) wird das aktuelle Element ausgewählt.

Beispiel:

Lassen Sie uns die Farbe aller Titel der dritten Ebene ( ### like this ) in einer Markdown-Karte und auch den Hintergrund ändern.

Wenn wir uns die Karte im Elementinspektor von Chrome ansehen, sieht sie so aus:

Markdown-Card-Dom

Das <ha-card> -Element ist die Basis, und von dort aus sehen wir, dass wir durch eine #shadow-root gehen müssen, um zum <h3> zu gelangen. Diese #shadow-root befindet sich in einem <ha-markdown> -Element, daher wird unser Selektor wie folgt aussehen: 

 ha-markdown$

Dadurch wird das erste <ha-markdown> -Element und dann alle darin enthaltenen #shadow-root s gefunden.

Um den Hintergrund zur <ha-card> hinzuzufügen, möchten wir die Stile direkt auf das Basiselement anwenden, das den Schlüssel hat 

 .

Dies ergibt den endgültigen Stil: 

 card_mod :
  style :
    ha-markdown$ : |
      h3 {
        color: purple;
      }
    . : |
      ha-card {
        background: teal;
      }

DOM-Navigation

HINWEIS: Die Auswahlkette der Warteschlange sucht jeweils nach einem Element, getrennt durch Leerzeichen oder „ $ “.
Für jeden Schritt wird nur die erste Übereinstimmung ausgewählt.
Für den letzten Selektor der Kette (dh in einem bestimmten Wörterbuchschlüssel) werden jedoch alle passenden Elemente ausgewählt. Ketten, die mit $ enden, sind der Einfachheit halber ein Sonderfall, da sie die Schattenwurzeln aller Elemente auswählen.

Beispielsweise wählt Folgendes die div Elemente in der ersten Markierung auf einer Kartenkarte aus: 

 "ha-map $ ha-entity-marker $ div" : |

Im Folgenden werden jedoch die div-Elemente in allen Kartenmarkierungen auf einer Kartenkarte ausgewählt (da wir den ersten Schlüssel im ha-entity-marker $ beenden und in jedem Ergebnis eine neue Suche nach div starten): 

 " ha-map $ ha-entity-marker $ " :
  "div" : |

ANMERKUNG 2: Folgt der obigen Anmerkung; Aufgrund der hohen Optimierung der Ladereihenfolge in Home Assistant kann nicht garantiert werden, dass die ha-entity-marker Elemente zu dem Zeitpunkt vorhanden sind, zu dem Card-Mod nach ihnen sucht. Wenn Sie die Kette erneut unterbrechen: 

 " ha-map $ " :
  " ha-entity-marker $ " :
    "div" : |

Dann kann Card-Mod zu einem späteren Zeitpunkt erneut versuchen, vom ha-map $ Punkt aus zu suchen, was zu stabileren Ergebnissen führen kann.

Zusamenfassend; Wenn die Dinge sporadisch zu funktionieren scheinen, versuchen Sie, die Kette in mehrere Schritte aufzuteilen.

Tipps zum Debuggen

Es kann beim ersten Mal schwierig sein, die DOM-Navigation richtig hinzubekommen, aber irgendwann haben Sie den Dreh raus.

Um Ihnen zu helfen, können Sie den Elementinspektor Ihres Browsers verwenden, um zu sehen, welche Schritte Card-Mod durchführt.

  • Öffnen Sie den Elementinspektor und suchen Sie das Basiselement (z. B. <ha-card> ). Dies sollte ein <card-mod> -Element enthalten, unabhängig davon, ob Sie einen Stil angegeben haben oder nicht.
  • Stellen Sie sicher, dass das Element <card-mod> ausgewählt ist.
  • Öffnen Sie die Browserkonsole (in Chrome können Sie Esc drücken, um die Konsole und den Inspektor gleichzeitig zu öffnen).
  • Geben Sie $0.card_mod_input ein und drücken Sie die Eingabetaste.
    Dies sind die Stilinformationen, die dem Schritt der Kette zugewiesen wurden. Wenn es sich um eine Zeichenfolge handelt, befinden Sie sich am Ende der Kette. Wenn es sich um ein Objekt handelt, können Sie mit dem nächsten Schritt fortfahren.
  • Geben Sie $0.card_mod_children ein und drücken Sie die Eingabetaste.
    Dies ist ein Satz beliebiger <card-mod> -Elemente im nächsten Schritt einer beliebigen Kette. Wenn Sie im value: der eingestellten Elemente auf „card-mod“ klicken, gelangen Sie zu diesem <card-mod> -Element im Inspektor und können den Rest der Kette weiter untersuchen.
  • Sie können auch $0.card_mod_parent verwenden, um das übergeordnete Element eines beliebigen <card-mod> -Elements in einer Kette zu finden.

Für weitere Informationen können Sie Folgendes in der Konfiguration der Karte verwenden, mit der Sie Probleme haben. Es kann Ihnen helfen oder auch nicht. 

 card_mod :
  debug : true

Styling-Karten ohne ein <ha-card> -Element

Karten, die kein <ha-element> haben, können dennoch mit der mitgelieferten Karte custom:mod-card gestaltet werden.

Dies ist nur in sehr wenigen Fällen notwendig und wird wahrscheinlich mehr Probleme mit sich bringen, als es löst.

Höchstwahrscheinlich enthält Ihre Karte eine andere Karte. In diesem Fall sollten Sie die Stile auf diese Karte anwenden.

Genug Warnungen.

Ich weiß, was ich tue 
 type : custom:mod-card
card :
  type : vertical-stack # for example
  ...
card_mod :
  style : |
    ha-card {
      ...
    }

Die Mod-Karte erstellt ein <ha-card> -Element – ​​mit entferntem Hintergrund und Rand – und fügt Ihre Karte darin ein.

Weitere Beispiele

Alle meine Testfälle sind im Verzeichnis test/views verfügbar.

Sie können eine Demo in Docker erstellen, indem Sie in das test gehen und Folgendes ausführen: 

 docker-compose up

Gehen Sie dann zu http://localhost:8125 und melden Sie sich mit dem Benutzernamen dev und dem Passwort dev an.

Oder Sie können den vscode-Devcontainer verwenden und die Aufgabe „ Run hass “ ausführen.

Themen

Anweisungen zum Entwickeln eines Kartenmod-Themes finden Sie unter README-themes.md.

Entwicklung

Informationen zum Hinzufügen von Card-Mods-Styling-Funktionen zu Ihrer benutzerdefinierten Karte finden Sie unter README-developers.md.

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle