Les quelques cadres proposés par défaut dans Fotowall ne suffisent pas toujours à rassasier la créativité débordante des utilisateurs. Fort heureusement, ce logiciel repose exclusivement sur des standards, notamment le SVG pour la réalisation des cadres. Il est donc relativement simple de créer de nouveaux cadres, moyennant… deux petites contraintes 😉 :

• Réaliser un dessin au format SVG nécessite l’utilisation d’un logiciel de dessin vectoriel, ce qui n’est pas très compliqué, mais peut déjà en rebuter plus d’un.
• Suivre un certain nombre d’indications, toujours au niveau du SVG, pour un affichage sans problème dans Fotowall… et là, j’ai déjà perdu la moitié de mon lectorat (ce qui doit à peu près représenter un bras ou un pied)…

Avant de proposer une solution qui permettra de s’affranchir de ces deux contraintes, et ainsi faciliter l’intégration d’un « simple dessin » comme cadre dans Fotowall, nous allons voir comment fonctionnent ces fameux cadres.

Comme dit plus haut, les cadres reposent sur des dessins vectoriels au format SVG. Pour qu’ils puissent être utilisés dans Fotowall, ceux-ci sont découpés en 9 morceaux, identifiés par une étiquette au sein du fichier. L’illustration ci-dessous représente ces 9 morceaux composant le cadre, la zone représentée en rose correspondant au positionnement d’une photo du pèle-mêle.

Les étiquettes affichées sur chaque morceau, telles que « topleft » ou « bottom », correspondent aux différents ID sur lesquels repose Fotowall. Sans ces ID, Fotowall ne sera pas en mesure d’utiliser le cadre, et le contour de la photo du petit neveu ou de Médor, restera désespérément vide. A ces 9 morceaux s’ajoutent 4 autres éléments, ci-dessus représentés par des flèches. Bien qu’apparaissant lors de l’édition du dessin vectoriel, ces éléments sont invisibles une fois dans Fotowall. Ils restent pour autant nécessaires. Ceux-ci, identifiés par des ID « hint-[…]-margin », permettent de définir l’épaisseur du contour qui doit être visible. Ainsi, si nous prenons pour exemple la flèche de gauche, voici son impact sur l’image de gauche :

• Si l’objet « hint-left-margin » est de longueur égale à l’image « left », alors cette image apparaît dans toute sa largeur.
• Si l’objet « hint-left-margin » est de longueur supérieure à l’image « left », alors un espace apparaît entre cette image et le bord de la photo. Cet espace est automatiquement comblé par l’image de fond « center », qui dépasse donc à gauche de la photo.
• Si l’objet « hint-left-margin » est de longueur inférieure à l’image « left », alors elle est partiellement recouverte par la photo.

Mathématiquement, la distance de la zone d’espace, ou de la zone recouverte, est la différence de longueur entre l’élément « hint-[…]-margin » et chacune des images concernées (les 3 de gauche, les 3 de droite, les 3 du haut, ou les 3 du bas) : si le cadre fait 5 pixels et la marge 10 pixels, il y aura un écart de 5 pixels entre le cadre et la photo.

Un petit détail qui a son importance, les images « top », « left », « bottom » et « right » seront automatiquement étirées en fonction de la taille de la photo. A partir de là, on se rend malheureusement compte qu’il est difficile de proposer un cadre avec des motifs supportant difficilement d’être déformés… L’exemple ci-dessous illustre assez bien ce problème. Qu’à cela ne tienne ! Il est déjà possible de faire pas mal de trucs pour s’amuser, et ces quelques limitations finiront par être levées avec le temps.

Nous avons vu qu’un cadre se composait de 9 + 4 éléments graphiques dans un fichier SVG. Pour éviter de saisir les ID de ces éléments à la main dans le fichier SVG (qui est une bête structure XML), dans Inkscape il est possible de les saisir après un clic droit sur chacun de ces éléments, comme illustré ci-dessous.

Avec les quelques informations que nous venons de voir, nous pouvons nous rendre compte que produire un cadre peut être fait sans trop de difficulté, mais que cela peut aussi devenir fastidieux dès lors qu’on voudra multiplier ces cadres, par exemple pour les décliner en plusieurs couleurs. Hé puis nous l’avons déjà dit, tout le monde n’est pas forcément à l’aise avec le dessin vectoriel ! Dans ce cas, pourquoi ne pas produire un cadre directement en bitmap (JPG, PNG) à l’aide d’un logiciel de retouche photo comme Gimp, pour le convertir aussitôt après en cadre SVG prêt pour Fotowall ?

Nous l’avons très rapidement abordé plus haut, un fichier SVG est un fichier texte au format XML. Ca tombe bien, les outils en ligne de commande foisonnent sur nunux, et Bash (ou tout autre *sh, ne soyons pas –trop– sectaire) est la star quand il s’agit de produire automatiquement des fichiers !

