Archives de catégorie : Projets

6 – Module 3 – Météo

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.

jarvis_screenshot_meteoCe 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 :

meteo_googleCependant, 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

my-meteo

tameteo.com

tameteo

meteocity.com

meteocityEn 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% :

meteocity_okC’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 :

dashscreen_new_meteoJe 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…

5 – Module 2 – Xplanet

Voilà mon module préféré 🙂 Celui que je trouve le plus joli et qui mériterait un écran pour lui tout seul. L’affichage de la terre avec la phase d’ensoleillement et la carte des nuages en temps réel ainsi que la phase de la lune 🙂

jarvis_screenshot_xplanetCe module s’appuie sur le logiciel Xplanet qui permet de générer des images de toutes les planètes et satellites natuels du système solaire. Vous pouvez représenter, en temps réel toujours, le système solaire en entier avec la position des astres et planètes, zoomer sur une ou plusieurs planètes etc,…

Concernant la terre, vous pouvez afficher la position des villes et tout un tas d’informations météos notamment. Il est également possible de représenter nos satellites artificiels, avec leur position réelle, leur orbite, etc… Je vous laisse parcourir la galerie de screenshot de Xplanet qui donne une idée des possibilités et du rendu. Perso, je trouve cela magnifique 🙂 Un jour, j’achèterai un grand écran juste pour afficher le système solaire 😀

Xplanet

Installation

Xplanet est un soft qui existe depuis… très longtemps ! Il est dispo dans les dépôts Debian, donc pour l’installer, rien de plus simple :

apt-get install xplanet

Les maps

Xplanet contient de base une « map » pour chaque planète (une image qui représente la surface). Vous pouvez, et je vous le conseille, télécharger des maps de meilleure qualité en haute définition. Il est également intéressant de télécharger une map dédiée à la partie de la surface de la terre non exposée au soleil (nuit), sinon, Xplanet se contentera d’asombrir la map du jour.

Vous trouverez ici de nombreuses maps pour la terre et tous les autres astres du système solaire :

Exemple de map pour la terre – jour :

earth-livingExemple de map pour la terre – nuit :

night-electricXplanet se chargera de créer une combinaison des deux images pour repésenter la partie ensoleillée de la terre et la partie plongée dans l’obscurité.

Génération des images

Xplanet n’est au final qu’un générateur d’image qui représente les astres dans leur état à un instant T et depuis un certain point de vue. Tout se passe en ligne de commande, et comme vous avez pu le constater en parcourant le site web de Xplanet, il y des centaines d’options ! Je vais ici me limiter aux paramètres que j’utilise pour mon affichage.

Je génère en fait deux images distinctes, une pour la terre et une pour la lune. Voici mon fichier de configuration xplanet.conf :

[default]                       # Values in this section apply to all bodies unless overridden below.

arc_color=white
arc_thickness=1
bump_scale=3
cloud_gamma=1
cloud_ssec=false
cloud_threshold=90
color={255,255,255}             # fallback color in case an image map isn't found
draw_orbit=false
grid=false
grid1=6
grid2=15
magnify=1
marker_color=red
max_radius_for_label=3
min_radius_for_label=.01
min_radius_for_markers=40
orbit={-.5,.5,2}
orbit_color={255,255,255}       # color for the orbit
random_origin=true
random_target=true
shade=30                        # 0 = black, 100 = same as dayside
text_color={255,0,0}            # color for text (markers & body label)
twilight=6                      # blend the day and night images for
                                # pixels within this many degrees of
                                # the terminator

[sun]
"Sun"
color={255,255,166}
map=/home/jarvis/xplanet/img/sunmap.jpg
max_radius_for_label=0
shade=100

[earth]
"Earth"
color={28, 82, 110}
map=/home/jarvis/xplanet/img/land_ocean_ice_2048.jpg
night_map=/home/jarvis/xplanet/img/night-dark.jpg
cloud_map=/home/jarvis/xplanet/img/clouds_2048.jpg
min_radius_for_label=0

