Button-card avec des mushroom-card : probleme animation

[Elpigeondindo]

Salut a tous!

Je suis en train de refaire mon Dashboard et je veux créer plusieurs boutons pour chaque pièce.
J’essai de mettre une animation quand l’entité est sur ON mais ca ne marche pas. Par contre quand je sors juste la carte mushroom, c’est a dire toute seule, ca fonctionne parfaitement.

type: custom:button-card
name: Chambre
icon: phu:rooms-bedroom
entity: light.zb_inter_chambre
show_state: false
custom_fields:
  temp: |
    [[[ return states['sensor.t_chambre'].state + '°C' ]]]
  hum: ''
  btn2:
    card:
      type: custom:mushroom-light-card
    entity: switch.tasmota_lit
    icon: mdi:heating-coil
    primary_info: none
    secondary_info: none
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% if is_state('switch.tasmota_lit','on') %}
            --shape-animation: ping 2s infinite;
            {%endif %}
            --icon-symbol-size: 30px;
            --icon-size: 25px;
          }
          @keyframes ping {
              0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
              70% {box-shadow: 0 0 0 10px transparent;}
              100% {box-shadow: 0 0 0 0 transparent;}
          }
        - type: template
          entity: cover.salon
          tap_action:
            action: toggle
          icon: phu:shutter-90
          card_mod:
            style: |
              ha-card {
                --chip-background: none;
                border: 0px;
                --chip-icon-size: 30px;
                color: grey;
                width: 10px;
                opacity: 0.8
              }
      card_mod:
        style: |
          .chip-container {
            --chip-spacing: 0px 0px 0px 0px!important;
          }
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips: null
styles:
  grid:
    - grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
    - grid-template-columns: 1fr min-content min-content
    - grid-template-rows: min-content min-content  min-content 1fr
  card:
    - padding: 5px 0px 5px 12px
    - height: 90px
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 80px
    - height: 80px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -20px
    - background: |
        [[[ 
          return (states['light.zb_inter_chambre'].state === 'on')
          ? '#f0e68c'
          : '#FFF8B5';
        ]]] 
    - border-radius: 500px
    - opacity: |
        [[[ 
          return (states['light.zb_inter_chambre'].state === 'on')
          ? '0.8'
          : '0.4';
        ]]] 
  name:
    - justify-self: start
    - align-self: start
    - font-size: 12px
    - font-weight: 500
  icon:
    - position: absolute
    - left: 30%
    - top: '-11%'
    - width: 40px
    - color: black
    - opacity: '0.8'
  custom_fields:
    btn2:
      - justify-content: end
      - align-self: start
    btn1:
      - justify-content: end
      - align-self: start
      - padding-left: 6px
    temp:
      - justify-self: start
      - font-size: 10px
      - opacity: '0.7'
      - pading-top: 10px
    hum:
      - justify-self: start
      - font-size: 14px
      - opacity: '0.7'

J’essai de faire clignoter le bouton switch.tasmota_lit alors que ca fonctione bien juste avec cette carte

type: custom:mushroom-light-card
entity: switch.tasmota_lit
icon: mdi:heating-coil
primary_info: none
secondary_info: none
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('switch.tasmota_lit','on') %}
        --shape-animation: ping 2s infinite;
        {%endif %}
        --icon-symbol-size: 30px;
        --icon-size: 25px;
      }
      @keyframes ping {
          0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
          70% {box-shadow: 0 0 0 10px transparent;}
          100% {box-shadow: 0 0 0 0 transparent;}
      }

Donc je suppose qu’il y a un conflit entre button-card et mushroom mais si quelqu’un avait une idée ca serait cool. Merci d’avance !

[WarC0zes]

@Elpigeondindo

custom_fields:
  temp: |
    [[[ return states['sensor.t_chambre'].state + '°C' ]]]
  hum: ''
  btn2:
    card:
      type: custom:mushroom-light-card
    entity: switch.tasmota_lit #tu a un décalage, il manque deux espaces
    icon: mdi:heating-coil
    primary_info: none
    secondary_info: none
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% if is_state('switch.tasmota_lit','on') %}
            --shape-animation: ping 2s infinite;
            {%endif %}
            --icon-symbol-size: 30px;
            --icon-size: 25px;
          }
          @keyframes ping {
              0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
              70% {box-shadow: 0 0 0 10px transparent;}
              100% {box-shadow: 0 0 0 0 transparent;}
          }

