Carte markdown, affichage parasite des commandes de tête

Bonjour

J’ai créé une carte markdown avec le code suivant

type: entity-filter
entities:
  - sensor.carburant_tendance_sp95_e10
card:
  type: markdown
  content: >
    {% set image_path = states('sensor.carburant_tendance_sp95_e10') %}
    {% if image_path == "local/img/carbu/img/trait.png" %}
      SP95 - E10 ![SP95 E10](/local/img/carbu/img/trait.png)
    {% elif image_path == "local/img/carbu/img/fleche_haut.png" %}
      SP95 - E10 ![SP95 E10](/local/img/carbu/img/fleche_bas.png)
    {% elif image_path == "local/img/carbu/img/fleche_bas.png" %}
      SP95 - E10 ![SP95 E10](/local/img/carbu/img/fleche_bas.png)
    {% else %}
      [fallback Image](/local/img/carbu/img/fond.png) 
    {% endif %}.

mais il m’affiche les commandes de tête

Screenshot_20231115_102452

L’indentation me parait correct.

Et, question subsidiaire : comment puis-je centrer l’image par rapport au texte ?

Merci

Salut,

Là je pense que tu t’es trompé dans ce que tu a mis la case…
Etant donné que dans le yaml que tu partages tu n’a pas ms le titre, je parie que tu as copié le code comple yaml de la carte markdown, dans une carte markdown que tu as ajouté avec l’interface graphque…

T’s dû faire un peu comme ci-dessous… dans la case contenu, tu ne dois qu’y mettre ton content, rien d’autre…

1 « J'aime »

Et dire que j’ai cherché comme un c… (bip …) depuis hier, pourquoi cet affichage bizarre.

Un très grand merci à toi

1 « J'aime »

A-t-il moyen de mettre plusieurs sensors à la suite

{% set image_path = states('sensor.carburant_tendance_sp95_e10') %}
    {% if image_path == "local/img/carbu/img/trait.png" %}
      SP95 - E10 !(/local/img/carbu/img/trait.png)
    {% elif image_path == "local/img/carbu/img/fleche_haut.png" %}
      SP95 - E10 !(/local/img/carbu/img/fleche_haut.png)
    {% elif image_path == "local/img/carbu/img/fleche_bas.png" %}
      SP95 - E10 !(/local/img/carbu/img/fleche_bas.png)
    {% else %}
      Pas de données disponibles 
    {% endif %}
    
{% set image_path = states('sensor.carburant_tendance_sp98_e5') %}
    {% if image_path == "local/img/carbu/img/trait.png" %}
      SP98 - E5 !(/local/img/carbu/img/trait.png)
    {% elif image_path == "local/img/carbu/img/fleche_haut.png" %}
      SP98 - E5 !(/local/img/carbu/img/fleche_haut.png)
    {% elif image_path == "local/img/carbu/img/fleche_bas.png" %}
      SP98 - E5 !(/local/img/carbu/img/fleche_bas.png)
    {% else %}
      Pas de données disponibles 
    {% endif %}

A première vue, cela ne fonctionne pas

Je viens de contourner le problème en prenant une carte grille et trois cartes markdown.

Screenshot_20231115_190021-1

Solution ?

Tu dois pouvoir mettre autant de sensors que tu veux.
Mais après c’est peut-être un souci de logique.
Genre faire le « set » de la même variable 2 fois, pas certain que ça passe.

Essayes d"enlèver le « set » à partir du 2eme, ou alors appelle la variable « image_pathSP98 »

Merci pour la suggestion.