[moon]
"Moon"
color={100, 100, 100}
map=/home/jarvis/xplanet/img/moonmap2k.jpg

Dans les sections [earth] pour la terre et [moon] pour la lune, vous voyez les chemins vers les maps pour le mode jour « map » et le mode nuit « night_map« .

Les nuages

Vous avez également repéré la map « cloud_map » pour la terre. En effet, Xplanet permet de calquer une image ou carte des nuages sur la terre pour obtenir un résultat très réalise avec la couverture nuageuse modiale presque en temps réel.

cloud_combined_2048Vous pouvez obtenir cette carte des nuages ou « cloud_map » sur différents sites. Selon les sources, elles sont mises à jour entre 1 et 10 fois par jour : http://xplanet.sourceforge.net/clouds.php

Il convient de faire un petit script qui va télécharger la dernière carte des nuages publiée. Une tâche CRON se chargera d’exécuter le script à intervalle régulier. Voici mon script xplanet_cloud.sh :

#!/bin/sh

pat=/home/jarvis/xplanet/img/ # destination de l'image téléchargée
tmp=$pat"tmp_clouds_2048.jpg" # nom du fichier temporaire
img=$pat"clouds_2048.jpg"     # nom du fichier final

rm $tmp # supprimer l'ancien fichier temporaire

wget -O $tmp http://xplanet.sourceforge.net/clouds/clouds_2048.jpg # télécharge l'image

if [ -f $tmp ] ; then # si le fichier a bien été téléchargée...
  mogrify -resize 2000x1000 $tmp # redimenssionne l'image téléchargée pour qu'elle est la même résolution que la map "jour"
  mv $tmp $img # remplace l'ancienne image par la nouvelle
  chown -R jarvis:www-data $pat && chmod -R 775 $pat # change les droits sur le fichier
fi

N’oubliez pas de rendre le script exécutable avec un chmod 755 xplanet_cloud.sh 😉

Et voilà la tâche CRON associée qui peut être configurée en utilisant la commande crontab -e :

0 */4 * * *     /home/jarvis/xplanet/xplanet_cloud.sh

Toutes les 4 heures, le script est exécuté et une nouvelle carte des nuages est téléchargée 🙂

Générer les images

Dernière étape, lancer xplanet au démarrage du système pour qu’il génère les images de la terre et de la lune toutes les N minutes. Pour un petit script qui contient deux commandes (une pour l’image de la terre et une pour l’image de la lune). Voici mon script xplanet.sh :

#!/bin/sh

# TERRE
xplanet -conf /home/jarvis/xplanet/xplanet.conf -output /home/jarvis/xplanet/img/xplanet_earth.png -wait 120 -body earth -latitude 40 -longitude 10 -geometry 500x500 &

# LUNE
xplanet -conf /home/jarvis/xplanet/xplanet.conf -output /home/jarvis/xplanet/img/xplanet_moon.png -wait 600 -body moon -geometry 250x250 &

On passe à la commande xplanet les paramètres suivants :

  • -conf : le fichier de configuration xplanet.conf
  • -output : le fichier de sortie
  • -wait : l’intervalle de temps, en seconde, à attendre entre chaque génération d’image (120 secondes soit 2 minutes pour la terre, pour pouvoir bien observer l’ensoleillement tout au long de la journée. 600 secondes soit 10 minutes sont suffisantes pour la lune, dont la phase varie très lentement).
  • -body : nom du corps céleste à afficher, définie dans le fichier de configuration
  • -geometry : taille, en pixel, de l’image générée
  • -latitude & -longitude : permet de fixer le point centrale de l’image pour la terre. En choisissant la latitude 40 et la longitude 10, l’image sera centrée à peu près sur l’Italie. N’y voyez aucune affinité particulière avec ce pays, simplement c’est un angle de vue qui laisse apparaitre la France et toute l’Europe, l’Afrique en entière, une bonne partie de la Russie, les Amériques, et le pôle nord 🙂 C’est joli ! Vous pouvez également choisir le point de vue du soleil par exemple, pour toujours voir la face ensoleillée de la terre, ce qui permettra de voyager un peu et de ne pas voir toujours la même partie du globe 🙂

