Création d'un custom button card switch + sensor

Bonjour,

Mon problème

Je suis en train de réaliser un bouton costom pour la gestion de mon garage
Il s’agit d’un simple switch shelly. Je souhaite coupler avec un senssor qui detecte l’ouverte et la femerture de mon garage

Ma configuration


System Information

version core-2025.2.3
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.13.1
os_name Linux
os_version 6.6.73-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 5000
Installed Version 2.0.5
Stage running
Available Repositories 1535
Downloaded Repositories 12
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 14.2
update_channel stable
supervisor_version supervisor-2025.02.1
agent_version 1.6.0
docker_version 27.2.0
disk_total 30.8 GB
disk_used 5.7 GB
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 Get HACS (1.3.1), Advanced SSH & Web Terminal (20.0.0), Studio Code Server (5.18.1)
Dashboards
dashboards 2
resources 7
views 2
mode storage
Network Configuration
adapters lo (disabled), enp0s18 (enabled, default, auto), hassio (disabled), docker0 (disabled), veth28ef83c (disabled), veth5d7036d (disabled), veth791b7e6 (disabled), veth7c259e1 (disabled), vethc2a6917 (disabled), vethac70f6d (disabled), vethe7b572c (disabled)
ipv4_addresses lo (127.0.0.1/8), enp0s18 (192.168.1.154/24), hassio (172.30.32.1/23), docker0 (172.30.232.1/23), veth28ef83c (), veth5d7036d (), veth791b7e6 (), veth7c259e1 (), vethc2a6917 (), vethac70f6d (), vethe7b572c ()
ipv6_addresses lo (::1/128), enp0s18 (fe80::6281:ea51:946e:c507/64), hassio (fe80::42:d2ff:fe47:5966/64), docker0 (fe80::42:9ff:fe7b:e0e7/64), veth28ef83c (fe80::60d3:aff:fecd:1b3/64), veth5d7036d (fe80::e006:afff:fe25:8d53/64), veth791b7e6 (fe80::1040:edff:fe3a:ce22/64), veth7c259e1 (fe80::bccc:46ff:fe8c:f1f5/64), vethc2a6917 (fe80::6c67:c3ff:fe97:7092/64), vethac70f6d (fe80::3887:ddff:fefd:9c67/64), vethe7b572c (fe80::c852:34ff:fee8:6a39/64)
announce_addresses 192.168.1.154, fe80::6281:ea51:946e:c507
Recorder
oldest_recorder_run 10 février 2025 à 19:03
current_recorder_run 13 février 2025 à 19:49
estimated_db_size 11.40 MiB
database_engine sqlite
database_version 3.47.1

voici l’état de ma carte actuelle, où l’icône n’apparait pas :

type: custom:button-card
entity: binary_sensor.ouverture_garage_ouverture
name: Porte de Garage
icon: |
  {% if is_state('binary_sensor.ouverture_garage_ouverture', 'on') %}
    mdi:garage-open 
  {% else %}
    mdi:garage 
  {% endif %}
tap_action:
  action: call-service
  service: switch.turn_on
  target:
    entity_id: switch.shelly1_483fda942f35
show_state: false

Merci pour votre aide.

Salut
Peut être qu’en regardant la doc tu verras ton erreur :

1 « J'aime »

Bonjour,
pas besoin de javascript template, avec l’option state ça suffit.

  state:
    - value: 'on'
      icon: mdi:garage-open 
    - value: 'off'
      icon: mdi:garage

Il faut lire la doc, il y a des exemples et les options possibles.

ça ne fonctionne pas de cette façon avec buton-card. C’est du JavaScript template, pas du jinja template.

1 « J'aime »

Merci à tous pour vos réponses. j’ai relu la doc et voila :

type: custom:button-card
entity: binary_sensor.ouverture_garage_ouverture
name: Porte de Garage
icon: |
  [[[
    return states['binary_sensor.ouverture_garage_ouverture'].state === 'on'
      ? 'mdi:garage-open'
      : 'mdi:garage';
  ]]]
tap_action:
  action: call-service
  service: switch.turn_on
  target:
    entity_id: switch.shelly1_483fda942f35

Dans la doc , c’est :

  [[[
    if (entity.state == 'on')
      return "mdi:garage-open";
    else
      return "mdi:garage";
  ]]]

ou

  [[[
    if (states['binary_sensor.ouverture_garage_ouverture'].state == 'on')
      return "mdi:garage-open";
    return "mdi:garage";
  ]]]

Ce que tu as utilisé, c’est code de bubble-card. Ça fonctionne aussi. :wink: