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

**URL:** <https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190>\
**Category:** Cartes Ethernet IPX800\
**Created:** [Mars 8, 2017, 1:28 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190 "2017-03-08T13:28:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![PatLeHibou](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/patlehibou/32/3295_2.png) [@PatLeHibou](https://forum.gce-electronics.com/u/PatLeHibou)\
**Post date:** [Mars 8, 2017, 1:28 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/1 "2017-03-08T13:28:56Z")

</div>

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 «&nbsp;Conditions&nbsp;» 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 «&nbsp;OpenWeather&nbsp;» 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 «&nbsp;Votre\_ville&nbsp;» et «&nbsp;Votre\_APIkey&nbsp;» 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 :

```javascript
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 :  
 ![](https://forum.gce-electronics.com/uploads/default/original/2X/e/eee609de4bdc51c989eaf29b455a86e814b74677.png)

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

---

<div class="post-metadata">

**Author:** ![Francis](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/f/ac8455/32.png) [@Francis](https://forum.gce-electronics.com/u/Francis)\
**Post date:** [Mars 10, 2017, 3:01 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/2 "2017-03-10T15:01:28Z")

</div>

Bonjour,

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

Cdlt

---

<div class="post-metadata">

**Author:** ![Lbveao](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/l/a87d85/32.png) [@Lbveao](https://forum.gce-electronics.com/u/Lbveao)\
**Post date:** [Novembre 9, 2017, 4:58 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/3 "2017-11-09T16:58:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Novembre 9, 2017, 5:50 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/4 "2017-11-09T17:50:06Z")

</div>

Bjr,

Puisque l’exemple de @PatLeHibou est donné pour du XML, en regardant [la doc de l’API](http://openweathermap.org/current#current_XML) du site vous pouvez trouver ceci comme exemple :

```xml
<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 :

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

```

pour la direction du vent :

```auto
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 :

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

```

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

```html
<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 :

```javascript
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

---

<div class="post-metadata">

**Author:** ![ajcabral](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/a/f08c70/32.png) [@ajcabral](https://forum.gce-electronics.com/u/ajcabral)\
**Post date:** [Novembre 9, 2017, 6:52 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/5 "2017-11-09T18:52:58Z")

</div>

😥, 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.

---

<div class="post-metadata">

**Author:** ![Lbveao](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/l/a87d85/32.png) [@Lbveao](https://forum.gce-electronics.com/u/Lbveao)\
**Post date:** [Novembre 9, 2017, 6:56 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/6 "2017-11-09T18:56:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Novembre 9, 2017, 7:09 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/7 "2017-11-09T19:09:16Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![Lbveao](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/l/a87d85/32.png) [@Lbveao](https://forum.gce-electronics.com/u/Lbveao)\
**Post date:** [Novembre 9, 2017, 7:15 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/8 "2017-11-09T19:15:29Z")

</div>

Voici le code recu par Openweathermap

 ![image](https://forum.gce-electronics.com/uploads/default/original/2X/b/b136d5db0b7a2b1d4526b5225317ab009fc57065.png)

Si je colle le code fourni

 ![image](https://forum.gce-electronics.com/uploads/default/original/2X/4/4572be01f153c1cf7d4564f27149addc65ced880.png)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 ?  
 ![image](https://forum.gce-electronics.com/uploads/default/original/2X/e/e678c686735faf4ab169194916463ee562ed414c.png)

---

<div class="post-metadata">

**Author:** ![Lbveao](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/l/a87d85/32.png) [@Lbveao](https://forum.gce-electronics.com/u/Lbveao)\
**Post date:** [Novembre 9, 2017, 7:17 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/9 "2017-11-09T19:17:12Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Novembre 9, 2017, 7:33 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/10 "2017-11-09T19:33:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lbveao](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/l/a87d85/32.png) [@Lbveao](https://forum.gce-electronics.com/u/Lbveao)\
**Post date:** [Novembre 9, 2017, 7:36 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/11 "2017-11-09T19:36:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Novembre 9, 2017, 7:37 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/12 "2017-11-09T19:37:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lbveao](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/l/a87d85/32.png) [@Lbveao](https://forum.gce-electronics.com/u/Lbveao)\
**Post date:** [Novembre 9, 2017, 7:39 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/13 "2017-11-09T19:39:47Z")

</div>

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

```javascript
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>
`;

```

---

<div class="post-metadata">

**Author:** ![Lbveao](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/l/a87d85/32.png) [@Lbveao](https://forum.gce-electronics.com/u/Lbveao)\
**Post date:** [Novembre 9, 2017, 7:42 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/15 "2017-11-09T19:42:18Z")

</div>

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

 ![image](https://forum.gce-electronics.com/uploads/default/original/2X/4/4084426c4f1a28accf5a303bcf1af731e59a3e77.png)

---

<div class="post-metadata">

**Author:** ![merokaly](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/merokaly/32/8_2.png) [@merokaly](https://forum.gce-electronics.com/u/merokaly)\
**Post date:** [Novembre 9, 2017, 7:59 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/16 "2017-11-09T19:59:17Z")

</div>

Bonsoir,

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

Ça fonctionne.

Cordialement,  
Jf

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Novembre 9, 2017, 8:06 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/17 "2017-11-09T20:06:06Z")

</div>

Bien vu, je n’avais pas testé

---

<div class="post-metadata">

**Author:** ![Lbveao](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/l/a87d85/32.png) [@Lbveao](https://forum.gce-electronics.com/u/Lbveao)\
**Post date:** [Novembre 9, 2017, 8:07 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/18 "2017-11-09T20:07:25Z")

</div>

Je deviens fou, le widget reste vide…

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Novembre 9, 2017, 8:11 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/19 "2017-11-09T20:11:28Z")

</div>

refaites un copier/coller du code suite aux correctifs

---

<div class="post-metadata">

**Author:** ![Lbveao](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/l/a87d85/32.png) [@Lbveao](https://forum.gce-electronics.com/u/Lbveao)\
**Post date:** [Novembre 9, 2017, 8:18 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/20 "2017-11-09T20:18:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ajcabral](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/a/f08c70/32.png) [@ajcabral](https://forum.gce-electronics.com/u/ajcabral)\
**Post date:** [Novembre 9, 2017, 8:24 UTC](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190/21 "2017-11-09T20:24:24Z")

</div>

😓,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](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

[Page suivante](https://forum.gce-electronics.com/t/conditions-meteo-en-francais-et-en-images/4190.md?page=2)