{% set image_path95 = states('sensor.carburant_tendance_sp95_e10') %}
          {% if image_path95 == "local/img/carbu/img/trait.png" %}
            SP95 - E10 ![SP95 E10](/local/img/carbu/img/trait.png)
          {% elif image_path95 == "local/img/carbu/img/fleche_haut.png" %}
            SP95 - E10 ![SP95 E10](/local/img/carbu/img/fleche_bas.png)
          {% elif image_path95 == "local/img/carbu/img/fleche_bas.png" %}
            SP95 - E10 ![SP95 E10](/local/img/carbu/img/fleche_bas.png)
          {% else %}
            [fallback Image](/local/img/carbu/img/fond.png) 
          {% endif %}
{% set image_path98 = states('sensor.carburant_tendance_sp98_e5') %}
          {% if image_path98 == "local/img/carbu/img/trait.png" %}
            SP98 - E5 ![SP98 E5](/local/img/carbu/img/trait.png)
          {% elif image_path98 == "local/img/carbu/img/fleche_haut.png" %}
            SP98 - E5 ![SP98 E5](/local/img/carbu/img/fleche_bas.png)
          {% elif image_path98 == "local/img/carbu/img/fleche_bas.png" %}
            SP98 - E5 ![SP98 E5](/local/img/carbu/img/fleche_bas.png)
          {% else %}
            [fallback Image](/local/img/carbu/img/fond.png) 
          {% endif %}
{% set image_pathb7 = states('sensor.carburant_tendance_diesel_b7') %}
          {% if image_pathb7 == "local/img/carbu/img/trait.png" %}
            Diesel - B7 ![Diesel B7](/local/img/carbu/img/trait.png)
          {% elif image_pathb7 == "local/img/carbu/img/fleche_haut.png" %}
            Diesel - B7 ![Diesel B7](/local/img/carbu/img/fleche_bas.png)
          {% elif image_pathb7 == "local/img/carbu/img/fleche_bas.png" %}
            Diesel - B7 ![Diesel B7](/local/img/carbu/img/fleche_bas.png)
          {% else %}
            [fallback Image](/local/img/carbu/img/fond.png) 
          {% endif %}

Pas d’erreur, mais pas d’affichage pour la variable sp98 et diesel

Screenshot_20231115_204814

C’est curieux en effet, il arrête d’interpréter les markdown d’images après la première…
Quand tu met directement, sans les if/else, ça marche bien il met pluieurs images.
Aucune idée pourquoi ça fait ça…
En revanche tu as oublié les « ! » au début des « fallback image »

J’ai contourné, pour le moment, le problème avec des cartes verticales.

type: vertical-stack
cards:
  - type: markdown
    content: >
      ## Tendance des prix (€/L) au {{ states('sensor.carburant_tendance_date')
      }}
  - type: horizontal-stack
    cards:
      - type: markdown
        content: |-
          {% set image_path = states('sensor.carburant_tendance_sp95_e10') %}
          {% if image_path == "local/img/carbu/img/trait.png" %}
            SP95 - E10 ![SP95 E10](/local/img/carbu/img/trait.png)
          {% elif image_path == "local/img/carbu/img/fleche-haut.png" %}
            SP95 - E10 ![SP95 E10](/local/img/carbu/img/fleche-haut.png)
          {% elif image_path == "local/img/carbu/img/fleche-bas.png" %}
            SP95 - E10 ![SP95 E10](/local/img/carbu/img/fleche-bas.png)
          {% else %}
            ![fallback Image](/local/img/carbu/img/fond.png) 
          {% endif %}
          Prix max : {{states('sensor.carburant_tendance_sp95_e10_prix')}}
      - type: markdown
        content: |-
          {% set image_path = states('sensor.carburant_tendance_sp98_e5') %}
          {% if image_path == "local/img/carbu/img/trait.png" %}
            SP98 - E5 ![SP98 E5](/local/img/carbu/img/trait.png)
          {% elif image_path == "local/img/carbu/img/fleche-haut.png" %}
            SP98 - E5 ![SP98 E5](/local/img/carbu/img/fleche-haut.png)
          {% elif image_path == "local/img/carbu/img/fleche-bas.png" %}
            SP98 - E5 ![SP98 E5](/local/img/carbu/img/fleche-bas.png)
          {% else %}
            ![fallback Image](/local/img/carbu/img/fond.png) 
          {% endif %}
          Prix max : {{states('sensor.carburant_tendance_sp98_e5_prix')}}
      - type: markdown
        content: |-
          {% set image_path = states('sensor.carburant_tendance_diesel_b7') %}
          {% if image_path == "local/img/carbu/img/trait.png" %}
            Diesel - B7 ![Diesel B7](/local/img/carbu/img/trait.png)
          {% elif image_path == "local/img/carbu/img/fleche-haut.png" %}
            Diesel - B7 ![Diesel B7](/local/img/carbu/img/fleche-haut.png)
          {% elif image_path == "local/img/carbu/img/fleche-bas.png" %}
            Diesel - B7 ![Diesel B7](/local/img/carbu/img/fleche-bas.png)
          {% else %}
            ![fallback Image](/local/img/carbu/img/fond.png) 
          {% endif %}
          Prix max : {{states('sensor.carburant_tendance_diesel_b7_prix')}}

Screenshot_20231115_220427

