Afficher un "badge" rouge sur un custom-card si l'entité est unavailable

Entraide Home Assistant
1

Bonjour a tous,

Voilà, j’essaye de configurer une card de manière a ce que si ma lampe est physiquement éteinte, mon custom-button m’affiche un point rouge en haut a droite de mon bouton, voici le code que j’ai réalisé en suivant le GitHub de custom-card :

type: custom:button-card
entity: light.lampe_salon
name: Salon
color_type: icon
size: 50%
styles:
  card:
    - background-image: url('/local/background-icon/acier-brossé_128x128.jpg')
    - background-size: cover
    - background-repeat: no-repeat
    - background-position: center center
    - border-radius: 3px
    - box-shadow: |
        [[[
          if (entity.state === 'on') return '0px 0px 5px 3px #00FA9A, 0px 0px 5px #00FA9A inset';
          return '0px 0px 3px rgba(0, 0, 0, 0.3)';
        ]]]
  grid:
    - position: relative
  custom_fields:
    dot:
      - background-color: |
          [[[
            if (entity.state === 'unavailable')
              return "red";
            return "transparent";
          ]]]
      - border-radius: 50%
      - position: absolute
      - top: 5%
      - right: 5%
      - height: 8px
      - width: 8px
  name:
    - color: |
        [[[
          return entity.state === 'on' ? '#00FA9A' : '#006633';  // Changez cette valeur en vert plus foncé de votre choix
        ]]]
  icon:
    - color: |
        [[[
          return entity.state === 'on' ? '#00FA9A' : 'white';
        ]]]
    - '--text-shadow': |
        [[[
          return entity.state === 'on' ? '0px 0px 8px rgba(0, 250, 154, 0.8)' : 'none';
        ]]]

ce qui est fonctionnel :
l’effet néon l’icone vert lorsque l’entité est allumée…
(bah c’est la seule chose pour le moment)

ce qui ne l’est pas: si je coupe physiquement ma lampe je n’ai pas mon point rouge…

Soyez sympa hein :slight_smile: je ne suis pas un grand spécialiste du codage j’apprend petit a petit et en vue de mon projet j’ai pas mal à apprendre.

En attendant, merci à tous de prendre le temps de lire :slight_smile:

Ma configuration

[center]## System Information

version core-2023.5.4
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.10.11
os_name Linux
os_version 6.1.21-v8
arch aarch64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 4854
Installed Version 1.32.1
Stage running
Available Repositories 1284
Downloaded Repositories 23
Home Assistant Cloud
logged_in true
subscription_expiration 1 juin 2023 à 02:00
relayer_connected true
relayer_region eu-central-1
remote_enabled true
remote_connected true
alexa_enabled false
google_enabled true
remote_server eu-central-1-4.ui.nabu.casa
certificate_status ready
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 10.1
update_channel stable
supervisor_version supervisor-2023.04.1
agent_version 1.5.1
docker_version 23.0.3
disk_total 219.4 GB
disk_used 8.0 GB
healthy true
supported true
board rpi4-64
supervisor_api ok
version_api ok
installed_addons Advanced SSH & Web Terminal (15.0.1), Mosquitto broker (6.2.1), Zigbee2MQTT (1.30.4-1), File editor (5.6.0), Z-Wave JS (0.1.81), ESPHome (2023.5.3)
Dashboards
dashboards 3
resources 15
views 13
mode storage
Recorder
oldest_recorder_run 14 mai 2023 à 08:18
current_recorder_run 24 mai 2023 à 22:41
estimated_db_size 199.46 MiB
database_engine sqlite
database_version 3.40.1
n[/center]
2

Salut @Christian_couvrat

Tu peux tester ça (2 variantes même résultat) :

