[Tutoriel] Prévision des couleurs Tempo à J+9

Bison · Janvier 8, 2026, 6:25

Salut,

Je suis tombé sur un post HA qui parlait de la façon de récupérer les prévisions de la couleur Tempo à J+9.

Site de référence : Prévision couleur Tempo | Open DPE

Le calcul prend en compte la prévision de consommation d’électrique de RTE, la prévision de la production d’énergie solaire et éolien, basée sur la météo en France

Update du 12/01/2026 : Les calculs et donc les données fournies par l’API sont en grandes parties basées sur les données de la météo et nous découvrons au fur et à mesure que des membres creusent, que le modèle des données n’est pas très à jour et cela conduit à des prévisions visiblement plutôt incorrectes

Je laisse le post ouvert car je n’écarte pas que nous puissions finalement arriver à des résultats plus fiables mais je m’excuse d’avoir poster ce tuto un peu trop vite et sans avoir pris le temps de vérifier si les résultats étaient suffisamment fiables

Méthode d’intégration dans Jeedom : Récupération d’un JSON et utilisation d’un widget
Temps de travail : environ 15 à 20mn suivant votre agilité

Prérequis : plugin-script

Création de l’équipement script pour récupérer les valeurs

Ajoutez un nouvel équipement dans le plugin script avec 3 nouvelles lignes :
Nom : J+1 date
Type script : JSON
Type : Info/Autre
Requête : 0 > date
Paramètre URL : https://open-dpe.fr/assets/tempo_days_lite.json
Décocher l’historisation

Nom : J+1 color
Type script : JSON
Type : Info/Autre
Requête : 0 > couleur
Paramètre URL : https://open-dpe.fr/assets/tempo_days_lite.json
Décocher l’historisation

Nom : J+1 probability
Type script : JSON
Type : Info/Numerique
Requête : 0 > probability
Paramètre URL : https://open-dpe.fr/assets/tempo_days_lite.json
Décocher l’historisation

Vous devriez donc avoir :

Utiliser les boutons d’actions pour dupliquer vos commandes 3 par 3
Renommez vos commandes
Changez les Requêtes pour adapter à chaque jour

Créez autant de commandes que vous voulez jusqu’à J+9 maximum

Mettez une auto-actualisation : Ici chaque heure à 10 minutes, faite comme vous voulez mais éviter de demander toutes les 5mn … ça ne devrait pas être bien utile !

Création d’un widget pour présenter le résultat (facultatif)

Créez un widget « PrévisionTempo » de type Info / Autre / Multistate
Ajoutez 3 tests avec les expressions #value# == 'bleu' puis #value# == 'blanc' puis #value# == 'rouge'
Complétez avec en ajoutant un résultat pour chaque expression :
3.a Pour le bleu <div style="width:16px;height:16px;border-radius:50%; background:#1e88e5;border:1px solid #1e88e5;display:inline-block;"></div>
3.b Pour le blanc <div style="width:16px;height:16px;border-radius:50%; background:#ffffff;border:1px solid #bdbdbd;display:inline-block;"></div>
3.c Pour le rouge <div style="width:16px;height:16px;border-radius:50%; background:#e53935;border:1px solid #e53935;display:inline-block;"></div>

Appliquez ce widget aux commandes « J+x color » :

image976×435 32.6 KB

Transformez l’affichage de votre équipement en tableau (facultatif)

Il ne vous reste plus qu’à peaufiner un peu en allant dans la configuration avancée de l’équipement, en masquant les noms des commandes et en distribuant les commandes dans un tableau

Bonne utilisation … et puis peut-être que jpty nous ferons une petite intégration à plugin-rteecowatt s’il est motivé

Bison

DanielJ · Janvier 8, 2026, 6:39

Salut Bison,

Nickel, merci beaucoup pour ce partage !
Ça fonctionne très bien !

Noyax37 · Janvier 9, 2026, 8:13

Superbe, merci @Bison .

Petite question, à chaque fois ça envoie 27 demande du json vers le serveur? Si oui, y aurait pas moyen de le télécharger puis de l’analyser?

jpty · Janvier 9, 2026, 9:09