Bonjour,
tu as un souci d’espace.

corrigé:

custom_fields:
  temp: |
    [[[ return states['sensor.t_chambre'].state + '°C' ]]]
  hum: ''
  btn2:
    card:
      type: custom:mushroom-light-card
      entity: switch.tasmota_lit
      icon: mdi:heating-coil
      primary_info: none
      secondary_info: none
      layout: vertical
      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
              {% if is_state('switch.tasmota_lit','on') %}
              --shape-animation: ping 2s infinite;
              {%endif %}
              --icon-symbol-size: 30px;
              --icon-size: 25px;
            }
            @keyframes ping {
                0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
                70% {box-shadow: 0 0 0 10px transparent;}
                100% {box-shadow: 0 0 0 0 transparent;}
            }

[Elpigeondindo]

Merci j’avais pas fait gaffe mais hélas ca ne corrige pas le problème d’animation. J’ai du copié en changeant l’identation.

[WarC0zes]

C’est le bordel ton code
je regarde ce qui cloche.

[WarC0zes]

faut changer les entités, j’e les est modifier pour que ca fonctionne chez moi:

type: custom:button-card
name: Chambre
icon: phu:rooms-bedroom
entity: light.0x00158d0002e75493
show_state: false
custom_fields:
  temp: |
    [[[ return states['sensor.lywsd03mmc_0945_temperature'].state + '°C' ]]]
  hum: ''
  btn2:
    card:
      type: custom:mushroom-light-card
      entity: switch.0x50325ffffe304677
      icon: mdi:heating-coil
      primary_info: none
      secondary_info: none
      layout: vertical
      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
              {% if is_state('switch.0x50325ffffe304677','on') %}
              --shape-animation: ping 2s infinite;
              {%endif %}
              --icon-symbol-size: 30px;
              --icon-size: 25px;
            }
            @keyframes ping {
                0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
                70% {box-shadow: 0 0 0 10px transparent;}
                100% {box-shadow: 0 0 0 0 transparent;}
            }
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: cover.salon
          tap_action:
            action: toggle
          icon: phu:shutter-90
          card_mod:
            style: |
              ha-card {
                --chip-background: none;
                border: 0px;
                --chip-icon-size: 30px;
                color: grey;
                width: 10px;
                opacity: 0.8
              }
      card_mod:
        style: |
          .chip-container {
            --chip-spacing: 0px 0px 0px 0px!important;
          }              
styles:
  grid:
    - grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
    - grid-template-columns: 1fr min-content min-content
    - grid-template-rows: min-content min-content  min-content 1fr
  card:
    - padding: 5px 0px 5px 12px
    - height: 90px
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 80px
    - height: 80px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -20px
    - background: |
        [[[ 
          return (states['light.0x00158d0002e75493'].state === 'on')
          ? '#f0e68c'
          : '#FFF8B5';
        ]]] 
    - border-radius: 500px
    - opacity: |
        [[[ 
          return (states['light.0x00158d0002e75493'].state === 'on')
          ? '0.8'
          : '0.4';
        ]]] 
  name:
    - justify-self: start
    - align-self: start
    - font-size: 12px
    - font-weight: 500
  icon:
    - position: absolute
    - left: 30%
    - top: '-11%'
    - width: 40px
    - color: black
    - opacity: '0.8'
  custom_fields:
    btn2:
      - justify-content: end
      - align-self: start
    btn1:
      - justify-content: end
      - align-self: start
      - padding-left: 6px
    temp:
      - justify-self: start
      - font-size: 10px
      - opacity: '0.7'
      - pading-top: 10px
    hum:
      - justify-self: start
      - font-size: 14px
      - opacity: '0.7'

[Elpigeondindo]

Super apres quelques modifications de mon coté ca fonctionne.

Mais tu peux me dire ou ca clochait, je trouve pas la differnece?

