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
Auteur			fgtoul

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 météo native de l'IPX800

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 l'IHM

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 vous souhaitez obtenir les informations en Français, il suffit d'ajouter "&lang=fr" à la suite de votre clef API (sans ajouter d'espace).

Si la source de données ne se met pas à jour (never inscrit en face), vérifiez vos paramètres.

Les widgets

Création des widgets

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.

Petite amélioration

La direction du vent étant affichée en degrés, @Zogstrip propose la conversion

Ajoutez un widget HTML et collez ce code après avoir cliqué sur le bouton [JAVASCRIPT]

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["METEO"]["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>
`;

JavaScript: 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. Cette méthode vous permettra également de traiter des données non accessibles par la datasource précédente, mais sera également plus lourde en mémoire pour l'IPX800.

Création de la source de données

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

Sélectionnez le type XML

Nommez la source.

   Attention : dans les scripts JavaScript, le nom devra être repris en respectant la casse.

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 derrière 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éation d'un 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 @PatLeHibou:

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.

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.