EDIT : aujourd’hui
Screenshot_20231116_105301

  • Changement du titre d"évolution des prix…" en « Tendance des prix… »
  • Flèche vers le haut pour le diesel

Un dernier point à régler. Centrer en hauteur ( ou sur la partie basse du texte) l’image (le trait sur l’image) par rapport au texte à gauche de l’image

type: vertical-stack
cards:
  - type: markdown
    content: >-
      **Tendance des prix (€/L) au {{ states('sensor.carburant_tendance_date')
      }}** <ha-icon icon="mdi:gas-station-in-use"> 
  - type: horizontal-stack
    cards:
      - type: markdown
        content: |-
          {% set image_path = states('sensor.carburant_tendance_sp95_e10') %}
          {% if image_path == "local/img/carbu/img/trait.png" %}
            <font color= blue > SP95 - E10  ![SP95 E10](/local/img/carbu/img/trait.png) </font>
          {% elif image_path == "local/img/carbu/img/fleche-haut.png" %}
            <font color= red > SP95 - E10  ![SP95 E10](/local/img/carbu/img/fleche-haut.png) </font>
          {% elif image_path == "local/img/carbu/img/fleche-bas.png" %}
            <font color= green > SP95 - E10  ![SP95 E10](/local/img/carbu/img/fleche-bas.png) </font>
          {% else %}
            ![fallback Image](/local/img/carbu/img/fond.png) 
          {% endif %}
          Prix max : {{states('sensor.carburant_tendance_sp95_e10_prix')}}
      - type: markdown
        content: |-
          {% set image_path = states('sensor.carburant_tendance_sp98_e5') %}
          {% if image_path == "local/img/carbu/img/trait.png" %}
            <font color= blue > SP98 - E5 ![SP98 E5](/local/img/carbu/img/trait.png) </font>
          {% elif image_path == "local/img/carbu/img/fleche-haut.png" %}
            <font color= red > SP98 - E5 ![SP98 E5](/local/img/carbu/img/fleche-haut.png) </font>
          {% elif image_path == "local/img/carbu/img/fleche-bas.png" %}
            <font color= green > SP98 - E5 ![SP98 E5](/local/img/carbu/img/fleche-bas.png) </font>
          {% else %}
            ![fallback Image](/local/img/carbu/img/fond.png) 
          {% endif %}
          Prix max : {{states('sensor.carburant_tendance_sp98_e5_prix')}}
      - type: markdown
        content: |-
          {% set image_path = states('sensor.carburant_tendance_diesel_b7') %}
          {% if image_path == "local/img/carbu/img/trait.png" %}
            <font color= blue > Diesel - B7 ![Diesel B7](/local/img/carbu/img/trait.png) </font>
          {% elif image_path == "local/img/carbu/img/fleche-haut.png" %}
            <font color= red > Diesel - B7 ![Diesel B7](/local/img/carbu/img/fleche-haut.png) </font>
          {% elif image_path == "local/img/carbu/img/fleche-bas.png" %}
            <font color= green > Diesel - B7 ![Diesel B7](/local/img/carbu/img/fleche-bas.png) </font>
          {% else %}
            ![fallback Image](/local/img/carbu/img/fond.png) 
          {% endif %}
          Prix max : {{states('sensor.carburant_tendance_diesel_b7_prix')}}

Screenshot_20231116_145625

Le titre change de couleur en fonction der la tendance
bleu, statut quo
vert, diminution
rouge, augmentation

EDIT:
Peut-on centrer en hauteur ( ou sur la partie basse du texte) l’image (le trait sur l’image) par rapport au texte à gauche de l’image
Peut-on simplifier ?

Via une autre carte ?

Pour la hauteur de l’image j’ai déjà vu ça fait en HTML avec un

ou un qui englobe le texte et l’image, et les bons paramètres pour les ligner veticalement.

Pour simplifier… surement… vu que l’état de ton entité semble être le lien de l’image, il y auarit eu moyen d’enlever 2 des if… en mettant directement l’état de l’entité dans l’image…
Mais comme là tu as ajouté la couleur… ca ne marcherait plus…
En même temps ce n’est pas vraiment complexe là…

Screenshot_20231117_102020

Dans ton message, tu parles de

Pour la hauteur de l’image j’ai déjà vu ça fait en HTML avec un ???

ou un ??? qui englobe le texte et l’image, et les bons paramètres pour les ligner verticalement.

Tu peux m’en dire plus ?

Merci