[WarC0zes]

  btn2:
    card:
      type: custom:mushroom-light-card
    entity: switch.tasmota_lit
    icon: mdi:heating-coil
    primary_info: none
    secondary_info: none
    layout: vertical
    card_mod:
      style:
        ....
>>>     - type: template  ##mal positionner
          entity: cover.salon
          tap_action:
            action: toggle
          icon: phu:shutter-90
          card_mod:
            style: |
              ha-card {
                --chip-background: none;
                border: 0px;
                --chip-icon-size: 30px;
                color: grey;
                width: 10px;
                opacity: 0.8
              }

  btn1:
    card:
      type: custom:mushroom-chips-card
      chips: null  ##null car pas de carte, c'est le template que ta mal positionner

correction:

  btn1:
    card:
      type: custom:mushroom-chips-card
      chips: 
>>>     - type: template  ##C'est ici qui le faut
          entity: cover.salon
          tap_action:
            action: toggle
          icon: phu:shutter-90
          card_mod:
            style: |
              ha-card {
                --chip-background: none;
                border: 0px;
                --chip-icon-size: 30px;
                color: grey;
                width: 10px;
                opacity: 0.8
              }

[Elpigeondindo]

Oki je vois ce que tu voulais me dire, mais ce n’est pas ca qui a resolu le truc ^^

en fait j’ai enlevé « custom:mushroom-chips-card » et j’ais mis juste « custom:mushroom-light-card »

Mais le souci est que je ne peux plus mettre une liste vertical d’icone. L’animation ne doit pas fonctionner avec custom:mushroom-chips-card

type: custom:button-card
name: Chambre2
icon: phu:rooms-bedroom
entity: light.zb_inter_chambre
show_state: false
custom_fields:
  temp: |
    [[[ return states['sensor.t_chambre'].state + '°C' ]]]
  hum: ''
  btn2:
    card:
      type: custom:mushroom-light-card
      entity: switch.tasmota_lit
      icon: mdi:heating-coil
      primary_info: none
      secondary_info: none
      layout: vertical
      icon_color: blue
      card_mod:
        style:
          .: |
            ha-card {
              border: 0px
            }
          mushroom-shape-icon$: |
            .shape {
              {% if is_state('switch.tasmota_lit','on') %}
              --shape-animation: ping 2s infinite;
              {%endif %}
              --icon-symbol-size: 30px;
              --icon-size: 30px;
            }
            @keyframes ping {
                0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
                70% {box-shadow: 0 0 0 10px transparent;}
                100% {box-shadow: 0 0 0 0 transparent;}
            }
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips: null
styles:
  grid:
    - grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
    - grid-template-columns: 1fr min-content min-content
    - grid-template-rows: min-content min-content  min-content 1fr
  card:
    - padding: 5px 0px 5px 12px
    - height: 90px
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 80px
    - height: 80px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -20px
    - background: |
        [[[ 
          return (states['light.zb_inter_chambre'].state === 'on')
          ? '#f0e68c'
          : '#FFF8B5';
        ]]] 
    - border-radius: 500px
    - opacity: |
        [[[ 
          return (states['light.zb_inter_chambre'].state === 'on')
          ? '0.8'
          : '0.4';
        ]]] 
  name:
    - justify-self: start
    - align-self: start
    - font-size: 12px
    - font-weight: 500
  icon:
    - position: absolute
    - left: 30%
    - top: '-11%'
    - width: 40px
    - color: black
    - opacity: '0.8'
  custom_fields:
    btn2:
      - justify-content: end
      - align-self: start
    btn1:
      - justify-content: end
      - align-self: start
      - padding-left: 6px
    temp:
      - justify-self: start
      - font-size: 10px
      - opacity: '0.7'
      - pading-top: 10px
    hum:
      - justify-self: start
      - font-size: 14px
      - opacity: '0.7'

[WarC0zes]

@Elpigeondindo

      card_mod:
        style:
          .: |
            ha-card {
              border: 0px
            }
          mushroom-shape-icon$: |
            .shape {
              {% if is_state('switch.tasmota_lit','on') %}
              --shape-animation: ping 2s infinite;
              {%endif %}
              --icon-symbol-size: 30px;
              --icon-size: 30px;
            }
            @keyframes ping {
                0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
                70% {box-shadow: 0 0 0 10px transparent;}
                100% {box-shadow: 0 0 0 0 transparent;}
            }

