Doc: Exemple du mailleur de delaunay

[svganimation.git] / doc / page.md

diff --git a/doc/page.md b/doc/page.md
index d227dad..5fbb551 100644 (file)
--- a/doc/page.md
+++ b/doc/page.md
@@ -222,11 +222,12 @@ Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant
 justement le chargement de l'animation...
 
 ~~~~~~~ { .html }
-<div id="anim2"
-  style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
- <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
+<div id="anim2" style="...">
+ <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="..."/>
  <div class="message" id="anim2_message">Ellipsographe</div>
- <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
+ <div id="anim2_boutons">
+   <button onclick="charge_anim2();">Charger l'animation</button>
+ </div>
 </div>
 ~~~~~~~
 
@@ -363,7 +364,7 @@ player.connect();
   }
 </script>
 
-<div id="anim3"  style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
+<div id="anim3" style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
   <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
   <div class="message" id="anim3_message">Ellipsographe</div>
   <div id="anim3_boutons"><button onclick="charge_anim3()">Charger l'animation</button></div>
@@ -374,3 +375,39 @@ Le fichier `SVGPlayerOne.js` est fourni à la racine du projet SVGAnimation.
 
 
 ## Exemples d'utilisation
+
+<div class="row">
+<div class="col-md-4">
+<a href="//melusine.eu.org/syracuse/G/svganimation-exemples/mvtretrograde/"
+alt="lien vers l'exemple"><img src="img/mvtretrograde.png"
+alt="Image de l'exemple" style="width: 100%;"/></a>
+</div>
+<div class="col-md-8">
+Animation  avec le *player* `SVGPlayerButtons` et une factorisation
+avec MetaPost du matériel qui se répète sur chaque image. Le fond
+est mis en *background* de la balise englobante, permettant ainsi
+d'alléger l'animation.
+</div>
+</div>
+
+<div class="row">
+<div class="col-md-4">
+<a href="//melusine.eu.org/syracuse/G/svganimation-exemples/delaunay/"
+alt="lien vers l'exemple"><img src="img/delaunay.png"
+alt="Image de l'exemple" style="width: 100%;"/></a>
+</div>
+<div class="col-md-8">
+Fabrication de l'animation à partir d'un fichier PDF transformé en
+fichiers SVG grâce au programme `pdf2svg`.
+
+Animation avec le *player* `SVGPlayerButtons`. L'animation est une
+animation de construction d'un maillage, le contrôle se fait donc
+image par image.
+
+Le player est donc paramétré pour n'afficher que les boutons de
+*début* et *fin* d'animation, ainsi que l'avance et le recule *image
+par image*.
+
+L'affichage des boutons est personnalisé grâce à du code CSS.
+</div>
+</div>