Il suffit ensuite de place ce script dans le répertoire /etc/init.d et de lancer la commande suivante pour qu’il soit exécuté à chaque démarrage du système :

update-rc.d xplanet.sh defaults

Nous avons fait la moitié du travail 🙂 Toutes les 2 minutes, une nouvelle image (de 500×500 pixels) de la terre est générée avec une carte des nuages mise à jour toutes les 4 heures. Toutes les 10 minutes, l’image de la phase de la lune ( de 250×250 pixels) est mise à jour.

xplanet_earthxplanet_moon

Il ne nous reste plus qu’à créer le module qui affiche ces images sur notre écran 🙂

index.php

Dans la page d’index, nous ajoutons deux balises <div>, contenant chacune une balise <img>, une pour la terre et une pour la lune.

  <div id="earth"><img id="img_earth" src="pict/blank.png"></div>
  <div id="moon"><img id="img_moon" src="pict/blank.png"></div>

Pour éviter l’affichage d’une erreur au chargement de la page il convient d’initialiser les sources des balises <img> avec une image vide blank.png.

style.css

La feuille de style pour ce module est très simple car il suffit de définir la position et la taille des div qui contiennent les images à afficher.

/* earth */

div#earth
{
  width             : 500px;
  height            : 500px;
  left              : 0px;
  top               : 0px;
  position          : absolute;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
}

/* moon */

div#moon
{
  width             : 250px;
  height            : 250px;
  left              : 500px;
  top               : 0px;
  position          : absolute;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
}

javascript.js

Il s’agit simplement de remplacer l’image affichée par la nouvelle image générée. Le problème c’est que le nom du fichier ne changeant pas, le navigateur aura tendance à afficher l’image qui est déjà stockée dans son cache. Pour palier ce problème nous ajouterons un timestamp (date et heure exprimées en nombre de secondes écoulée de le 1er janver 1970) dans le chemin de l’image. De cette manière le navigateur pensera qu’il s’agit d’une nouvelle image à chaque fois.

Par souci de fluidité, il convient également de précharger les images avant de les substituer à l’écran. On évite ainsi que l’image se charge au fur et à mesure de son affichage.

/* xplanet */

var xplanet_timeout;

function xplanet () {

  var now = new Date().getTime();

  /* préchargement des images */
  var img_earth = $("<img />").attr("src", "xplanet/img/xplanet_earth.png?"+now);
  var img_moon  = $("<img />").attr("src", "xplanet/img/xplanet_moon.png?"+now);

  /* affichage des nouvelles images à l'écran */
  $("#img_earth").attr("src", "xplanet/img/xplanet_earth.png?"+now);
  $("#img_moon").attr("src", "xplanet/img/xplanet_moon.png?"+now);

  xplanet_timeout = setTimeout("xplanet()", 120000);
}

La fonction est exécutée toutes les 120000ms (soit toutes les 2 minutes) ce qui, au final, fait défiler l’ensoleillement de la terre et de la lune au fil de la journée 🙂

C’est vraiment plaisant d’observer le défilement de l’ensoleillement au cours de la journée, et de pouvoir prévoir la météo des prochains jours en constant l’approche d’une grosse perturbation au nord ouest de la France 🙂

4 – Module 1 – Date et Heure

Rentrons dans le vif du sujet avec ce premier module qui affiche la date et l’heure.

jarvis_screenshot_heureCe module est très simple, entièrement réalisé en JavaScript. Le module est baptisé : horloge

index.php

Dans la page d’index, c’est donc la balise <div> avec l’id horloge qui nous intéresse.

 <div id="horloge"></div>

