Doc: Explications pour exemple de player (SVGPlayerOne)

[svganimation.git] / doc / page.md

diff --git a/doc/page.md b/doc/page.md
index 9f57802..d227dad 100644 (file)
--- a/doc/page.md
+++ b/doc/page.md
@@ -35,7 +35,7 @@ présentation de ces animations et des modes de construction des fichiers
 SVG.
 
 <div class="alert alert-warning">
-<p>Les différents exemples se charge en cliquant sur le bouton
+<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
@@ -275,6 +275,102 @@ contrôle *simpliste* de l'animation, comme cela a été vu
 
 ### `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