Bonjour
Non 1 seule requête pour les 27 commandes. L’URL ne change pas.

Noyax37 · Janvier 9, 2026, 9:13

merci @jpty

j’ai mis les commandes à historiser mais pour l’instant rien n’est historisé, c’est normal?

Bison · Janvier 9, 2026, 9:21

@jpty a répondu, merci. Il me semblait avoir lu quelque part que si l’URL était la même le plugin ne faisait pas de nouvelles requêtes mais je n’ai pas retrouvé l’info

Les informations, ne sont visiblement mise à jour que 2 fois par jours :

Je n’ai pas historisé mais pour ma couleur de demain je vois une mise à jour à 6h20 donc pas très en accord avec ce qui est indiqué sur le site. Peut-être qu’ils parlent de la page principale et pas du JSON … Faudrait voir si c’est toujours le cas dans les prochains jours.

noodom · Janvier 9, 2026, 1:18

Helloo,

Pour ceux que ça pourrait intéresser, ça m’a donné l’idée d’en faire un widget simplifié d’affichage des informations (en binôme avec Gemini pour faire vite ) :

Avantage : création simplifiée, pas de multiplication des commandes à la création
Inconvénient : pas de commandes pour réutilisation par la suite, juste pour affichage

création d’un équipement script
- ajouter une commande de type Info / Autre
  - donner un nom à la commande
  - dans le champ requête, sélectionner l’icône « Editer » et créer un fichier tempo.php dans le répertoire affiché (/var/www/html/plugins/script/data/tempo.php) avec le contenu en fin de post.
  - Dans le champ requête, sélectionner l’icône « Parcourir » et sélectionner le fichier créé ci-dessus
création d’un widget info :
- Pour une création simplifiée, j’ai utilisé le plugin Pimp My Jeedom (Peut être créé manuellement sinon)
- Il suffit de copier coller le code en fin de post
association du widget à la commande du script
- Depuis l’équipement du script, sélectionner la roue dentée, puis dans affichage, sélectionner le widget créé

Création du script

Création du widget avec Pimp My Jeedom

Code du fichier tempo.php

<?php
$url = "https://open-dpe.fr/assets/tempo_days_lite.json";
$json = file_get_contents($url);

if ($json === false) {
    echo "Erreur de récupération";
} else {
    echo $json;
}
?>