La balise reste vide, et sera « remplie » par la fonction JavaScript.

style.css

Comme pour tous les modules, il convient de créer un div dont l’id correspond au nom du module (ici horloge) qui contiendra les informations à afficher, puis de définir sa taille et sa position sur l’écran.

/* horloge */

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

div.horloge_heure
{
  font-size         : 180px;
  background-color  : rgba(0, 0, 0, 1);
}

div.horloge_date
{
  font-size         : 50px;
  background-color  : rgba(0, 0, 0, 1);
}

span.horloge_grey
{
  color             : #888;
  font-size         : inherit;
}

javascript.js

Cette fonction très simple se base sur l’heure du système, et affiche les heures sur 24h et les minutes en gros, puis juste en dessous, le jour de la semaine, je jour dans le mois, le nom du mois et l’année.

var horloge_timeout;

function horloge()
{
  dows  = ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"];
  mois  = ["janv", "f&eacute;v", "mars", "avril", "mai", "juin", "juillet", "ao&ucirc;t", "sept", "oct", "nov", "d&eacute;c"];

  now          = new Date;
  heure        = now.getHours();
  min          = now.getMinutes();
  sec          = now.getSeconds();
  jour_semaine = dows[now.getDay()];
  jour         = now.getDate();
  mois         = mois[now.getMonth()];
  annee        = now.getFullYear();

  if (sec < 10){sec0 = "0";}else{sec0 = "";}
  if (min < 10){min0 = "0";}else{min0 = "";}
  if (heure < 10){heure0 = "0";}else{heure0 = "";}

  horloge_heure   = heure + ":" + min0 + min;
  horloge_date    = "<span class='horloge_grey'>" + jour_semaine + "</span> " + jour + " " + mois + " <span class='horloge_grey'>" + annee + "</span>";
  horloge_content = "<div class='horloge_heure'>" + horloge_heure + "</div><div class='horloge_date'>" + horloge_date + "</div>";

  $("#horloge").html(horloge_content);

  horloge_timeout = setTimeout("horloge()", 1000);
}

Toutes les 1000 ms, soit chaque secondes, le contenu de la div horloge est mis à jour avec le contenu de la variable horloge_content. Vous pouvez d’ailleurs afficher les secondes sur l’écran si vous le souhaitez 🙂

Et voilà pour ce premier module très très simple mais parmis les plus utiles, pour se mettre en jambe 🙂

 

3 – Principe de base

Une page pour les afficher tous

Voici l’arborescence des fichiers nécessaires à l’affichage des différents modules.

  • index.php : page principale qui est appelée par le navigateur
  • ajax.php : contient le code exécuté lors des requêtes AJAX
  • inc.php : contient les fonctions PHP
  • javascript.js : contient les fonctions Javascript
  • style.css : feuille de style

Structure on-ne-peut-plus simple. La page « index.php » est appelée par le navigateur, et une fonction JavaScript se charge d’afficher le contenu de chaque module au bon endroit dans la page et de rafraichir l’affichage à intervalle régulier.

Note : Vous pourrez télécharger tous les fichiers dans une archive dans le dernier article du projet.

index.php

La page d’index se contente de positionner les balises <div> dans lesquelles seront affichés chaque module.

Dans la balise <head>, il y a une balise <meta> dont le but est de rafraichir la page toute les 3600 secondes (soit toutes les heures). Ainsi, toute la page sera rechargée, les compteurs JavaScript réinitialisés, les mise à jour du code sont prises en compte, etc…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Jarvis</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="Content-Language" content="Fr"/>
    <meta name="Author" lang="fr" content="Torna"/>
    <meta name="Copyright" content="© Torna"/>
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="refresh" content="3600;url=index.php">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>

    <div id="main">
      <!--div id="etalon">Jarvis <?php //echo date("Y-m-d H:i:s"); ?></div-->
      <div id="horloge"></div>
      <div id="meteo"></div>
      <div id="meteo_black"></div>
      <div id="ts3"></div>
      <div id="ping"></div>
      <div id="analytics"></div>
      <div id="vpn"></div>
      <div id="latency"></div>
      <div id="earth"><img id="img_earth" src="pict/blank.png"></div>
      <div id="moon"><img id="img_moon" src="pict/blank.png"></div>
      <div id="ifstat_oberon_up"><img id="img_oberon_up" src="pict/blank.png"></div>
      <div id="ifstat_oberon_down"><img id="img_oberon_down" src="pict/blank.png"></div>
    </div>

    <?php include('inc.php'); echo analytics(); ?>

  </body>
