Carte mushroom à modifier

David · Janvier 11, 2025, 12:47

Bonjour,

Voici une carte qui fonctionne mais je souhaite la modifier mais je n’y arrive pas.

Il me semble que le code de départ vient de @BBE

Voici le visuel

Et voici le code

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pool
    icon_color: blue
    primary: Piscine
    secondary: >-
      {{ states("sensor.piscine_temperature") }} °C / {{
      states("sensor.piscine_battery") }} % batterie / {{
      states("sensor.piscine_linkquality") }} link
    tap_action:
      action: navigate
      navigation_path: /lovelace/piscine
    double_tap_action:
      action: none
    hold_action:
      action: none
    badge_icon: ""
    badge_color: ""
    multiline_secondary: false
    fill_container: true
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: switch.volet_piscine
        tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:window-shutter-open
          {% else %}
            mdi:window-shutter
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
            red
          {% elif is_state(entity, 'off') %} 
            green
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Volet ON
          {% elif is_state(entity, 'off') %}
            Volet OFF
          {% endif %}
      - type: template
        entity: switch.filtration
        tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:fan
          {% else %}
            mdi:fan-off
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
            orange
          {% elif is_state(entity, 'off') %} 
            green
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Filtration ON
          {% elif is_state(entity, 'off') %}
            Filtration OFF
          {% endif %}
      - type: template
        entity: switch.lumiere_piscine
        tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:light-flood-up
          {% else %}
            mdi:light-flood-down
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
            orange
          {% elif is_state(entity, 'off') %} 
            green
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Lumière ON
          {% elif is_state(entity, 'off') %}
            Lumière OFF
          {% endif %}
    alignment: end
    card_mod:
      style: |
        ha-card {
          padding-top: 0px;
          margin-top: -8px;
          padding-bottom: 8px;
          padding-left: 8px;
          padding-right: 8px;
        }

Bon à présent mon, mes souhaits :

réalisé la rotation de l’icon fan si la filtration est en on
est-il possible d’avoir des icon sur la ligne avec la température, batterie

voici un code simplifié pour essai mais rien

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pool
    icon_color: blue
    primary: Piscine
    secondary: >-
      {{ states("sensor.piscine_temperature") }} °C / {{
      states("sensor.piscine_battery") }} % batterie / {{
      states("sensor.piscine_linkquality") }} link
    tap_action:
      action: navigate
      navigation_path: /lovelace/piscine
    double_tap_action:
      action: none
    hold_action:
      action: none
    badge_icon: ""
    badge_color: ""
    multiline_secondary: false
    fill_container: true
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: switch.prise_essai_tempo
        tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:fan
          {% else %}
            mdi:fan-off
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
            orange
          {% elif is_state(entity, 'off') %} 
            green
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Filtration ON
          {% elif is_state(entity, 'off') %}
            Filtration OFF
          {% endif %}
    alignment: end
    card_mod:
      style: |
        ha-icon {
          {% if is_state('switch.prise_essai_tempo', 'on') %}
            animation: spin 2s linear infinite;
          {% else %}
            animation: none;
          {% endif %}
        }
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        ha-card {
          padding-top: 0px;
          margin-top: -8px;
          padding-bottom: 8px;
          padding-left: 8px;
          padding-right: 8px;
        }

Merci d’avance

pascal_ha · Janvier 11, 2025, 1:09

Salut

