Bonjour à tous….
Je cherche à faire clignoter l’ icône d’ une chip avec card-mod
Je débute dans HA et je ne vois pas ce qui cloche dans mon code :
- type: conditional
conditions:
- condition: state
entity: binary_sensor.deborah_bac_plein
state: "on"
chip:
type: entity
entity: binary_sensor.deborah_bac_plein
name: Roomba 980 Bac plein
icon_color: red
use_entity_picture: false
content_info: none
card_mod:
style: |
ha-state-icon {
animation: pulse 2s linear infinite;
}
Merci d’ avance….
Tochy
Octobre 22, 2025, 8:59
2
Salut
Tu as un exemple pour une rotation là :
Salut
Pour la rotation :
type: custom:mushroom-chips-card
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
{% if is_state('switch.vmc', 'on') %}
ha-state-icon {
animation: spin 1s linear infinite;
}
{% endif %}
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
chips:
- type: template
entity: switch.vmc
icon: mdi:fan
icon_color: |-
{% if is_state('switch.vmc', 'o…
Plus d’infos ici :
Bonjour,
type: conditional
conditions:
- condition: state
entity: binary_sensor.meteoalarm
state: "on"
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.meteoalarm
icon_color: red
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
ha-state-icon {
animation: pulse 2s linear infinite;
}
@keyframes pulse {
50% {
opacity: 0.1;
}
}
1 « J'aime »
Tochy
Octobre 23, 2025, 11:34
4
Attention à bien mettre le bon type de chips dans cette ligne
mushroom-template-chip:nth-child(1)$: | # pour une chip template
mushroom-entity-chip:nth-child(1)$: | # pour une chip entité
btncrd
Octobre 23, 2025, 12:16
5
Bonjour,
Sinon, tu remplaces ta carte conditional et ta carte mushroom par une custom:button-card et tu n’auras plus besoin de card-mod
1 « J'aime »
Oui, surtout qui on ajouter une option de visibilité pour button card si je ne dit pas de bêtise.
btncrd
Octobre 23, 2025, 12:32
7
C’était déjà faisable avant en une ligne de code supplémentaire (ou 3 avec une condition) :
styles:
card:
- display: none
styles:
card:
- display: >
[[[ return states['input_boolean.show_hvac'].state === 'off' ?
'none' : 'block'; ]]]
Tochy
Octobre 23, 2025, 12:52
8
Mais que tu devras quand même taper le même code (voir plus long) pour arriver au même résultat
type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.vmc
icon_color: red
visibility:
- condition: state
entity: switch.vmc
state: "on"
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
ha-state-icon {animation: pulse 2s linear infinite;}
@keyframes pulse {50% {opacity: 0.1;}}
14 lignes de code dont seulement les 5 dernières à taper, puisque tout le reste est fait par l,UI.
Curieux de voir combien de lignes ça fait en button-card pour le même rendu bien sur ?
Oui, mais il y a une option hidden maintenant.
btncrd
Octobre 23, 2025, 1:08
10
11 lignes (d’accord, la cosmétique est nulle
La vrai question est qu’elle est l’utilisation du processeur avec un tableau de bord ayant 60 cartes utilisant du card_mod à tour de bras et un tableau de bord avec 60 cartes custom:button-card. Je n’ai pas la réponse mais @Herbs avait évoqué qu’il lui semblait que card_mod était plus gourmand en ressources.
EDIT : Ca ne se voit pas sur la capture mais l’icône clignote bien
@WarC0zes
Tochy
Octobre 23, 2025, 1:13
11
Manque encore la mise en forme de chips card
btncrd
Octobre 23, 2025, 1:15
12
Je suis spécialisé dans les cartes de plus de 300 lignes de code (je peux même monter à plus de 10 000 lignes), mais je peux quand même faire plus court
Tochy
Octobre 23, 2025, 1:20
13
Et la largeur s’adapte t’elle au texte de l’état ?
Pour les performance je sais pas trop je ne constate pas de problèmes particuliers sur ma config, sachant que la plupart de mes modifications en card-mod sont dans un thème.
btncrd
Octobre 23, 2025, 1:28
14
Il suffit de mettre width: auto pour que la largeur de la carte s’adapte (à la place de width: 100px) que tu pourras même améliorer avec min-width et max-width.
Je suis en revanche d’accord avec toi pour dire que les cartes mushroom sont bien plus faciles à mettre en oeuvre pour une utilisation basique. En revanche tu peux aller beaucoup plus loin en terme d’améliorations cosmétiques avec custom:button-card mais ça demande un investissement bien plus conséquent. Tu arriveras bien plus vite à avoir un tableau de bord assez sympa visuellement avec les mushrooms mais si tu veux vraiment peaufiner sans devoir utiliser une multitude de cartes, tu peux y arriver avec les button-cards (affichage de popup, agrandissement dynamique de cartes, animations, placement au pixel près, etc.) mais ça demandera un travail de dingue.
Mais en tout état de cause, j’ai déjà trop disgressé sur ce post dont le sujet était de faire clignoter l’icône d’une chip et pour lequel LA solution avait été apportée
1 ligne
on voit la carte en mode édition, mais pas quand tu n’es plus en édition. Comme le carte conditionnelle.
C’est plus pratique si tu as plusieurs cartes cachées, au moins tu les vois contrairement à ta solution de display ou elles sont toujours cachée. Obliger d’éditer le code pour voir la carte .
il te manque des bouts de codes chips et pas chip.
- type: conditional
conditions:
- condition: state
entity: binary_sensor.deborah_bac_plein
state: "on"
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.deborah_bac_plein
name: Roomba 980 Bac plein
icon_color: red
use_entity_picture: false
content_info: none
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
ha-state-icon {
animation: pulse 2s linear infinite;
}
@keyframes pulse {
50% {
opacity: 0.1;
}
}
1 « J'aime »
type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: navigate
navigation_path: /tableau-de-bord/Accueil
icon: mdi:arrow-left
- type: alarm-control-panel
entity: alarm_control_panel.2140_aaa_zone_1_alarm
content_info: none
name: " "
double_tap_action:
action: navigate
navigation_path: /tableau-de-bord/securite
- type: conditional
conditions:
- condition: state
entity: binary_sensor.deborah_bac_plein
state: "on"
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.deborah_bac_plein
name: Roomba 980 Bac plein
icon_color: red
use_entity_picture: false
content_info: none
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
ha-state-icon {
animation: pulse 2s linear infinite;
}
@keyframes pulse {
50% {
opacity: 0.1;
}
}
- type: light
entity: light.moesgo_perron_escalier_light_1
tap_action:
action: perform-action
perform_action: light.toggle
target:
device_id: 9a55fa0ae0b2d56778fcf920eddee8e4
data: {}
content_info: name
use_light_color: true
name: Exterieurs
double_tap_action:
action: navigate
navigation_path: /tableau-de-bord/lumieres
- type: light
entity: light.moesgo_cuisine_libre_light_1
tap_action:
action: perform-action
perform_action: light.toggle
target:
entity_id: light.moesgo_cuisine_libre_light_1
data: {}
name: Cuisine
content_info: name
use_light_color: true
double_tap_action:
action: navigate
navigation_path: /tableau-de-bord/lumieres
- type: light
entity: light.salon
tap_action:
action: perform-action
perform_action: light.toggle
target:
entity_id: light.salon
data: {}
name: Salon
content_info: name
use_light_color: true
double_tap_action:
action: navigate
navigation_path: /tableau-de-bord/lumieres
- type: conditional
conditions:
- condition: state
entity: sensor.19_weather_alert
state: Jaune
chip:
type: entity
entity: sensor.19_weather_alert
use_entity_picture: false
name: Vigilance Corrèze
content_info: none
icon_color: yellow
tap_action:
action: navigate
navigation_path: /tableau-de-bord/meteo
- type: conditional
conditions:
- condition: state
entity: sensor.19_weather_alert
state: Orange
chip:
type: entity
entity: sensor.19_weather_alert
content_info: none
name: Vigilance Corrèze
icon_color: deep-orange
tap_action:
action: navigate
navigation_path: /tableau-de-bord/meteo
- type: conditional
conditions:
- condition: state
entity: sensor.19_weather_alert
state: Rouge
chip:
type: entity
entity: sensor.19_weather_alert
content_info: none
name: Vigilance Corrèze
icon_color: red
tap_action:
action: navigate
navigation_path: /tableau-de-bord/meteo
Tochy
Octobre 23, 2025, 6:25
19
Ah oui c’est pas la même, il n’y a pas qu’une seule carte chips et en plus ce sont des chips conditionnelles, d’ailleurs si tu avait mis le code complet de la carte au début
essaye ça et dit nous :
type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: navigate
navigation_path: /tableau-de-bord/Accueil
icon: mdi:arrow-left
- type: alarm-control-panel
entity: alarm_control_panel.2140_aaa_zone_1_alarm
content_info: none
name: " "
double_tap_action:
action: navigate
navigation_path: /tableau-de-bord/securite
- type: conditional
conditions:
- condition: state
entity: binary_sensor.deborah_bac_plein
state: "on"
card:
chip:
- type: entity
entity: binary_sensor.deborah_bac_plein
name: Roomba 980 Bac plein
icon_color: red
use_entity_picture: false
content_info: none
- type: light
entity: light.moesgo_perron_escalier_light_1
tap_action:
action: perform-action
perform_action: light.toggle
target:
device_id: 9a55fa0ae0b2d56778fcf920eddee8e4
data: {}
content_info: name
use_light_color: true
name: Exterieurs
double_tap_action:
action: navigate
navigation_path: /tableau-de-bord/lumieres
- type: light
entity: light.moesgo_cuisine_libre_light_1
tap_action:
action: perform-action
perform_action: light.toggle
target:
entity_id: light.moesgo_cuisine_libre_light_1
data: {}
name: Cuisine
content_info: name
use_light_color: true
double_tap_action:
action: navigate
navigation_path: /tableau-de-bord/lumieres
- type: light
entity: light.salon
tap_action:
action: perform-action
perform_action: light.toggle
target:
entity_id: light.salon
data: {}
name: Salon
content_info: name
use_light_color: true
double_tap_action:
action: navigate
navigation_path: /tableau-de-bord/lumieres
- type: conditional
conditions:
- condition: state
entity: sensor.19_weather_alert
state: Jaune
chip:
type: entity
entity: sensor.19_weather_alert
use_entity_picture: false
name: Vigilance Corrèze
content_info: none
icon_color: yellow
tap_action:
action: navigate
navigation_path: /tableau-de-bord/meteo
- type: conditional
conditions:
- condition: state
entity: sensor.19_weather_alert
state: Orange
chip:
type: entity
entity: sensor.19_weather_alert
content_info: none
name: Vigilance Corrèze
icon_color: deep-orange
tap_action:
action: navigate
navigation_path: /tableau-de-bord/meteo
- type: conditional
conditions:
- condition: state
entity: sensor.19_weather_alert
state: Rouge
chip:
type: entity
entity: sensor.19_weather_alert
content_info: none
name: Vigilance Corrèze
icon_color: red
tap_action:
action: navigate
navigation_path: /tableau-de-bord/meteo
card_mod:
style:
mushroom-entity-chip:nth-child(3)$: |
ha-state-icon {
animation: pulse 2s linear infinite;
}
@keyframes pulse {
50% {
opacity: 0.1;
}
}
même en faisant comme tu dis, j’ y arrive pas