Reproduire les jolis câbles de yahoo pipes

Thomas — Mon, 25 Jun 2007 13:38:22 +0000

Depuis que j’ai découvert Yahoo Pipes, je me demandais comment ils avaient pu faire une interface aussi chouette en html. Ce qui me posait le plus de pb c’était bien sur les jolis câbles de liaisons entre les boites, d’autant que je n’avait aucune idée de comment on pouvait faire sa en html. J’ai donc décidé de m’y mettre, de comprendre et de le refaire.
Pour commencer, j’ai pris mon firebug et j’ai exploré (inspecté !) les objets affichés pour trouver de quoi était fait le fameux lien.
En fait tout est là : ce câble est un

Mais qu’est-ce donc qu’un canvas ?

Un canvas est un nouveau élément HTML qui permet de manipuler des graphiques en bitmap. Le canvas est intégré au draft du HTML 5 et a été originellement proposé par apple et son safari. Il est supporté nativement par firefox depuis la 1.5 et n’est pas encore supporté par IE (mais il y a moyen de le faire marcher sous IE, on en parlera plus bas)

Je ne vais pas refaire le tuto de canvas, vous pouvez suivre ce tuto sur le site de mozilla, il est très bien fait.

Les ‘wires’ de yahoo

Mon but ici est de refaire le système de câbles entre deux boites comme dans yahoo pipes.

J’ai choisit d’utiliser mootools comme librairie javascript, parce que j’aime bien mootools. Cela permet de ne pas perdre de temps sur la gestion des box et des drag&drop.

Donc j’ai simplement commencé par définir un bout d’html avec un container, deux boites et le fameux canvas :

<body  onload = "start();">
<div id="containment">
  <canvas id="lien"></canvas>
  <div id="boite1">
  1
  </div>
  <div id="boite2">
  2
  </div>
</div>
</body>

le css qui va avec (rien de compliqué):

<style type="text/css">
 #containment {
 height: 500px;
 width: 600px;
 background: #ddd;
 position: relative;
 }
#boite1 {
 height: 60px;
 width: 40px;
 border: 2px solid black;
 background: #39f;
 color: white;
 position: absolute;
 top: 50;
 left: 50;
 }

#boite2 {
 height: 55px;
 width: 40px;
 border: 2px solid black;
 background: blue;
 color: white;
 position: absolute;
 top: 250;
 left: 250;
 }

canvas {
 /*border: 1px solid red;*/
 position: absolute;
 top: 0;
 left: 0;
 }
 </style>

Ensuite un peu de code mootools pour rendre les boites draggables :

function start() {
 var container = $('containment');
new Drag.Move('boite1', {'container': container});
 new Drag.Move('boite2', {'container': container});

$('boite1').addEvent('mousemove', function() {
 replaceLink();
 });
 $('boite2').addEvent('mousemove', function() {
 replaceLink();
 });
 replaceLink();
 }

Donc tout sera fait dans la fonction ‘replaceLink’
Cette fonction est en fait relativement simple :
Elle fait (dans l’ordre) :
- calculer les coordonnée du point de départ et du point d’arrivée du trait : dans cet exemple le point de départ est collé au bas de la boite 1 et le point d’arrivée en haut de la boite 2.

pointA_x = $('boite1').getStyle('left').toInt()+($('boite1').getStyle('width').toInt())/2;
pointA_y = $('boite1').getStyle('top').toInt()+($('boite1').getStyle('height').toInt());
pointB_x = $('boite2').getStyle('left').toInt()+($('boite2').getStyle('width').toInt())/2;
pointB_y = $('boite2').getStyle('top').toInt(); //+($('boite2').getStyle('height').toInt())/2;

- Traiter correctement le point de départ et d’arrivée en fonction de la position relative des boites l’une par rapport à l’autre (notamment quand la boite 2 se retrouve au dessus de la 1, etc..)

 pointA_x = $('boite1').getStyle('left').toInt()+($('boite1').getStyle('width').toInt())/2;
 pointA_y = $('boite1').getStyle('top').toInt()+($('boite1').getStyle('height').toInt());
 pointB_x = $('boite2').getStyle('left').toInt()+($('boite2').getStyle('width').toInt())/2;
 pointB_y = $('boite2').getStyle('top').toInt(); //+($('boite2').getStyle('height').toInt())/2;

