Conditions météo en français et en images

PatLeHibou · Mars 8, 2017, 1:28

Bonjour à tous,

Pas très fan de l’anglais, je me suis demandé comment faire afficher les conditions météo en français.

Une première chose très simple consiste à ajouter &lang=fr directement à la suite de votre APIkey dans la déclaration de la source de données Météo. Le paramètre « Conditions » s’affichera déjà français au lieu de l’anglais, c’est un premier pas.

Mais dans la lignée de mon Post sur le sens du vent, je me suis dit qu’il devait exister un moyen de remplacer l’icône fixe d’un widget texte par une icône qui dépend de la météo. OpenWeatherMap le propose et permet de récupérer une IconId permettant d’accéder à une image .png correspondante sur leur site.

Mais la source de données Météo de l’IPX ne récupérant pas cette info, il faut s’appuyer sur une source de données récupérant directement celle d’OpenWeatherMap.

Pour cela il faut créer une source de données « OpenWeather » qui récupère les données (j’ai choisi en XML) et en français grâce à l’URL suivante :
http://api.openweathermap.org/data/2.5/weather?q=Votre_ville,fr&appid=Votre_APIkey&mode=xml&lang=fr

Remplacez « Votre_ville » et « Votre_APIkey » par vos propres valeurs.

Une fois cette source créée, il ne vous reste plus qu’à ajouter un widget HTML dans lequel vous insérerez le code suivant :

var icon = datasources["OpenWeather"]["current"]["weather"]["@attributes"]["icon"];
var temps = datasources["OpenWeather"]["current"]["weather"]["@attributes"]["value"];
return `
<center>
  <table width='90%' border = "0">
    <tr>
       <td align=left valign=middle width='25%'><img src="http://openweathermap.org/img/w/${icon}.png"></td>
       <td align=left valign=middle><div class="tw-value" style="font-size: 20px; max-width: 100%;">${temps}</div></td>
    </tr>
  </table>
</center>
`;

Vous afficherez ainsi l’icône correspondant aux conditions météo actuelles et à leur description en français, comme ici :

Si vous voyez des améliorations à proposer, n’hésitez pas, je suis preneur…

Francis · Mars 10, 2017, 3:01

Bonjour,

merci, cela fonctionne très bien est c’est mieux.

Cdlt

Lbveao · Novembre 9, 2017, 4:58

Bonjour,

Votre explication fonctionne impeccablement.
Comment faire pour creer d’autres lignes avec par exemple l’affichage de la temperature ou la vitesse du vent ?

Merci

Laurent

fgtoul · Novembre 9, 2017, 5:50

Bjr,

Puisque l’exemple de @PatLeHibou est donné pour du XML, en regardant la doc de l’API du site vous pouvez trouver ceci comme exemple :

<current>
    <city id="2643741" name="City of London">
         <coord lon="-0.09" lat="51.51">
         <country>GB</country>
         <sun rise="2015-06-30T03:46:57" set="2015-06-30T20:21:12">
    </city>
    <temperature value="72.34" min="66.2" max="79.88" unit="fahrenheit"/>
    <humidity value="43" unit="%">
    <pressure value="1020" unit="hPa">
    <wind>
         <speed value="7.78" name="Moderate breeze">
         <direction value="140" code="SE" name="SouthEast">
    </wind>
    <clouds value="0" name="clear sky">
    <visibility value="10000">
    <precipitation mode="no">
    <weather number="800" value="Sky is Clear" icon="01d">
    <lastupdate value="2015-06-30T08:36:14">
</current>

cela vous donne la structure des données.

Donc pour ajouter la vitesse du vent, il faut ajouter une variable :

var speed = datasources["OpenWeather"]["current"]["wind"]["speed"]["@attributes"]["value"];

pour la direction du vent :

var direction = datasources["OpenWeather"]["current"]["wind"]["direction"]["@attributes"]["value"];

Comparez le code avec le XML et vous comprendrez la structure

ainsi, pour la température :

var temperature = datasources["OpenWeather"]["current"]["temperature"]["@attributes"]["value"];

pour l’affichage, ajouter une ligne par nouvelle variable, exemple :

<tr>
<td align=left valign=middle><div class="tw-value" style="font-size: 20px; max-width=100%;">${temperature}</div></td>
</tr>

Au final, vous obtenez ce code :

var icon = datasources["OpenWeather"]["current"]["weather"]["@attributes"]["icon"];
var temps = datasources["OpenWeather"]["current"]["weather"]["@attributes"]["value"];
var speed = datasources["OpenWeather"]["current"]["wind"]["speed"]["@attributes"]["value"];
var direction = datasources["OpenWeather"]["current"]["wind"]["direction"]["@attributes"]["code"]; 
var temperature = datasources["OpenWeather"]["current"]["temperature"]["@attributes"]["value"]; 

return `
<center>
  <table width='90%' border = "0">
    <tr>
       <td align=left valign=middle width='25%'><img src="http://openweathermap.org/img/w/${icon}.png"></td>
       <td align=left valign=middle><div class="tw-value" style="font-size: 20px; max-width: 100%;">${temps}</div></td>
    </tr>
    <tr>
       <td  colspan=2 align=left valign=middle><div class="tw-value" style="font-size: 20px; max-width: 100%;">Vitesse du vent : ${parseInt(speed*3.6)} km/h</div></td>
    </tr>
    <tr>
       <td  colspan=2 align=left valign=middle><div class="tw-value" style="font-size: 20px; max-width: 100%;">Direction du vent : ${direction}</div></td>
    </tr>
    <tr>
      <td  colspan=2 align=left valign=middle><div class="tw-value" style="font-size: 20px; max-width: 100%;">Temp exterieure : ${temperature}°C</div></td>
    </tr>
  </table>
</center>
`;

A vous de jouer, vous pouvez ajouter la pression atmosphérique par exemple ou même les heures de lever et coucher du soleil
cdt

edit du 23/11/2017 : ajout des unités et conversion m/s en km/h pour le vent

ajcabral · Novembre 9, 2017, 6:52

, Suis nulle, j’arrive a créer le widget, mais a l’intérieur au lieu d’avoir l’image, j’ai le code qui s’affiche, quelqu’un pourrais me détailler un peut plus les pas a donner pour avoir ce beau widget.

Lbveao · Novembre 9, 2017, 6:56

Impeccable, merci beaucoup pour votre aide qui me permet d’avancer petit à petit…

fgtoul · Novembre 9, 2017, 7:09

si le code s’affiche, 2 raisons possibles :

une erreur de frappe; faites un copier/coller du code proposé par PatLeHibou
avez-vous créé la datasource nommée OpenWeather dans votre dashboard comme préconisé plus haut ?

Lbveao · Novembre 9, 2017, 7:15

Voici le code recu par Openweathermap

Si je colle le code fourni

pour toutes les valeurs dans un widget de l’IPX (en format html) j’obtiens également l’affichage du code dans le widget… Le premier Widget avec le paramètre Weather fct correctement.
Pourquoi ?

Lbveao · Novembre 9, 2017, 7:17

Une parti du texte manque :
Le premier exemple avec le parametre Weather s’affiche bien dans un premier Widget
Si je colle le code fourni pour toutes les valeurs dans un deuxieme widget c’est le code qui s’affiche, pourquoi ?

fgtoul · Novembre 9, 2017, 7:33

il semble qu’il vous manque `; à la fin de votre code

Lbveao · Novembre 9, 2017, 7:36

effectivement il manquait le point virgule.
Par contre le code ne s’affiche plus mais le widget reste vide…

fgtoul · Novembre 9, 2017, 7:37

il manquait 2 caractères , pas seulement le point virgule

Lbveao · Novembre 9, 2017, 7:39

J’avais bien vu. Mais le widget reste desperement vide…
Voici le code complet mis dans le widget HTML

var temps = datasources["OpenWeather"]["current"]["weather"]["@attributes"]["value"];
var speed = datasources["OpenWeather"]["current"]["wind"]["speed"]["@attributes"]["value"];
var direction = datasources["OpenWeather"]["current"]["wind"]["direction"]["@attributes"]["value"]; 
var temperature = datasources["OpenWeather"]["current"]["temperature"]["@attributes"]["value"]; 

return `
<center>
  <table width='90%' border = "0">
    <tr>
       <td align=left valign=middle width='25%'><img src="http://openweathermap.org/img/w/${icon}.png"></td>
       <td align=left valign=middle><div class="tw-value" style="font-size: 20px; max-width: 100%;">${temps}</div></td>
    </tr>
    <tr>
       <td align=left valign=middle><div class="tw-value" style="font-size: 20px; max-width: 100%;">Vitesse du vent : ${vitesse}</div></td>
    </tr>
    <tr>
       <td align=left valign=middle><div class="tw-value" style="font-size: 20px; max-width: 100%;">Direction du vent : ${direction}</div></td>
    </tr>
    <tr>
      <td align=left valign=middle><div class="tw-value" style="font-size: 20px; max-width: 100%;">Temp extérieure : ${température}</div></td>
    </tr>
  </table>
</center>
`;

Lbveao · Novembre 9, 2017, 7:42

probleme d’affichage lors du collage du code, voir l’image jointe.

merokaly · Novembre 9, 2017, 7:59

Bonsoir,

Remplace « vitesse » par « speed » et enlève le « é » de température par « e »

Ça fonctionne.

Cordialement,
Jf

fgtoul · Novembre 9, 2017, 8:06

Bien vu, je n’avais pas testé

Lbveao · Novembre 9, 2017, 8:07

Je deviens fou, le widget reste vide…

fgtoul · Novembre 9, 2017, 8:11

refaites un copier/coller du code suite aux correctifs

Lbveao · Novembre 9, 2017, 8:18

Rien n’y fait, j’ai supprimé le widget et en ai recrée un nouveau, widget vide…
La valeur « height block » a elle une importance ? J’ai testé avec les valeurs 1,5 et 10 pour la taille du bloc.

ajcabral · Novembre 9, 2017, 8:24

,J’ai fait ajouter source de donnes  Fichier de donnes,
Type = XML
Nom = Openweather
URL = http://api.openweathermap.org/data/2.5/weather?q=Votre_ville,fr&appid=Votre_APIkey&mode=xml&lang=fr
Nom utilisateur =
Mot de passe =
Rafraichir tout les =

Je remplace votre_ville = nom de ma ville
Et votre_apikey par mon api que je récupère sur mon open weather map.

Apres je fais ;
Ajouter widjet
Contenu = HTML
Type = HTML
HTML =je rentre le code propose par plegraverand
Height Blocs = 4

Et le résultat est toujours un widjet vide