Page d'accueil>Lié à la programmation>Autre code source
Télécharger

carte-mod 3

Vous permet d'appliquer des styles CSS à divers éléments de l'interface de Home Assistant.

Installation

Installez à l'aide de HACS ou consultez ce guide.

Améliorations des performances

Bien que card-mod puisse être installé en tant que ressource lovelace, certaines fonctionnalités bénéficieront grandement de son installation en tant que module frontal.

Pour ce faire, ajoutez ce qui suit à votre fichier configuration.yaml et redémarrez Home Assistant : 

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

Vous devrez ajuster ce chemin en fonction de l'endroit où vous avez installé card-mod.js . Si vous avez installé via HACS, il s'agit probablement /hacsfiles/lovelace-card-mod/card-mod.js .

Toutes les définitions de ressources ajoutées automatiquement par HACS peuvent être conservées telles quelles même après l'ajout extra_module_url .

Démarrage rapide

  • Ouvrez votre carte dans l'éditeur GUI
  • Cliquez sur le bouton "AFFICHER L'ÉDITEUR DE CODE" en bas
  • Ajoutez ce qui suit au bas du code : 
 card_mod :
  style : |
    ha-card {
      color: red;
    }

Vous devriez voir le texte de la carte devenir rouge au fur et à mesure que vous tapez.
Vous devriez également voir une petite icône de pinceau apparaître près du bouton "AFFICHER L'ÉDITEUR VISUEL". Cela indique que cette carte a un code card-mod qui ne sera pas affiché dans l'éditeur visuel.

Démarrage rapide

Usage

Cartes de style

Les cartes sont stylisées en ajoutant les éléments suivants à la configuration de la carte : 

 card_mod :
  style : <STYLES>

Si c'est la forme la plus simple, <STYLES> est une chaîne de CSS qui sera injectée dans l'élément <ha-card> de la carte.

REMARQUE : card-mod ne fonctionne que sur les cartes contenant un élément ha-card. Cela inclut presque toutes les cartes visibles , mais pas par exemple conditional , entity_filter , vertical-stack , horizontal-stack , grid .

Notez cependant que ces cartes incluent souvent d’autres cartes sur lesquelles card-mod peut fonctionner.
Consultez le manuel de chaque carte pour voir comment spécifier les paramètres de la ou des cartes incluses.

L'élément le plus bas qui peut être stylisé est le <ha-card> .

Capture d'écran de l'élément ha-card dans l'inspecteur Chrome DOM

ha-carte

CONSEIL : les thèmes Home Assistant utilisent des variables CSS. Ceux-ci peuvent à la fois être définis et utilisés dans card-mod - précédés de deux tirets : 

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

Entités de style, badges et éléments

Dans entities et les cartes glance , chaque entité peut avoir des options. Ces éléments peuvent être stylisés individuellement en ajoutant un paramètre card_mod à la configuration de l'entité.

Dans ces cas, les styles sont injectés dans un shadowRoot, et l'élément le plus bas est ainsi accessible via :host .

Cela s'applique également à l'affichage des badges et des éléments dans les cartes 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;
        }

Changer les icônes

Une fois card-mod installé, l'élément <ha-icon> - utilisé par exemple par entities , glance et bien d'autres cartes - définira son icône sur la valeur trouvée dans la variable CSS --card-mod-icon (si présente).

Il définira également la couleur de l'icône sur la valeur trouvée dans la variable CSS --card-mod-icon-color si elle est présente. Cela ignore l'état de l'entité, mais sera toujours atténué à moins que vous ne définissiez également --card-mod-icon-dim sur none . 

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

Modèles

Tous les styles peuvent contenir des modèles jinja2 qui seront traités par le backend de Home Assistant.

card-mod met également à disposition les variables suivantes pour les modèles :

  • config - La configuration complète de la carte, de l'entité ou du badge - ( config.entity peut présenter un intérêt particulier)
  • user - Le nom de l'utilisateur actuellement connecté
  • browser - Le browser_id de votre navigateur, si browser_mod est installé
  • hash - Tout ce qui vient après # dans l'URL actuelle (ceci n'est pris en compte qu'au premier chargement. Il n'est pas mis à jour dynamiquement)

Navigation dans le DOM

Home Assistant utilise largement quelque chose appelé shadow DOM. Cela permet une réutilisation facile des composants (tels que ha-card ou ha-icon ) mais pose quelques problèmes lorsque l'on tente d'appliquer des styles CSS aux éléments.

