Probleme d'affichage dans carte dashboard

Mon problème

Bonjour a tous

J’ai modifié une carte de mon dashboard et j’ai un problème d’affichage que je n’arrive pas a résoudre.

Le code est identique a la ligne du dessus et les input_number qui servent au calcul sont définis à l’identique.
J’ai bien trouvé une solution, en modifiant tous mes input number, mais cette solution m’ennuie un peu.

code de la carte
type: custom:button-card
entity: sensor.rte_tempo_couleur_actuelle
name: Aujourd'hui
show_label: true
label: |
  [[[
    var date = new Date();
    var day = date.toLocaleString('fr-FR', { weekday: 'short' }).slice(0, 3);
    var dayOfMonth = ('0' + date.getDate()).slice(-2);
    var month = date.toLocaleString('fr-FR', { month: 'short' }).replace('.', '');
    var hc = states['binary_sensor.rte_tempo_heures_creuses'].state;
    var couleurActuelle = states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase();

    var heuresPleinesActuelles = states['binary_sensor.rte_tempo_heures_creuses'].state;
    var heuresCreusesActuelles = states['binary_sensor.rte_tempo_heures_creuses'].state;

    var hpprixLabel ;
    if (couleurActuelle === 'bleu' && heuresPleinesActuelles) {
        hpprixLabel = states['input_number.tarif_edf_tempo_bleu_hp'].state;
    } else if (couleurActuelle === 'blanc' && heuresPleinesActuelles) {
      hpprixLabel = states['input_number.tarif_edf_tempo_blanc_hp'].state;
    } else if (couleurActuelle === 'rouge' && heuresPleinesActuelles) {
      hpprixLabel = states['input_number.tarif_edf_tempo_rouge_hp'].state;
    } else {
      hpprixLabel = 'Aucune information disponible';
    }

    var hcprixLabel;
    if (couleurActuelle === 'bleu' && heuresCreusesActuelles) {
      hcprixLabel = states['input_number.tarif_edf_tempo_bleu_hc'].state;
    } else if (couleurActuelle === 'blanc' && heuresCreusesActuelles) {
      hcprixLabel = states['input_number.tarif_edf_tempo_blanc_hc'].state;
    } else if (couleurActuelle === 'rouge' && heuresCreusesActuelles) {
      hcprixLabel = states['input_number.tarif_edf_tempo_rouge_hc'].state;
    } else {
      hcprixLabel = 'Aucune information disponible';
    }

    var currentHour = new Date().getHours();
    var isCheckedhp = currentHour >= 6 && currentHour < 22; // Check if the current hour is between 06:00 and 22:00
    var isCheckedhc = currentHour < 6 || currentHour >= 22; // Check if the current hour is before 06:00 or after 22:00

    return `<span style="font-size: 1.2em; margin: 10px 0;">${day} ${dayOfMonth} ${month}</span><br><span style="font-size: 0.9em; margin: 5px 0;
    ">Jusqu'à 06h00</span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2);
    ">Prix HP ${hpprixLabel *100} c€/kWh &nbsp;${isCheckedhp ? '✔' :''}
    <br>Prix HC ${hcprixLabel *100} c€/kWh &nbsp;${isCheckedhc ? '✔' :''}
    </span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2)";   
    "> Heures creuses ${hc}</span>
    <br><br><b`;
  ]]]
styles:
  card:
    - height: 180px
    - background-color: |
        [[[
          var color = states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase();
          return (color === 'rouge') ? '#c62828' : 
                 (color === 'blanc') ? 'white' : 
                 (color === 'bleu') ? '#1565c0' : 
                 'var(--card-background-color)';
        ]]]
    - color: |
        [[[
          return (states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase() === 'blanc') ? 'black' : 'white';
        ]]]
    - border-radius: 20px
    - padding: 2px
    - font-size: 1.2em
    - text-align: center
    - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3)
  grid:
    - grid-template-areas: '"n" "l"'
    - grid-template-rows: 1fr min-content
  name:
    - font-weight: bold
    - font-size: 1.2em
  label:
    - font-size: 0.8em
    - justify-self: center
    - align-self: center

