Neuf, avec la NB4, propose un routeur évolué et ouvert. Une petite API permet notamment d’interroger la NB4 et de récupérer les valeurs de différents paramètres en temps réél. Il n’y avait qu’un petit pas à franchir pour l’utiliser et afficher ces paramètres directement dans notre PC.

Etant sous vista sur mon PC ‘principal’ (celui sur lequel je joue..), c’est tout naturellement que je me suis orienté sur cette plate-forme pour faire ce gadget. (Je vous rassure, tous mes autres PC sont sous linux Il doit être possible avec un minimum d’adaptation de le faire fonctionner sous mac ou sous d’autres outils style konfabulator (Yahoo widgets). Nous verrons cela peut-être dans une prochaine version.

[Je suis curieux mais paresseux et je voudrais tester tout de suite : envoyez moi directement au téléchargement]

Construire un gadget vista c’est assez simple : il suffit de placer les bons fichiers dans un répertoire.
Les tutos officiels se trouvent ici : http://gallery.live.com/devcenter.aspx

il nous faut donc au minimum :

• un fichier gadget.xml, dans lequel nous allons décrire notre gadget
• un fichier html, dont le nom est décrit dans le xml ci-dessus
• un fichier d’icône (optionnel)
• un css si on veut que ce soit joli

A ce jour, dans la version de dev actuelle, le gadget permet d’afficher deux type d’informations :

• des infos de type booléennes (on/off, oui/non, etc…) sous la forme (par défaut dans l’exemple) d’un petit feu rouge ou vert (mais vous pouvez mettre les graphismes que vous souhaitez)
• des infos ‘historiques’ (un graphique historique) basé sur des valeurs numériques retournées par la NB4

Dans l’exemple, le gadget va chercher le status du lien DSL, le status du PPP, le status du wifi, ainsi que l’évolution du rapport signal/bruit de votre ligne :

(Oui, il est moche, je sais, mais je suis assez nul en design et graphisme, je laisse ça aux spécialiste… le but est avant tout de démontrer la faisabilité de ce gadget. Si vous vous sentez l’âme d’un artiste, n’hésitez surtout pas

Le gadget est encore loin d’être terminé. Il manque tout particulièrement les écrans d’options qui permettrait à l’utilisateur lambda de choisir parmi une liste de paramètre ceux qu’il souhaite monitorer.
Il faut pour cela construire les écrans de settins du gadget (ce qui n’est pas très compliqué en soit), mais également rendre plus générique un certain nombre d’éléments (comme les images on/off par exemple).
J’ai souhaité quand même publier cet article avec ce qui avait déjà était fait, cela permettra aux plus bidouilleurs d’entre vous de continuer ou de partir sur d’autres orientations. Les grands principes sont là en tout cas.

Comme d’habitude, j’utilise mootools comme librairie javascript, elle va notamment nous servir à réaliser les appels asynchrone vers la NB4 et récupérer les résultat à afficher.

Regardons maintenant un peu le contenu des fichiers :

Pas grand chose à dire sur ce fichier, on doit y updader le numéro de version, pointer sur le bon fichier d’icône et le bon fichier html. Les tutos microsofts sont assez clairs sur les contenus possible de ce fichier.

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
    <name>Neuf Box 4 DEV</name>
    <namespace>neuf.fr</namespace>
    <version>0.9.2</version>
    <author name="Thomas Chiroux">
        <info url="www.chiroux.com" />
    </author>
    <copyright>2007</copyright>
    <description>Etat de la NeufBox</description>
    <icons>
     <icon height="128" width="69" src="icon_dev.png" />
   </icons>
    <hosts>
        <host name="sidebar">
            <base type="HTML" apiVersion="1.0.0" src="NB4.html" />
            <permissions>full</permissions>
            <platform minPlatformVersion="0.1" />
        </host>
    </hosts>
</gadget>

C’est le fichier html qui est appelé par le moteur de gadget de vista et qui est rendu à l’écran. Il est lui aussi assez simple, car tout se fera dans le javascript.
Dans le fichier html, il faut placer les div des éléments qu’on souhaite afficher, dans l’ordre qu’on souhaite :

		<div id="ADSLStatus" class="NB4OnOff"> </div>
        <div id="PPPStatus" class="NB4OnOff"> </div>
        <div id="WlanStatus" class="NB4OnOff"> </div>
        <div id="HistoGraphSNR"><div id="SNRValue">  </div></div>

Nous avons donc ici 4 éléments : 3 éléments de type ‘NB4OnOff’ et un élément de type ‘Histo’.

C’est le fichier le plus important et c’est là que tout est fait aujourd’hui. Il est importé par NB4.html, juste après mootools.

Il est en gros composé de 2 parties :

• la définition des 2 classes (NB4OnOffClass et NB4HistoGraphClass) actuellement disponibles. Ces classes sont indépendantes de la structure ‘gadget’ et pourraient être réutilisée dans d’autres contextes
• le code javascript qui permet de gérer le gadget, notamment son initialisation

Passons d’abord sur le code ’spécial gadget’ et sur l’initialisation. Les plus courageux pourront ensuite creuser le code des classes :

NB4.html, au chargement de la page, commence par lancer initGadget() :

initGadget() fait 2 choses :
Initialiser la gestion des évènements lié à la mise en dock (la barre de gadget) et à l’opération inverse (le dé-dockage ?) :

function initGadget() {
    // variables globales
    if (!DEBUG_BOUCHON)
      gDockFlag = System.Gadget.docked;
    gAjaxWorking = 0;

    // Initialise les évènements de Dock et UnDock
    if (!DEBUG_BOUCHON) {
      System.Gadget.onUndock = procUndockEvent;
      System.Gadget.onDock = procDockEvent;
    }

Donc ici, si le gadget revient dans sa barre, la fonction ‘procDockEvent’ sera exécutée et si il en sort, c’est la fonction ‘procUndockEvent’ qui le sera. Le principe et le fonctionnement de ces fonctions est assez bien décrit dans les exemples de microsoft. En gros elles s’occupent de redimentionner la fenêtre d’affichage pour que tout soit parfaitement affiché).

(ne vous préoccupez pas pour l’instant du ‘DEBUG-BOUCHON’, on en parlera dans la partie plus détaillée sur le développement)

Ensuite et c’est le plus important, cette fonction initalise les objets d’interrogations de la NB4 :

    objADSLStatus = new NB4OnOffClass('adsl_status', 'ADSLStatus', 'NB4_ADSL_On.png', 'NB4_ADSL_Off.png',5000);
    objPPPStatus = new NB4OnOffClass('ppp_status', 'PPPStatus', 'NB4_PPP_On.png', 'NB4_PPP_Off.png',5000);
    objWlanStatus = new NB4OnOffClass('wlan_active', 'WlanStatus', 'NB4_WIFI_On.png', 'NB4_WIFI_Off.png',5000);
    objSNRValue = new NB4HistoGraphClass('adsl_noise_down', 'SNRValue', 'SNR', 32, 'barre.gif', 10000);

Pour le ’simple’ utilisateur, c’est tout, il n’y a rien d’autre à faire que de changer ces valeurs. (plus tard, dans une version ultérieure, il y aura des écrans de paramétrages pour éviter d’avoir à toucher le code).

Prenons la première ligne et détaillons les paramètres :

• le premier (‘adsl_status’) est le nom du paramètre de la NB4. Attention il doit être exact, sinon la NB4 ne renvoie rien (plus exactement, elle renvoie ‘=’)
• le second (‘ADSLStatus’) est l’ID du <div> dans le code html qui va afficher le contenu
• les troisième et quatrièmes (‘NB4_ADSL_On.png’, ‘NB4_ADSL_Off.png’) sont les images à afficher (qui s’afficheront dans le div ci-dessus) lorsque les valeurs récupérées sont respectivement on ou off (ou up ou down, etc..)
• le cinquième et dernier (5000) est la fréquence de rafraichissement (en ms) : ici il est paramétré à 5s, donc cet objet ira interroger la NB4 toute les 5 secondes.

Donc si vous voulez interroger un autre paramètre de type ‘On/off’ dans la NB4, il faut changer une de ces valeurs par une autre et si vous voulez le faire clean, il faut adapter le nom de l’objet et celui du div dans le code html en fonction du paramètre choisi.

Ces deux classes sont construites sur des principes communs :

1. initalisation des paramètres
2. gestion d’un timer pour les interrogations régulières
3. appel de la fonction de la neufBox en AJAX (en utilisant les fonctions de mootools)
4. récupération et traitement du résultat
5. Mise à jour de l’affichage du gadget en fonction du résultat obtenu

Cette classe est la plus simple, son objectif est de récupérer une valeur de type ‘on’ ou ‘up’ ou encore ‘off’ ou ‘down’ venant de la NB4 et d’afficher l’image correspondante.

D’abord on va initaliser les variables de la classe avec des valeurs par défaut :

var NB4OnOffClass = new Class({
  c_parameterName : null,
  c_elementName : null,
  c_onOff : 0, // OFF par défaut
  c_oldOnOff : -1, // la valeur précédent du test onOff (au début -1 pour initialiser)
  c_imageON : null,
  c_imageOFF : null,
  c_time : 0,
  c_intervalTime : 0,
  c_timer : null,
  c_stoptimer : 0,
  c_urlNB4 : null,

Voici ensuite le constructeur : il est appelé lors de l’instanciation de la classe :
il va prendre les paramètres que l’on a choisi :

initialize: function(parameterName, elementName, imageON, imageOFF, delais){  // Contructeur

, les stocker au sein de la classe :

this.c_parameterName = parameterName;
    this.c_elementName = elementName;
    this.c_imageON = 'images/' + imageON;
    this.c_imageOFF = 'images/' + imageOFF;
    this.c_intervalTime = delais; // durée de rafraichissement
    var date = new Date();
    this.c_time = date.getTime();
    if (DEBUG_BOUCHON)
      this.c_urlNB4 = DEBUG_URL;
     else
      this.c_urlNB4 = 'http://192.168.1.1/kit/get'; // ici on met la valeur en dur car elle sera a terme stockée dans les params du gadget

et lancer une première mise à jour :

    // Aller chercher la valeur dans la NB4
    this.Update();
    }

La fonction update fait 3 choses :

• Affiche la petite icône typique des appels ajax dans le coin du gadget
• Remet à zéro le timer
• Lance l’appel AJAX (en méthode POST, avec en paramètre la valeur cherchée et en forçant l’encodage à vide (en utf-8 la NB4 ne renvoie rien)

Dans l’appel AJAX, nous avons définit la fonction de call back qui sera appelée lors du retour de la valeur (l’appel est asynchrone) : onComplete: this.callbackAjaxok.bind(this)
C’est donc la fonction callbackAjaxok de cette classe qui sera lancée au retour de la NB4

    Update: function() {
      gAjaxWorking += 1;
      $('AjaxIndicator').style.display = 'block';
        var date = new Date();
      this.c_time= date.getTime();
    new Ajax(this.c_urlNB4,{data:'name='+this.c_parameterName, onComplete: this.callbackAjaxok.bind(this), method: 'post', encoding: ''}).request();
  },

Cette fonction est donc appelé au retour OK, je laisse mootols gérer les cas d’erreur : dans notre gadget si il y a des erreurs, rien ne sera affiché.

Dans l’ordre cette fonction fait les choses suivantes :

• stoppe l’affichage de la petit icône ‘appel ajax en cours’
• récupère la valeur de retour et positionne le status de la classe en fonction de ce retour
• si la valeur a changé depuis la dernière fois, réaffiche l’image dans le gadget en fonction de la nouvelle valeur
• vérifie le temps écoulé et prépare le prochain update : soit immédiatement si l’intervalle de temps est déjà écoulée, soit plus tard (via la fonction delay) si le temps n’est pas encore écoulé. L’appel à update refait une boucle et ainsi de suite.

  callbackAjaxok: function(obj) {
    // ici récupère la valeur du paramètre on/off et le stocke dans c_onOff
    gAjaxWorking -= 1;
    if (gAjaxWorking==0) {
         $('AjaxIndicator').style.display = 'none';
      }

    if ($type(obj)=='string') {
      var lvalue = obj.split('=')[1].clean().toLowerCase();
      if (lvalue=='up' || lvalue=='on') {
        this.c_onOff=1;
      } else {
        this.c_onOff=0;
      }
      if (this.c_oldOnOff != this.c_onOff) {
          this.GetHTMLOutput();
      }
      this.c_oldOnOff = this.c_onOff;
    }
    if (!this.c_stoptimer) {
      var date = new Date();
      var currentIntervalTime = date.getTime() - this.c_time;
      if ( currentIntervalTime < this.c_intervalTime) { // on a encore du temps : on attends
        this.c_timer = this.Update.delay(this.c_intervalTime-currentIntervalTime, this); // lance update au bout du délais restant
      } else { // on a dépassé l'heure : on repart directement pour un tour
        this.Update();
      }
    }
  }

Cette fonction prépare simplement le bon tag <img> en fonction de la valeur on ou off et l’affiche dans le div concerné :

  GetHTMLOutput: function() {
    // Affiche l'image dans le div de destination
    var lHTMLoutput = '<img src="'; // <p style="writing-mode: tb-rl; filter: flipH() flipV();">TEST</p>
    if (this.c_onOff==0) {
      lHTMLoutput += this.c_imageOFF;
    } else {
      lHTMLoutput += this.c_imageON;
    }
    lHTMLoutput += '"/>';

    $(this.c_elementName).innerHTML=lHTMLoutput;
  }

Cette classe a pour but d’afficher une évolution dans le temps d’une valeur numérique. A chaque update, nous allons afficher une valeur supplémentaire (une barre de 1 pixel représentant la valeur plus précisément), à la manière du monitoring CPU et mémoire du perfmon de windows.

Le fonctionnement global de la classe est exactement le même que la NB4OnOff, je ne reviens donc pas sur les fonctions d’initialistion et d’update

Il y a un point important à noter dans callBackAjaxOk : au lieu d’écraser la valeur précédente comme c’est le cas dans la classe OnOff, ici on ajoute la valeur reçue à un tableau de valeur :

this.c_histo.extend([lvalue]);

Toutefois, la grosse différence se situe dans le code de rendu html : GetHTMLOutput :

• D’abord on récupère la taille de la zone d’affichage (elle peut varier en fonction notamment du mode docké ou non docké)
• Et on en déduit le nombre de barres verticales affichables (a noter que pour l’instant c_imgwidth est un paramètre fixé une fois pour toute)
• Puis enfin on réduit le tableau des valeurs à ce nombre :

	// Récupère la taille actuelle du div
   var divHeight = $(this.c_elementName).getStyle('height').toInt();
   var divWidth = $(this.c_elementName).getStyle('width').toInt();

   // nombre max de barres affichables (division entière)
   var maxBarres = (divWidth - (divWidth % this.c_imgwidth)) / this.c_imgwidth;
   // réduit le tableau avec les dernières valeurs affichables
   if (this.c_histo.length>maxBarres) {
     this.c_histo = this.c_histo.slice(this.c_histo.length - maxBarres);
   }

• Puis si on a définit une hauteur dynamique au graphe, on va chercher quelle est la plus grande valeur du tableau afin de positionner l’échelle. Sinon on positionne l’échelle à une valeur fixe

    if (this.c_maxHeightSize==0) { // taille dynamique
      var valeurMax= 0;
      this.c_histo.each( function(val) {
        if (val >= valeurMax) {
          valeurMax = val;
        }
      });
    } else {  // taille fixe
      valeurMax = this.c_maxHeightSize;
    }

• Enfin on parcoure le tableau de valeur en créant à chaque fois une image verticale dont la hauteur correspond à la valeur chiffrée du tableau et on l’affiche ainsi que le texte du paramètre de la NB4 qui est monitoré et la dernière valeur chiffrée :

    var derniereValeur = 0;
    // affiche le graph
    for(var i=0;i<this.c_histo.length;i++) {
      lHTMLoutput += '<img src="';
      lHTMLoutput += this.c_imageHisto; //this.c_imageHisto;
      lHTMLoutput += '"';
      lHTMLoutput += ' style="position: absolute; bottom: 0px; left:'+ i + 'px; width:'+ this.c_imgwidth + '; height:' + this.c_histo[i]*(divHeight/valeurMax) + ';"';
      lHTMLoutput += '/>';
      derniereValeur = this.c_histo[i];
    }
    $(this.c_elementName).innerHTML=lHTMLoutput;

Deux versions sont téléchargeables : une de devt et une ‘normale’ (on ne peut pas l’appeler ‘de production’ à partir du moment où ce gadget n’est pas encore terminé).
Le but est de montrer comme serait le package ‘minimal’ d’un gadget NB4. J’ai donc enlevé dans la version ‘normale’ tous les fichiers non nécessaires.

Pour l’installer, il suffit de télécharger l’archive, de le dézipper et de double cliquer sur le gadget, il devrait s’installer tout seul. Ensuite, normalement il devrait se trouver dans le répertoire windows suivant : Bureau\<votre nom de user>\AppData\Local\Microsoft\Windows Sidebar\Gadgets

La seconde archive (de développement) intégre un mootools non compressé (pratique pour le debug) ainsi que deux fichier supplémentaires et une icône de développement :

• testFormPost.html qui est une simple page pour interroger la NB4 en POST et récupérer le resultat, pratique pour tester des paramètres et ce qu’ils retournent
• bouchon.php : permet de simuler la NB4 :
  • paramétrez DEBUG_BOUCHON à true dans NB4.js
  • hébergez le repertoire du gadget sur un serveur php et appelez directement la page NB4.html depuis un firefox équipé de firebug
  • Cela permet de faire du débug pas à pas, ce qui est pratique dans certains cas quand on ne comprend pas ce qu’il se passe : un des gros problème du développement de gadgets est la difficulté de debug car le browser embarqué dans windows sidebar n’est pas du tout accessible ni modifiable.