Doc: Exemple du mailleur de delaunay

[svganimation.git] / doc / page.md

diff --git a/doc/page.md b/doc/page.md
index 8aed0b1..5fbb551 100644 (file)
--- a/doc/page.md
+++ b/doc/page.md
@@ -1,10 +1,25 @@
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

 <script type="text/javascript" src="../SVGAnimation.js"></script>
 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
 <script type="text/javascript">
   function charge(i,p,a,b) {
     var anim = new Animation(i,p,a,b);
     anim.loopOnload();
 <script type="text/javascript" src="../SVGAnimation.js"></script>
 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
 <script type="text/javascript">
   function charge(i,p,a,b) {
     var anim = new Animation(i,p,a,b);
     anim.loopOnload();

+    var player = new Controle(anim);
+    player.connect();

   }
   }

+  function charge_anim2() {
+    var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91);
+    a.loopOnload();
+    var b = new Controle(a);
+    b.connect();
+  }
+  $(window).load(function() {
+    anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
+    anim.loopOnload();
+    player = new Controle(anim);
+    player.connect();
+    });

 </script>
 
 
 </script>
 
 


@@ -19,33 +34,380 @@ constitué à partir de l'exploration de différents scénarios de
 présentation de ces animations et des modes de construction des fichiers
 SVG.
 
 présentation de ces animations et des modes de construction des fichiers
 SVG.
 

+<div class="alert alert-warning">
+<p>Les différents exemples se chargent en cliquant sur le bouton
+dédié. Ceci **n'est pas** le comportement par défaut, c'est du code
+JavaScript qui permettra de choisir quand l'animation se charge. Il
+s'agit
+d'éviter de charger toutes les animations présentes sur cette page,
+cela serait bien trop lourd.</p>
+<p>Nous présentons, dans la section <a
+href="#chargement-différé">Chargement différé</a>, le code qui permet de
+charger l'animation sur demande.</p>
+</div>
+

 ## Installation
 
 ## Installation
 