pour l’animation du fan, essaye ce code :

  - type: template
    entity: switch.filtration
    icon: |
      {% if is_state(entity, 'on') %} 
       mdi:fan
      {% elif is_state(entity, 'off') %} 
       mdi:fan-off            
      {% endif %}                                               
    icon_color: |-
      {% if is_state(entity, 'on') %} 
       green
      {% elif is_state(entity, 'off') %} 
       grey            
      {% endif %}
    tap_action:
      action: none
    hold_action:
      action: none
    card_mod:
      style: |
        {% if is_state('switch.filtration,'on') %}
         ha-card { animation: spin 2s linear infinite; }
         @keyframes blink { 50% {opacity: 0;} }
        {%- endif %}

Je pense pas

freetronic · Janvier 11, 2025, 1:39

Hello,

en même temps ça risque d’être compliqué vu que tu empiles les cartes verticalement avec custom:vertical-stack-in-card

tente avec horizontal-stack

il faudra peut-être encore ajuster le code

cdt

David · Janvier 11, 2025, 1:56

Merci pour votre aide mais avec horizontal ou autre

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pool
    icon_color: blue
    primary: Piscine
    secondary: >-
      {{ states("sensor.piscine_temperature") }} °C / {{
      states("sensor.piscine_battery") }} % batterie / {{
      states("sensor.piscine_linkquality") }} link
    tap_action:
      action: navigate
      navigation_path: /lovelace/piscine
    double_tap_action:
      action: none
    hold_action:
      action: none
    badge_icon: ""
    badge_color: ""
    multiline_secondary: false
    fill_container: true
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: switch.prise_essai_tempo
        icon: |-
          {% if is_state(entity, 'on') %} 
           mdi:fan
          {% elif is_state(entity, 'off') %} 
           mdi:fan-off            
          {% endif %}                                               
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           green
          {% elif is_state(entity, 'off') %} 
           grey            
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Filtration ON
          {% elif is_state(entity, 'off') %}
            Filtration OFF
          {% endif %}
        tap_action:
          action: none
        hold_action:
          action: none
        card_mod:
          style: |
            {% if is_state('switch.prise_essai_tempo,'on') %}
             ha-card { animation: spin 2s linear infinite; }
             @keyframes blink { 50% {opacity: 0;} }
            {%- endif %} 
    alignment: end
    card_mod:
      style: |
        ha-icon {
          {% if is_state('switch.prise_essai_tempo', 'on') %}
            animation: spin 2s linear infinite;
          {% else %}
            animation: none;
          {% endif %}
        }
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        ha-card {
          padding-top: 0px;
          margin-top: -8px;
          padding-bottom: 8px;
          padding-left: 8px;
          padding-right: 8px;
        }

et

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pool
    icon_color: blue
    primary: Piscine
    secondary: >-
      {{ states("sensor.piscine_temperature") }} °C / {{
      states("sensor.piscine_battery") }} % batterie / {{
      states("sensor.piscine_linkquality") }} link
    tap_action:
      action: navigate
      navigation_path: /lovelace/piscine
    double_tap_action:
      action: none
    hold_action:
      action: none
    badge_icon: ""
    badge_color: ""
    multiline_secondary: false
    fill_container: true
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: switch.prise_essai_tempo
        icon: |-
          {% if is_state(entity, 'on') %} 
           mdi:fan
          {% elif is_state(entity, 'off') %} 
           mdi:fan-off            
          {% endif %}                                               
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           green
          {% elif is_state(entity, 'off') %} 
           grey            
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Filtration ON
          {% elif is_state(entity, 'off') %}
            Filtration OFF
          {% endif %}
        tap_action:
          action: none
        hold_action:
          action: none
        card_mod:
          style: |
            {% if is_state('switch.prise_essai_tempo,'on') %}
             ha-card { animation: spin 2s linear infinite; }
             @keyframes blink { 50% {opacity: 0;} }
            {%- endif %} 
    alignment: end
    card_mod:
      style: |
        ha-icon {
          {% if is_state('switch.prise_essai_tempo', 'on') %}
            animation: spin 2s linear infinite;
          {% else %}
            animation: none;
          {% endif %}
        }
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        ha-card {
          padding-top: 0px;
          margin-top: -8px;
          padding-bottom: 8px;
          padding-left: 8px;
          padding-right: 8px;
        }

freetronic · Janvier 11, 2025, 2:03

Re,

je n’ai modifié que la ligne type du 1er code

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pool
    icon_color: blue
    primary: Piscine
    secondary: >-
      {{ states("sensor.piscine_temperature") }} °C / {{
      states("sensor.piscine_battery") }} % batterie / {{
      states("sensor.piscine_linkquality") }} link
    tap_action:
      action: navigate
      navigation_path: /lovelace/piscine
    double_tap_action:
      action: none
    hold_action:
      action: none
    badge_icon: ""
    badge_color: ""
    multiline_secondary: false
    fill_container: true
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: switch.volet_piscine
        tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:window-shutter-open
          {% else %}
            mdi:window-shutter
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
            red
          {% elif is_state(entity, 'off') %} 
            green
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Volet ON
          {% elif is_state(entity, 'off') %}
            Volet OFF
          {% endif %}
      - type: template
        entity: switch.filtration
        tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:fan
          {% else %}
            mdi:fan-off
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
            orange
          {% elif is_state(entity, 'off') %} 
            green
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Filtration ON
          {% elif is_state(entity, 'off') %}
            Filtration OFF
          {% endif %}
      - type: template
        entity: switch.lumiere_piscine
        tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:light-flood-up
          {% else %}
            mdi:light-flood-down
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
            orange
          {% elif is_state(entity, 'off') %} 
            green
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Lumière ON
          {% elif is_state(entity, 'off') %}
            Lumière OFF
          {% endif %}
    alignment: end
    card_mod:
      style: |
        ha-card {
          padding-top: 0px;
          margin-top: -8px;
          padding-bottom: 8px;
          padding-left: 8px;
          padding-right: 8px;
        }

cdt

David · Janvier 11, 2025, 2:18

oui @freetronic et j’ai ajouté le code @pascal_ha et cela ne fonctionne pas

freetronic · Janvier 11, 2025, 2:57

Re,

je n’ai pas regardé au code de @pascal_ha

je me suis concentré sur le placement, c’est l’effet voulu?

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pool
    icon_color: blue
    primary: Piscine
    secondary: >-
      {{ states("sensor.piscine_temperature") }} °C / {{
      states("sensor.piscine_battery") }} % batterie / {{
      states("sensor.piscine_linkquality") }} link
    tap_action:
      action: navigate
      navigation_path: /lovelace/piscine
    double_tap_action:
      action: none
    hold_action:
      action: none
    badge_icon: ""
    badge_color: ""
    multiline_secondary: false
    fill_container: true
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: switch.volet_piscine
        tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:window-shutter-open
          {% else %}
            mdi:window-shutter
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
            red
          {% elif is_state(entity, 'off') %} 
            green
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Volet ON
          {% elif is_state(entity, 'off') %}
            Volet OFF
          {% endif %}
      - type: template
        entity: switch.filtration
        tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:fan
          {% else %}
            mdi:fan-off
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
            orange
          {% elif is_state(entity, 'off') %} 
            green
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Filtration ON
          {% elif is_state(entity, 'off') %}
            Filtration OFF
          {% endif %}
      - type: template
        entity: switch.lumiere_piscine
        tap_action:
          action: none
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:light-flood-up
          {% else %}
            mdi:light-flood-down
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
            orange
          {% elif is_state(entity, 'off') %} 
            green
          {% endif %}
        content: |-
          {% if is_state(entity, 'on') %}
            Lumière ON
          {% elif is_state(entity, 'off') %}
            Lumière OFF
          {% endif %}
    alignment: end
    card_mod:
      style: |
        ha-card {
          padding-top: 18px;
          margin-top: -8px;
          padding-bottom: 8px;
          padding-left: 8px;
          padding-right: 8px;
        }

cdt

pascal_ha · Janvier 11, 2025, 4:03

C’est étrange, chez moi cela fonctionne.

WarC0zes · Janvier 11, 2025, 4:11

Bonjour,
il faut juste modifier le margin-top pour avoir les chips au même niveau que la carte mushroom template

David · Janvier 11, 2025, 4:42

@WarC0zes merci mais mon but n’est pas de l’avoir sur la même ligne mais de mettre en rotation mon fan si = on

WarC0zes · Janvier 11, 2025, 5:22

j’ai mal compris.

tu ne peux pas mettre d’icone sur la ligne, mais tu peut utiliser des emoji.

      secondary: >-
        AV:🌡{{
        states("sensor.temperature_humidity_sensor_exterieur_av_temperature")
        |round(1)}}°C / 💧{{
        states("sensor.temperature_humidity_sensor_exterieur_av_humidity")
        |round(0)}}%

Tochy · Janvier 11, 2025, 5:33

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', 'on') %}
        green
      {% endif %}
    content: |-
      {% if is_state('switch.vmc', 'on') %}
        {% if is_state('switch.vitesse_vmc', 'off') %}
          - 1 -
        {% else %}
          - 2 - 
        {% endif %}
      {% else %}
        Off
      {% endif %}
    tap_action:
      action: more-info

A adapter à tes entités bien sur.
De plus dans ton cas la chip est en seconde position du coup la ligne :

mushroom-template-chip:nth-child(1)$: |

Deviendra :

mushroom-template-chip:nth-child(2)$: |

EMqA · Janvier 11, 2025, 5:45

Ce sujet m’a donné envie de le faire et ça donne ça.

  - type: template
    entity: switch.p_nous_1_commutateur
    icon: mdi:fan
    tap_action:
      action: more-info
    hold_action:
      action: none
    icon_color: |-
      {% set var=states('sensor.p_nous_1_puissance') | float %}
      {% if var<=1 %} 
        grey
      {% elif var >=50 %}
        red
      {% else %}
        green
      {% endif %}
    content: ""
    card_mod:
      style: >
        ha-card { {{ 'animation: spin 3s linear infinite;' if
        (is_state('switch.p_nous_1_commutateur','on')) }} }

Tochy · Janvier 11, 2025, 5:55

Oui celà fonctionne aussi à condition de ne pas avoir de ‹ content › parce que avec ha-card c’est toute la carte qui tourne.
Rajoute juste un content sur ta card et admire le resultat :

- type: template
    entity: switch.p_nous_1_commutateur
    icon: mdi:fan
    tap_action:
      action: more-info
    hold_action:
      action: none
    icon_color: |-
      {% set var=states('sensor.p_nous_1_puissance') | float %}
      {% if var<=1 %} 
        grey
      {% elif var >=50 %}
        red
      {% else %}
        green
      {% endif %}
    content: "test"
    card_mod:
      style: >
        ha-card { {{ 'animation: spin 3s linear infinite;' if
        (is_state('switch.p_nous_1_commutateur','on')) }} }

EMqA · Janvier 11, 2025, 6:31

effectivement ça fait pas pareil

pascal_ha · Janvier 11, 2025, 6:41

@David

David:

action: none
        card_mod:
          style: |
            {% if is_state('switch.prise_essai_tempo,'on') %}
             ha-card { animation: spin 2s linear infinite; }
             @keyframes blink { 50% {opacity: 0;} }
            {%- endif %}

Il te manque un ’ après le O de tempo.

('switch.prise_essai_tempo,'on')

('switch.prise_essai_tempo','on')

Essayé ce code complet, dans une nouvelle carte.(Je l’ai simplifié pour essai)

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: switch.prise_essai_tempo
    icon: |
      {% if is_state(entity, 'on') %}
        mdi:toggle-switch
      {% elif is_state(entity, 'off') %}  
        mdi:toggle-switch-off    
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %} 
       orange
      {% elif is_state(entity, 'off') %} 
       grey
      {% endif %}    
    primary: PRISE ESSAI
    secondary: ""
    layout: horizontal
    tap_action:
      action: toggle
    badge_icon: ""
    badge_color: ""
    card_mod:
      style: null
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: switch.prise_essai_tempo
        icon: |
          {% if is_state(entity, 'on') %} 
           mdi:fan
          {% elif is_state(entity, 'off') %} 
           mdi:fan-off             
          {% endif %}                                               
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           green
          {% elif is_state(entity, 'off') %} 
           grey             
          {% endif %}
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        card_mod:
          style: |
            {% if is_state('switch.prise_essai_tempo','on') %}
             ha-card { animation: spin 2s linear infinite; }
             @keyframes blink { 50% {opacity: 0;} }
            {%- endif %}               
    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);
    }

David · Janvier 11, 2025, 7:25

@pascal_ha ok merci cela fonctionne
@Tochy effectivement avec et sans content c’est pas pareil, donc question il y a un autre moyen de placer un texte si off ou on ?

mais la carte tourne également dans les deux cas

Tochy · Janvier 11, 2025, 7:43

Regarde mon premier post plus haut tu as la solution pour la rotation de l’icône seulement

freetronic · Janvier 11, 2025, 7:46

re,

du coup j’avais rien compris désolé…

cdt

David38 · Mars 9, 2025, 4:29

Bonjour,

Merci pour ton exemple qui fonctionne. A partir de celui-ci , j’ai essayé de l’appliquer à ma card mais dès lors qu’il y a plusieurs chips ; l’animation ne fonctionne pas , le code n’étant pas correct.