Problème d'affichage de valeurs dans lovelace avec lovelace_gen

Bonjour,

Je m’arrache les cheveux depuis plusieurs jours, donc en désespoir de cause, je vous expose mon problème.

Afin de faciliter la réutilisabilité de certains codes, j’utilise lovelace_gen , avec son option de créer un fichier yaml, appelable en tant qu’include avec paramètres. Exemple dans mon cas, un bouton « générique », puis je passe en variables les infos que je souhaite lui passer.

Mon bouton paramétré (simplifié):

# lovelace_gen        
        
### HA Tile
  type: custom:button-card

  aspect_ratio: 1/1
  icon: {{ icon }}  
  show_label: true
  styles: 
    card:
      - border-radius: 10%
      - padding: 10%
      - color: ivory
      - font-size: 10px
      - text-shadow: 0px 0px 5px black
      - text-transform: capitalize
    grid:
      - grid-template-areas: '"i temp" "n n" "l l"'
      - grid-template-columns: 1fr 1fr
      - grid-template-rows: 1.5fr min-content 1fr
    name:
      - font-weight: bold
      - font-size: 13px
      - color: white
      - align-self: middle
      - padding-bottom: 4px
    img_cell:
      - justify-content: start
      - align-items: start
      - margin: none
    icon:
      - width: 70%
      - margin-top: -5%           
    label:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
    custom_fields:
      temp:
        - align-self: start
        - justify-self: end         
  entity: {{ entity }}
  custom_fields:
      temp: >
        {% if temp is defined %} 
          [[[ return '<ha-icon icon="mdi:thermometer" style="width: 12px; height: 12px; color: yellow;"></ha-icon><span>' + {{ temp }} + ' °C</span>  ';]]]
        {% endif %}  
  label: >
    {% if ram is defined %} 
      <ha-icon icon="mdi:memory" style="width: 12px; height: 12px; color: deepskyblue;"></ha-icon> <span>RAM: <span style="color: var(--text-color-sensor);">{{ ram }}%</span></span>
    {% endif %}

Puis un exemple d’appel de ce dernier:

          cards: 
            - !include
              - buttons/monitoring_system_button.yaml
              - entity: binary_sensor.monitor_lan_magnum
                icon: mdi:nas
                cpu: states['binary_sensor.monitor_lan_magnum'].attributes.cpu
                ram: states['binary_sensor.monitor_lan_magnum'].attributes.ram
                hdd: states['binary_sensor.monitor_lan_magnum'].attributes.hd
                temp: states['binary_sensor.monitor_lan_magnum'].attributes.temp