Ma configuration


Texte à remplacer par votre configuration

Comment récupérer ma configuration :
Dans votre HA, Menu latéral Paramètres > Système > Corrections puis les trois petits points en haut a droite > Informations Système puis une fois en bas Copier


Merci pour votre aide

Slt…
Voir si tu peux ajuster les décimales dans ton sensor ou dans carte

  • avec round(x) [ ou x= nb décimale ]

On semble être dans du JavaScript, non ? C’est plutôt …

Math.round(tavaleur*100)/100

… pour avoir un chiffre avec deux décimales.

Slt

J’ai rajouté le round dans le template, mais toujours pareil
Ce que je ne m’explique pas, c’est pourquoi il n’y a pas ce problème pour la ligne HP au-dessus.

Template tempo edf
###################################
# TEMPLATE : TEMPO EDF            #
###################################

template:
  - unique_id: "tempo_time_prices"
    sensor:
      - name: "EDF Tempo Prix Actuel"
        unique_id: "current"
        device_class: 'monetary'
        unit_of_measurement: "c€/kWh"
        icon: 'mdi:cash-check'
        availability: >
          {{ not 'unavailable' in
            [
              states('sensor.rte_tempo_couleur_actuelle'),
              states('binary_sensor.rte_tempo_heures_creuses'),
            ] and not 'unknown' in
            [
              states('sensor.rte_tempo_couleur_actuelle'),
              states('binary_sensor.rte_tempo_heures_creuses'),
              states('input_number.tarif_edf_tempo_bleu_hp'),
              states('input_number.tarif_edf_tempo_bleu_hc'),
              states('input_number.tarif_edf_tempo_blanc_hp'),
              states('input_number.tarif_edf_tempo_blanc_hc'),
              states('input_number.tarif_edf_tempo_rouge_hp'),
              states('input_number.tarif_edf_tempo_rouge_hc')
            ]
          }}
        state: >
          {%- if is_state('sensor.rte_tempo_couleur_actuelle', "Bleu") %}
            {%- if is_state('binary_sensor.rte_tempo_heures_creuses', 'off') %}
              {{ states('input_number.tarif_edf_tempo_bleu_hp') | float * 100 | round(2)}}
            {%- else %}
              {{ states('input_number.tarif_edf_tempo_bleu_hc') | float * 100 | round(2)}}
            {%- endif %}
          {%- elif is_state('sensor.rte_tempo_couleur_actuelle', "Blanc") %}
            {%- if is_state('binary_sensor.rte_tempo_heures_creuses', 'off') %}
              {{ states('input_number.tarif_edf_tempo_blanc_hp') | float * 100 | round(2)}}
            {%- else %}
              {{ states('input_number.tarif_edf_tempo_blanc_hc') | float * 100 | round(2)}}
            {%- endif %}
          {%- elif is_state('sensor.rte_tempo_couleur_actuelle', "Rouge") %}
            {%- if is_state('binary_sensor.rte_tempo_heures_creuses', 'off') %}
              {{ states('input_number.tarif_edf_tempo_rouge_hp') | float * 100 | round(2)}}
            {%- else %}
              {{ states('input_number.tarif_edf_tempo_rouge_hc') | float * 100 | round(2)}}
            {%- endif %}
          {%- else %}
            indisponible
          {%- endif %}

      - name: "EDF Tempo Prochain Prix"
        unique_id: "next"
        device_class: 'monetary'
        unit_of_measurement: "c€/kWh"
        icon: 'mdi:cash-clock'
        availability: >
          {{ not 'unavailable' in
            [
              states('sensor.rte_tempo_couleur_actuelle'),
              states('sensor.rte_tempo_prochaine_couleur'),
              states('binary_sensor.rte_tempo_heures_creuses'),
            ] and not 'unknown' in
            [
              states('sensor.rte_tempo_couleur_actuelle'),
              states('sensor.rte_tempo_prochaine_couleur'),
              states('binary_sensor.rte_tempo_heures_creuses'),
              states('input_number.tarif_edf_tempo_bleu_hp'),
              states('input_number.tarif_edf_tempo_bleu_hc'),
              states('input_number.tarif_edf_tempo_blanc_hp'),
              states('input_number.tarif_edf_tempo_blanc_hc'),
              states('input_number.tarif_edf_tempo_rouge_hp'),
              states('input_number.tarif_edf_tempo_rouge_hc')
            ]
          }}
        state: >
          {%- if is_state('binary_sensor.rte_tempo_heures_creuses', 'on') %}
            {%- if is_state('sensor.rte_tempo_prochaine_couleur', "Bleu") %}
              {{ states('input_number.tarif_edf_tempo_bleu_hp') | float * 100 | round(2)}}
            {%- elif is_state('sensor.rte_tempo_prochaine_couleur', "Blanc") %}
              {{ states('input_number.tarif_edf_tempo_blanc_hp') | float * 100 | round(2)}}
            {%- elif is_state('sensor.rte_tempo_prochaine_couleur', "Rouge") %}
              {{ states('input_number.tarif_edf_tempo_rouge_hp') | float * 100 | round(2)}}
            {%- else %}
              indisponible
            {%- endif %}
          {%- else %}
            {%- if is_state('sensor.rte_tempo_couleur_actuelle', "Bleu") %}
              {{ states('input_number.tarif_edf_tempo_bleu_hc') | float * 100 | round(2)}}
            {%- elif is_state('sensor.rte_tempo_couleur_actuelle', "Blanc") %}
              {{ states('input_number.tarif_edf_tempo_blanc_hc') | float * 100 | round(2)}}
            {%- elif is_state('sensor.rte_tempo_couleur_actuelle', "Rouge") %}
              {{ states('input_number.tarif_edf_tempo_rouge_hc') | float * 100 | round(2)}}
            {%- else %}
              indisponible
            {%- endif %}
          {%- endif %}