En explorant les cartes dans l'inspecteur d'éléments de votre navigateur, vous avez peut-être rencontré une ligne qui dit quelque chose comme " #shadow-root (open) " (ce qu'elle dit exactement dépend de votre navigateur) et avez remarqué que les éléments à l'intérieur qui n'héritent pas du styles venus de l’extérieur.

Afin de styliser les éléments à l’intérieur d’une racine fantôme, vous devrez créer votre style: un dictionnaire plutôt qu’une chaîne.

Pour chaque entrée du dictionnaire, la clé sera utilisée pour sélectionner un ou plusieurs éléments via une fonction querySelector() modifiée. La valeur de l'entrée sera ensuite injectée dans ces éléments.

REMARQUE : la fonction querySelector() modifiée remplacera un signe dollar ( $ ) par un #shadow-root dans le sélecteur.

Le processus est récursif, la valeur peut donc également être un dictionnaire. Une touche de " . " (un point) sélectionnera l'élément actuel.

Exemple:

Changeons la couleur de tous les titres de troisième niveau ( ### like this ) dans une carte de démarque, et changeons également son arrière-plan.

Si l’on regarde la carte dans l’inspecteur d’éléments de chrome, elle ressemble à ceci :

démarque-carte-dom

L'élément <ha-card> est la base, et à partir de là, nous voyons que nous devons passer par une #shadow-root pour atteindre le <h3> . Ce #shadow-root se trouve à l'intérieur d'un élément <ha-markdown> , donc notre sélecteur sera : 

 ha-markdown$

qui trouvera le premier élément <ha-markdown> puis tous #shadow-root à l'intérieur.

Pour ajouter l'arrière-plan au <ha-card> , nous souhaitons appliquer les styles directement à l'élément de base, qui a la clé 

 .

Cela donne le style final : 

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

Navigation DOM

REMARQUE : La chaîne de sélection de la file d'attente recherchera un élément à la fois séparé par des espaces ou " $ ».
Pour chaque étape, seule la première correspondance sera sélectionnée.
Mais pour le sélecteur final de la chaîne (c'est-à-dire dans une clé de dictionnaire donnée), tous les éléments correspondants seront sélectionnés. Les chaînes se terminant par $ constituent un cas particulier pour plus de commodité, en sélectionnant les racines fantômes de tous les éléments.

Par exemple, ce qui suit sélectionnera les éléments div dans le premier marqueur d'une carte : 

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

Mais ce qui suit sélectionnera les éléments div dans tous les marqueurs de carte sur une carte (car nous terminons la première clé du sélecteur ha-entity-marker $ et commençons une nouvelle recherche dans chaque résultat pour div ) : 

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

REMARQUE 2 : Suite à la note ci-dessus ; en raison du haut niveau d'optimisation de l'ordre de chargement utilisé dans Home Assistant, il n'est pas garanti que les éléments ha-entity-marker existent au moment où card-mod les recherche. Si vous brisez à nouveau la chaîne : 

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

alors card-mod pourra réessayer de regarder à partir du point ha-map $ plus tard, ce qui peut conduire à des résultats plus stables.

En bref; si les choses semblent fonctionner par intermittence, essayez de diviser la chaîne en plusieurs étapes.

Conseils de débogage

La navigation dans le DOM peut être difficile à maîtriser les premières fois, mais vous finirez par comprendre.

Pour vous aider, vous pouvez utiliser l'inspecteur d'éléments de votre navigateur pour voir les étapes suivies par card-mod.

  • Ouvrez l'inspecteur d'éléments et recherchez l'élément de base (par exemple <ha-card> ). Celui-ci doit contenir un élément <card-mod> , que vous ayez spécifié un style ou non.
  • Assurez-vous que l'élément <card-mod> est sélectionné.
  • Ouvrez la console du navigateur (dans Chrome, vous pouvez appuyer sur Échap pour ouvrir la console et l'inspecteur en même temps).
  • Tapez $0.card_mod_input et appuyez sur Entrée.
    Il s'agit des informations de style fournies à cette étape de la chaîne. S'il s'agit d'une chaîne, vous êtes au bout de la chaîne. Si c'est un objet, vous pouvez passer à l'étape suivante.
  • Tapez $0.card_mod_children et appuyez sur Entrée.
    Il s'agit d'un ensemble de tous les éléments <card-mod> dans l'étape suivante de n'importe quelle chaîne. Cliquer sur "card-mod" dans la value: des éléments définis vous amènera à cet élément <card-mod> dans l'inspecteur, et vous pourrez continuer à inspecter le reste de la chaîne.
  • Vous pouvez également utiliser $0.card_mod_parent pour trouver le parent de n'importe quel élément <card-mod> dans une chaîne.

Pour un peu plus d'informations, vous pouvez utiliser ce qui suit dans la configuration de la carte avec laquelle vous rencontrez des problèmes. Cela peut ou non vous aider. 

 card_mod :
  debug : true

Styliser les cartes sans élément <ha-card>

Les cartes qui n'ont pas de <ha-element> peuvent toujours être stylisées en utilisant la carte custom:mod-card fournie.

Cela n’est nécessaire que dans de très rares cas et risque de poser plus de problèmes qu’il n’en résout.

Il est fort probable que votre carte contienne une autre carte, auquel cas c'est à celle-ci que vous devez appliquer les styles.

Assez d'avertissements.

Je sais ce que je fais 
 type : custom:mod-card
card :
  type : vertical-stack # for example
  ...
card_mod :
  style : |
    ha-card {
      ...
    }

Le mod-card créera un élément <ha-card> - avec l'arrière-plan et la bordure supprimés - et placera votre carte à l'intérieur.

Plus d'exemples

Tous mes cas de tests sont disponibles dans le répertoire test/views .

Vous pouvez créer une démo dans Docker en accédant au répertoire test et en exécutant : 

 docker-compose up

Allez ensuite sur http://localhost:8125 et connectez-vous avec le nom d'utilisateur dev et le mot de passe dev .

Ou vous pouvez utiliser le devcontainer vscode et exécuter la tâche " Run hass ".

Thèmes

Pour obtenir des instructions sur la façon de développer un thème de module de carte, consultez README-themes.md.

Développement

Pour ajouter des pouvoirs de style de mods de carte à votre carte personnalisée, consultez README-developers.md.

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout