Installer et configurer le bouton " Card"Sur Lovelace UI of Home Assistant

4 minutes de lecture
But du guide:
  • Définir les dieux boutons graphiques sur l'interface Lovelace UI pour contrôler des fonctions spécifiques présent sur le propremière domotique basée sur Home Assistant
  • Niveau de difficulté: media
Concepts traités:
  • Configuration du logiciel
Composants logiciels utilisés:

Pré-requis:

Dispositifs physiques utilisés:
GUIDE plus indiqué pour:

Tous les environnements

Notes et avertissement
  • qualsiasi eventuale modifica agli impianti domestici dev'essere progettata ed realizzata SOLO da personale qualificato;
  • tout changement mis en œuvre dans proavant est un prola responsabilité personnelle, ainsi que propremier risque et danger (le contenu de la présente page est purement pédagogique);
  • tout changement mis en œuvre dans proavant un appareil, il annule la garantie, les approbations de qualité et les certifications.
Avis de conduite: 1.1

Abstrait

Par défaut, L 'HUB pour la domotique personnelle Home Assistant (à partir de 2019) possède une interface graphique (disponible via le web comme via app) appelé Lovelace UI. En soi, cette interface est plus qu'utile dans rappressentiment graphique et dans la gestion opérationnelle du proaprès la domotique personnelle; certains utilisateurs appRezzano la possibilité de le personnaliser comme ils le voient mieux grâce à la présence du Custom-carte, des éléments qui permettent, appoint, cette marge de manœuvre.

