La météo

Présentation

IPX800 et Météo
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 :

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

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 pour le nommer comme bon vous semble. Cliquez ensuite sur le bouton

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

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

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]

• Sélectionnez le type XML

• 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

Sur le dashboard, cliquez sur [AJOUTER WIDGET]

puis cliquez sur son bouton pour le nommer comme bon vous semble.

Cliquez ensuite sur le bouton 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>
`;

Informations complémentaires

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.