Petite question avant de commencer en couleur

Entraide Home Assistant
1

Bonsoir,
Je garde mon interface HA la plus standard possible, mais j’aimerai avoir un peu de coloration sur l’état de mon ampli, donc avant de tenter j’aimerai savoir si je peux sur ce type de carte afficher par exemple en jaune le mode sonore de mon ampli.

La carte:
image

Le code:

square: true
columns: 5
type: grid
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: script.denon_pause
    name: Pause
    show_state: false
    icon_height: 50px
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: script.denon_moins
    name: Moins
    icon_height: 50px
    show_state: false
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: input_button.volume_30
    show_state: false
    icon_height: 50px
    name: Vol 30
    icon: mdi:volume-low
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: input_button.volume_40
    show_state: false
    icon_height: 50px
    name: Vol 40
    icon: mdi:volume-medium
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: input_button.volume_50
    show_state: false
    icon_height: 50px
    name: Vol 50
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: script.denon_previous
    name: Previous
    icon_height: 50px
    show_state: false
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: script.denon_next
    show_state: false
    icon_height: 50px
    name: Next
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: input_button.stereo
    name: Stéréo
    icon_height: 50px
    icon: ''
    show_state: false
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: input_button.dts
    name: DTS
    icon_height: 50px
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: input_button.dolby
    name: Dolby
    icon_height: 50px
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: spotcast.start
      target: {}
      data:
        limit: 20
        force_playback: false
        random_song: false
        repeat: 'off'
        shuffle: false
        offset: 0
        ignore_fully_played: false
        uri: spotify:playlist:5WgSH4gZe450TxekUZnCvY
        device_name: Denon AVC-X3700H
    name: Playlist
    icon: mdi:cast-connected
    show_state: false
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: spotcast.start
      target: {}
      data:
        limit: 20
        force_playback: false
        random_song: false
        repeat: 'off'
        shuffle: false
        offset: 0
        ignore_fully_played: false
        uri: spotify:playlist:4j3D3V3rLijM119toaOdQG
        device_name: Denon AVC-X3700H
    name: Chérie
    icon: mdi:cast-connected
    show_state: false
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: spotcast.start
      target: {}
      data:
        limit: 20
        force_playback: false
        random_song: false
        repeat: 'off'
        shuffle: false
        offset: 0
        ignore_fully_played: false
        uri: spotify:playlist:5J5eXFXQBIg5U7NDEYltjW
        device_name: Denon AVC-X3700H
    name: Cool
    icon: mdi:cast-connected
    show_state: false
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: spotcast.start
      target: {}
      data:
        limit: 20
        force_playback: false
        random_song: false
        repeat: 'off'
        shuffle: false
        offset: 0
        ignore_fully_played: false
        uri: spotify:playlist:71cTaCUFFbauSkAZy0jBjb
        device_name: Denon AVC-X3700H
    name: Métal
    icon: mdi:cast-connected
    show_state: false
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: spotcast.start
      target: {}
      data:
        limit: 20
        force_playback: false
        random_song: false
        repeat: 'off'
        shuffle: false
        offset: 0
        ignore_fully_played: false
        uri: spotify:playlist:0eiG3uhEhh8VboK0vMrY7Z
        device_name: Denon AVC-X3700H
    name: Reggae
    icon: mdi:cast-connected
    show_state: false
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: spotcast.start
      target: {}
      data:
        limit: 20
        force_playback: false
        random_song: false
        repeat: 'off'
        shuffle: false
        offset: 0
        ignore_fully_played: false
        uri: spotify:playlist:5Bo8KQbTQIKJwMSaWOT1oi
        device_name: Denon AVC-X3700H
    name: Zen Spa
    icon: mdi:cast-connected
    show_state: false
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: spotcast.start
      target: {}
      data:
        limit: 20
        force_playback: false
        random_song: false
        repeat: 'off'
        shuffle: false
        offset: 0
        ignore_fully_played: false
        uri: spotify:playlist:3mCAFmIqMAMiyHrRVYZdZl
        device_name: Denon AVC-X3700H
    name: Celtique
    icon: mdi:cast-connected
    show_state: false
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: spotcast.start
      target: {}
      data:
        limit: 20
        force_playback: false
        random_song: false
        repeat: 'off'
        shuffle: false
        offset: 0
        ignore_fully_played: false
        uri: spotify:playlist:4gF7tuuEZQ84oLxG3t8Mzr
        device_name: Denon AVC-X3700H
    name: Français
    icon: mdi:cast-connected
    show_state: false
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: input_button.heos
    name: HEOS
    icon_height: 50px
    icon: mdi:soundbar
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: input_button.blu_ray
    name: Blu-Ray
    icon_height: 50px
    icon: mdi:disc-player
title: Denon 3700

Par exemple colorer le bouton STEREO si mode stéréo:

{{ state_attr('media_player.denon_avc_x3700h_2','sound_mode') }}

= STEREO

Je vois souvent ce genre de demandes mais sur d’autres cartes, donc savoir si c’est jouable, j’ai card-mod.

Merci, Bob

2

Salut @Bob

Tu peux tester le code suivant pour ton exemple :

  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: input_button.stereo
    name: Stéréo
    icon_height: 50px
    icon: ''
    show_state: false
    card_mod:
      style: |
        {% if state_attr('media_player.denon_avc_x3700h_2','sound_mode') == 'stereo' %}
        ha-card {
          color: coral;
        }
        {% endif %}

Si ça fonctionne correctement, tu n’auras plus qu’à mettre la couleur qui te plait :wink:

1 « J'aime »
3

Bonjour @Herbs,
ça fonctionne nickel en tenant compte de la casse de l’attribut ‹ STEREO ›.
Merci beaucoup
Bob

1 « J'aime »
4

Je mets aussi le résultat :wink:

    card_mod:
      style: >
        {% if state_attr('media_player.denon_avc_x3700h_2','sound_mode') ==  'DOLBY DIGITAL' %}
        ha-card {
          color: coral;
          border-color: #848646;
          --card-mod-icon-color: #ffffff;
        } {% else %} ha-card {
          --card-mod-icon-color: #44739e;
        }
        {% endif %}

image

EDIT: j’ai ajouté le {% else %} sinon l’icon ne revenait pas à sa couleur d’origine.
Encore merci @Herbs
Bob

2 « J'aime »
5

De rien @Bob :wink: !!!