Documentation CartABl

À quoi ça sert ?

En quelques mots, CartABl est une application web pour ajouter de l’interactivité à un dessin vectoriel au format SVG.

Vous pouvez y importer n’importe quel fichier SVG, définir des règles sur les éléments de ce fichier, comme par exemple “si je clique sur cet élément, alors tel autre élément s’affiche”, et exporter le résultat toujours au format SVG. Ce nouveau SVG interactif pourra être utilisé dans une page internet.

Comment y accéder ?

Vous pouvez tester l’application sur https://igarun.univ-nantes.io/CartABl/main/editor.html

L’interface du logiciel se présente ainsi :

D’où ça vient ?

Cette application portée par l’UMR LETG a été initialement développée dans le cadre de la revue L’Atlas Bleu afin de permettre d’ajouter de l’interactivité dans les graphiques (cartes notamment) présentés. C’est de là que lui vient son nom : Cartes pour l’Atlas Bleu !

CartABl a été ouvert dans le but d’offrir ses fonctionnalités à la communauté la plus large possible : c’est donc un logiciel libre sous licence GNU GPLv3. Le code source est disponible à l’adresse gitlab.univ-nantes.fr/igarun/CartABl.

CartABl est porté par Laurent Pourinet et développé par Olivier Aubert, avec l’appui de Simon Charrier, Claire Portal, Cyril Pulvin, Mathias Rouan, Julie Pierson et Brice Trouillet. Le logiciel a été beta-testé par Jérémy Daniel, Laurence David, Sigrid Giffon, Sébastien Hervé, Mohand Medjkane, Olivier Pissoat et Marie-Laure Trémélo, merci à elles⸱eux !

Ouvrir un fichier SVG

Une fois votre fichier SVG prêt, vous pouvez l’importer dans CartABl.

Pour cela, rendez-vous sur la page d’accueil, vous pouvez ensuite :

• soit cliquer sur le menu déroulant tout en haut à gauche et choisir Ouvrir un fichier
• soit cliquer sur l’icône correspondante juste droite du bouton Image

Une fenêtre s’ouvre vous permettant de sélectionner le fichier de votre choix sur votre ordinateur.

Une fois le fichier choisi, il s’affiche dans la partie Image à gauche de la fenêtre et vous pouvez voir ses éléments dans la partie Éléments en haut à droite. Son nom est également visible en haut de la fenêtre (ici Carte-Montmorillon.svg).

Liste des éléments

Dans le tableau des éléments, si vous survolez une ligne, l’élément correspondant est surligné en jaune dans la partie Image.

De la même manière, le survol d’un élément dans le dessin surligne la ligne correspondante dans le tableau, ainsi que les éventuelles occurrences de cet élément dans les règles.

Au moyen des différentes colonnes vous pouvez :

• contrôler la visibilité d’un élément en cliquant sur le bouton “oeil” dans la première colonne
• verrouiller un élément en cliquant sur le cadenas dans la deuxième colonne
• voir l’aperçu dans l’avant-dernière colonne
• lire l’identifiant dans la dernière colonne

Vérifier les identifiants

Si votre SVG est issu d’un logiciel de dessin, chaque élément aura normalement un identifiant, que vous pouvez lire dans la dernière colonne du tableau des éléments.

Cependant, il est possible que certains éléments aient des identifiants qui ne soient pas lisibles par CartABl, par exemple à cause d’espaces. Ceci sera bloquant pour générer des règles d’interactivité, ces règles étant basées sur les identifiants des éléments.

Il est possible dans ce cas de corriger les identifiants incorrects, en cliquant sur le menu déroulant en haut à gauche puis Opérations > Corriger les ids incorrects. Les caractères non reconnus seront remplacés par des underscores _.

De même, si des éléments n’ont pas d’identifiant, il est possible d’en générer au moyen du menu déroulant > Opérations > Générer les ids manquants.

