Added a new table of figures script

site/ManuelUtilisateur.html

@@ -246,14 +246,19 @@
         Journal de bord
       </a>
 </li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="tof.html">
+        Table of Figures
+      </a>
+</li>
 <li class="md-nav__item md-nav__item--nested">
-<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" id="__nav_5" type="checkbox"/>
-<label class="md-nav__link" for="__nav_5">
+<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" id="__nav_6" type="checkbox"/>
+<label class="md-nav__link" for="__nav_6">
           Code
           <span class="md-nav__icon md-icon"></span>
 </label>
 <nav aria-label="Code" class="md-nav" data-md-level="1">
-<label class="md-nav__title" for="__nav_5">
+<label class="md-nav__title" for="__nav_6">
 <span class="md-nav__icon md-icon"></span>
           Code
         </label>
@@ -499,14 +504,14 @@
 <h2 id="utilisation-simple">Utilisation "Simple"</h2>
 <p>Le but de cette section est de vous permettre d'apprendre à lancer, stopper et modifier les variables de fonctionnement de l'application. Vous serez donc en mesure d'utiliser le programme correctement.</p>
 <p>Vous devez commencer par lancer le programme.</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-105">
 <a class="glightbox" href="./Images/Manual/StartPage.png"><img alt="" de="" lancement""="" page="" src="./Images/Manual/StartPage.png"/></a>
-<figcaption>"Page de lancement"</figcaption>
+<figcaption>Figure 105 - "Page de lancement"</figcaption>
 </figure>
 <p>Au lancement de l'app, vous devriez avoir une page comme ci-dessus. Il y a beaucoup d'infos, mais pour le moment ce qui nous intéresse, c'est le menu en haut à gauche.</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-106">
 <a class="glightbox" href="./Images/Manual/Controls.png"><img alt="" contrôles""="" src="./Images/Manual/Controls.png"/></a>
-<figcaption>"Contrôles"</figcaption>
+<figcaption>Figure 106 - "Contrôles"</figcaption>
 </figure>
 <p>Si c'est la première fois que vous utilisez l'application, il est possible qu'il n'y ait qu'un seul preset au lieu des quatre ci-dessous voire 0 si vous n'avez pas mis le preset inclus dans l'installation. Si vous n'avez aucun preset, passez directement à l'étape calibration avant de revenir ici.</p>
 <p>Comme vous pouvez le voir, en plus des presets sélectionnables, il y a quatre boutons (dont deux grisés) et une boite de texte avec un lien.</p>
@@ -514,16 +519,16 @@
 <h3 id="recuperer-le-lien-vers-le-flux">Récupérer le lien vers le flux</h3>
 <p>Pour remplir la boite de texte précitée, il nous faut un lien et ce lien, on le trouve sur la <a href="https://f1tv.formula1.com/">F1TV</a>.</p>
 <p>Quand vous vous rendez sur la F1TV la page principale devrait ressembler à quelque chose comme ça (évidemment le contenu ne sera pas le même) :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-107">
 <a class="glightbox" href="./Images/Manual/F1TvMainPage.png"><img alt="" de="" f1tv""="" la="" page="" principale="" src="./Images/Manual/F1TvMainPage.png"/></a>
-<figcaption>"Page principale de la F1TV"</figcaption>
+<figcaption>Figure 107 - "Page principale de la F1TV"</figcaption>
 </figure>
 <p>Si vous ne vous êtes pas déjà connecté, connectez-vous et ensuite, allez sur la page du Grand Prix qui vous intéresse.</p>
 <p>Pour un Grand Prix en direct, normalement, il y a un endroit où vous pouvez cliquer pour accéder au flux directement, et si vous voulez utiliser un Grand Prix en différé, vous pouvez aller dans "202x Season" ou x est l'année en cours, en l'occurrence 2023. Et là, vous pourrez sélectionner un Grand Prix.</p>
 <p>Dans tous les cas, quand vous avez sélectionné votre Grand Prix, vous devriez vous retrouver sur une page de ce style :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-108">
 <a class="glightbox" href="./Images/Manual/F1TvGpPage.png"><img alt="" d'un="" f1tv""="" grand="" la="" page="" prix="" src="./Images/Manual/F1TvGpPage.png" sur=""/></a>
