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

Entraide Home Assistant
1

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
2

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)

3

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 ?

4

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)

5

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

6

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: ) :

image
image930×402 9.3 KB

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

image
image667×521 51.7 KB

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 »
8

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

9

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:

10

Avec plaisir :+1:

pour mentionner quelqu’un ajoute @ devant

11

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

12

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 »
13

Bonjour a tous.
Je suis débutant en HA, presque nul en anglais (google traduction), mais je me suis lance de défi d’équiper ma maison via HA.
Je ne n’ai jamais utilise le yaml sauf inclure une ligne dans le config .yaml pour ajouter un fichier dont le code Airsend m’a été fourni.
Je trouve votre réalisation très sympathique.
j’ai acheté un capteur Sonoff de détection présence (Youtube conseil Thomas).
Jai installe la Card-mod dans HACS/Interface.
J’ai ajoute le code ci-dessous au fichier config:

frontend:
  extra_module_url:
    - /local/card-mod.js

J’ai redémarré HA
Etant sur mon tableau de bord, je fais Modifier/Ajouter carte mais la Card-mod est absente.
J’ai fait la même chose avec Mushroom pour mes volets, etc…, cela fonctionne bien.
merci de votre aide

14

Le plus simple est d’installer card-mod avec HACS.
tu recherche card-mod et tu clic dessus en suite en bas à droite tu aura un bouton télécharger, tu clique dessus et cela s’installe.

Capture d’écran 2023-04-19 101619
Capture d’écran 2023-04-19 1016191532×428 19.4 KB

15

bonsoir
j’en suis la

image
image860×463 22 KB 

Ensuite sur mon tableau de bord, je peux ajouter les cartes mushroom mais pas la carte-mod
16

card-mod n’est pas une carte mais permet d’appliquer des styles CSS à divers éléments.
Voici un exemple simple d’utilisation de card-mode sur une carte entité.

type: entities
title: Card-mod
entities:
  - entity: sun.sun
style: |
  ha-card{
    --ha-card-background: yellow;
  }

Et pour en apprendre plus, tu as cet excellent post

https://forum.hacf.fr/t/personnaliser-ses-cartes-avec-card-mod/4447?u=telenaze

17

Bonjour
Merci Telenaze pour tes infos: J’ai joue avec Card-mod, c’est sympa.
J’ai créer un tableau test en y ajoutant le code que vous avez écrit, j’obtiens une page page

views:
  - title: Home
    cards: []
  - title: vue1
    path: vue1
    badges: []
    cards: []
title: TEST CARTE
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 %}

Ou récupère t on le JPG et ou je dois le placer?
merci

18

Tu fais un clique droit sur la photo et puis enregistrer l’image sous… en nommant comme il faut.

19

Salut @Clemalex,
Je fais évoluer ma carte et j’aimerai changer l’image du footer suivant l’état d’un sensors. Je cherche depuis plusieurs heures mais en vain, pourrait tu me venir en aide ?
j’ai aussi créer un sensor pensant que cela m’aiderai avec un state_image, mais je sèche.
Merci,

Code de la carte 
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.detection_colis', 'on') and
      is_state('input_boolean.detection_lettre', 'on') %}
        .clickable{  
          image: /local/icones/boite-aux-lettres-pleine-colis.jpg; 
        }
      {% elif is_state('input_boolean.detection_colis', 'on') and
      is_state('input_boolean.detection_lettre', 'off') %}
        .clickable{  
          image: /local/icones/boite-aux-lettres-colis.jpg;
        }
      {% elif is_state('input_boolean.detection_colis', 'off') and
      is_state('input_boolean.detection_lettre', 'on') %}
        .clickable{  
          image: /local/icones/boite-aux-lettres.jpg;
        }
      {% else %}
        .clickable{  
          image: /local/icones/boite-aux-lettres-vide.jpg;
        }
      {% endif %} 


      {% if is_state('input_boolean.boite_aux_lettres','off') %}
        .clickable{
          filter: grayscale(1);
        }
      {% endif %}

`

``

Sensor 
    - name: "boite_aux_lettres_contenu"
      unique_id: boite_aux_lettres_contenu
      icon: mdi:calendar-clock
      state: >-
        {% if is_state('input_boolean.detection_colis', 'on') and
        is_state('input_boolean.detection_lettre', 'on') %}
          lettre et colis 
        {% elif is_state('input_boolean.detection_colis', 'on') and
        is_state('input_boolean.detection_lettre', 'off') %}
          colis
        {% elif is_state('input_boolean.detection_colis', 'off') and
        is_state('input_boolean.detection_lettre', 'on') %}
          lettre
        {% else %}
          vide
        {% endif %}
20

Tu as essayé de mettre une carte condition ? Et deux cartes images suivant l’état d’une entité ?

21

Merci,
Je savais que tu aurai une solution à m’apporter, et cela marche nickel :wink:

De mon coté j’ai trouvé ça, qui fonctionne très bien, mais je n’ai pas réussi à justifier le texte sur la droite, du coup sur mon smartphone les deux lignes ne sont pas bien alignées.
J’ai aussi été obligé d’jouter un titre, sinon je manque de hauteur de carte pour les 2 lignes.
boite aux lettres

carte picture-elements 
type: picture-elements
image: /local/icones/boite-aux-lettres.jpg
elements:
  - type: image
    tap_action:
      action: null
    entity: sensor.boite_aux_lettres_contenu
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      lettre: /local/icones/boite-aux-lettres.jpg
      colis: /local/icones/boite-aux-lettres-colis.jpg
      lettre et colis: /local/icones/boite-aux-lettres-pleine-colis.jpg
      vide: /local/icones/boite-aux-lettres-vide.png
  - type: state-label
    entity: sensor.boite_aux_lettres_heure
    title: Température Entrée
    prefix: ' à : '
    style:
      top: '-2%'
      left: 84.5%
      font-size: 9x
      color: green
  - type: state-label
    entity: sensor.boite_aux_lettres_jour
    title: Température Entrée
    prefix: 'Dernière Distribution Le :  '
    style:
      top: '-10%'
      left: 68%
      font-size: 9x
      color: green
title: Mon Courrier
1 « J'aime »