Filtrer les éléments

Dans la partie éléments en haut à droite, vous pouvez voir la liste des éléments de votre fichier SVG : chaque ligne du tableau correspond à un élément.

Il est possible de filtrer ces éléments en fonction de leur identifiant. Vous pouvez voir le nombre d’éléments filtrés au-dessus du tableau. Par exemple, pour n’afficher que les éléments dont l’identifiant contient Bt :

Il est également possible d’afficher ou masquer les éléments sans identifiant, en cliquant sur le bouton correspondant. Ceci peut être utile si le SVG a été généré par un logiciel ne donnant pas d’identifiant valide à tous les éléments du SVG, comme QGIS.

Enfin, le bouton afficher/cacher tous les noeuds permet comme son nom l’indique d’afficher chaque sous-élément.

Il est temps de rajouter un peu d’interactivité dans tout ça !

Comprendre une règle existante

Prenons la première règle du fichier d’exemple :

Cette règle comporte :

• une condition : si on survole l’élément ayant pour identifiant #Bt_info
• 1 action : fixer l’opacité de l’élément #Bt_info à 0.5 (soit 50%)

Ce qui donne, avant survol et au survol :

Créer une nouvelle règle

Pour créer une nouvelle règle, faites glisser l’élément sur lequel vous voulez ajouter de l’interactivité dans le cadre Nouvelle règle.

La nouvelle règle apparaît en haut. Vous pouvez maintenant modifier ses paramètres.

Tout d’abord, vous pouvez choisir quel type d’interaction va activer la règle, en cliquant sur le mot à droite de Clique sur (le type d’interaction par défaut). 4 valeurs sont possibles :

• clique sur (évènement click en JavaScript) : sera déclenché quand l’utilisateur va cliquer sur l’élément ciblé
• survole (évènement mouseover en JavaScript) : sera déclenché quand la souris sera positionnée sur l’élément ciblé (sans clic) ou sur un de ses enfants
• entre dans (évènement mouseenter en JavaScript) : similaire à survole, mais ne sera déclenché que quand la souris sera positionnée sur l’élément ciblé lui-même
• quitte (évènement mouseleave en JavaScript) : sera déclenché quand la souris de l’utilisateur était sur l’élément ciblé et en sort (sans clic)

Ensuite, vous pouvez choisir ce qui va se passer lorsque la règle sera activée, en définissant une ou plusieurs actions. Pour cela, cliquez sur inverser la visibilité de (l’action par défaut). 9 types d’actions sont possibles :

• ajouter la classe : pour changer le style d’un élément, nécessite de spécifier un nom de classe et un élément
• supprimer la classe : nécessite de spécifier un nom de classe et un élément
• inverser la classe : il faut également spécifier une classe et un élément, si l’élément a cette classe elle sera supprimée, si non elle lui sera ajoutée

• afficher : il faut choisir l’élément qui sera affiché, en le faisant glisser depuis le tableau des éléments
• cacher : il faut choisir l’élément qui sera masqué, en le faisant glisser depuis le tableau des éléments
• inverser la visibilité : idem, si l’élément est visible il sera masqué et inversement
• fixer l’opacité de : permet de rendre un élément plus ou moins transparent, pour l’estomper. Une opacité de 0 rend l’élément complètement transparent, une opacité de 1 lui enlève toute transparence.
• zoomer sur : l’image sera zoomée sur l’élément voulu. Si cette action est déclenchée par un clic, un deuxième clic permet le retour au zoom initial. Ce type d’action ne fonctionne pas très bien avec un survol ou autre !
• afficher le modèle : similaire à l’action afficher, mais le texte de l’élément à afficher peut contenir des expressions, par exemple {{origin.id}} sera remplacé par l’identifiant de l’élément de la condition, {{source.id}} sera remplacé par l’identifiant de l’élément de l’action

