Intéressons nous maintenant au module météo qui affiche la météo du jour et les prévisions pour 3 à 5 jours.

Ce module est particulièrement délicat car il est très difficile à personnaliser. En effet, il s’agit d’utiliser des « widgets » mis à disposition par des sites spécialisés et qui proposent des options de configuration limitées. Pour le moment, je n’ai pas encore trouvé de design qui me plaise totalement, je change régulièrement le type d’affichage jusqu’à en trouvé un qui me plaise et qui soit suffisamment lisible de loin.

J’aime beaucoup le design de la météo Google, qui apparait automatiquement quand vous taper « météo » dans la barre de recherche :

Cependant, je n’ai pas, pour le moment, trouver le moyen de l’insérer dans une page web…

Widgets

J’ai repéré 3 sites qui proposent des widgets météo plus ou moins complets et plus ou moins jolis : my-meteo.fr, tameteo.com et meteocity.com

Tous propose de personnaliser les informations à afficher, le nombre de jours de prévision, les couleurs des éléments ainsi que différents styles d’icônes.Une fois vos options choisies, le site génère du code HTML à copier/coller dans votre page.

Voici des aperçu des otpions de base de chaque site :

my-meteo.fr

tameteo.com

meteocity.com

En rédigeant cet article je me suis replongé dans les options du widget proposé par meteocity. Je suis finalement parvenu à trouver quelque chose qui me convient à peu près, même si je ne suis toujours pas emballé à 100% :

C’est déjà un peu plus sympa 🙂 Hormis les informations sur l’humidité et le vent, le reste est parfaitement lisible de loin. Il va falloir ruser pour masquer ces informations inutiles 😉

index.php

Nous ajoutons à notre fichier index.php une simple balise <div> qui reste vide pour le moment.

 <div id="meteo"></div>

Comment pour l’ensemble des modules de ce dashscreen, c’est une fonction JavaScript qui sera charger d’insérer le contenu à afficher dans la div du module concerné.

style.css

Cas particulier de ce module, nous n’avons pas la possibilité d’agir directement sur les styles CSS du code fourni par le site météo. Nous avons devons donc simplement positionner la div qui contiendra les informations météo.

/* meteo */

div#meteo
{
  right             : 0px;
  top               : 300px;
  position          : absolute;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
  color             : #FFF;
  font-weight       : bold;
  text-align        : center;
}

javascript.js

La fonction JavaScript de ce module se content d’envoyer une requête AJAX et d’insérer le résultat de la requête dans la div idoine.

/* meteo */

var meteo_timeout;

function meteo ()
{
  $.ajax({
    async : false,
    type: "GET",
    url: "./ajax.php",
    data: "block=meteo",
    success: function(html){
      $("#meteo").html(html);
    }
  });

  meteo_timeout = setTimeout("meteo()", 3600000);
}

Rafraichir les informations météo une fois par heure (toutes les 3600000 ms) est largement suffisant.

inc.php

Pour ce module nous avons besoin d’une fonction PHP qui renvoie le code généré par le widget. Ce qui nous donne une fonction très simple, dans laquelle il vous suffit de copier/coller le code HTML qui vous a généré le site météo :

/////////////////////////////////////////////////
//  Meteo
/////////////////////////////////////////////////

function meteo () {
  $meteo = 'coller ici le code HTML généré par le site météo';
  return $meteo;
}

Masquer les informations inutiles

Si vous souhaitez masquer certaines informations fournis par le widget, il suffit d’ajouter une <div> de couleur noir au dessus des éléments que vous voulez voir disparaitre.

Ajoutez une <div> dans le fichier index.php juste en dessous de la div meteo :

<div id="meteo"></div>
<div id="meteo_black"></div>

Puis modifier le fichier style.css en ajoutant le code suivant dans la section meteo :

div#meteo_black
{
  right             : 0px;
  top               : 420px;
  width             : 600px;
  height            : 100px;
  position          : absolute;
  z-index           : 9999;
  background-color  : rgba(0, 0, 0, 1);
}

Bien entendu, vous devrez adapter la position et la taille de la div en fonction de vos besoins 🙂

Voici le rendu final avec ce nouveau widget météo :

Je suis plutôt satisfait du résultat car c’est très lisible et que le design est très épuré 🙂

Avec ces trois premiers modules horloge, xplanet et météo, il est déjà possible de réaliser un beau dashscreen dans votre séjour. Ces informations peuvent être intéressantes pour tout le monde et son utiles au quotidien 🙂

Les prochains modules qui vont suivres sont plus des modules de « monitoring » qui ont pour rôle la surveillance de serveurs et de réseaux.

A suivre…