</html>

Pour les modules qui affichent des images (phases terre et lune, graphique de bande passante), il convient d’insérer une image vide « blank.png » afin d’éviter l’affichage d’une erreur dans la page en attendant que la requète AJAX chargée de l’affichage de l’image soit terminée.

ajax.php

C’est ce fichier qui est appelé par les requètes AJAX et qui est chargé d’appeler la bonne fonction à exécuter.

<?php

  header('Content-type: text/html; charset=utf-8');
  require_once('inc.php');

  if(isset($_REQUEST['block'])){$block = $_REQUEST['block'];}else{$block = 'none';}

  /////////////////////////////////////////////////
  //  LATENCY
  /////////////////////////////////////////////////

  if($block == 'latency'){
    echo latency();
  }

  /////////////////////////////////////////////////
  //  TS3
  /////////////////////////////////////////////////

  else if($block == 'ts3'){
    echo ts3();
  }

  /////////////////////////////////////////////////
  //  METEO
  /////////////////////////////////////////////////

  else if($block == 'meteo'){
    echo meteo();
  }

  /////////////////////////////////////////////////
  //  PING
  /////////////////////////////////////////////////

  else if($block == 'ping'){
    echo ping();
  }

  /////////////////////////////////////////////////
  //  VPN PPTPD
  /////////////////////////////////////////////////

  else if($block == 'vpn'){
    echo vpn();
  }

  /////////////////////////////////////////////////
  //  IFSTAT
  /////////////////////////////////////////////////

  else if($block == 'ifstat'){
    imagickHisto ($_REQUEST['max'], $_REQUEST['eth'], $_REQUEST['up_down']);
  }

?>

Un bloc de code pour chaque module. En fonction de la variable $block passée en paramètre de la requète AJAX, on appelle la fonction ciblée.

inc.php

Ce fichier contient les fonctions appelées par le fichier ajax.php. Même principe, un bloc de code pour chaque module.

En gros, une fonction par module 🙂 Le détail de chaque fonction fera l’objet d’un article à suivre.

javascript.js

Ce fichier contient les fonctions JavaScript qui vont lancer les requêtes AJAX à intervalle réuglier.

/* initialisation des fonctions de tous les modules au chargement de la page */
$(document).ready(function() {
   fonction_nom_du_module_1 ();
   fonction_nom_du_module_2 ();
   ...
});

/* initialisation des variables timeout pour chaque module */
var timeout_nom_du_module_1; 
var timeout_nom_du_module_2;
...

/* définition de la fonction pour le module nom_du_module_1 */

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

  g = setTimeout("nom_du_module_1()", 10000);
}

Je ne mets ici que la structure gobale du fichier pour expliquer le principe. Le fichier complet sera disponible au téléchargement dans le dernier article.

style.css

Ce fichier contient la feuille de style de la page, c’est elle qui contient toutes les options de mise en forme des éléments de la page (position, taille, couleurs, etc…).

/* init */

body
{
  background-color  : rgba(0, 0, 50, 1);
  font-family       : Verdana, "Courier New", "Lucida Console";
  font-size         : 14px;
  font-weight       : normal;
  padding           : 0px;
  margin            : 0px;
  overflow          : hidden;
}

