Bar-card : Changement de couleur suivant la valeur

Bonjour

Je viens faire appelle à vos lumière pour changer la couleur de ma bar-card en fonction de la valeur du sensor qui est n’est pas un numérique.

image

type: custom:button-card
entity: sensor.alert_level
name: Secheresse
height: 30px
show_state: false
show-icon: true
severity:
  - value: Vigilance
    color: '#CCFF99'
  - value: Alerte
    color: '#F7FE2E'
  - value: Alerte renforcée
    color: '#FE9A2E'
  - value: Crise
    color: '#FE2E2E'

Est-ce possible avec les options de la carte ?
(j’ai rien vu dans un sens ou dans un autre pouvant valider l’usage)

Sinon comment faire ceci ? En passant par des templates pour transformer « Vigilance » en numérique « 1 » par exemple ?

Moi j’ai un truc comme ca


Désolé pour la capture d’écran je suis sur téléphone

Bonjour @jerome6994
ton code c’est un button-card et pas un bar-card ( comme sur ta capture ).

Voici la solution :star2:

type: custom:bar-card
entities:
  - entity: sensor.alert_level
    name: Sécheresse
    height: 30px
    severity:
      - text: Vigilance
        color: '#CCFF99'
      - text: Alerte
        color: '#F7FE2E'
      - text: Alerte renforcée
        color: '#FE9A2E'
      - text: Crise
        color: '#FE2E2E'

Merci @WarC0zes
j’aurais croisé les spatules :slight_smile:

Je profites que tu es là pour la police on peut changer la couleur de la police en fonction de la sévérité ?
Je vais tester des choses en attendant :slight_smile: ton retour

Pour le moment je l’ai mais juste en CSS pas en fonction de la valeur du sensor

Oui, on peut changer la couleur de la police en fonction de l’état avec card-mod.

Essai avec ce code ( change les couleurs a ta guise ):

type: custom:bar-card
entities:
  - entity: sensor.alert_level
    name: Sécheresse
    height: 30px
    severity:
      - text: Vigilance
        color: '#CCFF99'
      - text: Alerte
        color: '#F7FE2E'
      - text: Alerte renforcée
        color: '#FE9A2E'
      - text: Crise
        color: '#FE2E2E'
card_mod:
  style: >
    bar-card-currentbar, bar-card-backgroundbar {
      border-radius: 25px;
    }
    #states > bar-card-row > bar-card-card > bar-card-background >
    bar-card-contentbar > bar-card-name {
      font-size: 16px;
      {% if is_state('sensor.alert_level', 'Vigilance') %}
        color: black;
      {% elif is_state('sensor.alert_level', 'alerte') %}
        color: red;
      {% elif is_state('sensor.alert_level', 'Alerte renforcée') %}
        color: green;       
      {% else %}
        color: yellow;
      {% endif %}
    }

Oh yes je pense jamais à ce code dans la partie Style grrrr
ça va venir :slight_smile:

Merci :wink:

1 « J'aime »