Multiscrap EDF Tempo
##############################
# MULTISCRAP EDF TEMPO          #
##############################
multiscrape:
- name: edf_tempo
  resource: https://particulier.edf.fr/services/rest/referentiel/searchTempoStore?dateRelevant={{now().strftime("%Y-%m-%d")}}
  scan_interval: 0
  headers:
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
    Content-Type: application/json
    User-Agent: Wget/1.20.3 (linux-gnu)
  button:
    - name: EDF Force refresh Tempo Information
      unique_id: rte_refresh
  sensor:
    - name: EDF Tempo Couleur Aujourd'hui
      unique_id: edf_tempo_current
      icon: mdi:flash
      value_template: >
        {% if value_json.couleurJourJ in ['TEMPO_BLEU','TEMPO_BLANC','TEMPO_ROUGE'] %}
          {{ value_json.couleurJourJ |regex_replace(find='^TEMPO_', replace='') }}
        {% else %}
          unknown
        {% endif %}
    - name: EDF Tempo Couleur Demain
      unique_id: edf_tempo_tomorrow
      icon: mdi:flash-outline
      value_template: >
        {% if value_json.couleurJourJ1 in ['TEMPO_BLEU','TEMPO_BLANC','TEMPO_ROUGE'] %}
          {{ value_json.couleurJourJ1 |regex_replace(find='^TEMPO_', replace='') }}
        {% else %}
          unknown
        {% endif %}
    - name: EDF Tempo Tarif Demain
      unique_id: edf_tempo_tomorrow_cost
      icon: mdi:currency-eur
      device_class: monetary
      unit_of_measurement: "€/kWh"
      value_template: >
        {% if (value_json.couleurJourJ1 == 'TEMPO_BLEU') %}
          {{ states('input_number.tarif_edf_tempo_bleu_hp') | round(2)}} 
        {% elif (value_json.couleurJourJ1 == 'TEMPO_BLANC') %}
          {{ states('input_number.tarif_edf_tempo_blanc_hp') | round(2)}}
        {% elif (value_json.couleurJourJ1 == 'TEMPO_ROUGE') %}
          {{ states('input_number.tarif_edf_tempo_rouge_hp') | round(2)}}
        {% else %}
          indisponible
        {% endif %}
    - name: EDF Tempo Tarif Aujourd'hui
      unique_id: edf_tempo_current_cost
      icon: mdi:currency-eur
      device_class: monetary
      unit_of_measurement: "€/kWh"
      value_template: >
        {% if (value_json.couleurJourJ == 'TEMPO_BLEU') %}
          {% if ((now()| as_local).hour >= 22 or (now()|as_local).hour < 6) %}
            {{ states('input_number.tarif_edf_tempo_bleu_hc') | round(2)}}
          {% else %}
            {{ states('input_number.tarif_edf_tempo_bleu_hp') | round(2)}}
          {% endif %}
        {% elif (value_json.couleurJourJ == 'TEMPO_BLANC') %}
          {% if ((now()| as_local).hour >= 22 or (now()|as_local).hour < 6) %}
            {{ states('input_number.tarif_edf_tempo_blanc_hc') | round(2)}}
          {% else %}
            {{ states('input_number.tarif_edf_tempo_blanc_hp') | round(2)}}
          {% endif %}
        {% elif (value_json.couleurJourJ == 'TEMPO_ROUGE') %}
          {% if ((now()| as_local).hour >= 22 or (now()|as_local).hour < 6) %}
            {{ states('input_number.tarif_edf_tempo_rouge_hc') | round(2)}}
          {% else %}
            {{ states('input_number.tarif_edf_tempo_rouge_hp') | round(2)}}
          {% endif %}
        {% else %}
          indisponible
        {% endif %}
    - name: EDF Tempo Hier
      unique_id: edf_tempo_hier
      icon: mdi:currency-eur
      value_template: >
        {{ states('sensor.edf_tempo_current') }}