div, table, tr, td, th, h1, h2, h3, a, span, p, pre, fieldset, input, textarea, form, img, select
{
  font-family       : Verdana, "Courier New", "Lucida Console";
  font-size         : 14px;
  font-weight       : normal;
  padding           : 0px;
  margin            : 0px;
  color             : #FFF;
}

/* main */

div#main
{
  width             : 1366px;
  height            : 768px;
  position          : relative;
  overflow          : hidden;
  background-color  : rgba(0, 0, 0, 1);
  color             : #FFF;
}

La div qui a pour id main est la div qui contient toutes les autres div de chaque module. Ici, je fixe sa taille en pixel à la résolution native de mon écran 1366×768 px.

La couleur de fond (background-color) est fixée au noir mais vous pouvez choisir ce qui vous plaît 🙂

1 – Raspberry Pi Home Dash Screen

J’ai toujours été passionné par la domotique et par tout ce qui touche à l’informatique dans la maison. J’adore les stations météo qui affichent tout un tas d’informations, les horloges high-tech qui font calendrier et qui sonnent quand vous recevez un mail, les cadres photos numériques, etc,… En revanche, vous ne trouverez chez moi aucun de ces appareils (ou presque). En effet, je trouve que ce qui existe aujourd’hui est soit beaucoup trop limités, soit très limités et beaucoup trop chers 😀

En parallèle, j’aime avoir une vue globale sur ce qui se passe sur mon réseau informatique à la maison. Savoir comment se porte ma bande passante, connaitre l’état de mes serveurs et NAS, savoir qui est connecté sur mon serveur TeamSpeak ou sur mon VPN, etc…

J’adore également savoir quelle est la phase de la lune, et connaître l’ensoleillement de la terre au cours de la journée, l’heure du lever et du coucher du soleil… Les écrans de contrôle de la NASA, comme on les voit dans les films, me font un certain effet 😉

Donc voilà, un projet relativement simple mais très fun, un écran tableau de bord pour regrouper toutes ces données 🙂

Bien en vue au dessus du bar qui sépare ma cuisine de mon séjour, voici ce que ça donne :

IMG_5393

Cette photo montre la chose dans sa version finale, proprement installée au mur.

En détail

Voilà la liste des informations qui sont représentées sur cet écran :

  • Phase de la terre avec cartographie des nuages en temps réel
  • Phase de la lune
  • Heure
  • Date
  • Météo du jour
  • Prévisions météo à 3 jours
  • Etat des serveurs et NAS
  • Clients TeamSpeak connectés
  • Clients VPN connectés
  • Bande passante internet

J’ajoute de temps en temps des fonctionnalités, tant qu’il reste de la place pour afficher des informations. L’important c’est que ce soit visible/lisible depuis n’importe où dans la pièce.

Voici ce que ça donne en détail (cliquez pour agrandir) :

dashscreen_final

Le matériel nécessaire

Contrairement à mes autres projets, ici un Raspberry Pi et un écran suffisent… D’ailleurs, vous pouvez utiliser autre chose qu’un Pi, notamment un vieux eeePC ou PC portable pour rester dans le compacte 🙂 Une tour standard fera également l’affaire si vous pouvez la planquer. J’ai simplement ajouté un dongle WiFi pour connecter le Pi au réseau car aucune prise RJ45 n’arrive à cet endroit. Un support mural pour accrocher l’écran au mur ainsi qu’une goulotte extra plate pour masquer les câbles d’alimentation. Si vous choisissez de poser votre écran au dessus de votre frigo par exemple, vous économiserez l’achat de ces deux accessoires.

Pour l’écran, choisissez le moins cher. Préférez les écrans LED, plus fin et qui consomment moins. Ils offrent généralement un angle de vue plus large (pratique quand on se balade dans la pièce), ainsi qu’une luminosité plus élevée. Si vous souhaitez l’accrocher au mur, il doit biensur disposer des fixations de type VESA. Pour la taille, c’est comme vous voulez, et cela dépend de ce que vous voulez afficher. Sachez toutefois qu’un écran de plus de 20-22″ devient vite encombrant… Je vous conseille donc une écran entre 16″ et 20″, au format 16/9 (plus esthétique qu’un 4/3), avec un bord fin (toujours par souci d’esthétisme 😉 ).

