Badge dans le dashboard avec retour d'état (icône colorée)

Entraide Home Assistant
,
1

Bonjour,

Je voudrais créer un badge avec une icône qui change de couleur en fonction de l’état de mon entitée.

J’ai réussi à le faire avec une tuile, mais pas avec un badge.

Le but est de cliquer sur le badge pour allumer mon PC, l’icone doit être rouge lorsqu’il est éteint et vert lorsque le PC est allumé.

Merci pour vos lumières.

image
image422×173 8.56 KB

type: tile
entity: binary_sensor.adrien_pc_status
features_position: bottom
vertical: false
icon: mdi:desktop-tower-monitor
hide_state: false
name: Adrien-PC
tap_action:
  action: perform-action
  perform_action: button.press
  target:
    entity_id: button.wake_on_lan_adrien_pc
state_content:
  - last_updated
state_color: true
card_mod:
  style: |
    ha-state-icon {
      color: {% if states('binary_sensor.adrien_pc_status') == 'on' %} green {% else %} red {% endif %} !important;
    }
2

Bonjour,
tu ne peux pas avec les badges par défaut, il faut que tu passes par la carte mushroom et les badges template.

image
image339×163 3.4 KB

Les badges par défaut, ne peuvent pas être modifiés avec card_mod.

1 « J'aime »
3

Bonjour,

Je ne sais si cela peut aider (je suis ultra-débutant)…
Je souhaitais afficher de façon simple une alerte courrier.

Au niveau des badges, j’ai donc positionné cette alerte courrier, basée sur un simple capteur ouverture/fermeture fixé dans la boite aux lettres (un tuto avec impression 3D est consacré à ce dispositif).

De fait, à côté des badges, une enveloppe grisée est affichée ( il est possible de ne pas l’afficher, mais je préfère) et dès qu’un courrier et/ou un colis est déposé dans la BAL, l’enveloppe change de couleur et clignote.

enveloppe_grise
enveloppe_grise1258×173 36.6 KB

Le clignotement cesse par un simple clic, après avoir récupéré le courrier.
Je mets les deux illustrations mais je ne sais pas comment mettre une animation (enveloppe jaune qui clignote).

enveloppe jaune
enveloppe jaune1055×170 61.5 KB

Ci-dessous mon programme.
Il y a certainement mieux ou plus simple, mais perso cela me convient.

dans Editeur de configuration, à la suite des badges, mettre :

      - type: custom:button-card
        entity: input_boolean.courrier_visible
        icon: mdi:email
        name: ' '
        tap_action:
          action: toggle
        styles:
          icon:
            - color: |
                [[[
                  return states['input_boolean.courrier_visible'].state === 'on' ? 'orange' : 'grey';
                ]]]
            - animation: |
                [[[
                  return states['input_boolean.courrier_visible'].state === 'on' ? 'blink 1s infinite' : 'none';
                ]]]
          card:
            - width: 80px
            - height: 35px
            - border-radius: 30%

dans automations.yaml

- alias: "Notification courrier reçu"
  description: "Active l'icône du courrier lorsque le capteur détecte l'ouverture de la boîte aux lettres"
  trigger:
    - platform: state
      entity_id: binary_sensor.lumi_contact_bal  # à remplacer par l'ID correct de ton capteur
      from: "off"
      to: "on"
  action:
    - service: input_boolean.turn_on
      entity_id: input_boolean.courrier_visible  # Active l'icône du courrier

- alias: "Arrêt du clignotement courrier"
  trigger:
    - platform: state
      entity_id: input_boolean.courrier_visible
      from: "on"
      to: "off"
  action:
    - service: input_boolean.turn_off
      entity_id: input_boolean.courrier_visible  # Désactive l'icône après le clic

dans scripts.yaml

clignotement_badge:
  alias: "Clignotement badge courrier"
  sequence:
    - repeat:
        while:
          - condition: state
            entity_id: input_boolean.courrier_badge
            state: "on"
        sequence:
          - service: input_boolean.turn_on
            entity_id: input_boolean.courrier_visible
          - delay:
              milliseconds: 500
          - service: input_boolean.turn_off
            entity_id: input_boolean.courrier_visible
          - delay:
              milliseconds: 500

dans card

type: custom:button-card
entity: input_boolean.courrier_visible
icon: mdi:email
name: " "
tap_action:
  action: toggle
styles:
  icon:
    - color: |
        [[[
          return states['input_boolean.courrier_visible'].state === 'on' ? 'orange' : 'grey';
        ]]]
    - animation: |
        [[[
          return states['input_boolean.courrier_visible'].state === 'on' ? 'blink 1s infinite' : 'none';
        ]]]
  card:
    - width: 80px
    - height: 35px
    - border-radius: 30%

Ce n’est peut-être pas très orthodoxe, mais cela fonctionne très bien

4

Bonjour,
Utilise la balise texte préformaté (icône image) pour coller du code dans un message. J’ai édité ton message.

image

Pour ton button-card , utilise px au lieu de % dans border-radius. Ça sera plus joli :wink:
image

- border-radius: 30px
5

OK, merci.
Je retiens l’info sur les balises et vais modifier mon code.