- name: rte_tempo_planning
  resource: https://particulier.edf.fr/services/rest/referentiel/getNbTempoDays?TypeAlerte=TEMPO
  scan_interval: 86400
  headers:
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
    Content-Type: application/json
    User-Agent: Wget/1.20.3 (linux-gnu)
  sensor:
    - name: EDF Tempo jours bleu restant
      unique_id: edf_tempo_blue_remaining
      value_template: "{{ value_json.PARAM_NB_J_BLEU | int }}"
      unit_of_measurement: "jours"
      icon: mdi:flash-outline
    - name: EDF Tempo jours blanc restant
      unique_id: edf_tempo_white_remaining
      value_template: "{{ value_json.PARAM_NB_J_BLANC | int }}"
      unit_of_measurement: "jours"
      icon: mdi:flash
    - name: EDF Tempo jours rouge restant
      unique_id: edf_tempo_red_remaining
      value_template: "{{ value_json.PARAM_NB_J_ROUGE | int }}"
      unit_of_measurement: "jours"
      icon: mdi:flash-alert

regarde dans mode develop états comment est défini le sensor ?

  • voir aussi son entité et fixé le type de décimal si possible dans précision d’affichage
    image

Avec des parenthèse en plus derrière le float au bon endroit !

{{ (states('input_number.tarif_edf_tempo_blanc_hc') | float * 100) | round(2)}}
exemple

Pour les input number :

Je teste. Je modifie et je te dis.

J’ai corrigé comme ceci (je pense pas mettre trompé)

             {{ (states('input_number.tarif_edf_tempo_bleu_hc') | float * 100) | round(2)}}

Mais toujours pareil, je pense que le souci vient de l’écriture dans la carte.

