Formation PUB420 : Système domotique DIY, 2020 Home Assistant

6.35 lovelace-card-mod - Pour styliser le tableau de bord


Le plugin lovelace-card-mod permet de styliser le tableau de bord de Home Assistant en appliquant des règles CSS aux cartes que vous y ajoutez.

Installation

Le plugin lovelace-card-mod est disponible sur GitHub mais la commande git n'est pas disponible dans le terminal HassOS alors nous allons utiliser une autre procédure pour l'installer :

  • Accédez au terminal HassOS en branchant clavier et écran au Raspberry Pi ou via SSH.
  • Vérifiez s'il existe un dossier www sous /mnt/data/supervisor/homeassistant. S'il n'existe pas, créez-le puis redémarrez le Raspberry Pi.
  • Rendez-vous sur la page GitHub de l'extension : https://github.com/thomasloven/lovelace-card-mod

    Page GitHub de l'extension

  •  Un seul fichier est requis : card-mod.js. Cliquez sur ce fichier.

    Fichier card-mod.js

  • Dans le haut de l'écran, faites un clic droit sur l'icône de téléchargement à droite de Raw afin de télécharger le fichier sur votre ordinateur.
  • À l'aide de la commande scp lancée dans le terminal de votre ordinateur, copiez ce fichier sur le Raspberry Pi dans le dossier /mnt/data/supervisor/homeassistant/www.
    Terminal de l'ordinateur

    scp -O -P 22222 /chemin/card-mod.js root@192.168.1.145:/mnt/data/supervisor/homeassistant/www

  • Afin de tirer profit au maximum de card-mod.js, il faut l'installer en tant que module. Éditez le fichier configuration.yaml à l'aide de File editor ou de Studio Code Server. Ajoutez-y le code suivant :
    Fichier configuration.yaml

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

  • Redémarrez Home Assistant.

Utilisation

Pour éditer le code YAML d'une carte :

  • Rendez-vous dans le menu Paramètres / Tableaux de bord.
  • Cliquez sur Ouvrir vis-à-vis le tableau désiré.
  • Cliquez sur le crayon dans le coin supérieur droit.
  • Cliquez sur la carte à modifier.
  • Cliquez sur le bouton Afficher l'éditeur de code.

Dans le code YAML de la carte, ajoutez une section card_mod.

YAML

card_mod:
  style: |
    ha-card {
      ...  // vos règles CSS ici, comme si vous éditiez le CSS d'un site Web
    }

 

Pour plus d'information

« thomasloven/lovelace-card-mod ». GitHub. https://github.com/thomasloven/lovelace-card-mod

« thomasloven/lovelace-card-mod - Lovelace Plugins ». GitHub . https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins

▼Publicité

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Merci de partager !
Soumettre