News Xulfr

Comment fonctionne l'application originale ?

Elle utilise une balise nommée <canvas/> qui permet de dessiner en Javascript. Conrètement, il y a un dessin pour le fond de l'horloge, et un dessin pour chaque aiguille. Via un code javascript du <canvas/>, les positions des aiguilles sont mises à jour. Le fait de pouvoir bouger l'horloge sur la page est une mise à jour des coordonnées du <div/> qui embarque l'horloge.

C'est une jolie démo qui montre comment utiliser Canvas et ce que l'on peut en faire.

René-Luc D'Hont vous propose exactement la même démo mais avec 2 autres technologies, le SVG et XBL.

Ces démos ne sont visibles que sous Firefox 1.5.

Une horloge toute en SVG.

La première horloge est complètement dessinée en code SVG, du smiley que l'on voit en fond de l'horloge, jusqu'aux aiguilles. Le processus de mise à jour des aiguilles est réalisé via le système d'isométries (des transformations) inhérent au SVG (un simple setRotate). Pour redessiner l'horloge, René-Luc à directement réécrit le code via un simple éditeur texte (vim évidement :p ), on peut aussi envisager de passer par des outils comme Inkscape.

Une horloge en partie en SVG.

La seconde horloge réexploite les images déjà réalisées pour la démo d'origine. La différence se retrouve surtout dans le processus de rotation des aiguilles (qui sont aussi des images), mais qui n'exploite pas le code Canvas, mais les transformations SVG qui peuvent aussi s'appliquer aux images.

Le widget <clock/>

Pour la dernière horloge, René-Luc a codé ce que l'on appelle un XBL (eXtensible Binding Language). Grâce à ce code, il a créé un élément <clock/> que vous pourrez réexploiter dans vos pages internet. Cette technologie est inhérente à Gecko (le moteur de Firefox). La balise <clock/> est associée via le css à une page XBL qui décrit le fonctionnement de cette balise. La page XBL décrit le contenu de la balise (donc le même code que le SVG du premier exemple) mais aussi les méthodes de cet objet, dont la méthode updateClock() qui met à jour l'horloge. Donc ce qui intéressant ici, c'est que pour réexploiter cette horloge dans votre page, il suffit d'inclure la balise <clock> dans votre code, de l'associer via la régle css '-moz-binding' à la page XBL (qui décrit le fonctionnement de cette horloge) et de coder dans votre page web une petit bout de code (3 lignes) qui appelle toutes les secondes un code du type:

document.getElementById("myClock").updateClock() .

Cette fonction updateClock() est une méthode implémentée dans le XBL.

Conclusion:

Le but de ces démonstrations n'est pas de concurencer la technologie Canvas, au contraire :) Vous découvrez donc des technologies alternatives. René-Luc n'a pas cherché à reproduire le système de fuseau horaire ou de déplacement de l'horloge, si vous avez le temps de rajouter ces fonctionnalistés, n'hésitez pas :)