Spin fan sur timer bar card

Entraide Home Assistant
1

Bonjour,

J’ai tant bien que mal réussi à créer cette carte qui me permet de configurer un minuteur pour le chauffage soufflant électrique de ma salle de bain.
Elle me permet donc de régler un minuteur, de le déclencher, puis de visualiser le temps restant avant son extinction.

chrome_o1cAD9rDMa
chrome_o1cAD9rDMa521×153 5.08 KB

Tout fonctionne correctement, mais j’aurais aimé pousser un peu plus le détail esthétique, en passant le logo en rouge et en faisant tourner le logo du ventilateur lorsque l’appareil est actif. Malheureusement, impossible de réussir à faire cela.

Je vous mets ci-dessous le code de ma carte :

type: custom:vertical-stack-in-card
cards:
  - type: custom:timer-bar-card
    entity:
      - switch.0x00124b0024caab80
    icon: mdi:fan
    name: Soufflant SDB
    mushroom: null
    duration:
      entity: input_number.timer_soufflant_sdb
      units: minutes
    sync_issues: ignore
    bar_direction: rtl
    bar_background: "#2980b9"
    bar_foreground: "#1c2833"
    tap_action:
      action: call-service
      service: script.timer_soufflant_sdb
    card_mod:
      style: |
        ha-card {
          border: none;
          width: 98%;
          margin: 6px;
        }
  - type: entities
    entities:
      - entity: input_number.timer_soufflant_sdb
        name: Réglage Timer
        icon: none
    card_mod:
      style: |
        ha-card {
          border: none; 
          width: 98%;
          margin: -11px;
          margin-top: -15px;
         }

Pourriez vous m’aider à adapter cette carte pour obtenir le rendu décris plus haut ?
Merci

Ma configuration

System Information

version core-2025.12.0
installation_type Home Assistant OS
dev false
hassio true
docker true
container_arch amd64
user root
virtualenv false
python_version 3.13.9
os_name Linux
os_version 6.12.51-haos
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 4994
Installed Version 2.0.5
Stage running
Available Repositories 2472
Downloaded Repositories 23
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 16.3
update_channel stable
supervisor_version supervisor-2025.11.5
agent_version 1.7.2
docker_version 28.3.3
disk_total 62.3 GB
disk_used 9.1 GB
nameservers 192.168.1.1
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization kvm
board ova
supervisor_api ok
version_api ok
installed_addons Studio Code Server (6.0.1), File editor (5.8.0), AirCast (5.0.2), Zigbee2MQTT (2.7.0-1), Gazpar 2 MQTT (0.8.10), Terminal & SSH (9.20.1), Matter Server (8.1.1), Samba share (12.5.4), Get HACS (1.3.1), Mosquitto broker (6.5.2)
Dashboards
dashboards 6
resources 20
views 17
mode storage
Network Configuration
adapters lo (disabled), enp6s18 (enabled, default, auto), docker0 (disabled), hassio (disabled), vethd2a7f77 (disabled), veth325ac21 (disabled), veth0c61ed9 (disabled), vethd9193d9 (disabled), veth78f8f8a (disabled), veth2e7e718 (disabled), veth1d134b0 (disabled), veth1934894 (disabled), vethcae6ce1 (disabled), veth5d363f9 (disabled), veth35be064 (disabled), veth38b7c98 (disabled)
ipv4_addresses lo (127.0.0.1/8), enp6s18 (192.168.1.44/24), docker0 (172.30.232.1/23), hassio (172.30.32.1/23), vethd2a7f77 (), veth325ac21 (), veth0c61ed9 (), vethd9193d9 (), veth78f8f8a (), veth2e7e718 (), veth1d134b0 (), veth1934894 (), vethcae6ce1 (), veth5d363f9 (), veth35be064 (), veth38b7c98 ()
ipv6_addresses lo (::1/128), enp6s18 (fe80::3f1f:a8c5:cdaf:95ca/64), docker0 (fe80::5b:c8ff:fe16:8126/64), hassio (fd0c:ac1e:2100::1/48, fe80::4cf7:5ff:fe4d:fd67/64), vethd2a7f77 (fe80::74b8:beff:fe72:8bd2/64), veth325ac21 (fe80::f817:feff:fe19:605/64), veth0c61ed9 (fe80::ecba:e7ff:fe03:f66a/64), vethd9193d9 (fe80::4877:ebff:fef4:2b85/64), veth78f8f8a (fe80::fc67:faff:feee:a32a/64), veth2e7e718 (fe80::805b:15ff:fe4e:c025/64), veth1d134b0 (fe80::dc03:c6ff:fe90:f106/64), veth1934894 (fe80::b421:27ff:fe94:e720/64), vethcae6ce1 (fe80::9090:ceff:fe34:cb68/64), veth5d363f9 (fe80::f85c:c3ff:fe7e:9ca8/64), veth35be064 (fe80::f839:e3ff:fe1e:e176/64), veth38b7c98 (fe80::c078:b0ff:fe9e:3b65/64)
announce_addresses 192.168.1.44, fe80::3f1f:a8c5:cdaf:95ca
Recorder
oldest_recorder_run 22 novembre 2025 à 22:37
current_recorder_run 4 décembre 2025 à 08:28
estimated_db_size 268.18 MiB
database_engine sqlite
database_version 3.49.2
Spotify
api_endpoint_reachable ok
___
2