Je pense que je m’emmêle les pinceaux entre le jinja et le javascript, ou du moins entre l’objet, et sa valeur.
Avec le code ci-dessus, je ne récupère pas la valeur de la RAM, mais le nom de l’objet :
image
Dans l’appelant, j’ai bien ram: states['binary_sensor.monitor_lan_magnum'].attributes.ram (j’ai aussi testé avec ram: "states['binary_sensor.monitor_lan_magnum'].attributes.ram"
Puis dans l’appellé, j’utilise {{ ram }}.

Je cherche à comprendre ce qui pêche ici donc.

2ème souci, j’ai trouvé un pseudo palliatif, en passant par du javascript pour la conversion de l’affichage, c’est ce que j’ai fait pour la température:

        {% if temp is defined %} 
          [[[ return '<ha-icon icon="mdi:thermometer" style="width: 12px; height: 12px; color: yellow;"></ha-icon><span>' + {{ temp }} + ' °C</span>  ';]]]
        {% endif %}

Sauf que dans le cas présent, je veux gérer le nombre d’infos restituées, en fonction des paramètres renseignés.
J’ai testé plusieurs approches, comme:

        {% if cpu is defined %} 
          [[[ return '<ha-icon icon="mdi:server" style="width: 12px; height: 12px; color: deepskyblue;"></ha-icon> <span>CPU: <span style="color: var(--text-color-sensor);">' + {{ cpu }} + '%</span></span>'; ]]]
        {% endif %}
        {% if ram is defined %} 
          [[[ return '<ha-icon icon="mdi:memory" style="width: 12px; height: 12px; color: deepskyblue;"></ha-icon> <span>RAM: <span style="color: var(--text-color-sensor);">' + {{ ram }}  + '%</span></span>'; ]]]
        {% endif %}
        {% if hdd is defined %} 
          [[[ return '<ha-icon icon="mdi:harddisk" style="width: 12px; height: 12px; color: deepskyblue;"></ha-icon> <span>HDD: <span style="color: var(--text-color-sensor);">' + {{ hdd }} + '%</span></span>'; ]]]
        {% endif %}

mais ça ne marche pas car a priori je ne peux avoir qu’une seule balise [[[ ]]].

puis j’ai testé en passant par une variable:

   label: >
    {% set result = "" %}
    {% if ram is defined %} {%set result = result ~ '<ha-icon icon="mdi:memory" style="width: 12px; height: 12px; color: deepskyblue;"></ha-icon> <span>RAM: <span style="color: var(--text-color-sensor);">' ~ ram ~ '%</span></span>' %}{% endif %}
    [[[ return {{result}};]]]

mais ce n’est pas mieux, même sans passer par les [[[ ]]], je n’arrive à rien:

label: >
    {% set result = "test" %}
    {% if temp is defined %} 
      {% set result = result ~ "test" %}
    {% endif % }
    {{result}}

Des pistes?

Etant donné que le code de la température fonctionne, il faut le reprendre pour la ram :

image

Code dans ui-lovelace.yaml
title: Maison
views:
  - title: HACF_TEST
    path: hacf
    badges: []
    cards:
      - !include
        - /config/lovelace_gen/button.yaml
        - entity: binary_sensor.monitor_lan_magnum
          icon: mdi:nas
          name: NAS #Ajouté pour la définition du nom
          cpu: #Non définie
          ram: states['binary_sensor.monitor_lan_magnum'].attributes.ram
          hdd: #Non définie
          temp: states['binary_sensor.monitor_lan_magnum'].attributes.temp
Code du modèlel
# lovelace_gen        
        
### HA Tile
  type: custom:button-card
  icon: {{ icon }}
  name: {{ name }}  
  show_label: true
  styles: 
    card:
      - border-radius: 10%
      - padding: 10%
      - color: ivory
      - font-size: 10px
      - text-shadow: 0px 0px 5px black
      - text-transform: capitalize
      - background-color: '#800080'
    grid:
      - grid-template-areas: '"i temp" "n n" "l l"'
      - grid-template-columns: 1fr 1fr
      - grid-template-rows: 1.5fr min-content 1fr
    name:
      - font-weight: bold
      - font-size: 13px
      - color: white
      - align-self: middle
      - padding-bottom: 4px
    img_cell:
      - justify-content: start
      - align-items: start
      - margin: none
    icon:
      - width: 70%
      - margin-top: -5%           
    label:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
    custom_fields:
      temp:
        - align-self: start
        - justify-self: end         
  entity: {{ entity }}
  custom_fields:
      temp: >
        {% if temp is defined %} 
          [[[ return '<ha-icon icon="mdi:thermometer" style="width: 12px; height: 12px; color: yellow;"></ha-icon><span>' + {{ temp }} + ' °C</span>  ';]]]
        {% endif %}  
  label: >
    {% if temp is defined %} 
      [[[ return '<ha-icon icon="mdi:memory" style="width: 12px; height: 12px; color: deepskyblue;"></ha-icon><span style="color: var(--paper-item-icon-active-color);"> RAM: ' + {{ ram }} + ' % </span>  ';]]]
    {% endif %}     

C’était bien une de mes solutions tant que ce n’est que pour une info, pour plusieurs, ça se corsait.
J’ai trouver je pense une solution qui fonctionne (mais d’un point de vue code ça me semble crade même si ça fait le taff :slight_smile: ).

label: >
    [[[
    var result = "";
    {% if cpu is defined %} 
     result = result + '<span><ha-icon icon="mdi:server" style="width: 12px; height: 12px; color: deepskyblue;"></ha-icon> <span>CPU: <span style="color: var(--text-color-sensor);">' + Math.round({{ cpu }}) + '%</span></span></span></br>';
    {% endif %}
    {% if ram is defined %} 
    result = result + '<span><ha-icon icon="mdi:memory" style="width: 12px; height: 12px; color: deepskyblue;"></ha-icon> <span>RAM: <span style="color: var(--text-color-sensor);">' + Math.round({{ ram }})  + '%</span></span></span></br>';
    {% endif %}
    {% if hdd is defined %} 
    result = result + '<span><ha-icon icon="mdi:harddisk" style="width: 12px; height: 12px; color: deepskyblue;"></ha-icon> <span>HDD: <span style="color: var(--text-color-sensor);">' + Math.round({{ hdd }}) + '%</span></span></span></br>';
    {% endif %} 
    return result;
    ]]]

image

Je n’avais pas compris ça… :sweat_smile:

Après avoir relu… Effectivement… :innocent: