Home Assistant & EDF Tempo – Suivi en temps réel sur votre dashboard

Edit du 13/01/2026 :

Je sais que vous êtes nombreux à avoir des soucis et ne pas réussir à suivre ce tuto. Pour la gestion des tarifs EDF et du tarif en cours + des couleurs tempo, il existe maintenant une intégration qui donne tout ça d’un coup. Donc plus besoin de helpers ou de template un peu compliqué.

Le lien vers cette intégration : https://github.com/delphiki/hass-tarif-edf

Avec cette intégration vous pouvez passer directement à l’étape 4 🙂

—————————

Le contrat EDF Tempo est une offre d’électricité qui permet de payer moins cher que le tarif de base pendant 343 jours par an. En revanche, durant les 22 jours restants, le prix de l’électricité est environ trois fois plus élevé en heure pleine. Les 3 tarifs possèdent des heures creuses, de 22h à 6h, qui sont systématiquement moins chères que les heures creuses du tarif de base même en jour rouge. Une journée tempo commence à 6h et se termine le lendemain à 6h.

Ce contrat repose sur trois types de jours avec des tarifs distincts :

• Les jours bleus : ce sont les moins chers, avec un total de 300 jours par an.
• Les jours blancs : légèrement plus coûteux que les jours bleus, mais toujours moins chers que le tarif de base. On en compte 43 par an.
• Les jours rouges : ce sont les plus onéreux. Il y en a 22 dans l’année, tous situés entre le 1er novembre et le 31 mars.

Il est donc essentiel de suivre la couleur du jour et du lendemain, en particulier en hiver, afin d’adapter sa consommation et de réduire ses dépenses en cas de jour rouge.

Pour suivre correctement Tempo, j’ai donc mis en place les cartes suivantes :

Dans la partie haute, on retrouve la couleur et le tarif en cours ainsi que ceux prévus pour le lendemain.

Dans la partie basse, un rappel des tarifs est affiché, accompagné du nombre de jours restants pour chaque couleur.

Passons maintenant à la partie la plus intéressante :

Comment mettre en place la carte Tempo dans Home Assistant

1ère étape : Installer l’intégration RTE Tempo

Pour pouvoir accéder aux couleurs des jours tempo, il vous faut tout d’abord installer l’intégration RTE Tempo et avant tout que vous ayez un compte pour pouvoir utiliser cette API.

Rendez vous donc sur le site Data RTE. Cliquez ensuite sur « Se connecter » puis « Créer mon compte »

Une fois votre compte créé, recherchez l’API « Tempo Like Supply Contract »

Cliquez sur « Découvrir l’API » puis « Abonnez vous à l’API », suivez les instructions puis vous devriez récupérer un ID Client et un ID Secret.

Vous pouvez maintenant retourner sur Home Assistant.

Pour installer l’intégration RTE Tempo, rendre vous dans HACS. En haut à droite, cliquez sur les 3 points puis « Dépôts personnalisés »

Ajouter le lien https://github.com/hekmon/rtetempo avec le type « Intégration » :

Cliquer sur Ajouter. Ensuite dans la barre de recherche HACS, chercher « RTE Tempo » et installer le.

Pour finaliser l’installation, rendez vous dans les intégrations Home Assistant où l’intégration RTE Tempo est maintenant disponible :

Sélectionnez le et renseignez les ID obtenus précédemment dans la fenêtre qui s’ouvre :

2ème étape : créer des sensors avec les tarifs Tempo

Pour cela, il faut créer des entrées numériques en allant dans « Appareils et services » puis « entrées »

Cliquez sur « Créer une entrées », choisir « Nombre », lui donner un nom représentatif comme « EDF Tempo Bleu HC » choisissez l’option « Champ de saisie » dans Mode d’affichage et cliquez sur « Créer »

Ensuite cliquez sur l’entrée nouvellement créer et entrez le tarif dans la case en haut à droite, vous pouvez retrouver les tarifs TTC sur le site d’EDF

Faites la même chose pour tous les tarifs Tempo.

3ème étape : Créer un template pour récupérer le tarif en cours

Pour cela, rendez vous à nouveau dans les entrées. Nous allons créer une entrées de type « Template »

Et choisissez « Modéliser un capteur »

Nommez le « Prix Actuel ». Choisissez € comme unité de mesure.

Dans « Modèle de l’état », mettez le code suivant :

{%- 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  }}
     {%- else %}
            {{ states('input_number.tarif_edf_tempo_bleu_hc') | float  }}
      {%- 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  }}
      {%- else %}
            {{ states('input_number.tarif_edf_tempo_blanc_hc') | float  }}
      {%- 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  }}
       {%- else %}
            {{ states('input_number.tarif_edf_tempo_rouge_hc') | float }}
       {%- endif %}
    {%- else %}
          0
    {%- endif %}

Vérifiez bien que les input_number portent bien le même noms que vous avez donné à vos entrées à l’étape précédente. L’aperçu doit vous donner en résultat le tarif actuel :

Si tout est OK vous pouvez cliquer sur « Valider » et passer à l’étape suivante.

4ème et dernière étape : créer la carte Tempo sur votre dashboard

La carte Tempo est faite à partir de custom:button-card, donc si vous n’avez pas déjà installer ce type de carte, il faut l’installer via Hacs.

Commençons par le haut de la carte :

Il s’agit de deux carte dans un « horizontal Stack ».

Cliquer sur créer une nouvelle carte puis choisissez « pile horizontal »

Ensuite choissiez « Manuel »

Une page pour saisir le code YAML de la carte apparait

Vous pouvez alors saisir le code suivant :

type: custom:button-card
entity: sensor.prix_actuel
label: |
  [[[
    if (states['sensor.rte_tempo_couleur_actuelle'].state === "Rouge") {
      return '<div style="background-color: rgba(255, 100, 100, 01); border-radius: 15px; padding: 10px; display: inline-block; text-align: center;">' +
             '<b>Aujourd hui</b></div><hr width="150" size="1" align="center" color="#FFFFFF"></hr> <img src="https://raw.githubusercontent.com/Axelle78/test/master/panneau.png" width="10%" height="10%"> <br/> ' +
             states["sensor.prix_actuel"].state + ' <br />-';
    } else if (states['sensor.rte_tempo_couleur_actuelle'].state === "Blanc") {
      return '<div style="background-color: rgba(200, 200, 200, 01); border-radius: 15px; padding: 10px; display: inline-block; text-align: center; color: black;">' +
             '<b>Aujourd hui</b></div><hr width="150" size="1" align="center" color="#000000"></hr> <img src="https://raw.githubusercontent.com/Axelle78/test/master/OK.png" width="10%" height="10%"> <br/> ' +
             states["sensor.prix_actuel"].state + ' <br />-';
    } else {
      return '<div style="background-color: rgba(100, 100, 255, 1); border-radius: 15px; padding: 10px; display: inline-block; text-align: center;">' +
             '<b>Aujourd hui</b></div><hr width="150" size="1" align="center" color="#FFFFFF"></hr> <img src="https://raw.githubusercontent.com/Axelle78/test/master/OK.png" width="10%" height="10%"> <br/> ' +
             states["sensor.prix_actuel"].state + ' <br />-';
    }
  ]]]
show_label: true
show_icon: false
show_state: false
show_name: false
card_mod:
  style: |
    ha-card {
     border-radius:10px; 
     padding-top: 5px;
     {%if states('sensor.rte_tempo_couleur_actuelle')=="Rouge" %}
     background-color: red;
     {%elif states('sensor.rte_tempo_couleur_actuelle')=="Bleu" %}
      background-color: blue;
      {%else%}
      background-color: white;
      color: black;
      {%endif%}
    } 

Cela va créer la carte suivante :

Si ça ne s’affiche pas correctement, vérifiez que tous les sensors ont bien les noms que vous avez mis dans vos différentes entrées.

Ajouter ensuite une nouvelle carte à votre pile horizontal et choisissez à nouveau « Manuel » dans le type de carte.

Entrez le code suivant pour créer la deuxième carte :

type: custom:button-card
entity: sensor.prix_actuel
label: |
  [[[
    
    if(states['sensor.rte_tempo_prochaine_couleur'].state=="Rouge")
      return '<div style="background-color: rgba(255, 100, 100, 1); border-radius: 15px; padding: 10px; display: inline-block; text-align: center;"><b>Demain</b></div><hr width="150" size="1" align=center color ="#FFFFFF"></hr> <img src="https://raw.githubusercontent.com/Axelle78/test/master/panneau.png" width=10% height=10% > <br/> HP ' + states['sensor.tarif_jour_rouge_hp'].state + '<BR>HC ' +states['sensor.tarif_jour_rouge_hc'].state
    else if(states['sensor.rte_tempo_prochaine_couleur'].state=="Bleu")
      return '<div style="background-color: rgba(100, 100, 255, 1); border-radius: 15px; padding: 10px; display: inline-block; text-align: center;"><b>Demain</b></div><hr width="150" size="1" align=center color ="#FFFFFF"></hr> <img src="https://raw.githubusercontent.com/Axelle78/test/master/OK.png" width=10% height=10% > <br/>HP ' + states['sensor.tarif_jour_bleu_hp'].state + '<BR>HC ' +states['sensor.tarif_jour_bleu_hc'].state
    else if(states['sensor.rte_tempo_prochaine_couleur'].state=="Blanc")
      return '<div style="background-color:  rgba(200, 200, 200, 1); border-radius: 15px; padding: 10px; display: inline-block; text-align: center;"><b>Demain</b></div><hr width="150" size="1" align=center color ="#00000"></hr> <img src="https://raw.githubusercontent.com/Axelle78/test/master/OK.png" width=10% height=10% > <br/>HP ' + states['sensor.tarif_jour_blanc_hp'].state + '<BR>HC ' +states['sensor.tarif_jour_blanc_hc'].state    
    else
      return 'Information indisponible'
    endif  
   
  ]]]
show_label: true
show_icon: false
show_state: false
show_name: false
card_mod:
  style: |
    ha-card {
     border-radius:10px; 
     padding-top: 5px;
     {%if states('sensor.rte_tempo_prochaine_couleur')=="Rouge" %}
     background-color: red;
     {%elif states('sensor.rte_tempo_prochaine_couleur')=="Bleu" %}
      background-color: blue;
      {%elif states('sensor.rte_tempo_prochaine_couleur')=="Blanc" %}
      background-color: white;
      color: black;
      {%else%}
      background-color: grey;
      color: white;
      {%endif%}
    } 

Les deux cartes sont alors créées, vous pouvez enregistrer.

Continuons avec la suite de la carte

Pour cela, il faut à nouveau créer une carte avec une pile horizontal et le type de carte manuel. Il y aura 3 cartes à ajouter.

Carte tarif rouge :

type: custom:button-card
entity: sensor.prix_actuel
label: |
  [[[
     var label = ""
      label = '<b>Rouge</b><hr width="100" size="1" align=center color ="#FFFFFF"></hr>' + states['sensor.rte_tempo_cycle_jours_restants_rouge'].state + '/'  + states['sensor.nb_jours_rouge_total'].state + '<br>HP ' + states['sensor.tarif_jour_rouge_hp'].state + '<BR>'+'HC ' + states['sensor.tarif_jour_rouge_hc'].state
      return label;
  ]]]
show_label: true
show_icon: false
show_state: false
show_name: false
card_mod:
  style: |
    ha-card {
     border-radius:10px; 
     padding-top: 5px;
     background-color: red;

    } 

Carte tarif Blanc :

type: custom:button-card
entity: sensor.prix_actuel
label: |
  [[[
     var label = ""
      label = '<b>Blanc</b><hr width="100" size="1" align=center color ="#00000"></hr>' + states['sensor.rte_tempo_cycle_jours_restants_blanc'].state + '/'  + states['sensor.nb_jours_blanc_total'].state + '<br>HP ' + states['sensor.tarif_jour_blanc_hp'].state + '<BR>'+'HC ' + states['sensor.tarif_jour_blanc_hc'].state
      return label;
  ]]]
show_label: true
show_icon: false
show_state: false
show_name: false
card_mod:
  style: |
    ha-card {
     border-radius:10px; 
     padding-top: 5px;
     color: black;
     background-color: white;

    } 

Carte Tarif Bleu

type: custom:button-card
entity: sensor.prix_actuel
label: |
  [[[
     var label = ""
      label = '<b>Bleu</b><hr width="100" size="1" align=center color ="#FFFFFF"></hr>' + states['sensor.rte_tempo_cycle_jours_restants_bleu'].state + '/'  + states['sensor.nb_jours_bleu_total'].state + '<br>HP ' + states['sensor.tarif_jour_bleu_hp'].state + '<BR>'+'HC ' + states['sensor.tarif_jour_bleu_hc'].state
      return label;
  ]]]
show_label: true
show_icon: false
show_state: false
show_name: false
card_mod:
  style: |
    ha-card {
     border-radius:10px; 
     padding-top: 5px;
     background-color: blue;

    } 

Et enregistrez. Et voilà si tout s’est bien passé, vous avez maintenant une belle carte Tempo qui vous affiche toutes les informations nécessaires !