Lovelace: Versatile Swiss Army Knife Custom Card

Ok. I think I can help!

First, your animations:

When switching to ‘off’, I have no idea if there is still an update for the entity, but if there is an update, your animations probably won’t work anymore.

          - type: icon
            position:
              cx: 50
              cy: 50
              align: start
              icon_size: 20
            entity_index: 7
            user_actions:
              tap_action:
                haptic: success
                actions:
                  - action: call-service
                    service: climate.set_fan_mode
                    service_data:
                      fan_mode: quiet

            animations:
              - state: "quiet"
                styles:
                  icon:
                    animation: spin 5s linear infinite
                    fill: var(--md-fg-color--alert)
                    color: var(--md-fg-color--alert)
              - state: "low"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)
              - state: "medium"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)
              - state: "medium_high"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)
              - state: "high"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)
              - state: "auto"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)
              - state: "strong"
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)

If you replace the animations with the following (for each fan_mode), then IF there is an update with a state other than “quiet” in this case, at least the icon is changed to gray.

            animations:
              - state: "quiet"
                styles:
                  icon:
                    animation: spin 5s linear infinite
                    fill: var(--md-fg-color--alert)
                    color: var(--md-fg-color--alert)
              - state: "quiet"
                operator: '!=' # Use unequal state
                styles:
                  icon:
                    fill: gray # var(--theme-sys-color-secondary)

Second, the derived_entity:

A derived entity works as follows:

  • A state is received from Home Assistant
  • The derived entity calculates a new state, and REPLACES that state as the new state
  • After that, the animations are evaluated

So in your case, the state ‘off’ is replaced by the state ‘Hors fonction’ for entity index 6:

            derived_entity:
              state: |
                [[[ if (state == 'cool') return 'Climatisation'
                    if (state == 'heat') return 'Chauffage'
                    if (state == 'dry') return 'Déshumidification'
                    if (state == 'off') return 'Hors fonction'
                    return 'Inconnu'
                ]]]

As to your animations like this one:

            animations:
              - state: 'off'
                entity_index: 7
                reuse: true 
                styles:
                  icon:
                    fill: gray

I’m not sure if this will work. The animation is only evaluated if entity index 6 changes state. In this case, the animation checks if entity index 7 equals ‘off’, and should fill the icon with gray.

I guess changing the other animations with the ‘!=’ operator will already fix your issue.