code 1 
type: custom:button-card
entity: light.lampe_salon
name: Salon
color_type: icon
size: 50%
styles:
  card:
    - border-radius: 3px
    - box-shadow: |
        [[[
          if (entity.state === 'on') return '0px 0px 5px 3px #00FA9A, 0px 0px 5px #00FA9A inset';
          return '0px 0px 3px rgba(0, 0, 0, 0.3)';
        ]]]
  grid:
    - position: relative
  name:
    - color: |
        [[[
          return entity.state === 'on' ? '#00FA9A' : '#006633';  // Changez cette valeur en vert plus foncé de votre choix
        ]]]
  icon:
    - color: |
        [[[
          return entity.state === 'on' ? '#00FA9A' : 'white';
        ]]]
    - '--text-shadow': |
        [[[
          return entity.state === 'on' ? '0px 0px 8px rgba(0, 250, 154, 0.8)' : 'none';
        ]]]        
state:
  - value: 'unavailable'
    styles:
      grid:
        - position: relative
      custom_fields:
        notification:
          - background-color: red
          - border-radius: 50%
          - position: absolute
          - top: 5%
          - right: 5%
          - height: 8px
          - width: 8px
          - color: transparent
    custom_fields:
      notification: |
        [[[ return (entity.state) ]]]
code 2 
type: custom:button-card
entity: switch.sw_lampe_salon
name: Salon
color_type: icon
size: 50%
styles:
  card:
    - border-radius: 3px
    - box-shadow: |
        [[[
          if (entity.state === 'on') return '0px 0px 5px 3px #00FA9A, 0px 0px 5px #00FA9A inset';
          return '0px 0px 3px rgba(0, 0, 0, 0.3)';
        ]]]
  grid:
    - position: relative
  name:
    - color: |
        [[[
          return entity.state === 'on' ? '#00FA9A' : '#006633';  // Changez cette valeur en vert plus foncé de votre choix
        ]]]
  icon:
    - color: |
        [[[
          return entity.state === 'on' ? '#00FA9A' : 'white';
        ]]]
    - '--text-shadow': |
        [[[
          return entity.state === 'on' ? '0px 0px 8px rgba(0, 250, 154, 0.8)' : 'none';
        ]]]        
  custom_fields:
    notification:
      - background-color: |
          [[[
            if (entity.state === 'unavailable')
              return "red";
            return "transparent";
          ]]]
      - border-radius: 50%
      - position: absolute
      - top: 5%
      - right: 5%
      - height: 8px
      - width: 8px
      - color: transparent
custom_fields:
  notification: |
    [[[ return (entity.state) ]]]

button-card

[EDIT] j’avais laissé state « off » avec lequel j’ai fait les tests, je viens de remettre « unavailable », pour que ça colle avec ce que tu souhaites.

3

@Herbs

Super merci beaucoup, je vais tacher maintenant de comprendre mon erreur :slight_smile:
pas simple de debuté, en tous les cas merci je vais continuer mon interface maintenant

Bonne journée :slight_smile:

1 « J'aime »
4

Déjà la ligne sous custom_field définie le nom de l’élément à personnaliser.

Donc tu peux mettre ce que tu veux :

Custom_field perso 
  custom_fields:
    ton_test:
      - background-color: |
          [[[
            if (entity.state === 'off')
              return "black";
            return "transparent";
          ]]]
      - background-color: aqua
      - border-radius: 50%
      - border: 1px solid
      - position: absolute
      - right: 5%
      - top: 5%
      - height: 20px
      - width: 20px
      - font-size: 12px
      - line-height: 20px
      - color: black
custom_fields:
  ton_test: |
    [[[ return (entity.state) ]]]

Ensuite la seconde partie « custom_fields » va définir le contenu, et est « obligatoire » (si absente tu n’affiches rien).

Trois exemples :

image

