Hello BBE !
Super ton dashboard !!
J’utilise depuis quelques temps cette carte à base de mushroom template et chip card, que je trouve vraiment bien. La seule chose que je n’arrive pas à faire c’est ta double ligne d’info (présence / ouverture) :
Est-ce que tu pourrais détailler comment tu t’y prends ? 
Voici ce que j’ai pu arriver à faire :
Merci !!
Il s’agit "juste "d’une ligne de template:
type: custom:mushroom-template-card
primary: Securité
secondary: |
{% set all = expand(entity)| list -%}
{% set ND1 = all | selectattr('state','eq','off')|list|count%}
{% set D1 = all | selectattr('state','eq','on')|list|count%}
{% set all2 = expand('binary_sensor.ouverture')| list -%}
{% set ND2 = all2 | selectattr('state','eq','off')|list|count%}
{% set D2 = all2 | selectattr('state','eq','on')|list|count%}
Présence: {{D1}} / {{D1+ND1}}
Ouvertures : {{D2}} / {{D2+ND2}}
icon: |
{% if is_state(entity, 'on') %}
mdi:motion-sensor
{% elif is_state('binary_sensor.ouverture', 'on') %}
mdi:door-open
{% else %}
mdi:thumb-up
{% endif %}
icon_color: |
{% if is_state(entity,'on') %}
red
{% elif is_state('binary_sensor.ouverture', 'on') %}
red
{% else %}
green
{% endif %}
badge_icon: |-
{% set all = expand(entity)| list -%}
{% set open1 = all | selectattr('state','eq','on')|list|count%}
{% set all2 = expand('binary_sensor.ouverture')| list -%}
{% set open2 = all2 | selectattr('state','eq','on')|list|count%}
{% if open1+open2 <= 9 %}
mdi:numeric-{{open1+open2}}
{% elif open1+open2 >= 10 %}
mdi:numeric-9-plus
{% else %}
none
{% endif %}
badge_color: |
{% set all = expand(entity)| list -%}
{% set open1 = all | selectattr('state','eq','on')|list|count%}
{% set all2 = expand('binary_sensor.ouverture')| list -%}
{% set open2 = all2 | selectattr('state','eq','on')|list|count%}
{% if open1+open2 == 0 %}
green
{% else %}
red
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/securite
layout: horizontal
multiline_secondary: true
entity: binary_sensor.presence
fill_container: false
Il ne faut pas oublier de cocher dans l’interface 
ou dans le YAML le paramètre: « multiline_secondary: true »
sinon ça donne ça:
Tu es au top ! Merci beaucoup !
Tes cartes sont très sympa, j’aime bien la façon dont tu intégre le graphe !
Tu peux poster ton code c’est intéressant !
Bien sur !
Alors voici la carte seule :
- type: custom:vertical-stack-in-card
horizontal: false
cards:
- type: custom:mushroom-template-card
entity: light.lampe_sp
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if states(config.entity) == 'on' and state_attr(config.entity, 'brightness') != none %}
{% if state_attr(config.entity,'rgb_color') != none %}
background: linear-gradient(0deg, rgba{{(state_attr(config.entity,'rgb_color')[0] * 0.85, state_attr(config.entity,'rgb_color')[1] * 0.85, state_attr(config.entity,'rgb_color')[2] * 0.85) + (1,)}} calc( {{state_attr(config.entity,'brightness') | float / 2.55}}%), rgba{{(state_attr(config.entity,'rgb_color')[0] * 0.85, state_attr(config.entity,'rgb_color')[1] * 0.85, state_attr(config.entity,'rgb_color')[2] * 0.85) + (0.2,)}} 0.1%) !important;
{% else %}
background: linear-gradient(0deg, rgba(255, 152, 0) | float / 2.55}}%, rgba(255, 152, 0) !important;
{% endif %}
{% endif %}
.ha-state-icon {
color: white; }
--icon-color: white; !important;
}
icon: mdi:lightbulb-on
primary: Salon
secondary: >
🌡️ {{ states("sensor.interieur_temperature") | float | round(1) }}°C
| 🚪 {{ states("sensor.compteur_portes_salon") }} | 🪟 {{
states("sensor.compteur_fenetres_salon") }} | 💡 {{
states("sensor.compteur_lumieres_salon") }} {% if
is_state('light.lampe_sp', 'off') %} {% elif
is_state('light.lampe_sp', 'off') %} {% else %}
- {{ (states['light.lampe_sp'].attributes.brightness / 2.54) | round(0) }}%
{% endif %}
layout: horizontal
tap_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.mouvements', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.mouvements', 'on') %}
orange
{% else %}
grey
{% endif %}
- type: custom:mini-graph-card
entities:
- entity: sensor.tvoc_temperature
name: Temperature
height: 50
hours_to_show: 24
points_per_hour: 1
line_width: 2
font_size: 20
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.thermostat_salon_statut
icon: mdi:radiator
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: binary_sensor.detecteur_de_mouvement_s_salon
icon: mdi:motion-sensor
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: binary_sensor.fenetres_salon
icon: mdi:window-closed-variant
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: light.lampe_tv
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
- type: template
entity: switch.lampe_aquarium
icon: mdi:fishbowl
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: input_button.infos
icon: mdi:information
icon_color: orange
tap_action:
action: navigate
navigation_path: /lovelace/salon
alignment: end
card_mod:
style: |
ha-card {
padding-top: 0px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
card_mod:
style: |
ha-card {
margin: 10px;
background: var(--mantle2);
}
Le reste c’est imbriqué dans un autre vertical-stack-in-card 
Petit détail, c’est l’adaptation du fond de l’icône en fonction du % d’éclairage de mes lampes :
C’est très sympa !
D’un point de vue personnel, je trouve très bien le petit chip « info » pour faire le lien vers la page dédiée:
Oui, j’ai longtemps hésité avec les pops ups mais je me suis dirigé vers différentes pages. Sur l’interface pc, c’est plus simple. Et en // j’ai une interface plus light sur mobile qui elle utilise les popups du bubble card :
Bonjour
Est-il possible de mettre une animation sur l’icône dans un chips ?
Merci par avance
Oui, tout est possible avec card_mod.
exemple, suivant le type de chip:
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-action-chip:nth-child(3)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-light-chip:nth-child(4)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-weather-chip:nth-child(5)$: |
ha-state-icon {
# Cant be changed as it is not a normal HA icon.
}
mushroom-template-chip:nth-child(6)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-alarm-control-panel-chip:nth-child(7)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-back-chip:nth-child(8)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-menu-chip:nth-child(9)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
Exemple dans cette Card, si je veux faire tourner que le ventilo, sans faire bouger l’ampoule.
type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.groupe_chambre_1
icon: |
{% if is_state('switch.groupe_chambre_1', 'on') %}
mdi:toggle-switch
{% elif is_state('switch.groupe_chambre_1', 'off') %}
mdi:toggle-switch-off
{% else %}
mdi:alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
primary: CHAMBRE 1
secondary: ''
layout: horizontal
tap_action:
action: toggle
badge_icon: |
{% if is_state('switch.switch_6_2', 'on') %}
mdi:fan
{% elif is_state('switch.switch_6_2', 'off') %}
mdi:fan-off
{% else %}
mdi:alert
{% endif %}
badge_color: |
{% if is_state('switch.switch_6_2', 'on') %}
green
{% elif is_state('switch.switch_6_2', 'off') %}
grey
{% endif %}
multiline_secondary: true
card_mod:
style: null
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.switch_6_2
icon: |
{% if is_state(entity, 'on') %}
mdi:fan
{% elif is_state(entity, 'off') %}
mdi:fan-off
{% else %}
mdi:alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
green
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
- type: template
entity: light.switch_6_1
icon: mdi:lightbulb
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
padding-top: 0px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
card_mod:
style: |
ha-card {
margin: 10px;
background: var(--mantle2);
}
C’est bon, j’ai trouvé
chips:
- type: template
entity: switch.switch_6_2
icon: |
{% if is_state(entity, 'on') %}
mdi:fan
{% elif is_state(entity, 'off') %}
mdi:fan-off
{% else %}
mdi:alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
green
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
{% if is_state('switch.switch_6_2','on') %}
ha-card { animation: spin 3s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
{%- endif %}
Voila !
type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.groupe_chambre_1
icon: |
{% if is_state('switch.groupe_chambre_1', 'on') %}
mdi:toggle-switch
{% elif is_state('switch.groupe_chambre_1', 'off') %}
mdi:toggle-switch-off
{% else %}
mdi:alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
primary: CHAMBRE 1
secondary: ''
layout: horizontal
tap_action:
action: toggle
badge_icon: |
{% if is_state('switch.switch_6_2', 'on') %}
mdi:fan
{% elif is_state('switch.switch_6_2', 'off') %}
mdi:fan-off
{% else %}
mdi:alert
{% endif %}
badge_color: |
{% if is_state('switch.switch_6_2', 'on') %}
green
{% elif is_state('switch.switch_6_2', 'off') %}
grey
{% endif %}
multiline_secondary: true
card_mod:
style: null
- type: custom:mushroom-chips-card
chips:
- type: template
entity: fan.mi_smart_standing_fan_2
icon: |
{% if is_state(entity, 'on') %}
mdi:fan
{% elif is_state(entity, 'off') %}
mdi:fan-off
{% else %}
mdi:alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
green
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
- type: template
entity: switch.switch_6_
icon: mdi:lightbulb
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
alignment: end
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state('switch.switch_6_','on') %}
animation: rotation 2.5s linear infinite;
{% else %}
animation: none;
{% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
.: |
ha-card {
padding-top: 0px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
card_mod:
style: |
ha-card {
margin: 10px;
background: var(--mantle2);
}
la partie pour card_mod:
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state('switch.switch_6_','on') %}
animation: rotation 2.5s linear infinite;
{% else %}
animation: none;
{% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
.: |
ha-card {
padding-top: 0px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
Merci pour ton aide @WarC0zes
J’ai juste rajouté le code suivant :
card_mod:
style: |
{% if is_state('switch.switch_6_2','on') %}
ha-card { animation: spin 3s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
{%- endif %}
Dans le template et cela a l’air de fonctionner.
Pourquoi ton code est plus complexe, ça permet quoi de plus ?
ça ne fait rien de plus. J’aime le complexe 
Merci, j’avais fini par trouver pour la carte Markdown. Après, je voulais en plus pouvoir les mettre à jour directement depuis la vue, j’avais donc modifié les paramètres HACS pour le faire avec des button-card même si la mise en forme était moins jolie. Malheureusement, j’ai supprimé ma page. Plus qu’à tout recommencer.
Je me contente de cliquer sur les liens pour voir le contenu des modifs (sur PC ou sur smartphone)
Mais je ne lance les mises à jour qu’au calme depuis le PC… Donc je n’ai pas tenté de faire comme toi un bouton pour lancer les updates.
Par contre ça marche comme ça pour les updates Home Assistant (OS et Core), mais en général j’évite de cliquer dessus, et j’attent d’être à la maison avec le PC pour le faire.
=> d’où la quantité d’update au retour de vacances (HACS et passage en 2024.8)
Par contre ce que tu décris doit être possible avec des cartes auto entities ou des templates de cartes declutering.
Oui, j’avais utilisé les cartes auto-entity et button-card. Je pense à l’avenir revenir à ta méthode et faire un lien vers la page HACS. Ce sera plus simple à gérer et moins encombrant.
@aleex54 Tout dépend de ton utilisation…
Si ton interface principale c’est le dashboard, il peut être interressant de refaire ton interface à base de auto entity.
Si c’est juste un aspect esthétique des button card, tu peux très bien faire du auto entity + mushroom, le code est un peu moins simple, mais en tâtonnant on y arrive: un exemple avec mes alertes pollens:
La carte de base trouvée sur le forum est plus comme ça:
mais j’ai eu un projet de passer en full mushroom (je ne suis pas allé jusqu’au bout mais j’ai gardé le brouillon…)
Un autre exemple sur les restrictions d’eau:
Une carte de synthèse puis du auto-entity (normalement filtré sur les item avec restrictions, mais là nous n’avons pas de restrictions…)
Pour HACS, tu peux très bien imaginer d’avoir une carte de synthèse (mushroom template ou markdown) comme celle que j’ai, puis des boutons auto-entity pour lancer les update…
Je pense comprendre ce que tu dis, mais pour pouvoir avoir les mises à jour, il faut modifier l’affichage des intégrations pour qu’elles s’affichent comme des entités, ce qui ne permet pas l’utilisation de Markdown. Ou du moins, je ne sais pas le faire 
Ok.
Je n’avais pas compris cette subtilité…
Du coup tu as un capteur par integration…
En effet la carte markdown de synthèse ne marche pas, mais tu peux toujours faire du auto entity et n’afficher que les cartes ayant des updates actif…