-Le fichier `SVGAnimation.js` (que l'on supposera dans le répertoire `js`) est à charger dans la page `html` en mettant les lignes suivantes :
+Le fichier `SVGAnimation.js` (que l'on supposera dans un répertoire
+nommé `js`) est à charger dans la page `html` en mettant les lignes
+suivantes :

 
 

-       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

     <script type="text/javascript" src="js/SVGAnimation.js"></script>
 
     <script type="text/javascript" src="js/SVGAnimation.js"></script>
 

-La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger charger cette bibliothèque JavaScript avant. 

 
 

-## L'objet `Animation`
+## Principe
+
+Le principe est simple : on dispose d'un ensemble d'images au format
+SVG qui constituent, par une suite chronologique, une animation à
+visionner. La libraire `SVGAnimation` permet de visionner cette
+animation dans une page HTML grâce à JavaScript.
+
+### La famille d'images
+
+Les différentes images composant l'animation doivent se nommer avec un
+*prefixe* suivi d'un nombre (indice), celui-ci pouvant être
+formater de différente façons :
+
+    monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...
+
+ou, autre exemple :
+
+    monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...
+
+Nous verrons comment gérer le formatage de l'indice des images dans
+les sections suivantes.
+
+<div class="alert alert-info">
+<p>L'idée d'une telle librairie est venue du fait que le logiciel
+MetaPost permet de produire des images SVG, et nous l'utilisons
+abondamment pour la production d'animations.</p>
+</div>
+
+
+## L'utilisation
+
+### Côté HTML
+
+La librairie `SVGAnimation` définit le *prototype* javascript
+`Animation`. Pour l'utiliser il faut déclarer une balise HTML `div`
+avec un identifiant (`id`) unique. Choisissons pour l'exemple `XXXX`.
+À l'intérieur de ces balises, il
+faut&#8239;:
+
+* une balise `img` contenant un image `svg` qui servira de vignette à
+  l'animation;
+* une balise `div` avec l'identifiant `id="XXXX_message"` où `XXXX` est
+  l'identifiant de la balise englobante. Dans cette balise *message*,
+  on y met, si on le souhaite, un message à afficher avant le
+  chargement de l'animation;
+* une balise `div` avec l'identifiant `id="XXXX_boutons"`.
+
+
+En supposant que les images SVG se trouvent dans un répertoire nommé
+`svg`, voici un exemple d'une telle structure :
+
+~~~~~~~ { .html }
+<div id="anim1">
+  <img src="svg/ellipsographe-1.svg" alt="animation1"/>
+  <div class="message" id="anim1_message">Chargement</div>
+  <div id="anim1_boutons"></div>
+</div>
+~~~~~~~
+
+### Côté JavaScript
+
+Une fois qu'on a la structure HTML présentée ci-dessus, il est
+nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation
+de se jouer.
+
+#### Construire l'objet `Animation`
+
+Le *constructeur* du prototype JavaScript s'utilise, pour l'exemple
+donné à la section précédente, de la façon
+suivante :
+
+~~~~~~~ { .javascript }
+var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+anim.loopOnload();
+~~~~~~~
+
+`XXXX` est l'identifiant de la balise `div` HTML *englobante*,
+`svg/ellipsographe-` est le préfixe dont on a parlé plus haut, `1` est
+l'indice de la première image à animer, et `91` l'indice de la
+dernière.
+
+`anim.loopOnload()` permet le chargement de l'animation.
+
+Une fois celle-ci chargée, il faut en permettre la lecture qui se fait
+grâce à un nouvel objet nommé `Controle`. Ce contrôle s'utilise en
+fait comme ceci :
+
+~~~~~~~ { .javascript }
+var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+anim.loopOnload();
+var player = new Controle(anim);
+player.connect();
+~~~~~~~
+
+Nous verrons par la suite comment personnaliser le contrôle de la
+lecture de l'animation.
+
+Tout ceci n'est toujours pas suffisant car il faut exécuter ce code
+JavaScript. Ceci peut être fait grâce à `JQuery` par exemple, en
+exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
+
+~~~~~~~ { .javascript }
+$(window).load(function() {
+    var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+    anim.loopOnload();
+    var player = new Controle(anim);
+    player.connect();
+});
+~~~~~~~
+
+Bien sûr, ceci nécessite le chargement, dans la page HTML, de la
+librairie `JQuery`.
+
+
+
+
+
+#### Le résultat
+
+Tout ceci donne le code suivant
+
+~~~~~~~ { .html }
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+<script type="text/javascript" src="../SVGAnimation.js"></script>
+<script type="text/javascript">
+$(window).load(function() {
+    var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+    anim.loopOnload();
+    var player = new Controle(anim);
+    player.connect();
+});
+</script>
+<!--[...]-->
+<div id="XXXX">
+  <img src="svg/ellipsographe-1.svg" alt="animation1"/>
+  <div class="message" id="XXXX_message">Chargement...</div>
+  <div id="XXXX_boutons"></div>
+</div>
+~~~~~~~
+
+dont l'affichage est :
+
+<div id="XXXX">
+  <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
+  <div class="message" id="XXXX_message">Chargement...</div>
+  <div id="XXXX_boutons"></div>
+</div>
+
+
+#### Chargement différé
+
+On peut laisser le chargement d'une animation à la demande en créant une
+fonction Javascript.

 
 

-<div id="anim1" style="margin:10px auto;padding:10px;width:660px;border:2px solid #AAA;border-radius:4px">
-  <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:660px;height:480px"/>
-  <div class="message" id="anim1_message">Ellipsographe</div>
-  <div id="anim1_boutons"><button onclick="charge('anim1','../ellipsographe/svg/ellipsographe-',1,91);">Charger l'animation</button></div>
+~~~~~~~ { .javascript }
+function charge_anim2() {
+  var a = new Animation('anim2','svg/ellipsographe-',1,91);
+  a.loopOnload();
+  var b = new Controle(a);
+  b.connect();
+}
+~~~~~~~
+
+Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant
+justement le chargement de l'animation...
+
+~~~~~~~ { .html }
+<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>
+~~~~~~~
+
+Dans le même temps, le *style* des éléments englobants a été adapté.
+
+<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 class="message" id="anim2_message">Ellipsographe</div>
+  <div id="anim2_boutons"><button onclick="charge_anim2()">Charger l'animation</button></div>

 </div>
 
 
 
 ### Les paramètres
 
 </div>
 
 
 
 ### Les paramètres
 

+L'objet `Animation` ne possède que deux propriétés configurables, autres
+que celles (4) qui lui sont passées en argument.
+
+&bull; **delai** *(valeur par défaut : 50)* &mdash; C'est la durée, en millisecondes, entre deux images.
+
+~~~{.javascript}
+var a = new Animation('anim','svg/pre',1,100);
+a.delai = 200;
+a.loopOnload();
+~~~
+Ceci fixera le défilement à 5 images/s. Un *player* comme ceux que nous vous proposons ci-dessous peut
+modifier cette valeur.
+
+&bull; **pad** *(valeur par défaut : 0)* &mdash; Ce paramètre n'a d'effet
+que s'il est supérieur ou égal à 2, il permet de fixer la longueur des
+index des images en complétant avec des 0.
+
+~~~{.javascript}
+var a = new Animation('anim','svg/pre',1,100);
+a.pad = 3;
+a.loopOnload();
+~~~
+Les images chargées seront, successivement, `svg/pre001.svg`, `svg/pre002.svg`, ..., `svg/pre100.svg`.
+

 ## Les *players*
 
 ## Les *players*
 

+Le fichier `SVGAnimation.js` contient le constructeur `Controle` qui est
+la base des *players*. S'il est invoqué directement, il fournit un
+contrôle *simpliste* de l'animation, comme cela a été vu
+[ci-dessus](#côté-javascript).
+

 ### `SVGPlayerOne.js`
 
 ### `SVGPlayerOne.js`
 

-### `SVGPlayerButtons.js`
+Pour utiliser un *player* plus *sophistiqué*, il faut surcharger la
+méthode `Initialisation` de l'objet `Controle`. Pour plus de détails
+sur les *players*, nous vous invitons à consulter la page dédiée.
+
+L'idée que nous présentons ici est de construire un objet JavaScript
+qui mettra des boutons de contrôle (lecture, stop, etc.).
+
+Ceci peut se faire de la façon suivante :
+
+~~~~~~~ { .javascript }
+function SVGPlayerOne(a) { // déclaration de l'objet
+  Controle.call(this,a); // construit à partir de l'objet Controle
+  SVGPlayerOne.prototype.connect = Controle.prototype.connect // et de
+  // la méthode connect du Controle
+}
+~~~~~~~

 
 

+Une fois déclaré un tel objet, il suffit de surcharger la méthode
+`Initialisation` de l'objet `Controle` fourni dans `SVGAnimation.js`.
+Dans l'exemple ci-dessous, on « vide » la `div` `XXXX_message`, et on
+ajoute des boutons à la `div` `XXXX_boutons` qui réagissent aux
+`onclick` pour lancer les fonctions JavaScript adéquates définies dans
+le fichier `SVGAnimation.js`.

 
 

+~~~~~~~ { .javascript }
+// Surcharge de la méthode [Initialisation]
+SVGPlayerOne.prototype.Initialisation = function() {
+  var a = this.a; // l'animation courante
+  var self = this.me; // le player
+  a.image.style.display = 'inline';
+  a.message.parentNode.removeChild(a.message); // on supprime la
+      //balise d'id=XXXX_message
+  var play = document.createElement('button'); // on crée un bouton
+  play.className = "SVGplay playBtn"; // ajout de classe pour le style
+  play.innerHTML = "Play"; // on y met du texte
+  play.onclick = function(){a.action = true; a.rotate(self.a)}; // on
+      // associe une fonction JS
+  // on recommence
+  var stop = document.createElement('button');
+  stop.className = "SVGplay stopBtn";
+  stop.innerHTML = "Stop";
+  stop.onclick = function(){a.action = false;};
+  var debut = document.createElement('button');
+  debut.className = "SVGplay debutBtn";
+  debut.innerHTML = "Début";
+  debut.onclick = function(){a.action = false; a.first(self.a)};
+  var fin = document.createElement('button');
+  fin.className = "SVGplay finBtn";
+  fin.innerHTML = "Fin";
+  fin.onclick = function(){a.action = false; a.last(self.a)};
+  var moins = document.createElement('button');
+  moins.className = "SVGplay moinsBtn";
+  moins.innerHTML = "-";
+  moins.onclick = function(){a.delai = a.delai > 2000 ? 2000 : a.delai * 1.414};
+  var plus = document.createElement('button');
+  plus.className = "SVGplay plusBtn";
+  plus.innerHTML = "+";
+  plus.onclick = function(){a.delai = a.delai < 30 ? 30 : a.delai / 1.414};
+  // placement des boutons
+  a.boutons.appendChild(play);
+  a.boutons.appendChild(stop);
+  a.boutons.appendChild(debut);
+  a.boutons.appendChild(fin);
+  a.boutons.appendChild(moins);
+  a.boutons.appendChild(plus);
+}
+~~~~~~~

 
 

+Un fois déclaré tout ceci (le mieux étant dans un fichier externe), on
+associe le *player* `SVGPlayerOne` à l'animation de la même façon que
+le *player* `Controle` :

 
 

+~~~~~~~ { .javascript }
+var anim = new Animation('anim2','svg/ellipsographe-',1,91);
+anim.loopOnload();
+var player = new SVGPlayerOne(anim);
+player.connect();
+~~~~~~~
+
+<script type="text/javascript">
+  function charge_anim3() {
+    var anim = new Animation('anim3','../ellipsographe/svg/ellipsographe-',1,91);
+    anim.loopOnload();
+    var player = new SVGPlayerOne(anim);
+    player.connect();
+  }
+</script>
+
+<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>
+</div>
+
+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>