Changer le pied de page (footer) suivant l'état d'une entité

Bonsoir,
Depuis ce matin j’essaie de trouver le moyen de changer l’image du pied de page suivant l’état du capteur de courrier, mais en vain.
J’ai passé ma journée cherché sur différents sites et essayer différentes configurations(changement de background etc…), mais nada.
J’y arrive avec une carte « picture-glance », mais sans pouvoir y intégrer l’heure et le jour de la dernière distribution.
Voici le code, si quelqu’un pouvait m’éclairer, je vous remercie d’avance.

type: entities
entities:
  - entity: sensor.boite_aux_lettres_heure
    name: 'Dernière Distribution à :'
    icon: nul
  - entity: sensor.boite_aux_lettres_jour
    name: Le
    icon: nul
state_color: true
show_header_toggle: false
footer:
  type: picture
  image: |
    {% if is_state('input_boolean.boite_aux_lettres', 'on') %}
    image: local/icones/boite-aux-lettres.jpg
    {% else %}
    image: local/icones/boite-aux-lettres-off.jpg
    {% endif %}
  tap_action:
    action: none
  hold_action:
    action: none

Nativement, HA ne permet pas de faire du code dans les cartes officielles.

Et si c’était possible, tu ne devrais pas mettre image: dans la clé image mais juste /local/icones/boite-aux-lettres.jpg (tu remarqueras que le chemin commence par un / pour le chemin)

Merci de ton retour,
Donc c’est foutu pour le footer, sinon en utilisant une card-mode et background-image tu pense que je peux faire quelque chose ?

Non ce n’est pas foutu, mais je fais la réponse en 2 post… car je couche les filles :heavy_heart_exclamation:

Pour ajouter du code JINJA2 dans les cartes, n’importe quelle carte tu as :

→ card-templater

Ce qui donnerais pour ta carte :

type: 'custom:card-templater'
card:
  type: entities
  entities:
    - entity: sensor.boite_aux_lettres_heure
      name: 'Dernière Distribution à :'
      icon: nul
    - entity: sensor.boite_aux_lettres_jour
      name: Le
      icon: nul
  state_color: true
  show_header_toggle: false
  footer:
    type: picture
    image_template: |
      {% if is_state('input_boolean.boite_aux_lettres', 'on') %}
        /local/icones/boite-aux-lettres.jpg
      {% else %}
        /local/icones/boite-aux-lettres-off.jpg
      {% endif %}
    tap_action:
      action: none
    hold_action:
      action: none
entities:
  - input_boolean.boite_aux_lettres

je comprends pourquoi tu as mis ceci (afin de ne pas afficher d’icône), mais prends l’habitude dès maintenant de mettre null (ce qui est plus robuste au niveau de l’interpréteur derrière), mais bien sûr, nul ou toto fonctionne :+1: (je pense que je mettrais directement mdi:null)

SUPER !
Moi aussi on me demande, je testerai cela plus tard.
Merci de ta disponibilité et bonne nuit aux filles :wink:

Concernant le non-affichage de l’icône actuellement tu as :

image

Je veux juste te faire par du fait que tu peux masquer l’icône ce qui ne donne pas le même rendu (dédicace à @jybi89 pour l’icône :wink: ) :

Et du coup, tu pourrais (en allant encore un peu plus loin dans la personnalisation grâce à card-mod) :

Code de la carte entités
type: entities
entities:
  - entity: sensor.boite_aux_lettres_heure
    icon: 'mdi:null'
    name: Dernière distribution à
    style:
      hui-generic-entity-row:
        .: |
          div{font-weight: 600;font-size: 1.3em}
        $: |
          state-badge{ display: none;}
          div{text-align: right; }
  - entity: sensor.boite_aux_lettres_jour
    icon: 'mdi:null'
    name: Le
    style:
      hui-generic-entity-row:
        .: |
          div{font-weight: 600;font-size: 1.3em}
        $: |
          state-badge{ display: none;}
          div{text-align: right; }