Résumé
  [[[
    var date = new Date();
    var day = date.toLocaleString('fr-FR', { weekday: 'short' }).slice(0, 3);
    var dayOfMonth = ('0' + date.getDate()).slice(-2);
    var month = date.toLocaleString('fr-FR', { month: 'short' }).replace('.', '');
    var hc = states['binary_sensor.rte_tempo_heures_creuses'].state;
    var couleurActuelle = states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase();

    var heuresPleinesActuelles = states['binary_sensor.rte_tempo_heures_creuses'].state;
    var heuresCreusesActuelles = states['binary_sensor.rte_tempo_heures_creuses'].state;

    var hpprixLabel ;
    if (couleurActuelle === 'bleu' && heuresPleinesActuelles) {
        hpprixLabel = states['input_number.tarif_edf_tempo_bleu_hp'].state;
    } else if (couleurActuelle === 'blanc' && heuresPleinesActuelles) {
      hpprixLabel = states['input_number.tarif_edf_tempo_blanc_hp'].state;
    } else if (couleurActuelle === 'rouge' && heuresPleinesActuelles) {
      hpprixLabel = states['input_number.tarif_edf_tempo_rouge_hp'].state;
    } else {
      hpprixLabel = 'Aucune information disponible';
    }

    var hcprixLabel;
    if (couleurActuelle === 'bleu' && heuresCreusesActuelles) {
      hcprixLabel = states['input_number.tarif_edf_tempo_bleu_hc'].state;
    } else if (couleurActuelle === 'blanc' && heuresCreusesActuelles) {
      hcprixLabel = states['input_number.tarif_edf_tempo_blanc_hc'].state;
    } else if (couleurActuelle === 'rouge' && heuresCreusesActuelles) {
      hcprixLabel = states['input_number.tarif_edf_tempo_rouge_hc'].state;
    } else {
      hcprixLabel = 'Aucune information disponible';
    }

    var currentHour = new Date().getHours();
    var isCheckedhp = currentHour >= 6 && currentHour < 22; // Check if the current hour is between 06:00 and 22:00
    var isCheckedhc = currentHour < 6 || currentHour >= 22; // Check if the current hour is before 06:00 or after 22:00

    return `<span style="font-size: 1.2em; margin: 10px 0;">${day} ${dayOfMonth} ${month}</span><br><span style="font-size: 0.9em; margin: 5px 0;
    ">Jusqu'à 06h00</span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2);
    ">Prix HP ${hpprixLabel *100} c€/kWh &nbsp;${isCheckedhp ? '✔' :''}
    <br>Prix HC ${hcprixLabel *100} c€/kWh &nbsp;${isCheckedhc ? '✔' :''}
    </span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2)";   
    "> Heures creuses ${hc}</span>
    <br><br><b`;
  ]]]
    return `<span style="font-size: 1.2em; margin: 10px 0;">${day} ${dayOfMonth} ${month}</span><br><span style="font-size: 0.9em; margin: 5px 0;
    ">Jusqu'à 06h00</span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2);
    ">Prix HP ${hpprixLabel *100} c€/kWh &nbsp;${isCheckedhp ? '✔' :''}
    <br>Prix HC ${hcprixLabel *100} c€/kWh &nbsp;${isCheckedhc ? '✔' :''}
    </span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2)";   
    "> Heures creuses ${hc}</span>
    <br><br><b`;

Et donc si tu fais ton arrondi … en javascript au niveau de tes lignes et tu le retransforme en string derrière.

Un truc du style (sur chacune de tes lignes) :

hpprixLabel = Math.round(states['input_number.tarif_edf_tempo_bleu_hp'].state*100)/100).toString() ;

C’est mieux, il fait un arrondi à 13 au lieu de 12,96 :grin:
image

A toi de faire les divisions comme tu souhaites avoir ton résultat …

Tu vires le *100 au niveau de ton affichage et tu fais :

hpprixLabel = (Math.round(states['input_number.tarif_edf_tempo_bleu_hp'].state*10000)/10000).toString() ;