- Préparer le contexte

 lien_width = Math.abs(pointB_x - pointA_x);
 lien_x = Math.min(pointA_x, pointB_x);
 lien_height = Math.abs(pointB_y - pointA_y);
 lien_y = Math.min(pointA_y,pointB_y);

- Effacer l’image précédente

ctx.clearRect(0,0,600,500);

- Dessiner un trait qui part bien du point de départ et qui arrive bien au point d’arrivée : ceci est fait en utilisant les fonctions ‘basiques’ du canvas : MoveTo et soit LineTo soit bezierCurveTo si on veut un trait tout arrondi.

Donc en fait c’est très simple.
Là où on passe un peu de temps c’est vraiment le rendre joli.

Au début, j’ai voulu adapter la taille du

 ctx.save();
 ctx.translate(lien_x, lien_y);

Cela me permet d’avoir toujours le point (0,0) en haut à gauche du rectangle formé par le point de départ et le point d’arrivée.

Voici deux cas de figure en schéma :

- Ensuite il ne reste plus qu’à dessiner :
la suite de la fonction est simplement là pour gérer les 4 cas de figure de la position relative de la boîte 1 par rapport à la boite 2. Cela ne sert finalement qu’à donner des bons paramètres à la courbe de bézier pour que cela soit joli.
Il y a un autre élément où j’ai eu un peu de mal c’est pour faire en sorte que le trait ait un bord (plus foncé que l’intérieur dans l’exemple). J’ai essayé de jouer avec les propriétés border, mais c’est en fait beaucoup plus simple :
il faut faire un trait foncé plus gros, puis un trait plus clair et plus fin qui va se superposer, tout simplement.
Cette partie du code est optimisable (on peut la rendre plus compacte), mais je l’ai volontairement laissé tel quel pour gagner en lisibilité.

ctx.beginPath(); m_a = 100; // offset pour les beziers
 if (pointA_x &lt; pointB_x) {
 if (pointA_y &lt; pointB_y) {
 // coin en haut à gauche
 ctx.lineWidth = 12;
 ctx.strokeStyle = '#07c';
 ctx.moveTo(0, 0);
 ctx.bezierCurveTo(0,m_a, lien_width, lien_height-m_a, lien_width, lien_height);
 ctx.stroke();
 ctx.lineWidth = 8;
 ctx.strokeStyle = '#09f';
 ctx.moveTo(0, 0);
 ctx.bezierCurveTo(0,m_a, lien_width, lien_height-m_a, lien_width, lien_height);
 ctx.stroke();
 } else {
 // coin en bas à gauche
 ctx.lineWidth = 12;
 ctx.strokeStyle = '#07c';
 ctx.moveTo(lien_width, 0);
 ctx.bezierCurveTo(lien_width, -m_a, 0, lien_height+m_a, 0, lien_height);
 ctx.stroke();
 ctx.lineWidth = 8;
 ctx.strokeStyle = '#09f';
 ctx.moveTo(lien_width, 0);
 ctx.bezierCurveTo(lien_width, -m_a, 0, lien_height+m_a, 0, lien_height);
 ctx.stroke();
 }
 } else {
 if (pointA_y &lt; pointB_y) {
 // coin en haut à droite
 ctx.lineWidth = 12;
 ctx.strokeStyle = '#07c';
 ctx.moveTo(lien_width, 0);
 ctx.bezierCurveTo(lien_width, m_a, 0, lien_height-m_a, 0, lien_height);
 ctx.stroke();
 ctx.lineWidth = 8;
 ctx.strokeStyle = '#09f';
 ctx.moveTo(lien_width, 0);
 ctx.bezierCurveTo(lien_width, m_a, 0, lien_height-m_a, 0, lien_height);
 ctx.stroke();
 } else {
 // coin en bas à droite
 ctx.lineWidth = 12;
 ctx.strokeStyle = '#07c';
 ctx.moveTo(0, 0);
 ctx.bezierCurveTo(0,-m_a, lien_width, lien_height+m_a, lien_width, lien_height);
 ctx.stroke();
 ctx.lineWidth = 8;
 ctx.strokeStyle = '#09f';
 ctx.moveTo(0, 0);
 ctx.bezierCurveTo(0,-m_a, lien_width, lien_height+m_a, lien_width, lien_height);
 ctx.stroke();
 }
 }
 ctx.restore();