"Bouton Card"Est un composant personnalisé (un composant non officiel, donc à ajouter manuellement) qui, à l'aide du levier du Custom-carte, permet à l'utilisateur facilement créer des boutons (également des grilles de boutons, telles que rappdans l'image ci-dessous) afin de vérifier entité, automations, scénario, scène et rien d'autre.

Home Assistant - Bouton Card

Installation du bouton Card"

Tout d'abord, il est nécessaire d'installer le composant personnalisé et de l'activer. Pour ce faire, vous pouvez suivre deux voies: la manuelle et la automatique via HACS (Home Assistant Community Store), plus pratique et plus simple (dans ce guide nous allons illustrer ce dernier).

Nb Pour installer le bouton " Card"Via HACS, il est nécessaire que cet outil soit installé (il s'agit lui-même d'un composant personnalisé). Il s'agit d'une opération ponctuelle expliqué ici qui sera certainement utile à d'autres fins.

Pour installer le bouton " Card"Allez-y"Communauté ”Présent sur Home Assistant (uniquement en présence de HACS actifs), puis sous "PLUGINS». Dans le trou de recherche, recherchez "bouton-carte": une fois que vous avez trouvé le composant personnalisé, cliquez dessus:

Home Assistant - Bouton Card installation via HACS - 1

Une fois que vous avez entré la fiche détaillée, cliquez sur "INSTALLER":

Home Assistant - Bouton Card installation via HACS - 2

Configuration

À la fin de l'installation, le composant sera proà activer. Contrairement à ce que vous pourriez penser, il n'est pas nécessaire d'agir sur le fichier de configuration de Home Assistant mais sur celle de Lovelace: c'est possible à la main (en ouvrant l'éditeur "raw") en collant, en bas, le code suivant:

resources:
  - url: /community_plugin/button-card/button-card.js
    type: module

autrement, il sera plus facile de cliquer sur "AJOUTER À LOVELACE”Toujours à partir de la fiche détaillée dont vous êtes provu pour installer "Bouton Card":

Home Assistant - Bouton Card installation via HACS - 3

Cela fait, le composant «Bouton Card»Sera effectivement installé et opérationnel.

Utiliser

maintenant Home Assistant è pronto pour accueillir des boutons définis par ce composant, ce qui est extrêmement banal dans les cas les plus simples, mais aussi assez complexe lorsque vous optez pour des schémas plus audacieux ou des configurations plus fines.

Fondamentalement, pour ajouter un bouton, il suffit d'entrer dans l'éditeur visuel de Lovelace (i trois points dans le coin supérieur droit sur le frontend web /app, puis "Configurer l'interface utilisateur") Et cliquez sur"+", Sélection comme type"CARTE MANUELLE».

À ce stade, dans le texte de la configuration de la carte, vous devez insérer du code qui indique au frontend quoi afficher et comment, par exemple:

type: "custom:button-card"
entity: light.artemide
icon: mdi:lightbulb
color: rgb(28, 128, 199)

Une fois enregistré, l'exemple ci-dessus génère un bouton qui contrôle l'entité light.artemide:

Home Assistant - Bouton Card  -  Light Ampoule

Une variante, ce qui signifie que dans l'état "offre"L'icône du bouton devient rouge, elle est la suivante:

type: "custom:button-card"
entity: light.artemide
icon: mdi:air-conditioner
color: rgb(28, 128, 199)
state:
  - value: "off"
    color: rgb(255, 0, 0)

Un autre exemple est celle d'un bouton sans icône qui, par exemple, allume ou éteint toutes les lumières d'un groupe:

type: "custom:button-card"
entity: group.luci
show_icon: false
show_state: true

Cette configuration génère un bouton ainsi réalisé:

Home Assistant - Bouton Card - Pas d'icône


Encore une fois, voyons comment organiser dans une pile horizontale plus de boutons que prévu:

  • 2x cartes vides
  • 1x bouton d'augmentation du volume avec appel de service
  • 1x bouton de réduction du volume avec appel de service
  • 2x cartes vides
type: horizontal-stack
cards:
  - type: "custom:button-card"
    color_type: blank-card
  - type: "custom:button-card"
    color_type: blank-card
  - type: "custom:button-card"
    color_type: card
    color: rgb(223, 255, 97)
    icon: mdi:volume-plus
    tap_action:
      action: call-service
      service: media_player.volume_up
      service_data:
        entity_id: media_player.livimg_room_speaker
  - type: "custom:button-card"
    color_type: card
    color: rgb(223, 255, 97)
    icon: mdi:volume-minus
    tap_action:
      action: call-service
      service: media_player.volume_down
      service_data:
        entity_id: media_player.livimg_room_speaker
  - type: "custom:button-card"
    color_type: blank-card
  - type: "custom:button-card"
    color_type: blank-card

avec résultat:

Home Assistant - Bouton Card - Volume


Un exemple de stratification verticale, avec:

  • 1x étiquette de carte
  • Une pile horizontale avec:
    • 1x bouton de dîner 1
    • 1x bouton Scène 2
    • 1x bouton Scène 3
    • 1x bouton Scène 4
    • 1x bouton Scene Off
type: vertical-stack
cards:
  - type: "custom:button-card"
    color_type: label-card
    color: rgb(44, 109, 214)
    name: Kitchen
  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        entity: switch.kitchen_scene_1
        color_type: card
        color: rgb(66, 134, 244)
        icon: mdi:numeric-1-box-outline
      - type: "custom:button-card"
        entity: switch.kitchen_scene_2
        color_type: card
        color: rgb(66, 134, 244)
        icon: mdi:numeric-2-box-outline
      - type: "custom:button-card"
        entity: switch.kitchen_scene_3
        color_type: card
        color: rgb(66, 134, 244)
        icon: mdi:numeric-3-box-outline
      - type: "custom:button-card"
        entity: switch.kitchen_scene_4
        color_type: card
        color: rgb(66, 134, 244)
        icon: mdi:numeric-4-box-outline
      - type: "custom:button-card"
        entity: switch.kitchen_off
        color_type: card
        color: rgb(66, 134, 244)
        icon: mdi:eye-off-outline

Avec résultat:

Home Assistant - Bouton Card - Pile verticale

icônes

On nous demande souvent "où trouver les icônes à utiliser Home Assistant». Simple: haut materialdesignicons.com où, grâce au moteur de recherche interne, vous pouvez trouver les icônes qui le font pour vous. Pour les utiliser, il n'est pas nécessaire de les télécharger, mais il suffit de connaître leur nom (par exemple. "ampoule") Et, dans la configuration, indiquez ce nom avec le suffixe"IMD:"(Entrecoupé d'un espace): par exemple. "mdi: ampoule"(Comme vous pouvez également le deviner lors de la lecture des configurations ci-dessus, dans les différents éléments"icône").

conclusions

L'espace de manœuvre garanti par ce composant c'est vraiment énorme. Les boutons créés à travers lui, en fait, peuvent varier en taille, couleur, positionnamento, dans les icônes et les couleurs montrées, et bien plus encore - c'est pourquoi nous ne listons pas toutes les combinaisons possibles qui, bien sûr, sont pratiquement infinies.

Important, pour ceux qui s'aventurent dans la définition de ces boutons, lisez attentivement la liste des configurations possibles, suivis des exemples également rapportés par nous et par beaucoup, beaucoup d'autres.


Home Assistant Logo officielATTENZIONE: rappelez-vous qu'il y a sur notre communauté FORUM une section ad hoc dédiée à Home Assistantpour tout doute, question, information sur le mérite spécifique de ces composants.

Chaîne de télégramme inDomus