Bonjour,

Si tu veux un exemple avec custom:button-card, je peux te faire ça en principe dans la journée (sans avoir besoin de vertical-stack-in-card ni de card_mod en principe)…

1 « J'aime »
3

Salut

Pour le mouvement de l’icône, tu peux utiliser ce code:

card_mod:
  style: |
    {% if is_state('switch.vmc_pv_gv','on') %}
     ha-state-icon { animation: spin 2s linear infinite; }
     @keyframes blink { 50% {opacity: 0;} }
    {% elif is_state('switch.vmc_pv_gv','off') %}
     ha-state-icon { animation: spin 5s linear infinite; }
     @keyframes blink { 50% {opacity: 0;} }
    {%- endif %}

Pour la couleur de l’icône:

color: |-
  {% if is_state(entity, 'on') %} 
   orange
  {% elif is_state(entity, 'off') %} 
   green
  {% endif %}

Ces codes fonctionnent chez moi, il faut modifier les noms d’entités par les tiennes.

1 « J'aime »
4

Merci pour vos retour.

J’ai testé mais l’animation ne fonctionne pas.
Je ne sais pas si j’ai bien intégré le code dans le miens.
Et je me pose la question de savoir si le fait d’utiliser une « custom:timer-bar-card » n’est pas le problème :

Voici comment j’ai intégrer le code de l’animation dans ma carte :

type: custom:vertical-stack-in-card
cards:
  - type: custom:timer-bar-card
    entity:
      - switch.0xecf64cfffef44831
    icon: mdi:fan
    name: Soufflant SDB Anaïs
    mushroom: null
    duration:
      entity: input_number.timer_soufflant_sdb_anais
      units: minutes
    sync_issues: ignore
    bar_direction: rtl
    bar_background: "#2980b9"
    bar_foreground: "#1c2833"
    tap_action:
      action: call-service
      service: script.timer_soufflant_sdb_anais_2
    card_mod:
      style: |
        {% if is_state('switch.0xecf64cfffef44831','on') %}
        ha-state-icon { animation: spin 2s linear infinite; }
        @keyframes blink { 50% {opacity: 0;} }
        {% elif is_state('switch.0xecf64cfffef44831','off') %}
        ha-state-icon { animation: spin 5s linear infinite; }
        @keyframes blink { 50% {opacity: 0;} }
        {%- endif %}
        
  - type: entities
    entities:
      - entity: input_number.timer_soufflant_sdb_anais
        name: Réglage Timer
        icon: none
    card_mod:
      style: |
        ha-card {
          border: none; 
          width: 98%;
          margin: -11px;
          margin-top: -15px;
         }
5

Et en gardant la barre de timer ?
Si oui avec plaisir :slightly_smiling_face:

6

Oui en gardant la barre de timer. Peux tu poster le code du script lié ?
En collant ton code, je n’ai pas la berre du dessus :

image
image502×127 4.1 KB

Il faudra que je vois pourquoi mais ça doit être en lien avec le fait que mon switch est sur ‹ on › dès le départ.

7

Salut,
essaye plutôt ce code :

card_mod:
  style: |
    ha-state-icon {
     {% if is_state('switch.0xecf64cfffef44831','off') %} 
        animation: none;
     {% else %}              
        animation: rotation 2.5s linear infinite;
     {% endif %} 
     }
     @keyframes rotation { 
       0% { transform: rotate(0deg); }
       100% { transform: rotate(359deg); }
     }

il a mis l’animation spin, mais le keyframes pour blink :thinking:

1 « J'aime »
8

Alors j’ai une automatisation :

alias: timer_soufflant_sdb
description: ""
triggers:
  - entity_id:
      - switch.0x00124b0024caab80
    to: "on"
    for:
      hours: 0
      minutes: "{{ states.input_number.timer_soufflant_sdb.state | int }}"
      seconds: 0
    trigger: state
conditions: []
actions:
  - type: turn_off
    device_id: dd4c6e961fa4d2250bfb8af237fd751b
    entity_id: 97c63b3dbf5e26cf7a15eb77c1298acd
    domain: switch
mode: single

Et ce script :

alias: timer_soufflant_sdb
sequence:
  - type: toggle
    device_id: dd4c6e961fa4d2250bfb8af237fd751b
    entity_id: 97c63b3dbf5e26cf7a15eb77c1298acd
    domain: switch
description: ""
icon: mdi:timer
9

Ohh oui ! ça fonctionne le ventilateur tourne bien !