La tentation de faire un tel programme était trop forte. Voici un script qui va nous permettre de nous affranchir du découpage d’une image et de sa conversion en SVG : fotowall_frame_compiler.zip

Une fois décompressé, le fonctionnement de ce script, quoique nécessitant un de ces écrans sombres et étranges qu’on appelle « terminaux« , est d’une grande simplicité d’utilisation. Regardez plutôt :

./fotowall_frame_compiler.sh image.png

Le script peut se contenter d’un seul et unique paramètre, à savoir l’image à convertir. Dans ce cas, les 9 parties du cadre seront autant que possible de hauteur et de largeur égales. Pour un meilleur rendu, attention à préférer des dimensions multiples de 3 dès le départ. En sortie du programme, le fichier SVG est créé, en reprenant le nom de l’image d’origine et en remplaçant l’extension par « .svg » (ce qui donne dans notre exemple image.png > image.svg).

Mais on peut aussi très bien avoir un contour de cadre de largeur ou de hauteur (ou les deux) différente de celle de l’emplacement réservé pour les photos. Pour reprendre l’exemple de la première illustration, on voit très bien que la hauteur de « top » et de « bottom » n’est pas identique à la hauteur de « center ». Dans ce cas, il va donc être nécessaire de connaître la taille exacte que l’on souhaite donner à « center » une fois transformé en SVG. Dans Gimp, il est par exemple possible de mesurer cette zone avec l’outil de sélection rectangulaire. Une fois la hauteur et la largeur connues, il suffit ensuite d’ajouter ces deux nouveaux paramètres au script :

./fotowall_frame_compiler.sh image.png 150 130

Le premier nombre correspondant à la largeur en pixels, et le second nombre correspondant à la hauteur (en pixels aussi, vous l’aurez deviné). En considérant que la zone « center » est parfaitement centrée, le script est alors en mesure de calculer la largeur et la hauteur de chacune des 9 parties, ainsi que les positionner dans l’image SVG. Bref, il n’y a plus rien à faire, le cadre étant immédiatement utilisable par Fotowall ! Si le rendu n’est pas impeccable (un écart d’un ou deux pixels est toujours possible), il suffit de jouer directement sur les deux valeurs dans la ligne de commande, puis rafraîchir le cadre dans Fotowall. Pour illustrer tout ceci, voici un exemple plus concret :

Ce script, requiert toutefois un ou deux logiciels, qui sont disponibles parmi les dépôts de toute bonne distribution GNU/Linux :

• base64 : normalement présent par défaut, ce programme permet de stocker chacune des 9 images directement dans le fichier SVG
• ImageMagick : les commandes convert et identify sont utilisées à outrance dans ce script. Une version au minimum égale à la 6.5.8-9 est nécessaire pour le découpage automatique en 9 images de mêmes dimensions.
• Inkscape n’est plus véritablement nécessaire, mais ce serait dommage de continuer à vous en passer…

Attention. Le script crée temporairement 9 images PNG dans le dossier. Ce sont les 9 éléments ensuite stockés dans le fichier SVG, qui ont été découpés par ImageMagick et numérotés ainsi (en reprenant l’exemple ci-dessus) : image_0.png, image_1.png, … image_8.png. Veillez donc à ne pas avoir une image portant le même nom, sans quoi elle sera écrasée. A la fin d’exécution, ces 9 images temporaires sont automatiquement supprimées.

Après avoir abordé le fonctionnement des cadres SVG pour Fotowall, un script nous permet désormais de nous affranchir d’un certain nombre d’étapes peu amusantes (étiquetage, découpage…), et ainsi nous concentrer sur la réalisation purement graphique de l’image. Attention toutefois à préférer le format d’image PNG, qui est le seul à bénéficier à la fois des dégradés de couleur et de la transparence.

En guise de conclusion, on peut résumer ainsi les différents points abordés au sujet des cadres dans Fotowall :

• Ils sont au format SVG, et peuvent être dessinés à l’aide des nombreux logiciels de dessin vectoriel, dont Inkscape fait partie.
• Un cadre est composé de 9 éléments : les 4 coins, les 4 bords et le centre. A ces 9 éléments s’ajoutent 4 autres éléments pour la distance entre les bords du cadre et les bords de la photo.
• Chacun des 9 + 4 éléments possède un ID précis au sein de l’image vectorielle.
• Les bords étant étirés, les motifs sont déformés, ce qui limite les possibilités de création pour le moment.
• Il est possible de s’affranchir de toute la partie SVG et de réaliser des cadres à partir d’images bitmap (de préférence PNG) à l’aide du script fotowall_frame_compiler.zip (nécessite GNU/Linux et une version récente d’ImageMagick).

Publié sous licence Creative Commons.