A propos de ce Mur d'Images


Pour montrer mes photos, je désirais le faire un peu à la manière de ces polaroids © que l'on épingle sur un mur.

Picasa propose bien une fonction de ce type appelée "Collage".
Malheureusement, une fois que l'image globale générée, on ne peut pas en faire grand chose à part l'afficher... (Faire le map à la main (dans le sens HTML du terme), étant de la folie furieuse !)
Je voulais que l'on puisse interagir avec ce mur d'images et donc pouvoir cliquer sur les photos pour les afficher.

J'ai donc de faire un programme qui me permettrait à la fois de créer le mur d'image et de génerer le fichier Map après avoir effectué un clipping qui tiendrait compte de la profondeur, clipping que je nommerai par la suite : Z-clipping. (une image au-dessus d'une autre peut éventuellement la recouvrir partiellement. Et, ainsi de suite jusqu'à la première image posée).

Finalement donc, je suis tombé par hasard (je voulais savoir pourquoi Login Magazine avait disparu des kiosques subitement) sur le blog puis un programme de Romain Guy (Romain était un petit peu le Rémy Bricka de Login) appelé "Photo Collage".

Romain à part la suite publié sur son excellent blog (Curious Creature) un petit quelque chose à propos du mur d'images. Qu'il en soit infiniment remercié. Le lien est ici

Si, "Photo Collage" faisait joliment le Collage, tout le reste était à faire :
A commencer par pouvoir récupérer les coordonnées des bitmaps après manipulations, préalable indispensable pour pouvoir faire le Z-Clipping !
Pouvoir charger des images, c'était aussi une des premières fonctionalités à ajouter. En effet, le programme de Romain utilisait des images stockées dans le jar.

Mais comme Romain a eu l'heureuse initiative de laisser à disposition de tout le monde les sources de son programme (java+swing), j'ai pu reprendre le programme et ajouter tout ce dont j'avais besoin.

En Vrac :
  • Pouvoir charger et utiliser des images.
  • Calculer les coordonnées des polygones d'après les mêmes transformations affines que celles "subies" par les bitmaps.
  • Faire le Z-clipping (clipping puis Z-buffer) pour générer les coordonnées des polygones cliquables.
  • Pouvoir faire des "undo".
  • Choisir/changer sa couleur de fond.
  • Tester en un click le Z-Clipping à l'écran.
  • Générer directement le MAP HTML + les appels aux fonctions javascript dont j'ai besoin.
  • Sauvegarder l'image finale du Collage.

Le concept est simple :
  • 1 - Vous glissez-déposer vos photos.
  • 2 - Le programme vous calculera automatiquement les "zones cliquables". Ici, les zones indiquées en rouges et dont le contours est surligné en bleu.
  • 3 - Il vous génèrera le MAP + l'image du collage finale
  • 4 - Vous n'avez plus qu'à copier-coller le MAP dans votre fichier HTML
Illustration : Résultat du Z-clipping obtenu. Le MAP sera généré en conséquence. Le programme gère le cas où le clipping engendre la création de plusieurs aires distinctes (voir le cas en bas à gauche).














Mode d'emploi + programme Map Generator : c'est ici