Pour tester votre nouvelle règle, n’oubliez pas de cliquer sur le bouton Prévisualiser le SVG interactif, l’aperçu du SVG n’est pas mis à jour automatiquement !

Modifier ou supprimer une règle

Il est possible comme vous venez de le voir de modifier une règle existante :

• pour modifier une condition ou une action existante (partie soulignée au survol de la souris), cliquer dessus et sélectionner une valeur dans la liste
• pour modifier un élément, faire glisser un autre élément depuis le tableau des éléments
• pour ajouter une action, cliquer sur le bouton + à la fin de la règle
• pour supprimer une action, cliquer sur l’icône de corbeille qui apparaît dans le coin supérieur droit du cadre en pointillés de l’action au survol de celle-ci
• pour supprimer une règle, cliquer sur l’icône de corbeille qui apparaît dans le coin supérieur droit du cadre de la règle au survol de celle-ci

On peut également dupliquer une règle en cliquant sur l’icône de cible qui apparaît en haut à gauche de celle-ci au survol.

Pour aller plus loin : utiliser du CSS pour modifier des éléments

Dans CartABl, il est possible de définir des classes dans le langage CSS, pour ensuite les appliquer à des éléments, au moyen des actions ajouter la classe, supprimer la classe et inverser la classe. On peut par exemple imaginer créer 2 classes “activé” et “non activé” pour les appliquer à un bouton.

Pour créer ou éditer une classe, il faut utiliser l’onglet CSS à côté des règles :

Par défaut, 2 classes highlighted sont prédéfinies : les éléments ayant cette classe auront un contour jaune épais.

Une fois une classe définie dans cet onglet CSS, elle peut être utilisée dans une règle, par exemple comme ceci :

Ici, le bouton Bt_info ressemblera à ceci, sans survol et au survol :

Exporter un fichier et l’utiliser dans une page HTML

Pour télécharger le SVG interactif créé avec CartABl, cliquez sur le bouton Télécharger le fichier interactif généré, ou bien menu déroulant en haut à gauche > Générer le fichier.

Cette opération va enregistrer un nouveau fichier SVG avec les règles d’interactivité, sous forme de code JavaScript inséré dans le SVG. Pour tester cette interactivité, ouvrez ce fichier dans un navigateur internet : clic droit sur le fichier > Ouvrir avec > Recherchez votre navigateur..

Ce fichier SVG pourra ensuite être appelé dans une page HTML. Voici quelques exemples de réalisations parues dans la revue l’Atlas Bleu :

• Les représentations iconographiques des paysages du sel à Aveiro (Portugal) – du patrimoine cartographique au patrimoine salicole
• Espaces littoraux les plus densément peuplés de la planète en 2015 et expositions aux risques naturels
• Évolution de l’emprise spatiale (avec calcul de surfaces) de la crevetticulture dans le delta du Río Fuerte à partir de l’analyse d’une série d’images de satellite

Fusionner un SVG interactif avec un SVG non interactif

Imaginons que vous ayez créé un document SVG dans un logiciel de dessin ou un SIG, puis que vous y ayez ajouté de l’interactivité avec CartABl. Tout va bien jusque là, votre SVG interactif fonctionne bien ! Mais si maintenant vous avez une modification à apporter au SVG original (mise à jour, modification d’un tracé, changement d’une couleur…), va-t-il falloir à nouveau ajouter toutes les règles d’interactivité dans CartABl ? Heureusement non ! Le bouton Fusionner va vous permettre d’éviter ces étapes.

Pour cela, ouvrez dans CartABl votre SVG non interactif à jour, cliquez sur Fusionner et allez chercher votre SVG interactif non à jour : les règles d’interaction seront si possible transférées à votre nouveau SVG. Cependant, si par exemple des éléments nécessaires à une règle ont disparu dans le nouveau SVG, la règle correspondante ne pourra être importée.

Changer l’apparence d’un élément au survol

Afficher ou masquer un élément à partir de la légende