Par contre (désolé pour mon amateurisme), mais je n’arrive pas à intégrer le code permettant de changer la couleur de cet icone.
Je vous remet le code de la carte complète qui fonctionne avec la rotation du ventilateur :

type: custom:vertical-stack-in-card
cards:
  - type: custom:timer-bar-card
    entity:
      - switch.0xecf64cfffef44831
    icon: mdi:fan
    name: Soufflant SDB Anaïs
    mushroom: null
    duration:
      entity: input_number.timer_soufflant_sdb_anais
      units: minutes
    sync_issues: ignore
    bar_direction: rtl
    bar_background: "#2980b9"
    bar_foreground: "#1c2833"
    tap_action:
      action: call-service
      service: script.timer_soufflant_sdb_anais_2
    card_mod:
      style: |
        ha-state-icon {
        {% if is_state('switch.0xecf64cfffef44831','off') %} 
        animation: none;
         {% else %}              
        animation: rotation 2.5s linear infinite;
         {% endif %} 
         }
         @keyframes rotation { 
         0% { transform: rotate(0deg); }
         100% { transform: rotate(359deg); }
         } 
         
         ha-card {
          border: none;
          width: 98%;
          margin: 6px;
        }
               
  - type: entities
    entities:
      - entity: input_number.timer_soufflant_sdb_anais
        name: Réglage Timer
        icon: none
    card_mod:
      style: |
        ha-card {
          border: none; 
          width: 98%;
          margin: -11px;
          margin-top: -15px;
         }
10

avec color: dans card-mod :

    card_mod:
      style: |
        ha-state-icon {
        {% if is_state('switch.0xecf64cfffef44831','off') %} 
          animation: none;
          color: green;
        {% else %}              
          animation: rotation 2.5s linear infinite;
          color: red;
        {% endif %} 
        }
        @keyframes rotation { 
         0% { transform: rotate(0deg); }
         100% { transform: rotate(359deg); }
        } 
        ha-card {
          border: none;
          width: 98%;
          margin: 6px;
         }

image
image

11

Oups désolé,

J’ai pris le code que j’ai utilisé dans un chips pour mushroom (sur le chip ça fonctionne :grin:)

12

Merci !
ça fonctionne, je comprends mieux maintenant :slight_smile:

Dernière petite chose, j’essais de changer la couleur bleu qui fond.
J’ai ajouté la ligne : background-color: #FF0000;

mais j’obtiens ceci :

chrome_ZgKn4MabRV
chrome_ZgKn4MabRV595×192 7.37 KB

13

image

    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape.disabled {
            background-color: rgba(255,0,0,0.3) !important;
          }      
        .: |
          ha-state-icon {
          {% if is_state('switch.0xecf64cfffef44831','off') %} 
          animation: none;
          {% else %}              
          animation: rotation 2.5s linear infinite;
          color: red;
          {% endif %} 
          }
          @keyframes rotation { 
           0% { transform: rotate(0deg); }
           100% { transform: rotate(359deg); }
          }  
          ha-card {
            border: none;
            width: 98%;
            margin: 6px;
          }
14

Avec le code ci-dessus :

La couleur de fond (que j’ai mise 100% transparent) s’applique quand l’appareil est OFF :

chrome_ECgnqpZ6HE
chrome_ECgnqpZ6HE605×169 4.75 KB

Mais en ON, le fond revient en bleu :

chrome_tQGGOxIx0E
chrome_tQGGOxIx0E609×176 6.14 KB

15

test ça :

    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            background-color: transparent !important;
          }      
        .: |
          ha-state-icon {
          {% if is_state('switch.0xecf64cfffef44831','off') %} 
          animation: none;
          {% else %}              
          animation: rotation 2.5s linear infinite;
          color: red;
          {% endif %} 
          }
          @keyframes rotation { 
           0% { transform: rotate(0deg); }
           100% { transform: rotate(359deg); }
          }  
          ha-card {
            border: none;
            width: 98%;
            margin: 6px;
          }

image

image

16

Génial !
Merci beaucoup ça fonctionne.

J’ai lu et essayé pas mal de chose, mais j’avoue avoir du mal à appréhender ce code pour obtenir ce que je souhaite.

Et pour ma simple curiosité, j’avais une dernière question.

Si je comprends bien, cette partie change la couleur du fond peut importe l’état (ON ou OFF) :

mushroom-shape-icon$: |
          .shape {
            background-color: transparent !important;
          }

Et si on voulait 2 couleurs différentes en fonction de l’état.
Exemple : Gris quand OFF et Rouge quand ON, il faudrait mettre quoi comme code ?

17 
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('switch.0xecf64cfffef44831','off') %} 
        background-color: lightgrey !important;
        {% else %}              
        background-color: rgba(255,0,0,0.5) !important;
        {% endif %} 
      }

A priori, la syntaxe conditionnelle reste la même.

1 « J'aime »
18

Tout fonctionne bien !
Un grand merci à tout le monde

19

Ce sujet a été automatiquement fermé après 2 jours. Aucune réponse n’est permise dorénavant.