Voici en détail ce que j’ai choisi :

  • Un Raspberry Pi Modèle B 512Mo
  • Une carte mémoire SDHC 8Go
  • Un dongle WiFi USB NetGear WNA1000M
  • Un écran LCD AOC e941Vwa 18,5″ (n’importe quel écran peut convenir)
  • Un support mural VESA pour écranAavara EL1010
  • Une goulotte plate pour cacher les câbles

Dans les prochains articles, j’expliquerai comment procéder pour créer facilement ce type d’écran et je publierai tout mon code source en détaillant le fonctionnement de chaque module.

Comme toujours, et j’insiste, je compte sur vous pour alimenter la chose, partager vos avis et idées d’amélioration. Si vous réalisez quelque chose de ce type, ce pourrait être génial de créer un soft avec une bibliothèque qui regrouperait tous les modules créés. 🙂

IMG_5389

11 – En résumé

IMG_5382Après trois semaines d’utilisation quotidienne de mon Pi JukeBox, je peux vous dire que c’est vraiment génial 🙂 Je rentre dans ma voiture, je démarre, la musique reprend où elle s’était arrêtée. Mon iPhone se connecte automatiquement au réseau wifi créé par le Pi, et je peux prendre la main sur le jukebox via l’application MPoD pour changer de playlist ou zapper une chanson. Dans la pratique, les musiques défilent d’un jour à l’autre sans que j’ai besoin de sortir mon smartphone, car rappelons le, le Pi est autonome, MPoD n’est qu’une sorte de télécommande 🙂 Le son, quant à lui, est très correcte 🙂 La cerise sur le gatêau, c’est que je n’ai plus besoin de transcoder mes FLAC en MP3 pour pouvoir les écouter dans la voiture 🙂

Le truc marrant, c’est que si ma femme n’aime pas la chanson qui passe, elle peut prendre la main sur le jukebox avec son smartphone (ou sa tablette), et choisir ce qui lui plaît 🙂

IMG_5369Un point à optimiser toutefois, à part le rangement dans la boite à gants ;), le temps de démarrage. En effet, entre le moment où je démarre la voiture, et le moment où la musique se met en route, il se passe bien 40 secondes… En gros, le temps qu’il me faut pour arriver au portail et le temps qu’il s’ouvre,…

liporider1Pour le moment, l’extinction se fait à la hussarde, brutalement lorsque je coupe le contact. Après trois semaines d’utilisation en prennant ma voiture entre deux et quatre fois par jour, je n’ai constaté aucun problème. Cependant, à terme, pour éviter de « fatiguer » mon Pi, j’utiliserai probablement un circuit chargeur de batterie de ce type : http://www.evola.fr/product_info.php/chargeur-p-73, comme me l’a suggéré Seb@stien en commentaire 🙂 Merci encore pour l’info 🙂

Voici une petite vidéo de démonstration 🙂

En bref

C’est un système très sympa qui permet d’étendre les fonctionnalités de votre autoradio, sans défigurer votre tableau de bord. L’utilisation d’un smartphone et de l’application MPoD pour commander le jukebox, permet d’avoir une interface tactile avec visualisation des infos sur la musique en cours de lecture (groupe, album, titre, pochette d’album, paroles, etc,…), gestion des playlists etc,… L’ensemble reste très discret (tout est planqué dans la boite à gants), et m’a permis de conserver mon autoradio d’origine 🙂

Le matériel complet, environ 155€

 Technos et logiciels utilisés

  • Linux, Raspbian
  • MPD
  • MPoD
  • hosapd
  • CURL
  • Script Bash

Sommaire

Forums de discussion