La météo

De GCE Electronics
Aller à la navigation Aller à la recherche


Présentation

IPX800 et Météo

IPX Meteo.png
Nom IPX800 et Météo
Famille IPX800 V4
Wiki créé le 13/12/2017
Wiki mis à jour le 14/12/2017

L'IPX800 offre la possibilité d'afficher des données météo sur les Dashboards. Associées à des widgets type "Texte", les données peuvent être localisées sur la ville de votre choix. Voici un exemple simple du widget :

IPX meteo2.PNG

La source de données

Par défaut, l'IPX800 est paramétré avec une source de données nommée METEO sur chaque dashboard. Il faudra vous rendre sur le site du fournisseur OpenWeather pour obtenir une clé API. Connectez vous ou créez un compte allez sur l'onglet "API Keys" et générez une clé.

Sur un autre onglet de votre navigateur, rendez vous sur votre dashboard de l'IPX800 en mode Administrateur. Si la source de données METEO n'existe pas, ajoutez une nouvelle source en cliquant sur [AJOUTER SOURCE DE DONNEES] ou modifiez la source existante

IPX meteo3.PNG

Renseignez la clé obtenue sur le site OpenWeather,

puis la ville pour laquelle vous souhaitez obtenir la météo (sans ajouter fr) Si vous désirez afficher la météo de plusieurs ville, il faudra plusieurs sources de données.

Renseignez l'unité en Metre afin d'obtenir les données dans le système métrique.

Sauvegardez le widget

Sauvegardez le dashboard

La source de données doit se mettre à jour régulièrement

remarque : OpenWeather modifie régulièrement son API. Au moment de la rédaction de cet article, il ne faut plus ajouter ,fr derrière le nom de la ville. La connexion à l'API ne fonctionnerait pas. Si la source de données ne se met pas à jour (never inscrit en face), vérifiez vos paramètres.

Le widget

Ajoutez un widget sur votre dashboard puis cliquez sur son bouton IPX800 Bouton reglage.PNG pour le nommer comme bon vous semble. Cliquez ensuite sur le bouton IPX800 Bouton ajout.PNG

Sélectionnez le type Texte

Renseignez un titre et sélectionnez une icône

Cliquez sur le bouton [+ Flux de Données] sélectionnez la source météo dans la liste

IPX meteo4.PNG

Dans l'arborescence de la source de données, sélectionnez le champ attendu

IPX meteo5.PNG

Pour terminer, renseignez l'unité.

Sauvegardez le widget

Sauvegardez l'IHM

Créez autant de widget texte que de données attendues.

Les champs disponibles sont

Nom du champ Désignation Unité
Place_name Ville
Sunrise Lever du soleil
Sunset Coucher du soleil
Conditions Conditions actuelles (1)
Current_temp Température actuelle °C
High_temp Estimation haute de la température actuelle (2) °C
Low_temp Estimation basse de la température actuelle (2) °C
Pressure Pression atmosphérique hPa
Humidity Humidité dans l'air %
Wind_speed Vitesse du vent m/s
Wind_direction Direction du vent ° (météorologiques)

Notes :

(1) les conditions ne sont pas traduites en français (exemple : Overcast Clouds, .....)

(2) Ne pas confondre avec la température minimale ou maximale de la journée.

Pour aller plus loin

OpenWeather peut modifier son API sans préavis. La source de données Météo de l'IPX peut alors remonter des informations erronées ou mal traduites. La correction nécessiterait une mise à jour du firmware de l'IPX800 à chaque évolution de l'API OpenWeather. Nous comprenons vite que cela n'est pas possible. Pour contourner ce problème, une solution consiste à créer notre propre source de données OpenWeather et de traiter chaque champ dans un widget de type HTML.

Créons notre source de données

Sur le dashboard, cliquez sur [AJOUTER SOURCE DE DONNEES]

Nous sélectionnerons le type XML

IPX meteo6.PNG

Nommez la source.

Attention : Le nom devra être repris en respectant la casse dans les scripts javascript.

Renseignez cette URL : 


http://api.openweathermap.org/data/2.5/weather?q=MA_VILLE,fr&appid=MA_CLE_OW&mode=xml&lang=fr&units=metric

Remplacez MA_VILLE par le nom de la ville.

Remplacez MA_CLE_OW par la clé API crée sur le site OpenWeather

Les champs Utilisateur et mot de passe restent vides.

Pour vérifier l'existence de votre ville dans la base de données, vous pouvez faire une recherche sur cette page.

remarque : le nom des localités doit respecter les règles suivantes

  • remplacez les espaces intermédiaires par un tiret "-" sauf derriere l'article principal (Les Sables-d'Olonne, Le Plessis-Trévise, Bois-d'Arcy)
  • la règle précédente ne s'applique pas aux villes étrangères (New York) sauf pour les noms francisés.

Pour plus d'informations, vous pouvez consulter le paragraphe 5 de cette page

Créons notre Widget HTML

IPX meteo7.PNG

Sur le dashboard, cliquez sur [AJOUTER WIDGET]

puis cliquez sur son bouton IPX800 Bouton reglage.PNG pour le nommer comme bon vous semble.

Cliquez ensuite sur le bouton IPX800 Bouton ajout.PNG et sélectionnez le type HTML

Cliquez sur le bouton [JAVASCRIPT] et collez le code ci-dessous.

Sauvegardez le Widget

Sauvegardez le dashboard

Voici le code du Widget proposé par @plegraverend: 

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

Vous pourrez constater que le javascript permet de convertir les données

exemple : vitesse du vent convertie en km/h

Une icône en couleur concernant les conditions est récupérée sur le site OpenWeather.

Ce procédé permet donc d'afficher les données météo de manière personnalisable.

Encore plus loin

Une autre proposition faite par @ZogStrip consiste à remplacer la direction du vent du type SE par Sud-Est 

var BEARINGS = ["Nord", "Nord-Nord-Est", "Nord-Est", "Est-Nord-Est", "Est", "Est-Sud-Est", "Sud-Est", "Sud-Sud-Est", "Sud", "Sud-Sud-Ouest", "Sud-Ouest", "Ouest-Sud-Ouest", "Ouest", "Ouest-Nord-Ouest", "Nord-Ouest", "Nord-Nord-Ouest"];

function degreeToBearing(degree) {
  return BEARINGS[Math.floor((degree + 11.25) % 360 / 22.5)];
}

var vent = degreeToBearing(datasources["OpenWeather"]["wind_direction"]);

return `
<center>
  <table width='90%' border = "0">
    <tr>
      <td align=left valign=middle width='25%'><span class="glyphicons glyphicons-compass x2"></span></td>
      <td align=left valign=middle><div class="tw-value" style="font-size: 20px; max-width: 100%;">${vent}</div></td>
    </tr>
  </table>
</center>
`;


Conclusion

Pour plus d'informations sur l'API de OpenWeather, je vous invite à lire leur documentation

Je vous invite également à lire les sujets suivants sur le forum :

conditions meteo en francais et en images

plus de rafraichissement de la source de donnees meteo


Remerciements aux différents intervenants qui m'ont permis de rédiger ce tutoriel.

Récupérée de « https://wiki.gce-electronics.com/index.php?title=La_météo&oldid=2590 »