Tile card : modifier la couleur de l'icône en fonction de l'état

Entraide Home Assistant
,
1

Bonjour,

Je me suis lancé sur Home Assistant relativement récemment avec l’automatisation de ma porte de garage à l’aide d’un module Tuya.

Après pas mal de tâtonnements j’ai finalement réussi à obtenir ce que je souhaitais :

  • Une carte avec un bouton pour la montée et un pour la descente
  • Le bouton de montée (respectivement descente) grisé lorsque la porte de garage est ouverte (respectivement fermée) : l’utilisation de la télécommande IR ne perturbe donc pas l’automatisation
  • L’indication du statut Ouvert/Fermé

J’ai utilisé pour cela une carte Tile contenant une seule entité, ma porte de garage (une cover) :

image

J’aimerais maintenant être capable d’afficher une couleur d’icône différente selon l’état de la porte de garage :

  • icône rouge lorsque la porte de garage est ouverte
  • icône verte lorsque la porte de garage est fermée

J’ai essayé plusieurs solutions en vain, notamment celle ci-dessous (à partir des information de ce post) :

type: tile
entity: cover.garage_door
features:
  - type: cover-open-close
card_mod:
  style: |
    ha-card {
      {% if is_state('cover.garage_door', 'open') %}
        --tile-color: red !important;
      {% else %}
        --tile-color: green !important;
      {% endif %}    
    }

Il semblerait qu’il faille utiliser des variables CSS propres aux covers, je vais creuser. Mais si quelqu’un à des infos je prends !

Merci d’avance.

2

Bonjour,
c’est ha-tile-icon qui faut utiliser dans card_mod pour modifier la couleur de l’icone.

exemple:

type: tile
entity: cover.garage_door
features:
  - type: cover-open-close
card_mod:
  style: |
    ha-tile-icon {
      {% if is_state('cover.garage_door', 'open') %}
        --tile-color: red;
      {% else %}
        --tile-color: green;
      {% endif %}    
    }

ca modifie le background de la carte tile, quand tu passe la souris dessus ou que tu actionne le bouton:

    ha-card {
      --tile-color: green !important;
    }
3

Bonjour, sinon, tu peux utiliser une custom:button-card. Un exemple ici (il suffit d’ajouter les trois boutons bour la montée, l’arrêt et la descente) :

4

Salut,
Une bonne partie de réponse ici:

5

@WarC0zes : j’ai testé et malheureusement cela ne fonctionne pas… incompréhensible.

@chrisdelt : j’ai parcouru le thread hier et c’est à un de ces posts que je faisais référence. La solution préconisée est identique à ce que WarC0zes propose et donc ne fonctionne pas.

Cela doit évidemment venir de ma config mais je ne comprends pas où cela peut coincer.

Je suis également tombé sur ce thread où la problématique est exactement la même que la mienne. La solution proposée dans ce post fonctionne pour la personne et est très proche de ce que vous évoquez… et encore une fois cela est sans effet chez moi.

Dans la vidéo ci-dessous il est expliqué comment identifié les balises auxquelles correspondent les objets que l’on voit sur l’interface :

J’ai réussi à faire changer de couleur l’icône en modifiant manuellement le style de la balise ha-tile-icon et/ou ha-state-icon, mais pas autrement.

6

peut tu copier le JS path et le poster, pour ha-title-icon et ha-state-icon.
image

7

à tester :

features:
  - type: cover-open-close
type: tile
entity: cover.garage_door
card_mod:
  style: |
    ha-tile-icon {
      {% if is_state('cover.garage_door', 'open') %}
      --tile-icon-color: red !important;
      {% else %}
      --tile-icon-color: green !important;
      {% endif %}
    }

peek

8

je m’en doutais qu’avec une entité cover c’est différent d’une entité switch qui n’a pas de bouton.
Le code change :wink:

9

Et sinon, avec une custom:button-card, ça marche à tous les coups :crazy_face:

10

Ouais, mais est-ce que button-card embarque wireguard :rofl: ?

2 « J'aime »
11

Comme le dit @Cleya , soit tu utilise button-card et 200 lignes de code, soit tu utilise la carte tile et card_mod et 20 lignes de codes :crazy_face:

Toute façcon @Cleya, t’es hors sujet.
titre du sujet: Tile card : modifier la couleur de l’icône en fonction de l’état :wink:

2 « J'aime »
12

Tu exagères, moins de 120 lignes pour l’équivalent de sa Tile card :wink:

Pour ça :
image
82 lignes avec les animations, les changements de couleurs, etc… mais bon, faut ajouter les boutons…

1 « J'aime »
13

Plus sérieusement, pour des « grosses » cartes, je commence à trouver button-card plus efficient que « card-mod ». Moins lourd à charger.

Mais bon ça reste subjectif :wink:

1 « J'aime »
14

Des grosses cartes comme ça ?

image
image1092×681 187 KB

j’en suis qu’au début et à 3447 lignes :grin:

15

Je le tente même pas :stuck_out_tongue:

1 « J'aime »
16

@WarC0zes : les voici :

  • ha-tile-icon : ha-card > div.content > div > ha-tile-icon
  • ha-state-icon : ha-card > div.content > div > ha-tile-icon > ha-state-icon
17

@Cleya : merci pour le tuyau :slight_smile:

Mais je trouve que pour « simplement » changer la couleur d’une icône (tout est relatif puisque je n’y arrive pas :crazy_face:), cela fait beaucoup de code… et qui ne répond pas exactement à mon problème.

18

T’as essayé ce que je t’ai donné plus haut ?

19

@Herbs

Je viens de tester (avec et sans le chemin copié avec le Copy selector) :

image
image1002×627 31.3 KB

Comme pour les autres tentatives cela n’a aucun effet dans le dashboard :

image
image998×718 43.2 KB

La valeur –tile-color positionnée dans le CSS de la page semble remplacée automatiquement par les couleurs par défaut –state-cover : peut être y a-t-il eu des changements avec les dernières mises à jour ?

20

Ok, mais le code que j’ai partagé fonctionne chez moi (voir mon gif animé).

Donc c’est ce code qu’il faut que tu tests :wink: