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

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