Bubble card styling

[FROlCi]

Bonjour,

J’ai décidé de créer une carte popup qui affiche les pollens en m’appuyant sur l’intégration ATMO France (Nouvelle intégration : AtmoFrance - Qualité de l'air - #82 par WarC0zes)

type: custom:auto-entities
card:
  square: false
  type: grid
  columns: 1
card_param: cards
filter:
  template: |-
    {% for entity_id in integration_entities('atmofrance') -%}
      
      {%- if 'pornichet' in entity_id and 'niveau_' in entity_id -%}
        {%- set mycouleur = ".bubble-range-fill {opacity: 0.4 !important; background-color: " + state_attr(entity_id, 'Couleur') + " !important;}"  -%}
        {%- set myname = state_attr(entity_id, 'friendly_name') | replace('-Pornichet', '') | replace('Niveau ', '') + ' (' + state_attr(entity_id, 'Libellé') + ')' -%}  
                 {{
                  {
                    "type": "custom:bubble-card",
                    "card_type": "button",
                    "button_type": "slider",
                    "entity": entity_id,
                    "name": myname ,
                    "show_last_changed": false,
                    "show_state": true,
                    "read_only_slider": true,
                    "scrolling_effect": false,
                    "styles": ".bubble-range-fill {background-color: " + state_attr(entity_id, 'Couleur') + " !important;}",
                    "modules": [
                      "default"
                    ]
                  }
                }},   
    
      {%- endif %}
    {%- endfor %}  
sort:
  method: state
  numeric: true
  reverse: true
show_empty: true
grid_options:
  columns: 12
  rows: auto
min_value: 1
max_value: 6

Et J’arrive à cet affichage:

Il y a un mais bien entendu ^^
pas moyen d’utiliser la couleur qui est dans l’attribut du sensor ; j’ai essayé en ‹ fabriquant › la chaine avant:

{%- set mycouleur = ".bubble-range-fill {opacity: 0.4 !important; background-color: " + state_attr(entity_id, 'Couleur') + " !important;}"  -%}

et je la mets au niveau « styles: »
ou en créeant le tout :

 "styles": ".bubble-range-fill {background-color: " + state_attr(entity_id, 'Couleur') + " !important;}",

Le pire c’est que ce mode fonctionne car pour les batteries j’arrive bien à injecter le style:

Je loupe qque chose mais impossible de trouver…
Des idées ?

[anon51798830]

Salut,

Tu définis une variable « mycouleur » et tu ne l’utilises pas dans le suite de ton code. Ca ne viendrait pas de là ton souci ?

[FROlCi]

hello, non c’est que j’ai fait les 2 tests soit avec mycouleur soit en creant en direct la ligne et le résultat est le mm

[anon51798830]

et ton attribut « Couleur » est bien avec une majuscule ?

Sinon, difficile de voir ce qui ne va pas par rapport à ton code pour les batterie sans avoir le code

L’accolade ne devrait pas être sortie des guillemets de " !important" :

"styles": ".bubble-range-fill {background-color: " + state_attr(entity_id, 'Couleur') + " !important;}",

"styles": ".bubble-range-fill {background-color: " + state_attr(entity_id, 'Couleur') + " !important;"}",

EDIT : non, tu as bien le bon nombre de paires

[WarC0zes]

Oui, c’est bien en majuscule

[FROlCi]

J’ai tenté:

{% set a = states('sensor.niveau_bouleau_pornichet') %}
{% set b = a + 1 %}

et j’ai une erreur

a priori le sensor retourne une string et non pas un int

Je continue mes tests

[anon51798830]

Les outils de développement ne te permettent pas de voir sensor.niveau_bouleau_pornichet ?

[WarC0zes]

Comme dirait @anon51798830 , utilise button-card

Ok, je sors …

[anon51798830]

c’est clair que sans l’intégration atmo france, sans les custom:bubble-card et sans les custom:auto-entities, c’est pas facile d’essayer de debugger

C’est plein d’ozone chez toi @WarC0zes… c’est toi qui est responsable du dérèglement climatique ?

[WarC0zes]

Bubble-card est banni chez moi …
https://www.patreon.com/Clooos

[anon51798830]

lol, je comprends bien pourtant tu peux les ajouter via HACS sans autre forme de procès à priori…

EDIT : ah non, j’ai pas pu les ajouter

[FROlCi]

bah si c l’exemple que j’ai mis au dessus et si je rajoute |int c ok.

@WarC0zes : trop facile ^^ j’aime bien comprendre & apprendre aussi. Il faut que je trouve comment convertir cette string en int dans cette clause:

.bubble-range-fill {
  background-color: rgba(${ 
    parseInt(state) == 6 
    ? '102, 0, 0' 
    : 
    parseInt(state) == 5 
    ? '255,0,0' 
    : 
    parseInt(state) == 4 
    ? '255,128,0' 
    : 
    parseInt(state) == 3 
    ? '230, 191, 0' 
    : 
    parseInt(state) == 2 
    ? '204,204, 0' 
    : '0,77,13'}, 0.4) !important;
}

Mais parseInt ne semble pas être la bonne idée.

Edit: il faut un double ‹ = › code au dessus KoRizGé ^^ et merci @WarC0zes pour les couleurs en Hex ; maintenant que j’ai trouvé sur une carte seule, faut que je comprenne ce qui ne vas pas avec mon autoentities

[WarC0zes]

j’ai les couleurs du site atmo en hex, si besoin:

                  - color: "#888"
                    from: 6
                    to: 7
                  - color: "#7d2181"
                    from: 5
                    to: 6
                  - color: "#960032"
                    from: 4
                    to: 5
                  - color: "#ff5050"
                    from: 3
                    to: 4
                  - color: "#f0e641"
                    from: 2
                    to: 3
                  - color: "#50ccaa"
                    from: 1
                    to: 2
                  - color: "#50f0e6"
                    from: 0
                    to: 1

[WarC0zes]

Un truc comme ca ?

styles: |
  .bubble-range-fill {
    background-color: ${hass.states[entity].attributes.Couleur} !important;
  }

[FROlCi]

Hello,

Oui ! je galère pour que cela soit correctement pris en compte qd je passe par autoentities

[FROlCi]

Voila enfin le résultat ^^

J’ai utilisé les modules de bubble et c tout bon !
Merci @WarC0zes et @anon51798830 pour le coup de main !

[WarC0zes]

Pourquoi tu affiches pas le taux de concentration au lieu du niveau d’alerte ?

edit:
arf, tu es sur auto entities ok.
si tu arrives à gérer deux entités différentes avec auto entities, je suis preneur d’info.

[anon51798830]

En principe, pour définir une constante ou une variable, c’est un « = », pour une comparaison c’est trois « === »

[FROlCi]

Hello, oui c l’idée là j’affiche l’alerte qui valider que tt fonctionne bien Je pense que je vais devoir faire pas du code sup pour récup les concentrations pour créer le sensor qui correspond
Comme on dit: stay tunned ^^

edit: @WarC0zes cadeau ^^

The Code

type: custom:auto-entities
card:
  square: false
  type: grid
  columns: 1
card_param: cards
filter:
  template: |-
    {% for entity_id in integration_entities('atmofrance') -%}
      
      {%- if 'pornichet' in entity_id and 'niveau_' in entity_id -%}
        {%- set myname = state_attr(entity_id, 'friendly_name') | replace('-Pornichet', '') | replace('Niveau ', '') -%}
        {%- set my_concentration_sensor = ('sensor.concentration_' + myname + '_pornichet') | lower | replace('é', 'e') -%}
        {%- set my_concentration_state = '${card.querySelector(' + "'.bubble-state'" + ').innerText = ' + "'" + states(my_concentration_sensor) + ' µg/m³' + "' }" -%}
        
        {{
          {
            "type": "custom:bubble-card",
            "card_type": "button",
            "button_type": "slider",
            "modules": [
               "olci-slider-pollen",
               "default"
            ],
            "entity": entity_id,
            "name": myname ,
            "show_last_changed": false,
            "show_state": true,
            "read_only_slider": true,
            "scrolling_effect": false,
            "styles": my_concentration_state ,
            "min_value:" 0,
           " max_value": 6,
            "sub_button": [
              {
                "show_state": false,
                "show_icon": false,
                "state_background": false,
                "show_background": false,
                "show_attribute": true,
                "attribute": "Libellé"
              }
            ],
          }
        }},

      {%- endif %}
    {%- endfor %}  
sort:
  method: state
  numeric: true
  reverse: true
show_empty: true
grid_options:
  columns: 12
  rows: auto
min_value: 1
max_value: 8