Animation icone lors du lancement de l'action sur Dashboard

Entraide Home Assistant
1

Mon à tous, tout nouveau sous Home Assistant (j’utilise Jeedom depuis une petite dizaine d’année).

Je suis en train de concevoir mon dashbord, j’ai crée un bouton qui me permet de piloter mes portes de garage, voici le code :

type: custom:mushroom-template-card
primary: Gauche
secondary: |
  {% if is_state('binary_sensor.shelly_cmd_gauche_garage_input','off') %}
    Fermé
  {% else %}
    Ouvert
  {% endif %}
icon: |-
  {% if is_state('binary_sensor.shelly_cmd_gauche_garage_input','off') %}
    mdi:garage
  {% else %}
    mdi:garage-open
  {% endif %}
icon_color: |-
  {% if is_state('binary_sensor.shelly_cmd_gauche_garage_input','off') %}
    green
  {% else %}
    orange
  {% endif %}
tap_action:
  action: call-service
  service: switch.turn_on
  target:
    entity_id:
      - switch.shelly_cmd_gauche_garage

Tout fonctionne correctement, je souhaite maintenant avoir une animation autour de l’icone lorsque je lance l’ouverture ou la fermeture de la porte, j’ai trouvé des choses intéressante sur les forum et installé « card-mod ».
J’ai crée une entrée « input_boolean.porte_gauche_en_mouvement » qui est à « on » lorsque ma porte est en mouvement, c’est avec cette entrée que je souhaite animer mon icone, le problème c’est que ça ne marche pas… Voici le code :

type: custom:mushroom-template-card
primary: Gauche
secondary: |
  {% if is_state('binary_sensor.shelly_cmd_gauche_garage_input','off') %}
    Fermé
  {% else %}
    Ouvert
  {% endif %}
icon: |-
  {% if is_state('binary_sensor.shelly_cmd_gauche_garage_input','off') %}
    mdi:garage
  {% else %}
    mdi:garage-open
  {% endif %}
icon_color: |-
  {% if is_state('binary_sensor.shelly_cmd_gauche_garage_input','off') %}
    green
  {% else %}
    orange
  {% endif %}
tap_action:
  action: call-service
  service: switch.turn_on
  target:
    entity_id:
      - switch.shelly_cmd_gauche_garage
card_mod:
  style: |
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('input_boolean.porte_gauche_en_mouvement', 'on') %}
          --shape-animation: ping 1s infinite;
        {% else %}
          --shape-animation: none;
        {% endif %}
      }
      @keyframes ping {
        0% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }

Avez vous une idée de l’origine du problème ?

Ma configuration :

System Information

version core-2024.3.0
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.12.2
os_name Linux
os_version 6.6.16-haos
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 5000
Installed Version 1.34.0
Stage running
Available Repositories 1407
Downloaded Repositories 13
HACS Data ok
Home Assistant Cloud
logged_in true
subscription_expiration 2 avril 2024 à 02:00
relayer_connected true
relayer_region eu-central-1
remote_enabled false
remote_connected false
alexa_enabled true
google_enabled true
remote_server eu-central-1-18.ui.nabu.casa
certificate_status ready
instance_id ceef49d1417b47b58a9d65517010734b
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 12.0
update_channel stable
supervisor_version supervisor-2024.02.1
agent_version 1.6.0
docker_version 24.0.7
disk_total 30.8 GB
disk_used 9.9 GB
healthy true
supported true
board ova
supervisor_api ok
version_api ok
installed_addons Mosquitto broker (6.4.0), File editor (5.8.0), Terminal & SSH (9.9.0), Studio Code Server (5.15.0), MariaDB (2.6.1), AirSend (1.2), teleinfo2mqtt (9.0.3), Fusion (2024.2.1), Zigbee2MQTT (1.36.0-1), Node-RED (17.0.7), InfluxDB (5.0.0), Grafana (9.1.3), Home Assistant Google Drive Backup (0.112.1)
Dashboards
dashboards 3
resources 11
views 9
mode storage
Recorder
oldest_recorder_run 28 février 2024 à 18:40
current_recorder_run 7 mars 2024 à 21:23
estimated_db_size 384.06 MiB
database_engine mysql
database_version 10.6.12
___
2

Salut ! J’ai essayer ton code et cela ne fonctionnait pas chez moi non plus.
Apres quelques minutes et des comparaisons avec les exemples trouver sur le forum Mushroom Cards Card Mod Styling/Config Guide j’ai fini par trouver,
Tu as glisser une pipe en trop après style dans ta card_mod. Ecris plutôt ceci

card_mod:
  style:
    mushroom-shape-icon$: |

Petite erreur d’inattention :wink:

1 « J'aime »
3

Un grand merci @Frosh !

J’ai modifié mon code car il y avait d’autres choses qui n’était pas correct. J’ai un autre soucis, lorsque j’enregistre mon code puis que je le réouvre, je perd toute la partie « card-mod », je ne pense pas que ce soit normal, quand j’ouvre la carte, j’arrive sur l’éditeur graphique, est-ce lui qui me supprime tout ce qui est card-mod ?

Voici mon nouveau code :

type: custom:mushroom-template-card
primary: Gauche
secondary: |
  {% if is_state('binary_sensor.shelly_cmd_gauche_garage_input','off') %}
    Fermé
  {% else %}
    Ouvert
  {% endif %}
icon: |
  {% if is_state('binary_sensor.shelly_cmd_gauche_garage_input','off') %}
    mdi:garage
  {% else %}
    mdi:garage-open
  {% endif %}
icon_color: |
  {% if is_state('binary_sensor.shelly_cmd_gauche_garage_input','off') %}
    green
  {% else %}
    orange
  {% endif %}
tap_action:
  action: call-service
  service: switch.turn_on
  target:
    entity_id:
      - switch.shelly_cmd_gauche_garage
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('input_boolean.porte_gauche_en_mouvement', 'on') and is_state ('binary_sensor.shelly_cmd_gauche_garage_input','on') %}
          --shape-animation: ping 1s infinite;
        {% endif %}
      }
      @keyframes ping {
        0% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
4

Alors la je sèche ^^’
J’arrive également dans l’éditeur visuel mais lorsque je bascule en éditeur de code j’ai toujours la card_mod.
La plupart du temps quand une paramètre de card mod n’est pas correct il ne fait tout simplement rien, mais il n’efface pas la card mod :confused:

5

je suis le thread de loin car le sujet m’intéresse :stuck_out_tongue:
Ce ne serait pas une histoire de browser cache ? essaye peut-être d’éditer ta carte avec un autre navigateur.

6

J’ai essayé sur 3 navigateurs differents + l’application HA sur Android et exactement le même problème, si je vide le cache pareil, je ne comprend pas…