Fonctionnement avec IE

IE ne supporte pas nativement les canvas (même pas IE7). Pour contourner ce pb, des gars de chez google ont eu l’excellente idée et le talent d’utiliser le support natif de VML dans IE pour émuler les canvas. Il suffit d’inclure cette librairie pour faire fonctionner canvas sous IE, pourquoi s’en priver…

Améliorations et Optimisations

Je ne suis pas complètement satisfait des perfomances de cette démo, notamment quand on bouge la souris très vite. Yahoo n’a pas ce pb.
A première vue, je supposerait que c’est du au clearRect que je fait pour effacer les dessins précédent, mais je n’ai pas trouvé d’autre solution pour l’instant. Si vous avez des idées, n’hésitez pas à les proposer en commentant cet article.

Démo et téléchargement

Cliquez ici pour accéder à une démo live de ce code

Ci-dessous pour télécharger le sources (incluant mootools 1.11 et Exanvas 0002) :

Note: There is a file embedded within this post, please visit this post to download the file.

Gagner en efficacité avec Yahoo Pipes

Thomas — Fri, 15 Jun 2007 17:16:06 +0000

Yahoo Pipes est une plate-forme qui permet de manipuler les flux RSS. Au départ j’ai regardé un peu pour m’amuser et comprendre, mais j’ai tout de suite décidé d’utiliser Pipes pour gagner en efficacité dans mon Netvibes. Voici ce que j’ai fait à ce stade.

Petite présentation rapide de ma façon d’utiliser Netvibes :

J’ai 8 onglets :

dans le premier (général), je met ce qui est le plus important ou ce que je regarde le plus souvent :
- les infos PC de Clubic, PCInpact, PresencePC, InquirerFR
- le RSS de agoraVOX
- des plugins ou RSS pour mes mail, twitter, digg, Fuzz, la météo
Ensuite, j’ai des onglets plus thématiques
- un onglet Perso ou ja’i par exemple les RSS de chiroux.com, des blocs notes, etc..
- un onglet pour les gadget
- un onglet pour les articles PC
- un onglet pour les solutions et applications mobiles
- un onglet sciences
- un onglet jeux videos
- un onglet web 2.0

Dans ces onglet thématique et dans ce premier onglet, j’ai donc des boites RSS de netvibes pour chaque site suivi.

Ce que j’ai choisit de faire avec Yahoo Pipes dans cette première expérimentation est de regrouper les différents sites par thèmes pour regénérer un seul flux thématique.

Je me retrouve donc maintenant avec 4 flux / boite netvibes pour NewsPC, ArticlesPC, Gadgets, Web 2.0 qui sont triés par date.

Cela ma permis de jeter 20 flux unitaires et de gagner une place folle dans mes pages.

La lecture est aussi beaucoup plus logique.

Voici un exemple de paramétrage de Yahoo Pipes pour agréger des flux :

Pipes est beaucoup plus puissant que cette simple utilisation d’agrégation, que l’on pouvait dailleurs déjà faire avec des outils commes XFruits par exemple.

Pour aller un peu plus loin et toujours améliorer mon efficacité dutilisation de Netvibes, j’ai fait un autre pipe pour filtrer le rss de life hacker, qui a parfois des choses intéressantes, mais souvents des infos qui ne m’intéressent pas du tout. J’ai donc utilisé un autre module, de filtrage cette fois ci :

Voici les liens des différents Pipes que j’utilise maintenant sur netvibes :
(pour les ajouter dans netvibes, cliquez sur Subscribe RSS)

Si vous voulez modifier ces flux, il suffit de les cloner et c’est parti.

Pipes permet de faire beaucoup d’autres choses, certaines sont très bien présentées sur les sites de cette page.

Ce que ni Yahoo Pipes ni rien d’autre à ma connaissance ne sait faire, c’est supprimer les ‘doublons d’articles’. Voici un bon exemple dans l’image ci-dessous de triplon d’articles : a peu d’intervalle, trois sites de gadgets parlent exactement du même produit, chacun avec ses propres mots. J’ai bien essayé de trifouillé avec l’objet ‘content analysis’ de Yahoo, mais cela ne donne rien de bon, peut-être est-il encore limité à l’anglais.
En tout cas, ce que je recherche maintenant c’est un outils assez intelligent pour être capable de détecter ce genre de doublons et de me les filtrer.