Le code correspondant 
type: horizontal-stack
cards:
  - type: custom:button-card
    entity: switch.sw_lampe_salon
    name: Carte_1
    color_type: icon
    size: 50%
    styles:
      card:
        - border-radius: 3px
        - box-shadow: |
            [[[
              if (entity.state === 'on') return '0px 0px 5px 3px #00FA9A, 0px 0px 5px #00FA9A inset';
              return '0px 0px 3px rgba(0, 0, 0, 0.3)';
            ]]]
      grid:
        - position: relative
      name:
        - color: |
            [[[
              return entity.state === 'on' ? '#00FA9A' : '#006633';  // Changez cette valeur en vert plus foncé de votre choix
            ]]]
      icon:
        - color: |
            [[[
              return entity.state === 'on' ? '#00FA9A' : 'white';
            ]]]
        - '--text-shadow': |
            [[[
              return entity.state === 'on' ? '0px 0px 8px rgba(0, 250, 154, 0.8)' : 'none';
            ]]]        
      custom_fields:
        dot:
          - background-color: |
              [[[
                if (entity.state === 'off')
                  return "red";
                return "transparent";
              ]]]
          - border-radius: 50%
          - position: absolute
          - top: 5%
          - right: 5%
          - height: 8px
          - width: 8px
          - color: transparent
    custom_fields:
      dot: |
        [[[ return (entity.state) ]]]
  - type: custom:button-card
    entity: switch.sw_lampe_salon
    name: Carte_2
    color_type: icon
    size: 50%
    styles:
      card:
        - border-radius: 3px
        - box-shadow: |
            [[[
              if (entity.state === 'on') return '0px 0px 5px 3px #00FA9A, 0px 0px 5px #00FA9A inset';
              return '0px 0px 3px rgba(0, 0, 0, 0.3)';
            ]]]
      grid:
        - position: relative
      name:
        - color: |
            [[[
              return entity.state === 'on' ? '#00FA9A' : '#006633';  // Changez cette valeur en vert plus foncé de votre choix
            ]]]
      icon:
        - color: |
            [[[
              return entity.state === 'on' ? '#00FA9A' : 'white';
            ]]]
        - '--text-shadow': |
            [[[
              return entity.state === 'on' ? '0px 0px 8px rgba(0, 250, 154, 0.8)' : 'none';
            ]]]
      custom_fields:
        ton_test:
          - background-color: |
              [[[
                if (entity.state === 'off')
                  return "black";
                return "transparent";
              ]]]
          - background-color: aqua
          - border-radius: 50%
          - border: 1px solid
          - position: absolute
          - right: 5%
          - top: 5%
          - height: 20px
          - width: 20px
          - font-size: 12px
          - line-height: 20px
          - color: black
    custom_fields:
      ton_test: |
        [[[ return (entity.state) ]]]        
  - type: custom:button-card
    entity: switch.sw_lampe_salon
    name: Carte_3
    color_type: icon
    size: 50%
    styles:
      card:
        - border-radius: 3px
        - box-shadow: |
            [[[
              if (entity.state === 'on') return '0px 0px 5px 3px #00FA9A, 0px 0px 5px #00FA9A inset';
              return '0px 0px 3px rgba(0, 0, 0, 0.3)';
            ]]]
      grid:
        - position: relative
      name:
        - color: |
            [[[
              return entity.state === 'on' ? '#00FA9A' : '#006633';  // Changez cette valeur en vert plus foncé de votre choix
            ]]]
      icon:
        - color: |
            [[[
              return entity.state === 'on' ? '#00FA9A' : 'white';
            ]]]
        - '--text-shadow': |
            [[[
              return entity.state === 'on' ? '0px 0px 8px rgba(0, 250, 154, 0.8)' : 'none';
            ]]]        
      custom_fields:
        dot:
          - background-color: |
              [[[
                if (entity.state === 'off')
                  return "red";
                return "transparent";
              ]]]
          - border-radius: 50%
          - position: absolute
          - top: 5%
          - right: 5%
          - height: 8px
          - width: 8px
          - color: transparent
5

@Herbs

D’accord, donc si j’ai bien compris, un 1er custom_field pour definir l’élément son nom et son style et un second pour tester son etat (en veillant bien a la structure du code) sous reserve de surprise, (ce qui a été mon cas)

Les joies d’être un newbies :sweat_smile:
aie aie aie

6

C’est pas tout à fait ça, mais tu n’es plus très loin.

Au pire fais plusieurs tests avec la doc, et les exemples que je t’ai donné ça devrait le faire :wink:

7

@Herbs

T’as raison je vais faire ça c’est le mieux, puis j’ai pleins d’autres choses a voir concernant mon l’apparence de mon dashboard mais je ferais un autre sujet, j’ai regardé les posts mais je ne trouve pas ce que je veux.

En tous les cas merci