state_color: false
footer:
  type: picture
  image: /local/icones/boite-aux-lettres.jpg
  tap_action:
    action: none
  hold_action:
    action: none

Bien sûr, ce n’est qu’un proposition (les goûts, les couleurs) et surtout un exemple d’utilisation pour un détournement afin que tout le monde puisse s’amuser :+1:

1 J'aime

Hello,
J’ai donc installé la carte « custom:card-templater » et j’ai ajouté un tape-action sur l’image afin de réinitialiser le « input_boolean.boite_aux_lettres » après avoir retiré le courrier de la boite à lettre.
J’ai bien pris note de tes remarques sur le chemin et le « nul » et j’essayerai de ne pas reproduire l’erreur dans mes prochaines cartes.
Merci encore @Clemalex pour ce bel exemple de carte personnalisée. :+1:

Code de la carte
type: 'custom:card-templater'
card:
  type: entities
  entities:
    - entity: sensor.boite_aux_lettres_heure
      name: 'Dernière Distribution à :'
      icon: 'mdi: null'
      style:
        hui-generic-entity-row:
          .: |
            div{font-weight: 600;font-size: 1.3em}
          $: |
            state-badge{ display: none;}
            div{text-align: right; }
    - entity: sensor.boite_aux_lettres_jour
      name: Le
      icon: 'mdi: null'
      style:
        hui-generic-entity-row:
          .: |
            div{font-weight: 600;font-size: 1.3em}
          $: |
            state-badge{ display: none;}
            div{text-align: right; }
  state_color: true
  show_header_toggle: false
  footer:
    type: picture
    image_template: |
      {% if is_state('input_boolean.boite_aux_lettres', 'on') %}
        /local/icones/boite-aux-lettres.jpg
      {% else %}
        /local/icones/boite-aux-lettres-off.jpg
      {% endif %}
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.boite_aux_lettres
    hold_action:
      action: none
entities:
  - input_boolean.boite_aux_lettres

Boite aux lettres pleine
boite pleine
Boite aux lettres vide
boite vide

Je pense qu’une seule image est nécessaire si on passe par card-mod et que l’on applique la propriété css grayscale.

Cela permet de minimiser les ressources et donc la bande passante nécessaire :+1:

Avec plaisir :+1:

pour mentionner quelqu’un ajoute @ devant

Et voici comment faire si tu ne veux utiliser qu’une seule image et appliquer un niveau de gris sur l’image.

Cela te permet de n’utiliser que card-mod et plus card-templater (plus besoin de gérer une secondes images) :

type: entities
entities:
  - entity: sensor.boite_aux_lettres_heure
    name: 'Dernière Distribution à :'
    icon: 'mdi: null'
    style:
      hui-generic-entity-row:
        .: |
          div{font-weight: 600;font-size: 1.3em}
        $: |
          state-badge{ display: none;}
          div{text-align: right; }
  - entity: sensor.boite_aux_lettres_jour
    name: Le
    icon: 'mdi: null'
    style:
      hui-generic-entity-row:
        .: |
          div{font-weight: 600;font-size: 1.3em}
        $: |
          state-badge{ display: none;}
          div{text-align: right; }
state_color: true
show_header_toggle: false
footer:
  type: picture
  image: /local/icones/boite-aux-lettres.jpg
  tap_action:
    action: call-service
    service: input_boolean.toggle
    service_data:
      entity_id: input_boolean.boite_aux_lettres
  hold_action:
    action: none
style:
  hui-picture-header-footer:
    $: |
      {% if is_state('input_boolean.boite_aux_lettres','on') %}
        .clickable{
          filter: grayscale(1);
        }
      {% endif %}

animate

Ce coup là, cette carte est bien optimisée, elle remplace déjà le précédent modèle. :+1:
ps:
En fait, le déclencheur n’est pas visible sur la carte, c’est en cliquant sur l’image que le changement s’effectue.
Le TOP quoi !

1 J'aime