Carte Bar-Card

Entraide Home Assistant
1

Bonjour la communauté,

Mon problème :

bar-card

J’aimerai pouvoir modifier la couleur de la barre de progression en fonction des valeurs transmises dans les attributs du sensor.
J ai réussi dans le CSS à afficher le libellé et le mettre dans la bonne couleur :

    bar-card-value:after {
      font-size: 16px;
      color: {{ state_attr("sensor.qualite_globale_saint_paer", "Couleur") }};
      content: '{{ state_attr("sensor.qualite_globale_saint_paer", "Libellé") }}';
    }

Par contre, je n’arrive pas à faire la même chose avec la barre de progression qui est fixé en dur en dehors du CSS par :

  - entity: sensor.qualite_globale_saint_paer
    icon: mdi:alert-circle
    height: 30px
    min: 0
    max: 8
    positions:
      indicator: "off"
      icon: "off"
    color: red                                  <-- Couleur de la barre

Si quelqu’un a une idée …
Merci d’avance

Mon code :

type: custom:bar-card
entities:
  - entity: sensor.qualite_globale_saint_paer
    icon: mdi:alert-circle
    height: 30px
    min: 0
    max: 8
    positions:
      indicator: "off"
      icon: "off"
    color: red
card_mod:
  style: |
    bar-card-backgroundbar {
      border-radius: 10px;
    }
    bar-card-currentbar {
      border-radius: 10px;
    }
    bar-card-name {
      font-size: 16px;
      font-weight: bold;
      color: white;
      margin-left: 15px;
    }
    bar-card-value {
       value: 'essai';
       font-size: 16px;
       margin-right: 25px;
       color: transparent;
       font-weight: bold;
    }
    bar-card-value:after {
      font-size: 16px;
      color: {{ state_attr("sensor.qualite_globale_saint_paer", "Couleur") }};
      content: '{{ state_attr("sensor.qualite_globale_saint_paer", "Libellé") }}';
    }
    ha-card {
      margin-top: -2px;
      background: none;
      border: none;
    }
2

salut , tu peut jeter un coup d’oeil a ce sujet sa peut être interessant.

Pollens custom component sensor

1 « J'aime »
3

Salut,
Merci pour ta réponse, j’étais déjà tombé sur ce sujet qui malheureusement ne m’apporte pas de réponse car les couleurs sont fixées en utilisant « severity » , ce qui ne me conviens pas

4

As tu lu la doc de la carte ?

Severity attend un nombre pour définir les seuils de couleurs de la barre:

image
image719×286 13.7 KB

Severity

entity: sensor.example
title: Severity
type: 'custom:bar-card'
severity:
  - color: Red
    from: 0
    to: 25
  - color: Orange
    from: 26
    to: 50
  - color: Green
    from: 51
    to: 100

Quelle valeur remonte ton sensor ?

  • Si c’est un nombre il te suffit de mettre les valeurs min/max que tu veux pour chaque couleur.
  • Si ce n’est pas un nombre, la question devient pourquoi utiliser une bar card pour un element qui n’est pas un nombre ?
5

Salut,
on peut utiliser du texte :

severity:
  - text: Green
    color: green
  - text: Red
    color: red

mais la barre sera toujours pleine.

1 « J'aime »
6

En effet mais là sa barre n’est pas pleine, donc il doit bien y avoir un nombre quelque part non ?

1 « J'aime »
7

Oui, je ne comprends pas trop ce qu’il cherche à faire :thinking:

on dirais qu’il veut utiliser la couleur donnée dans un attribut. Alors qu’il pourrait se servir de severity et le faire manuellement.

1 « J'aime »
8

Bonjour,
Merci pour vos réponses, visiblement je n’ ai pas été clair dans l’énoncé de mon problème, je vais essayer de clarifier ma demande et répondre a vos questions:

BBE :

  • Oui j’ai lu la doc avant de demander de l’aide
  • le sensor remonte une valeur numérique sinon effectivement je n’utiliserai pas la carte Bard Card.

WarC0zes :

  • C’est exactement ce que je cherche à faire utiliser l’ attribut Couleur du sensor pour colorer la bar de progression.
  • C’est vrai qu’avec severity cela fonctionnerait (c’est d’ailleurs ce que j’ai fait en attendant), mais je trouve dommage d’être obligé de définir 10 conditions pour définir des couleurs alors qu’ elles sont fournies dans un attribut.

Je ne comprends pas pourquoi ce code :

type: custom:bar-card
entities:
  - entity: sensor.qualite_globale_saint_paer
    icon: mdi:alert-circle
    height: 30px
    min: 0
    max: 8
    positions:
      indicator: "off"
      icon: "off"
    color: {{ state_attr("sensor.qualite_globale_saint_paer", "Couleur") }}

me donne l’erreur suivante dans l’editeur de code de la carte (la ligne 11 est bien celle de la ligne color)

bar-card1
bar-card1502×104 15.8 KB

9

Parce que bar-card ne supporte pas le format template.

test, mais j’ai un doute:

    color: "{{ state_attr('sensor.qualite_globale_saint_paer', 'Couleur') }}"
10

Bonjour,

Sinon, tu abandonnes custom:bar-card et tu utilises custom:button-card qui te permettra de faire ce que tu veux :grin:

1 « J'aime »
11

Non ça ne fonctionne pas non plus j’avais déjà testé.

12

Oui c’est dommage, mais c’est comme ça qu’est codée la carte bar-card, donc c’est soit severity avec le nombre de seuil que tu définit (10 ou 3 si t’as la flemme, vert orange rouge…).

Sinon tu utilises d’autres cartes qui sont capables d’utiliser un template Jinja2 pour définir une couleur come button card, mushroom template, etc…
Mais tu auras du mal à avoir exactement ce que tu veux.

Apres c’est un truc à faire une fois… Si vraiment tu veux un joli dégradé, tu te tapes les 10 conditions…

13

Ben non, pourquoi du mal avec custom:button-card ? :joy:

14

Tout à fait exact…

Mais s’il ne veut pas taper 10 conditions, il n’est peut être pas prêt d’avoir un dashboard de 100 000 lignes de code :rofl:

1 « J'aime »
15

Non mais @anon51798830 va se dévoué pour lui faire :joy:

2 « J'aime »
16

Bah, là on ne parle que d’une bar-card à base de custom:button-card, il faut pas beaucoup de lignes et en template, elle serait réutilisable à volonté

17

Salut,

Message étrange ce matin suite à un redémarrage de Ha.

IMG_1125
IMG_11251098×465 51.3 KB

18

Oui, c’est normal : bar-card n’est plus maintenu, son dépôt a été supprimé de HACS pour cette raison.

Because Repository is no longer maintained, custom-cards/bar-card has been removed from HACS. Please help me solve the problem. · Issue #199 · custom-cards/bar-card (github.com)

1 « J'aime »
19

solution :

  • Désinstallez bar-card d’origine dans HACS.

Ajouter le « nouveau » lien fork dans HACS, puis installez le.

  • Ou ignorez simplement l’avertissement , la carte d’origine continue de fonctionner , alors que le fork hors service.
3 « J'aime »