TM_latex/chapitres/annexe2.tex

\chapter{Xia et Map Wraper}
Faire une carte ne suppose pas toujours une relation à un territoire réel. La carte peut être imaginaire. Cela résout et pose un problème.

Généralement un territoire imaginaire n'est pas pensé de manière courbe. Ainsi, les opérations de projection n'ont pas lieu d'être. Aucune géodésie n'est nécessaire. Parfois, même aucun système de coordonnées géographiques ou cartographiques n'est nécessaire ou alors il est inventé de manière assez simple pour qu'il ne s'agisse que d'une grille aisément représentable. On résout ainsi un problème complexe de cartographie.

Par contre, cette absence à la géométrie du territoire pose un problème inattendu. En effet, les SIG (systèmes d'information géographiques) interactifs ne sont paradoxalement pas prévus pour utiliser un fond de carte plan qui ne provienne pas d'un ensemble de couches permettant le zoom. Ils sont donc inadaptés à la création de cartes imaginaires interactives.

\smallskip
Pour de telles cartes, il est impossible d'utiliser \emph{Umap}, par exemple, puisqu'aucun choix de fond de carte entièrement personnalisé n'y est possible.

\smallskip
Avec un degré de complexité important, \emph{QGIS} ou \emph{Leaflet} pourraient permettre une telle représentation (voir par exemple \cite{crssimple} pour des cartes astronomiques avec Leaflet). Mais l'investissement étant alors important, nous allons présenter ici deux autres solutions plus simples.

\section{Xia}
L'idée est ici d'abandonner totalement les SIG et d'utiliser un logiciel de dessin. Les besoins de l'interactivité font que celui-ci doit être vectoriel, comme on va le voir. Le choix se porte donc naturellement sur \emph{Inkscape} et l'un de ses modules permettant d'exporter les zones interactives créées avec celui-ci sous la forme d'un site web : \emph{Xia}.

\subsection{Installation}
L'installation de Xia est très simple puisque le module existe sous la forme d'un paquet \emph{deb} (il n'est pas dans les dépôt de Raspberrypi). Il suffit donc de le télécharger sur le site de Xia Fundraiders \cite{xiafunraiders} pour linux et d'utiliser \emph{apt}.

\subsection{Utilisation}
Après avoir redémarré Inkscape, Xia est installé.

\smallskip
Avant de voir précisément comment l'utiliser, il faut en comprendre le fonctionnement général. L'idée est de charger dans Inkscape une image de fond de type raster, du png, par exemple. C'est sur celle-ci que va se trouver toute la carte. Finalement, le fonctionnement de Xia-Inkscape est très proche de celui des SIG, puisque les couches de fond de carte sont des raster et que les éléments qu'on interroge sont vectoriels.

Puis, à l'aide des outils d'Inkscape comme les formes (rectangles, ellipses, polygones fermés, arcs, \dots), on définit les zones que le survol de la souris permettra de mettre en évidence et qui présenterons au clic des informations dans le bandeau latéral.

La figure \ref{fig:xiahtml1} présente la page d'accueil créée par Xia sur la base de la carte du parc d'attraction des rêves présenté au paragraphe \ref{par:parcdattractiondesreves}, page \pageref{par:parcdattractiondesreves}.

\begin{figure}
\centering
\includegraphics[width=0.5\textwidth]{XiaHTML1ParcAttraction}
\caption{À l'ouverture du site\label{fig:xiahtml1}}.
\end{figure}

On y voit le bandeau latéral dans lequel des informations générales sur le site peuvent documenter la carte et dans lequel viendront des informations sur les objets de la carte qui seront cliqués.

On y voit aussi la carte sur laquelle se trouve en haut une image cliquable et un polygone opaque cliquable qui devient transparent au survol de la souris (voir figure \ref{fig:xiahtml2}).

\begin{figure}
\centering
\includegraphics[width=0.5\textwidth]{XiaHTML2ParcAttraction}
\caption{Mise en évidence d'une zone au survol de la souris.\label{fig:xiahtml2}}.
\end{figure}

Le polygone peut être rendu opaque sous Inkscape en lui attribuant un fond totalement blanc.

\begin{figure*}[h]
    \centering
    \begin{subfigure}[b]{0.45\textwidth} % "0.45" donne ici la largeur de l'image
        \centering \includegraphics[width=\textwidth]{XiaHTML4ParcAttraction}
        \caption{Au survol.}\label{fig:xiahtml4}
    \end{subfigure}
    ~ % ce symbole ajoute un espacement horisontal entre les premières deux images
    \begin{subfigure}[b]{0.45\textwidth}
        \centering \includegraphics[width=\textwidth]{XiaHTML3ParcAttraction}
        \caption{Au clic.}\label{fig:xiahtml3}
    \end{subfigure}
    \caption{Le polygone du labyrinthe.}\label{fig:projmerkator}
\end{figure*}

\smallskip
Ce qu'on ne voit pas avec la zone circulaire à gauche du labyrinthe, qui a été créée à l'aide de l'outil ellipse d'Inkscape et à laquelle on a attribué un fond entièrement noir.

De cette manière, cette zone devient transparente au survol et est cliquable mais non zoomable, contrairement à la zone du labyrinthe.

En effet, on voit celle-ci au survol de la souris à la figure \ref{fig:xiahtml4} et à la figure \ref{fig:xiahtml3} le zoom se produisant quand on lui clique dessus.

Parallèlement, on voit aussi sur la figure \ref{fig:xiahtml3} dans le bandeau latéral gauche, les informations associées à la zone du labyrinthe.

\smallskip
Finalement, sur la figure \ref{fig:xiahtml5}, on peut voir une zone elliptique placée sous la zone de l'image en haut à gauche. On voit ainsi qu'il est possible d'ordonner la superposition des éléments graphiques créés avec Inkscape pour que certains soient entièrement cliquables et d'autres pas.

\begin{figure}
\centering
\includegraphics[width=0.5\textwidth]{XiaHTML5ParcAttraction}
\caption{Une des îles sous l'image.\label{fig:xiahtml5}}.
\end{figure}

\subsection{Techniquement}
Voyons maintenant comment procéder pour obtenir ce résultat.

On voit sur la figure \ref{fig:xiainkscape1} l'ensemble des formes géométriques superposées à l'image de fond constituant la carte. Celles-ci sont une ellipse pour l'île-montagne (en haut), un rectangle pour l'île des basses terres (en bas), un rectangle avec une rotation vers la droite pour le téléphérique entre les deux îles, l'image du dragon en haut, le polygone blanc en bas à droite, l'ellipse noire au milieu et le polygone transparent entourant le labyrinthe. Toutes ces formes ont été créées avec Inkscape et sont fermées.

\begin{figure}
\centering
\includegraphics[width=0.5\textwidth]{XiaInkscape1ParcAttraction}
\caption{Les formes utilisées.\label{fig:xiainkscape1}}.
\end{figure}

À l'instar du polygone blanc sélectionné, dont on voit à droite que les propriétés comportent un titre et une description, toutes ces formes ont ces deux catégories des propriétés remplies. Ce sont elles qui vont présenter leur contenu dans le bandeau latéral gauche une fois cliquées, comme on le voit dans la figure \ref{fig:xiahtml3}.

\smallskip
Précisons enfin le comportement des trois éléments : polygone blanc, ovale noir et rectangle du téléphérique.

En choisissant le blanc pour couleur de fond d'un élément, on permet un masquage de l'image de fond qui devient transparent au survol et dont les propriétés s'affichent au clic dans le bandeau latéral.

En choisissant le noir pour couleur de fond d'un élément, on ne masque pas la zone sous-jascente et on permet un clic éventuellement déclencheur d'événements, comme un compteur par exemple, sans présenter les propriétés de l'objet.

En ne choisissant pas de couleur de fond, on ne masque pas la zone sous-jascente et on permet un clic présentant les propriétés de l'objet.

\begin{figure}
\centering
\includegraphics[width=0.5\textwidth]{XiaInkscape2ParcAttraction}
\caption{Les formes utilisées.\label{fig:xiainkscape2}}.
\end{figure}

\bigskip
Après avoir défini les zones cliquables et leur propriétés : titre et description, on peut réaliser l'étape finale, c'est-à-dire utiliser Xia à partir de ce qu'on a réalisé sur Inkscape. Avant cela, il semble bon d'enregistrer le travail en SVG. Cela fait, comme le montre la figure \ref{fig:xiainkscape2}, on se rend dans le menu \emph{Extensions}, sous \emph{Exporter} et on sélectionne \emph{Xia...}.

\begin{figure}
\centering
\includegraphics[width=0.5\textwidth]{XiaInkscape3ParcAttraction}
\caption{Les formes utilisées.\label{fig:xiainkscape3}}.
\end{figure}

La figure \ref{fig:xiainkscape3} montre la fenêtre de Xia qui s'ouvre alors. Elle est très simple car le seul onglet important est celui des \emph{Options}.

\smallskip
Dans celui-ci on trouve tout d'abord une case à cocher intitulée \emph{Single file}.

Si elle est cochée, celle-ci permet d'obtenir un fichier HTML uniq	ue dont les librairies nécessaires pour que la page créée fonctionne sont appelée dynamiquement. Il sera alors donc nécessaire d'avoir une connexion internet pour les charger et la page sera dépendante des serveurs les fournissant.

Si elle n'est pas cochée, alors Xia va construire une arborescence de site classique avec les librairies et votre site fonctionnera même sans connexion au réseau. Votre site sera alors plus lourd et sera construit autour de plusieurs fichiers.

\smallskip
On trouve ensuite \emph{Select export} avec un menu déroulant présentant \emph{Sidebar}, \emph{Material}, \emph{Game1Click} et \emph{GameDragAndDrop}. Il s'agit de modèles pour différentes utilisation de Xia, notamment des jeux. Ici, seul le modèle \emph{Sidebar} nous intéresse.

\smallskip
Enfin, on trouve \emph{Target folder}. Il s'agit du répertoire dans lequel Xia va mettre les fichiers. Celui-ci doit donc être créé préalablement.

\medskip
Ces éléments choisis, on exécute Xia en cliquant sur \emph{Appliquer}. Cela fait, on peut ouvrir le site en allant dans son répertoire et en ouvrant le fichier \emph{.html} qui s'y trouve.

\medskip
Remarquons que le nom du fichier HTML est celui des métadonnées des propriétés du document du menu fichier d'Inkscape. En remplissant celles-ci (les métadonnées) de manière plus approfondies, on construit aussi les informations sur le document accessibles via l’icône i entouré en bas à droite de la figure \ref{fig:xiahtml1}.

À droite de celle-ci se trouvent aussi une icône permettant de mettre le site en plein écran et une autre pour le recharger.

\smallskip
Quant aux information apparaissant dans le bandeau latéral au chargement de la page d'accueil, ce sont celles des propriétés de la carte, c'est à dire de l'image de fond.

\bigskip
La gestion des informations des informations apparaissant au chargement du site comme celles constituant les informations de chaque élément, peut être finement réalisée avec un langage descriptif \emph{MARKDOWN} supporté par Xia, permettant des titres, l'ajout de liens et d'images, \dots{} comme le montre la fin du manuel en français (voir \cite{xiafunraidersman}) qu'il faut bien étudier.

\bigskip
Xia est un logiciel très intéressant pour créer des cartes sans géométrie. Évidemment, il est contraignant dans la forme produite et si on ne connaît pas le langage HTML, il sera impossible d'en changer. Cependant, son couplage avec Inkscape est très intéressant et sa facilité d'utilisation va permettre de réaliser des cartes cliquables tout-à-fait pertinente et dont la publication sur internet ne posera que peu de problèmes (attention, le code créé par Xia n'est pas responsive et les cartes qu'il produit peuvent ne pas fonctionner sur certains écrans).

Si on accepte de mettre quelque peu la main dans le code HTML, les sites fournis par Xia seront une bonne base pour une personnalisation plus avancée qui passera par la maîtrise du HTML.

\section{Map Wraper}