Ta un problème la.
ca s’écris comme ca:

      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
              {% if is_state('switch.tasmota_lit','on') %}
              --shape-animation: ping 2s infinite;
              {%endif %}
              --icon-symbol-size: 30px;
              --icon-size: 30px;
            }
            @keyframes ping {
                0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
                70% {box-shadow: 0 0 0 10px transparent;}
                100% {box-shadow: 0 0 0 0 transparent;}
            }
          .: |
            ha-card {
              border: 0px
            }

le .: | permets de revenir au shadow-root du début.
Il faut appliquer en premier l’animation et revenir au debut du shadow-root après.

[Elpigeondindo]

Oki cool, je vient d’apprendre un truc utile merci.

mais je fais le test donc avec custom:mushroom-chips-card, j’ai l’icon mais le card_mod ne fonctionne pas

custom_fields:
  temp: |
    [[[ return states['sensor.t_chambre'].state + '°C' ]]]
  hum: ''
  btn2:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: switch.tasmota_lit
          icon: mdi:heating-coil
          primary_info: none
          secondary_info: none
          layout: vertical
          icon_color: blue
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                  {% if is_state('switch.tasmota_lit','on') %}
                  --shape-animation: ping 2s infinite;
                  {%endif %}
                  --icon-symbol-size: 30px;
                  --icon-size: 30px;
                }
                @keyframes ping {
                    0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
                    70% {box-shadow: 0 0 0 10px transparent;}
                    100% {box-shadow: 0 0 0 0 transparent;}
                }
              .: |
                ha-card {
                  border: 0px
                }
        - type: template
          entity: cover.chambre
          tap_action:
            action: toggle

[WarC0zes]

@Elpigeondindo

mais je fais le test donc avec custom:mushroom-chips-card, j’ai l’icon mais le card_mod ne fonctionne pas

C’est normal, chaque carte a des paramètres différents.

Regarde ce sujet, tu as plein d’exemple pour toutes les cartes mushroom:

Mushroom Cards Card Mod Styling/Config Guide

[Elpigeondindo]

Oui j’ai bien lu les parametrages et il semblerait que lorsqu’on utilise template c’est un peu different que le reste. Je met un exemple pour les personnes qui chercherait comment les parametrer

type: custom:mushroom-chips-card
chips:
- type: template
  entity: input_boolean.cycle_lave_linge_en_cours
  tap_action:
	action: none
  icon: mdi:washing-machine
  card_mod:
	style: |
	  ha-card {
		border: 0px;
	  }
- type: template
  entity: input_boolean.cycle_seche_linge_en_cours
  tap_action:
	action: none
  icon: phu:rooms-laundry-room
  card_mod:
	style: |
	  ha-card {
		border: 0px;
	  }
card_mod:
style:
  mushroom-template-chip:nth-child(1)$: |
	{% if is_state('input_boolean.cycle_lave_linge_en_cours','on') %}
	  ha-state-icon {
		--color: #00ced1;
		animation: wobbling 0.4s linear infinite alternate;
	  }
	  @keyframes wobbling {
		0% {transform: rotate(-20deg);}
		100% {transform: rotate(20deg);}
	  }
	{% else %}
	  ha-state-icon {
		
		--color: #393939;
	  }
	{%endif%}          
  mushroom-template-chip:nth-child(2)$: |
	{% if is_state('input_boolean.cycle_seche_linge_en_cours','on') %}
	  ha-state-icon {
		--color: #00ced1;
		trasnform: scale(0.5,0.5);
		animation: wobbling 0.4s linear infinite alternate;
	  }
	  @keyframes wobbling {
		0% {transform: rotate(-20deg);}
		100% {transform: rotate(20deg);}
	  }
	{% else %}
	  ha-state-icon {
		--color: #393939;
	  }
	{%endif%}
  .: |
	ha-card {
	  --chip-background: transparent;
	  --chip-icon-size: 28px;
	  border: 0px;
	  color: grey;
	  width: 10px;
	  padding: 0px 50px 0px -0px;
	  opacity: 0.8
	}