Documentation CartABl

Logo CartABl

Bienvenue dans la documentation de CartABl ! Ici, vous pourrez découvrir ce qu’est CartABL, comment l’utiliser, et même comment y contribuer !

Présentation générale

À quoi ça sert ?

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

Fonctionnement de CartABl

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/stable/editor.html

Interface de CartABl

Comment l’utiliser ?

Vous pouvez découvrir ici les différentes étapes de l’utilisation de CartABl. Cette documentation est un travail en construction qui s’enrichira de vos retours !

D’où ça vient ?

Cette application portée par l’UMR LETG et réalisée par Olivier Aubert 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 !

Elle a été ouverte dans le but d’offrir ses fonctionnalités à la communauté la plus large possible.

Cette application est un logiciel libre sous licence GNU GPLv3. Le code source est disponible à l’adresse gitlab.univ-nantes.fr/igarun/CartABl

Préparation du SVG

CartABl va ajouter de l’interactivité à un dessin vectoriel au format SVG. Ce qui implique d’avoir un SVG de départ ! Il peut s’agir d’une carte, d’un graphique, ou de tout autre type de document, mais pour pouvoir être utilisé dans CartABl il devra répondre à certaines règles.

Quelques mots sur le format SVG

Le format SVG (Scalable Vector Graphics, en français graphique vectoriel adaptable) est un format qui permet de décrir des éléments graphiques sous forme de texte.

Si vous ouvrez un fichier SVG avec un logiciel de dessin vectoriel comme Inkscape ou Adobe Illustrator, vous verrez un dessin, et si vous l’ouvrez avec un éditeur de texte, vous y verrez du texte organisé sous forme de balises. En fait, les logiciels de dessin vectoriel sont capables d’interpréter le texte contenu dans un SVG pour dessiner les éléments correspondant.

Par exemple, le texte suivant :

<rect width="100" height="80" x="20" y="50" fill="steelblue" />

correspond à un rectangle de largeur 100, de hauteur 80, qui sera dessiné à 20 pixels en partant du bord gauche et à 10 pixels en partant du bord du haut, de couleur “bleu acier”. Autrement dit :

rectangle.svg

Ce sont à ces éléments du fichier SVG que CartABl va ajouter de l’interactivité !

Comment préparer un document SVG en vue de son utilisation dans CartABl ?

CartABl va vous permettre d’ajouter des actions liés à des éléments de votre SVG. Il faudra pour cela :

  • que les éléments aient des identifiants clairs et sans espace
  • si vous désirez ajouter une action sur plusieurs éléments, il faut grouper ces éléments dans le SVG

Dans un logiciel de dessin, vous pouvez éditer manuellement les identifiants de vos éléments :

  • dans Inkscape, clic-droit sur élément > propriétés de l’objet > modifier le champ ID
  • dans Adobe Illustrator > à compléter !

Cependant dans QGIS vous n’aurez pas la main sur ces identifiants, qui peuvent contenir des espaces ; à ce moment-là, une fois votre fichier importé dans CartABl, vous pourrez corriger les id incorrects à partir du menu Opérations.

Votre SVG est prêt ? Vous pouvez maintenant l’importer dans CartABl !

Si vous n’avez pas de SVG, vous pouvez tout de même tester l’application, un SVG de démonstration sera ouvert par défaut. Des SVG de test sont également téléchargeables ici.

Import et vérification du SVG

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 et cliquez sur le bouton Ouvrir un fichier.

bouton ‘Ouvrir un fichier’

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 CalquesTemplatePopup.svg).

Fichier ouvert

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. Dans l’exemple ci-dessous, un élément masqué dans le SVG apparaît lorsqu’on le survole dans le tableau.

GIF survol élément

Je ne sais pas si on utilise des GIF ou non, c’est un peu distrayant quand ça bouge tout le temps !

De la même manière, le survol d’un élément dans le dessin surligne la ligne correspondante dans le tableau, sauf s’il y a déjà une règle qui se déclenche au survol de cet élément.

Au moyen des différentes colonnes vous pouvez :

Un élément dans le tableau

  • 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.

Ceci peut être le cas par exemple pour un SVG généré avec QGIS : les identifiants seront de la forme Map 1 : nom de la couche.

Il est possible dans ce cas de corriger les identifiants incorrects, en cliquant sur 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 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 oeil :

Filtre sur les éléments

Il est également possible d’afficher les éléments sans identifiant, en cochant la case correspondante. 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, la case afficher 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 !

Ajout de l’interactivité

Si vous utilisez le fichier SVG de démonstration chargé par défaut dans CartABl, vous devez voir en bas à droite de la fenêtre un certain nombre de règles déjà définies. Sinon, ce sera à vous d’en créer !

Comprendre une règle existante

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

Un exemple de règle

Cette règle comporte :

  • une condition : si on survole l’élément ayant pour identifiant #GroupeLeg01
  • 2 actions : 1/ afficher l’élément avec pour identifiant #TemplatePopup et 2/ modifier le style de l’élément #ligne01 en lui attribuant la classe #highlighted

Ce qui donne :

Quand on survole le 1er élément de légende, le popup apparaît.

La première action suppose donc qu’il existe un élément #TemplatePopup masqué par défaut.

La deuxième action implique l’existence d’une classe #highlighted. Une classe définit un ensemble de règles de style, ici simplement un contour jaune épais.

Pour définir ou modifier une classe : menu Opérations > Editer la feuille de style. Les règles sont alors masquées pour afficher une nouvelle rubrique CSS.

Le CSS (Cascading Style Sheets) est un langage informatique utilisé pour décrire le style des éléments d’une page HTML, un peu comme une feuille de style dans un logiciel de traitement de texte.

Ici, les styles définis sont :

.highlighted * { stroke: yellow\ !important; stroke-width: 4px; }  
.highlighted { outline: 2px solid yellow; }

Note : le SVG de démo devrait avoir un style plus simple, avec un seul élément ?

Ce qui nous indique que les éléments seront surlignés en jaune.

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 Glisser un élément pour créer une règle.

Exemple de règle créée en faisant glisser l’élément #ligne01

La nouvelle règle apparaît à la suite des autres. 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 Si on. 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 :

  • ajouter la classe : nécessite de spécifier un nom de classe
  • supprimer la classe : nécessite de spécifier un nom de classe
  • inverser la classe : il faut également spécifier une classe, si un é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 ne le modifie pas.
  • 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. Si cette action est déclenchée par un survol ou autre, il n’y a pour le moment pas de moyen de revenir au zoom initial !
  • 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 Preview, 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 Ajouter une action
  • pour supprimer une action, cliquer sur l’icône de corbeille rouge qui apparaît dans le coin supérieur droit du cadre en pointillés de l’action au survol de celle-ci Supprimer une action
  • pour supprimer une règle, cliquer sur l’icône de corbeille rouge qui apparaît dans le coin supérieur droit du cadre de la règle au survol de celle-ci Supprimer une règle

Export et utilisation du SVG interactif

Exporter un fichier et l’utiliser dans une page HTML

Pour pouvoir réutiliser le SVG interactif créé avec CartABl dans une page internet, cliquez sur le bouton 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.

Ce nouveau fichier SVG pourra ensuite être appelé dans une page HTML. Bientôt ici des liens vers des exemples de réalisations !

Ce fichier, comme tous les fichiers SVG, peut être ouvert avec un navigateur internet : clic droit sur le fichier > Ouvrir avec > Recherchez votre navigateur.

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.