Ok, j’ai compris, mais donc c’est plutôt cela (10000)/100)

ce qui donne :
image

  [[[
    var date = new Date();
    var day = date.toLocaleString('fr-FR', { weekday: 'short' }).slice(0, 3);
    var dayOfMonth = ('0' + date.getDate()).slice(-2);
    var month = date.toLocaleString('fr-FR', { month: 'short' }).replace('.', '');
    var hc = states['binary_sensor.rte_tempo_heures_creuses'].state;
    var couleurActuelle = states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase();

    var heuresPleinesActuelles = states['binary_sensor.rte_tempo_heures_creuses'].state;
    var heuresCreusesActuelles = states['binary_sensor.rte_tempo_heures_creuses'].state;

    var hpprixLabel;
    if (couleurActuelle === 'bleu' && heuresPleinesActuelles)
    {hpprixLabel = (Math.round(states['input_number.tarif_edf_tempo_bleu_hp'].state *10000)/100).toString();}
     else if (couleurActuelle === 'blanc' && heuresPleinesActuelles)
    {hpprixLabel = (Math.round(states['input_number.tarif_edf_tempo_blanc_hp'].state *10000)/100).toString();}
     else if (couleurActuelle === 'rouge' && heuresPleinesActuelles)
    {hpprixLabel = (Math.round(states['input_number.tarif_edf_tempo_rouge_hp'].state *10000)/100).toString();} 
     else
    {hpprixLabel = 'Aucune information disponible';}

    var hcprixLabel;
    if (couleurActuelle === 'bleu' && heuresCreusesActuelles)
    {hcprixLabel = (Math.round(states['input_number.tarif_edf_tempo_bleu_hc'].state *10000)/100).toString();}
     else if (couleurActuelle === 'blanc' && heuresCreusesActuelles)
    {hcprixLabel = (Math.round(states['input_number.tarif_edf_tempo_blanc_hc'].state *10000)/100).toString();}
     else if (couleurActuelle === 'rouge' && heuresCreusesActuelles)
    {hcprixLabel = (Math.round(states['input_number.tarif_edf_tempo_rouge_hc'].state *10000)/100).toString();}
     else 
    {hcprixLabel = 'Aucune information disponible';}

    var currentHour = new Date().getHours();
    var isCheckedhp = currentHour >= 6 && currentHour < 22; // Check if the current hour is between 06:00 and 22:00
    var isCheckedhc = currentHour < 6 || currentHour >= 22; // Check if the current hour is before 06:00 or after 22:00

    return `<span style="font-size: 1.2em; margin: 10px 0;">${day} ${dayOfMonth} ${month}</span><br><span style="font-size: 0.9em; margin: 5px 0;
    ">Jusqu'à 06h00</span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2);
    ">Prix HP ${hpprixLabel} c€/kWh &nbsp;${isCheckedhp ? '✔' : ''}
    <br>Prix HC ${hcprixLabel} c€/kWh &nbsp;${isCheckedhc ? '✔' : ''}
    </span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2)";   
    "> Heures creuses ${hc}</span>
    <br><br><b`;
  ]]]

Merci de votre aide, reste à voir si cela fonctionne lors du changement de tarif ce soir et demain matin.

Je te valide la solution demain matin Merci @bastgau

Pourquoi cela ne fonctionnerait pas ? … tu appliques ton formatage au niveau de ton affichage, donc le formatage se fera tout le temps.

Enfin bon, le principal c’est que cela fonctionne et que tu ais compris pourquoi cela ne fonctionnait pas avant.

Ce que je n’ai pas compris, c’est pourquoi ça fonctionne sur le HP sans rien modifier et pas sur le HC alors que c’est la meme chose à priori

Ouais on va oublier cette partie, c’est un peu complexe à expliquer.

Une histoire de précision sur les nombres à virgule flottante, je te laisse te documenter sur le sujet :wink:

1 « J'aime »