Code du widget

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <div class="title #hide_name#"><div class="cmdName">#name_display#</div></div>
  <div class="tempo-forecast-wrapper" id="tempo_container_#id#"></div>

  <style>
    .tempo-forecast-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      padding: 5px;
    }
    .tempo-day-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 4px;
      padding: 4px;
      min-width: 55px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .t-date { font-size: 0.75em; font-weight: bold; margin-bottom: 2px; }
    .t-prob { font-size: 0.7em; font-style: italic; margin-top: 2px; }
    
    /* Couleurs selon le flux */
    .t-bleu { background-color: #0055b8 !important; color: white !important; }
    .t-blanc { background-color: #f0f0f0 !important; color: #333 !important; border: 1px solid #ccc; }
    .t-rouge { background-color: #ce0501 !important; color: white !important; }
  </style>

  <script>
    jeedom.cmd.update['#id#'] = function(_options) {
      try {
        let data = JSON.parse(_options.display_value);
        let container = $('#tempo_container_#id#');
        container.empty();

        data.forEach(item => {
          // Formatage de la date (ex: 2026-01-10 -> 10/01)
          let dateParts = item.date.split('-');
          let shortDate = dateParts[2] + '/' + dateParts[1];
          
          // Conversion probabilité en %
          let proba = Math.round(item.probability * 100) + '%';
          
          container.append(`
            <div class="tempo-day-card t-${item.couleur.toLowerCase()}">
              <span class="t-date">${shortDate}</span>
              <span class="t-prob">${proba}</span>
            </div>
          `);
        });
      } catch (e) {
        $('#tempo_container_#id#').html('Attente de données...');
      }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#'});
  </script>
</div>

dan_73 · Janvier 9, 2026, 3:13

Merci pour ce widget tout intégré

Concernant ce point :

Pour ceux qui comme moi n’utilisent pas PimpMyJeedom, il faut recopier le contenu du code dans data/customTemplates/dashboard et dans un fichier nommé cmd.info.string.tempo.html
le nom "tempo" étant de votre choix.

J’ai mis un moment à trouver, autant que ça profite à ceux qui souhaiteraient le mettre en place.

Encore merci @Bison et @noodom

noodom · Janvier 9, 2026, 4:30

Désolé, je comptais compléter ma description ce soir avec la version sans Pimp.

Merci pour ton retour.

Bonjour · Janvier 9, 2026, 4:55

Bonsoir,

Puisqu’on a une commande info avec les données au format Json, peut-on récupérer les différentes valeurs sans bloc code et sans nouvelle demande au serveur ?

Aurel · Janvier 9, 2026, 4:58

Salut,

Je comprends pas ta question ?

C’est exactement ce qu’à fait Bison dans son exemple.

Y aucun bloc code

Bonjour · Janvier 9, 2026, 5:03

Oui, si on met en place le Widget de noodom, on a une variable avec les données au format Json et si on crée aussi les commandes avec le plugin script il y aura un nouvel appel au serveur.
Ne peut-on pas décoder le Json à partir de la commande info plutôt que de faire un nouvel appel au serveur ?

Aurel · Janvier 9, 2026, 5:08

Ah oui ok j’avais pas regardé le détail de son widget, effectivement il fait lui même l’appel au serveur.
Du coup effectivement ça ne sert à rien de faire les deux : création des commandes info et widget qui récupère les infos lui même.

Désolé, je ne veux pas dénigrer le taff mais je suis pas super fan de cette solution, je préfère que la récupération se fasse dans des commandes et que le widget affiche le résultat des commandes, ça permet si tu veux réutiliser la valeur pour autre chose de ne pas faire X appels au json pour rien.
Bon après c’est plus rapide à mettre en place j’avoue mais bon …

Didier3L · Janvier 9, 2026, 5:20

Hello,

je suis resté sur la version de @Bison

J’ai simplement modifié les informations de date et de pourcentage.

Pour les dates, il faut renseigner dans Formule de calcul

date_fr(date("D. d", strtotime("#value#")))

Pour les pourcentages

Complété par un scénario qui me prévient d’un eventuel jour ROUGE

Bison · Janvier 9, 2026, 5:36

Hello,

SI tu as le temps il pourrait être sympas d’éditer ton post en indiquant comment arriver ton résultat.

J’ai délivré la base du truc rapidement sans trop m’attarder sur la mise en forme mais la partie widget peut carrément être plus sympas que celle que j’ai proposé (j’ai modifié la date chez moi aussi par exemple) et du coup merci à @noodom et à toi @Didier3L de proposer d’autres visuels que certains aimeront utilisé à la place

Bonjour · Janvier 9, 2026, 6:11

J’ai fait les 2 - noodon+Bison

J’ai mis l’url locale de la commande info pour ne pas faire un nouvel appel au serveur mais pas sûr que ce soit plus efficace

Didier3L · Janvier 9, 2026, 10:44

C’est fait

ngrataloup · Janvier 10, 2026, 8:51

En voyant ce tableau, on peut quand même s’interroger sur la fiabilité de l’algo derrière et donc l’intérêt
17680349246936140507036337239507

Si je lis bien le tableau, le 12/01 était annoncé bleu à j-6 avec un tx de fiabilité à 81% et rouge à j-5 à 100%

Norbert

Bonjour · Janvier 10, 2026, 10:08

Bonjour,

Je pense que le tableau le plus intéressant est celui-ci :

DanielJ · Janvier 10, 2026, 10:47

Bonjour,
Merci à tous pour vos contributions !

Pour apporter la mienne (nettement plus modeste…), on peut limiter le nombre de jours de prévisions à prendre en compte, 9 jours étant (je trouve) peut-être un peu too much…

Il suffit de modifier dans le fichier cmd.info.string.tempo.html le code de cette ligne :

data.forEach(item => {

Par :

data.slice(0, 5).forEach(item => {

5 étant le nombre de jours de prévisions à afficher (modifiable bien sûr…).

Ce qui donne ceci :