-<figcaption>"Page d'un Grand Prix sur la F1TV"</figcaption>
+<figcaption>Figure 108 - "Page d'un Grand Prix sur la F1TV"</figcaption>
 </figure>
 <p>Et ici si vous êtes sur un Grand Prix en direct, vous pouvez directement copier l'URL de la page et si c'est un Grand Prix en différé, vous pouvez directement naviguer avec la barre de progression vidéo du lecteur de la F1TV, Je conseille de la placer juste après le départ. Vous pouvez prendre le lien avant ou après avoir changé le timecode de la vidéo, cela ne change rien, le lien ne contient pas votre progression dans la vidéo.</p>
 <p>Ensuite, vous pourrez juste mettre le lien que vous avez récupéré dans la boite de texte que l'on a vu précédemment. Il faut simplement s'assurer que le lien contient bien le terme <code>?action=play</code> à la fin.</p>
@@ -533,9 +538,9 @@
 <p>Le bouton Launch permet de lancer le programme. Le texte peut changer (Par exemple en 'Retry' si le lancement a raté) mais son utilité reste la même : Lancer le navigateur virtuel qui sera requis pour traiter les données.</p>
 <p>Si vous cliquez sur Launch tous les boutons devraient être grisés, c'est normal. Pendant le lancement du navigateur, l'application ne peut pas être utilisée pour éviter des conflits. Il faut juste attendre. Vous aurez également des fenêtres d'invite de commande qui vont s'ouvrir et se fermer, c'est tout à fait normal et il ne faut pas interagir avec tant que tout ne s'est pas stabilisé.</p>
 <p>Vous devriez voir enfin une fenêtre comme celle ci :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-109">
 <a class="glightbox" href="./Images/Manual/SuspectCmd.png"><img (pas="" alt="" de="" elle="" l'est="" ne="" page="" panique,="" pas)""="" src="./Images/Manual/SuspectCmd.png" suspecte=""/></a>
-<figcaption>"Page suspecte (Pas de panique, elle ne l'est pas)"</figcaption>
+<figcaption>Figure 109 - "Page suspecte (Pas de panique, elle ne l'est pas)"</figcaption>
 </figure>
 <p>Il ne faut pas fermer cette fenêtre. C'est la seule chose qui nous relie au navigateur virtuel qu'utilise l'application. Il ne faut pas la fermer, par contre, vous pouvez la réduire et la laisser en background, c'est d'ailleurs ce que je vous recommande de faire.</p>
 <p>Peu après l'ouverture de cette fenêtre, vous devriez avoir accès à trois boutons.</p>
@@ -545,16 +550,16 @@
 <li>Bouton 'Start' lance le processus de récupération de données.</li>
 </ul>
 <p>Si vous cliquez sur ce dernier, vous lancerez le programme. Cela peut prendre quelque secondes à s'actualiser, mais très vite vous devriez vous trouver devant une page comme celle-ci :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-110">
 <a class="glightbox" href="./Images/Manual/StartOfSimulation.png"><img alt="" du="" début="" programme""="" src="./Images/Manual/StartOfSimulation.png"/></a>
-<figcaption>"Début du programme"</figcaption>
+<figcaption>Figure 110 - "Début du programme"</figcaption>
 </figure>
 <p>Vous n'aurez alors qu'un seul bouton disponible : le bouton 'Stop'.</p>
 <p>Vous pouvez arrêter le programme quand vous le voulez. ATTENTION : Avant de fermer le programme, merci de stopper d'abord le processus.</p>
 <p>Si vous stoppez le processus, vous devriez vous retrouver dans la même situation que juste après avoir lancé le navigateur virtuel :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-111">
 <a class="glightbox" href="./Images/Manual/Stopeed.png"><img alt="" arrêt="" du="" programme""="" src="./Images/Manual/Stopeed.png"/></a>
-<figcaption>"Arrêt du programme"</figcaption>
+<figcaption>Figure 111 - "Arrêt du programme"</figcaption>
 </figure>
 <p>Vous pouvez voir en dessous la dernière image que le programme a décodée et vous avez de nouveau accès aux trois boutons expliqués précédemment.</p>
 <p>Quand l'application a été lancée, vous pouvez aussi cliquer sur les données affichées, mais ces comportements sont expliqués dans la section "Comprendre les données"</p>
@@ -575,9 +580,9 @@
 <h3 id="comment-creer-son-preset">Comment créer son Preset</h3>
 <p>Pour créer son Preset, il faut utiliser la page Settings ou Config de l'application.</p>
 <p>Pour y accéder, il faut simplement cliquer sur le bouton "Config" de la page principale et vous serez accueilli par une page qui devrait ressembler à celle ci dessous :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-112">
 <a class="glightbox" href="./Images/Manual/EmptySettingsPage.png"><img alt="" config="" de="" page="" src="./Images/Manual/EmptySettingsPage.png" vide""=""/></a>
-<figcaption>"Page de config vide"</figcaption>
+<figcaption>Figure 112 - "Page de config vide"</figcaption>
 </figure>
 <p>La seule différence est que vous aurez sûrement moins de Presets dans la liste des Presets voir, vous pouvez n'en avoir aucuns.</p>
 <p>Comme vous pouvez le voir, vous n'avez pas énormément d'options disponibles quand vous lancez simplement l'application.</p>
@@ -587,14 +592,14 @@
 <p>Le but, c'est de mettre le lien vers un Grand Prix pour pouvoir avoir une image de test. Pour voir comment récupérer cet URL, voir la section (Utilisation "simple" → "Récupérer le lien vers le flux")</p>
 <p>Quand l'URL a été placée au bon endroit, on peut cliquer sur le bouton "Start" et attendre. Si vous n'avez pas encore lu la partie "Utilisation "simple"", vous allez voir des invites de commandes s'ouvrir et se fermer et c'est tout à fait normal.</p>
 <p>Il faut attendre d'avoir une invite de commande qui reste ouverte et qui ressemble à celle ci dessous avant de faire quoi que ce soit. Ensuite, vous pourrez simplement réduire cette fenêtre et retourner sur la page de configuration.</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-113">
 <a class="glightbox" href="./Images/Manual/SettingsPageWithCmdOpen.png"><img alt="" commande="" de="" invite="" mais="" normale""="" src="./Images/Manual/SettingsPageWithCmdOpen.png" suspecte,=""/></a>
-<figcaption>"Invite de commande suspecte, mais normale"</figcaption>
+<figcaption>Figure 113 - "Invite de commande suspecte, mais normale"</figcaption>
 </figure>
 <p>Ensuite, si vous attendez un peu (le processus peut prendre jusqu'à plusieurs dizaines de secondes), vous aurez soit une erreur, soit vous vous retrouverez avec une page qui ressemble à ça :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-114">
 <a class="glightbox" href="./Images/Manual/SettingsPageWithStartedF1TV.png"><img alt="" amorcée""="" config="" de="" page="" src="./Images/Manual/SettingsPageWithStartedF1TV.png"/></a>
-<figcaption>"Page de config amorcée"</figcaption>
+<figcaption>Figure 114 - "Page de config amorcée"</figcaption>
 </figure>
 <p>Et là on voit que toutes les options ont été débloquées.</p>
 <p>Avant de se pencher sur les nouvelles options, on va rester sur le fonctionnement général. Le bouton "Get a newer image" permet d'avoir une image plus récente de la F1TV. C'est utile par exemple, car comme on le voit sur l'exemple, l'interface de la F1TV n'a pas encore eu le temps de disparaitre. Mais cela peut aussi être utile plus tard dans le cas où vous voudriez que certaines infos s'affichent.</p>
@@ -611,47 +616,47 @@
 <p>Le programme de calibration est fait pour que vous n'ayez besoin de donner que les informations qu'il ne peut pas deviner.</p>
 <p>Il y a deux étapes :</p>
 <p>La première étape est de donner les dimensions de la zone principale d'informations. Pour ce faire, il faut dans un premier temps cliquer sur le bouton "Create the main zone" qui devrait afficher le texte suivant en dessous après avoir cliqué :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-115">
 <a class="glightbox" href="./Images/Manual/2PointsRemaining.png"><img ajouter""="" alt="" de="" indiquant="" le="" nombre="" points="" qu'il="" reste="" src="./Images/Manual/2PointsRemaining.png" texte="" à=""/></a>
-<figcaption>"Texte indiquant le nombre de points qu'il reste à ajouter"</figcaption>
+<figcaption>Figure 115 - "Texte indiquant le nombre de points qu'il reste à ajouter"</figcaption>
 </figure>
 <p>Ensuite, il va falloir cliquer directement sur l'image pour indiquer le coin en haut à gauche et le point en bas à droite de la zone rectangulaire qui contient les informations.</p>
 <p>Vous pouvez voir en bleu ci-dessous les coins du rectangle et en rouge l'endroit où il faut cliquer.</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-116">
 <a class="glightbox" href="./Images/Manual/WhereToDrawMainZone.png"><img alt="" de="" expliquant="" infographie="" la="" les="" où="" placer="" points="" principale""="" src="./Images/Manual/WhereToDrawMainZone.png" zone=""/></a>
-<figcaption>"Infographie expliquant où placer les points de la zone principale"</figcaption>
+<figcaption>Figure 116 - "Infographie expliquant où placer les points de la zone principale"</figcaption>
 </figure>
 <p>Il faut faire attention à bien prendre tous les pilotes MAIS il faut également faire attention à ne pas prendre le texte alentours.</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-117">
 <a class="glightbox" href="./Images/Manual/ForbiddenZone.png"><img alt="" dans="" doit="" la="" ne="" pas="" qui="" src="./Images/Manual/ForbiddenZone.png" sélectionnée""="" texte="" zone="" être=""/></a>
-<figcaption>"Texte qui ne doit pas être dans la zone sélectionnée"</figcaption>
+<figcaption>Figure 117 - "Texte qui ne doit pas être dans la zone sélectionnée"</figcaption>
 </figure>
 <p>Ci dessus, on peut voir du texte barré en violet. Il ne faut surtout pas que la zone vienne inclure ces bouts de texte ou toute la calibration pourrait rater.</p>
 <p>Ensuite, si vous avez bien fait votre travail, au deuxième clic sur la page, vous aurez quelques secondes de flottement et ensuite, vous devriez avoir les contours que vous avez dessinés affichés en jaune avec pleins de plus petites zones à l'intérieur comme ci-dessous :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-118">
 <a class="glightbox" href="./Images/Manual/DriverZones.png"><img alt="" automatiquement="" avec="" calculées""="" de="" les="" pilotes="" principale="" src="./Images/Manual/DriverZones.png" zone="" zones=""/></a>
-<figcaption>"Zone principale avec les zones de pilotes automatiquement calculées"</figcaption>
+<figcaption>Figure 118 - "Zone principale avec les zones de pilotes automatiquement calculées"</figcaption>
 </figure>
 <p>Le programme a non seulement pris en compte la zone, mais il a aussi détecté automatiquement où se trouvaient les zones de chaque pilote. Si vous n'avez pas un résultat comme celui-là et/ou que les zones ne sont pas bien alignées sur les pilotes sur l'image, je vous conseille de réessayer de créer la zone principale.</p>
 <p>La seconde étape est de montrer où sont les fenêtres d'infos au programme.</p>
 <p>Vous aurez peut-être remarqué qu'en dessous de l'image principale, quand l'affichage jaune a été appliqué, une image est apparue.</p>
 <p>Elle devrait ressembler à quelque chose dans ce style :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-119">
 <a class="glightbox" href="./Images/Manual/DriverZone.png"><img alt="" d'une="" de="" image="" pilote""="" src="./Images/Manual/DriverZone.png" zone=""/></a>
-<figcaption>"Image d'une zone de pilote"</figcaption>
+<figcaption>Figure 119 - "Image d'une zone de pilote"</figcaption>
 </figure>
 <p>C'est une zone de pilote de l'image que l'on voit au-dessus et c'est ici que l'on va indiquer les zones intéressantes.</p>
 <p>Pour ce faire, il faut cliquer sur le bouton "Create Windows" et ce message devrait s'afficher un peu en dessous :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-120">
 <a class="glightbox" href="./Images/Manual/9WindowsRemaining.png"><img ajouter""="" alt="" de="" indiquant="" le="" nombre="" src="./Images/Manual/9WindowsRemaining.png" texte="" windows="" à=""/></a>
-<figcaption>"Texte indiquant le nombre de windows à ajouter"</figcaption>
+<figcaption>Figure 120 - "Texte indiquant le nombre de windows à ajouter"</figcaption>
 </figure>
 <p>Cela nous indique le nombre de fenêtres qu'il nous reste à sélectionner.</p>
 <p>La technique est la même que pour la grande zone sauf que là, il faut le faire neuf fois. Et il faut absolument le faire dans l'ordre de gauche à droite.</p>
 <p>Le but est de tout sélectionner et d'arriver à ce résultat :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-121">
 <a class="glightbox" href="./Images/Manual/Windows.png"><img alt="" de="" découpées""="" exemple="" fenêtres="" src="./Images/Manual/Windows.png"/></a>
-<figcaption>"Exemple de fenêtres découpées"</figcaption>
+<figcaption>Figure 121 - "Exemple de fenêtres découpées"</figcaption>
 </figure>
 <p>Dans l'ordre, de gauche à droite, on veut récupérer :</p>
 <ul>
@@ -668,18 +673,18 @@
 <h4 id="ajout-du-nom-des-pilotes">Ajout du nom des pilotes</h4>
 <p>La dernière info qui manque à notre programme est la liste des pilotes présents.</p>
 <p>On peut interagir avec cette liste ici :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-122">
 <a class="glightbox" href="./Images/Manual/DriverListControls.png"><img alt="" avec="" d'interaction="" de="" la="" liste="" menu="" pilotes""="" src="./Images/Manual/DriverListControls.png"/></a>
-<figcaption>"Menu d'interaction avec la liste de pilotes"</figcaption>
+<figcaption>Figure 122 - "Menu d'interaction avec la liste de pilotes"</figcaption>
 </figure>
 <p>Dans la boite de texte, on peut écrire le nom d'un pilote qui peut être trouvé sur l'image, on peut l'ajouter à la liste et si on a fait une erreur, on peut le retirer.</p>
 <p>Et c'est à peu près tout. Il ne reste maintenant plus qu'à mettre tous les noms.</p>
 <p>TIP : Il peut être intéressant d'ajouter le nom des pilotes de réserve pour éviter de venir changer son preset si un pilote n'est pas présent pour cause de maladie ou de blessure. Il faut simplement faire attention de ne pas non plus mettre trop de noms pour éviter que le programme puisse confondre.</p>
 <p>Et voilà ! On a toutes les infos nécessaires.</p>
 <p>La page de configuration devrait ressembler à ça :</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-123">
 <a class="glightbox" href="./Images/Manual/SettingsReady.png"><img ajouté="" alt="" après="" avoir="" config="" de="" image="" infos""="" la="" les="" page="" src="./Images/Manual/SettingsReady.png" toutes=""/></a>
-<figcaption>"Image de la page de config après avoir ajouté toutes les infos"</figcaption>
+<figcaption>Figure 123 - "Image de la page de config après avoir ajouté toutes les infos"</figcaption>
 </figure>
 <p>Il ne reste plus qu'à le sauvegarder.</p>
 <h4 id="sauvegarder-le-nouveau-preset">Sauvegarder le nouveau Preset</h4>
@@ -688,25 +693,25 @@
 <p>Vous pouvez ainsi utiliser l'application normalement en sélectionnant votre nouveau preset à chaque fois.</p>
 <h3 id="load-un-preset-existant">Load un Preset existant</h3>
 <p>Le loading est un peu spécial. Il faut déjà avoir lancé le navigateur virtuel pour activer les boutons. Ensuite, il suffit de sélectionner un preset et de cliquer sur "Load the Preset" et attendre un petit peu. L'affichage sera un peu bizarre, mais c'est normal, il ne faut pas s'inquiéter si la zone de pilote affichée en dessous est correcte.</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-124">
 <a class="glightbox" href="./Images/Manual/LoadedPreset.png"><img alt="" bizarre="" ce="" de="" et="" exemple="" implique""="" l'affichage="" loading="" peut="" que="" quoi="" ressembler="" src="./Images/Manual/LoadedPreset.png" un="" à="" ça=""/></a>
-<figcaption>"Exemple de ce à quoi peut ressembler un loading et l'affichage bizarre que ça implique"</figcaption>
+<figcaption>Figure 124 - "Exemple de ce à quoi peut ressembler un loading et l'affichage bizarre que ça implique"</figcaption>
 </figure>
 <p>À partir de là, il est facile de faire son propre preset en changeant juste les noms des pilotes par exemple.</p>
 <h2 id="comprendre-les-donnees">Comprendre les données</h2>
 <p>Ici, vous allez apprendre à utiliser l'application et ses données en comprenant à quoi elles servent et comment elles sont affichées.</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-125">
 <a class="glightbox" href="./Images/Manual/Simulation.png"><img alt="" cours="" de="" depuis="" en="" fonctionnement="" image="" l'application="" minutes""="" quelques="" src="./Images/Manual/Simulation.png"/></a>
-<figcaption>"Image de l'application en cours de fonctionnement depuis quelques minutes"</figcaption>
+<figcaption>Figure 125 - "Image de l'application en cours de fonctionnement depuis quelques minutes"</figcaption>
 </figure>
 <p>Il y a 5 types de données :</p>
 <h3 id="overtakes">Overtakes</h3>
 <p>Cette fenêtre est loin d'être complètement opérationnelle, mais elle permet de voir l'historique des dépassements et des changements de position. Il faut scroller pour voir les plus récents.</p>
 <p>Je dirais que pour le moment, c'est la moins intéressante et elle ne fonctionne pas toujours super.</p>
 <h3 id="last-five-laps">Last Five Laps</h3>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-126">
 <a class="glightbox" href="./Images/Manual/LastFiveLAps.png"><img alt="" cinq="" de="" derniers="" des="" fenêtre="" image="" la="" src="./Images/Manual/LastFiveLAps.png" tours""=""/></a>
-<figcaption>"Image de la fenêtre des cinq derniers tours"</figcaption>
+<figcaption>Figure 126 - "Image de la fenêtre des cinq derniers tours"</figcaption>
 </figure>
 <p>En total contraste avec la fenêtre Overtakes, ici, on a peut-être la fenêtre la plus intéressante de toutes.</p>
 <p>On peut voir les pilotes actuellement les plus rapides et plus lents sur le circuit. Le calcul est fait sur la moyenne des cinq derniers tours de chaque pilote. Cela permet de se faire une idée de la situation des pilotes.</p>
@@ -714,9 +719,9 @@
 <p>Il est par exemple intéressant de voir la différence de vitesse entre les pneus secs et pluie sur un circuit qui commence à sécher. On peut progressivement voir les pilotes en pneus secs devenir de plus en plus rapides alors que ce sont des pilotes beaucoup moins rapide en temps normal.</p>
 <p>On peut cliquer sur n'importe lequel de ces pilotes pour voir ses infos apparaître dans la fenêtre Driver Infos pour voir les cinq derniers tours par exemple ou les pneus qu'il est en train de chausser.</p>
 <h3 id="battles">Battles</h3>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-127">
 <a class="glightbox" href="./Images/Manual/Battles.png"><img alt="" batailles""="" des="" fenêtre="" src="./Images/Manual/Battles.png"/></a>
-<figcaption>"Fenêtre des batailles"</figcaption>
+<figcaption>Figure 127 - "Fenêtre des batailles"</figcaption>
 </figure>
 <p>Cette fenêtre est également assez intéressante, car elle permet de voir les pilotes qui sont en train de se battre. Il est estimé qu'un pilote qui se bat est un pilote qui est à trois secondes ou moins du pilote devant lui.</p>
 <p>Ne sont affichées que les batailles de quatre pilotes maximums dans l'ordre du classement.</p>
@@ -726,22 +731,22 @@ Dans la zone du DRS (Une seconde ou moins) il est écrit en vert.</p>
 <p>On peut aussi cliquer sur le nom d'un pilote pour afficher ses infos dans la fenêtre des infos pilote.</p>
 <p>Cette fenêtre permet de mieux comprendre qui sont les pilotes qu'il faut garder à l'œil à la TV ou simplement qui sont les pilotes qui sont très proches et qui pourraient se mettre la pression pour les arrêts aux stands, car jamais un pilote ne reste à moins de trois secondes d'un autre si ça n'est pas pour tenter quelque chose au niveau stratégique.</p>
 <h3 id="driver-infos">Driver infos</h3>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-128">
 <a class="glightbox" href="./Images/Manual/DriverInfos.png"><img alt="" des="" fenêtre="" infos="" pilote""="" src="./Images/Manual/DriverInfos.png"/></a>
-<figcaption>"Fenêtre des infos pilote"</figcaption>
+<figcaption>Figure 128 - "Fenêtre des infos pilote"</figcaption>
 </figure>
 <p>Ici, on peut voir toutes les infos lives d'un pilote.</p>
 <p>Rien de fou à dire sur la partie de gauche, par contre la partie de droite est un peu plus intéressante, car elle contient un historique de ses cinq derniers tours (dans la photo, il n'y en a qu'un seul, mais au fur et à mesure de la course cela se remplit).</p>
 <p>On peut non seulement voir les cinq derniers temps au tour, mais on peut aussi cliquer sur chacun d'eux pour voir les secteurs associés.</p>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-129">
 <a class="glightbox" href="./Images/Manual/LapInfos.png"><img alt="" au="" d'affichage="" d'un="" des="" exemple="" secteurs="" src="./Images/Manual/LapInfos.png" temps="" tour""=""/></a>
-<figcaption>"Exemple d'affichage des secteurs d'un temps au tour"</figcaption>
+<figcaption>Figure 129 - "Exemple d'affichage des secteurs d'un temps au tour"</figcaption>
 </figure>
 <p>;</p>
 <h3 id="live-ranking">Live Ranking</h3>
-<figure class="figure-image">
+<figure class="figure-image" id="figure-130">
 <a class="glightbox" href="./Images/Manual/LiveRanking.png"><img alt="" classement="" direct""="" du="" en="" fenêtre="" src="./Images/Manual/LiveRanking.png"/></a>
-<figcaption>"Fenêtre du classement en direct"</figcaption>
+<figcaption>Figure 130 - "Fenêtre du classement en direct"</figcaption>
 </figure>
 <p>Ceci est la fenêtre la plus simple. C'est tout bêtement le classement actuel avec les écarts avec le leader.</p>
 <p>Note : On peut également cliquer sur les différents pilotes pour en afficher les infos dans la fenêtre infos pilote.</p>