Récupérer l'image "condition" plugin-weather dans design perso

Utilisation du core de Jeedom Design
1

Salut à tou(te)s,

J’ai créé un design perso pour tablette (j’en parlais ici dans ce post ), qui est en fait une page html « géante » dans laquelle j’invite des commandes infos avec leurs ID, pour faire le relai des infos entre les widget core et mon design, explications méthode code en détails ici.

J’aimerai faire un relai dans ma « tuile météo » du visuel graphique utilisé sur le widget des conditions en temps réel. En bref, avoir un joli nuage pluvieux qui apparaît lorsque le temps est à la pluie :cloud_with_rain: :face_with_peeking_eye:

Capture d’écran 2024-11-01 à 21.31.15
Capture d’écran 2024-11-01 à 21.31.151988×1190 288 KB

J’utilise le plugin weather officiel Jeedom.

Je ne sais pas par quel bout le prendre ?

J’ai regardé le fonctionnement du plugin, des codes (200, …) a priori sont affectés aux conditions météo, et des images sont invitées en fonction de ces codes.

Mais l’image ne correspond pas à un ID de commande comme j’en ai eu l’habitude jusqu’à présent.

J’hésite entre rediriger l’image en live (qui nécessitera un lifting des .png pour coller avec mon design), ou utiliser ma propre collection à inviter en fonction du code condition actif.
Dans ces x2 cas je bloque.

Merci pour votre aide :wink:

PS : j’en profiterai bien pour modifier la traduction FR de certaines conditions météo, j’ai des choses parfois très longues qui dépassent trop dans le design, genre « légère pluie éparse avec tonnerre par endroit… » :sweat_smile:

2

Bonjour,
C’est quel plugin météo ?

3

Pardon, le plugin weather officiel de Jeedom :wink:
J’ajoute dans le premier message.

1 « J'aime »
4

J’ai un peu avancé :
→ J’arrive à isoler l’ID de la commande de Condition à instant T.
C’est la condition météo qui est visible en texte blanc au dessus de l’espace réservé.

Mais je suis toujours preneur d’aide pour la partie graphique…
Merci par avance !

5

Bonjour,

Il ne faut pas utiliser le texte de la condition qui peut évoluer mais le « Numéro de la condition »

image
image731×87 3.38 KB

Il faut ensuite créer un widget qui affichera une image en fonction de ce numéro.

Vous pouvez aussi utiliser mon plugin-weatherforecast qui vous permettrait d’obtenir par exemple:
image
La source des données météo ( weatherapi ) est la même que celle du plugin-weather sans utiliser le cloud Jeedom. La source de l’ancien plugin weather ( openweather ) peut aussi être utilisée.
La source des vigilances est Météo France.
Des paramètres optionnels sont disponibles pour modifier l’apparence:
image

1 « J'aime »
6

Avec l’outil widget, ça donne:

image
image1119×548 47.8 KB

Le texte dans la case Résultat thème Dark est:
<img src="plugins/weather/core/template/images/meteo-soleil.png"/>

Dans le virtuel en prévisu, il y a 2 commandes : Condition au dessus et Numéro condition en dessous.

Dans le plugin, la correspondance numero de condition → image est faite dans cette fonction

Compte-tenu du nombre de condition météo, il vaudrait mieux partir sur un widget code.

1 « J'aime »
7

Merci bcp pour ton aide !
J’ai compris la subtilité grâce à toi :slight_smile:

Du coup, dans mon design, j’invite la « condition texte » pour avoir l’info à lire et juste en dessous la « condition numéro.png » pour l’info à regarder, qui va aller chercher dans le repertoire le fichier.png correspondant, exemple 1000.png (ce qui me permet de créer mon jeu d’icônes customisées au passage, sans casser les autres :wink: )

Je viens de faire un essai concluant en preuve de concept :

Capture d’écran 2025-08-13 à 10.37.50
Capture d’écran 2025-08-13 à 10.37.501902×948 116 KB

Et le code que j’ai utilisé dans mon design html si ça en intéresse certain(e)s :

ID 289 = condition texte
ID 290 = numero condition
→ remplacer les numéros d’ID par les votres

 <!-- texte condition météo -->
   <div class="cond1-center"><t class="cond1"></t></div> 
   <script>
		jeedom.cmd.update['289'] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: 289,
				success:  function(valeur_courante) {
                 // alert(valeur_courante);
					$('.cond1').text(valeur_courante);
				}
			})   
		};
       		jeedom.cmd.update['289']();
      </script>
          
  <!-- Icône météo -->

 <div class="cond1-icone"> <img class="meteo-icone" src="" alt="icone" style="width:200px; height:auto;"></div> 
  
 <script>
jeedom.cmd.update['290'] = function(_options){
    jeedom.cmd.execute({
      id: 290, // ID de la commande "icone" météo
      success: function(iconName) {
        // Force en string + nettoyage guillemets
        iconName = String(iconName).trim().replace(/"/g, '');
        // Construit l'URL vers l’icône du plugin weather
        $('.meteo-icone').attr('src',
          'plugins/weather/core/template/images/' + iconName + '.png?ts=' + Date.now()
        );
      }
    });
  };
  jeedom.cmd.update['290']();
  </script>

Je vais juste avoir besoin de créer autant de fichiers .png qu’il y a de numeros de conditions !
Bon, certains vont être identiques et partagés, comme le plugin existant :wink:

1 « J'aime »
8

Avec la condition 1000, il faut aussi prévoir l’affichage de la lune la nuit à la place du soleil. :wink:

1 « J'aime »
9

A mince oui :melting_face:

10

ChatGPT me propose cette version optimisée sensée résoudre le soucis d’icone soleil la nuit à la place de la lune:

<script>
  var lastIcon = null;

  jeedom.cmd.update['290'] = function(_options){
    jeedom.cmd.execute({
      id: 290, 
      success: function(iconCode) {
        iconCode = String(iconCode).trim();

        // Vérifie si c'est la nuit (exemple simple avec heures)
        var hours = new Date().getHours();
        var isNight = (hours < 6 || hours >= 20); // entre 20h et 6h = nuit

        // Pour le code 1000, on choisit jour ou nuit
        if(iconCode === "1000"){
          iconCode += isNight ? "_night" : "_day"; // 1000_night ou 1000_day
        }

        // Mise à jour uniquement si différente
        if(iconCode !== lastIcon){
          $('.meteo-icone').attr('src',
            'plugins/weather/core/template/images/' + iconCode + '.png'
          );
          lastIcon = iconCode;
        }
      }
    });
  };
  jeedom.cmd.update['290']();
</script>
11

Vous pouvez aussi récupérer les icônes de weatherapi et les stocker localement.

1 « J'aime »
12

Si cela intéresse quelqu’un, les codes de conditions ci-après (source ici) :

déplier la liste en cliquant sur la flêche
code day night icon
1000 Sunny Clear 113
1003 Partly cloudy Partly cloudy 116
1006 Cloudy Cloudy 119
1009 Overcast Overcast 122
1030 Mist Mist 143
1063 Patchy rain possible Patchy rain possible 176
1066 Patchy snow possible Patchy snow possible 179
1069 Patchy sleet possible Patchy sleet possible 182
1072 Patchy freezing drizzle possible Patchy freezing drizzle possible 185
1087 Thundery outbreaks possible Thundery outbreaks possible 200
1114 Blowing snow Blowing snow 227
1117 Blizzard Blizzard 230
1135 Fog Fog 248
1147 Freezing fog Freezing fog 260
1150 Patchy light drizzle Patchy light drizzle 263
1153 Light drizzle Light drizzle 266
1168 Freezing drizzle Freezing drizzle 281
1171 Heavy freezing drizzle Heavy freezing drizzle 284
1180 Patchy light rain Patchy light rain 293
1183 Light rain Light rain 296
1186 Moderate rain at times Moderate rain at times 299
1189 Moderate rain Moderate rain 302
1192 Heavy rain at times Heavy rain at times 305
1195 Heavy rain Heavy rain 308
1198 Light freezing rain Light freezing rain 311
1201 Moderate or heavy freezing rain Moderate or heavy freezing rain 314
1204 Light sleet Light sleet 317
1207 Moderate or heavy sleet Moderate or heavy sleet 320
1210 Patchy light snow Patchy light snow 323
1213 Light snow Light snow 326
1216 Patchy moderate snow Patchy moderate snow 329
1219 Moderate snow Moderate snow 332
1222 Patchy heavy snow Patchy heavy snow 335
1225 Heavy snow Heavy snow 338
1237 Ice pellets Ice pellets 350
1240 Light rain shower Light rain shower 353
1243 Moderate or heavy rain shower Moderate or heavy rain shower 356
1246 Torrential rain shower Torrential rain shower 359
1249 Light sleet showers Light sleet showers 362
1252 Moderate or heavy sleet showers Moderate or heavy sleet showers 365
1255 Light snow showers Light snow showers 368
1258 Moderate or heavy snow showers Moderate or heavy snow showers 371
1261 Light showers of ice pellets Light showers of ice pellets 374
1264 Moderate or heavy showers of ice pellets Moderate or heavy showers of ice pellets 377
1273 Patchy light rain with thunder Patchy light rain with thunder 386
1276 Moderate or heavy rain with thunder Moderate or heavy rain with thunder 389
1279 Patchy light snow with thunder Patchy light snow with thunder 392
1282 Moderate or heavy snow with thunder Moderate or heavy snow with thunder 395

J’ai téléchargé des icônes, changé le nom des fichiers, et remplacé le chemin d’accès par un dossier local en dehors du plugin, pour éviter tout écrasement en cas de MAJ… :wink:

13

Version avec set icones jour et set nuit :

<div class="cond1-icone">
  <img class="meteo-icone" src="" alt="icone" style="width:200px; height:auto;">
</div> 

<script>
  var lastIcon = null;

  jeedom.cmd.update['290'] = function(_options){
    jeedom.cmd.execute({
      id: 290, // ID commande "icone"
      success: function(iconCode) {
        iconCode = String(iconCode).trim();

        // Déterminer si c'est nuit ou jour
        var hours = new Date().getHours();
        var isNight = (hours < 6 || hours >= 20); // 20h → 6h = nuit

        // Choisir le dossier selon l'heure
        var folder = isNight ? "night" : "day";

        // Mettre à jour uniquement si ça change
        var newSrc = 'plugins/weather/core/template/images/' + folder + '/' + iconCode + '.png';
        if(newSrc !== lastIcon){
          $('.meteo-icone').attr('src', newSrc);
          lastIcon = newSrc;
        }
      }
    });
  };
  jeedom.cmd.update['290']();
</script>
14

L’emplacement des images n’est pas correct.
Mettez-les sous un répertoire plugins/weather/data qui ne sera pas nettoyé par la MAJ du plugin.

1 « J'aime »
15

Yes merci pour ta rigueur :wink::grinning:

En fait j’ai continué mon prompt avec GPT sans mettre à jour cette info, c’était plus pour partager le principe si d’autres veulent faire pareil…

De mon côté j’ai opté pour un dossier local carrément en dehors du dossier plugin :wink:

16

Vous n’avez pas réussi à mettre les vigilances météo ? :wink:

17

Non, les vigilances ce n’est pas ma priorité (je les reçois vie d’autres moyens, SMS notamment…) :wink:

Un détail que j’aimerai modifier :

→ Où se trouvent les traductions FR / localisations des conditions ?

Il y en a une qui me gêne particulièrement, car elle empiète systématiquement sur mon design :
" Légère pluie éparse avec tonnerre par endroit " :grinning:

(j’en parlai ici l’an dernier …)

j’aimerai reformuler les phrases les plus longues en version plus synthétiques, exemple :
" Averses et orages isolés "

:melting_face: :sweat_smile:

18

Peut-être via ce formulaire de contact . C’est là que le cloud Jeedom va chercher ses données.
Il me semblait avoir vu à un endroit comment leur proposer des corrections de traduction mais je ne retrouve pas.

Vous pouvez aussi faire ça:
ScrollingText

1 « J'aime »
19

C’est une raison pour laquelle je suis passé par le plugin météo france parce que j’avais trop de libéllés qui correspondaient à rien …

Sinon, vu que tu as le numéro de la condition, rien ne t’empeche de faire un case pour reformuler comme tu veux.

1 « J'aime »
20

Merci pour vos messages.

Je pensais que c’était des phrases en json dans le plugin.
Si c’est récupéré depuis le cloud c’est autre chose et on a moins la main…

Après, appliquer une surcouche à un plugin ne m’enchante pas bcp, il y a bien 30/40 conditions à vue de nez et ça peut sauter avec les MAJ :hear_no_evil:

Bon, je vais créer un post dédié :wink: