Doc: Explications pour exemple de player (SVGPlayerOne)

diff --git a/doc/page.html b/doc/page.html
index ae62e50..ddd3932 100644 (file)
--- a/doc/page.html
+++ b/doc/page.html
@@ -27,7 +27,7 @@
 <p>L'objectif est de développer, en particulier, du code Javascript afin de présenter des animations de fichiers SVG produits, en particulier, par MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera constitué à partir de l'exploration de différents scénarios de présentation de ces animations et des modes de construction des fichiers SVG.</p>
 <div class="alert alert-warning">
 <p>
-Les différents exemples se charge en cliquant sur le bouton dédié. Ceci <strong>n'est pas</strong> 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.
+Les différents exemples se chargent en cliquant sur le bouton dédié. Ceci <strong>n'est pas</strong> 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
@@ -156,7 +156,81 @@ Charger l'animation
 <h2 id="les-players">Les <em>players</em></h2>
 <p>Le fichier <code>SVGAnimation.js</code> contient le constructeur <code>Controle</code> qui est la base des <em>players</em>. S'il est invoqué directement, il fournit un contrôle <em>simpliste</em> de l'animation, comme cela a été vu <a href="#côté-javascript">ci-dessus</a>.</p>
 <h3 id="svgplayerone.js"><code>SVGPlayerOne.js</code></h3>
-<h3 id="svgplayerbuttons.js"><code>SVGPlayerButtons.js</code></h3>
+<p>Pour utiliser un <em>player</em> plus <em>sophistiqué</em>, il faut surcharger la méthode <code>Initialisation</code> de l'objet <code>Controle</code>. Pour plus de détails sur les <em>players</em>, nous vous invitons à consulter la page dédiée.</p>
+<p>L'idée que nous présentons ici est de construire un objet JavaScript qui mettra des boutons de contrôle (lecture, stop, etc.).</p>
+<p>Ceci peut se faire de la façon suivante :</p>
+<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">SVGPlayerOne</span>(a) <span class="op">{</span> <span class="co">// déclaration de l&#39;objet</span>
+  <span class="va">Controle</span>.<span class="at">call</span>(<span class="kw">this</span><span class="op">,</span>a)<span class="op">;</span> <span class="co">// construit à partir de l&#39;objet Controle</span>
+  <span class="va">SVGPlayerOne</span>.<span class="va">prototype</span>.<span class="at">connect</span> <span class="op">=</span> <span class="va">Controle</span>.<span class="va">prototype</span>.<span class="at">connect</span> <span class="co">// et de</span>
+  <span class="co">// la méthode connect du Controle</span>
+<span class="op">}</span></code></pre></div>
+<p>Une fois déclaré un tel objet, il suffit de surcharger la méthode <code>Initialisation</code> de l'objet <code>Controle</code> fourni dans <code>SVGAnimation.js</code>. Dans l'exemple ci-dessous, on « vide » la <code>div</code> <code>XXXX_message</code>, et on ajoute des boutons à la <code>div</code> <code>XXXX_boutons</code> qui réagissent aux <code>onclick</code> pour lancer les fonctions JavaScript adéquates définies dans le fichier <code>SVGAnimation.js</code>.</p>
+<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// Surcharge de la méthode [Initialisation]</span>
+<span class="va">SVGPlayerOne</span>.<span class="va">prototype</span>.<span class="at">Initialisation</span> <span class="op">=</span> <span class="kw">function</span>() <span class="op">{</span>
+  <span class="kw">var</span> a <span class="op">=</span> <span class="kw">this</span>.<span class="at">a</span><span class="op">;</span> <span class="co">// l&#39;animation courante</span>
+  <span class="kw">var</span> self <span class="op">=</span> <span class="kw">this</span>.<span class="at">me</span><span class="op">;</span> <span class="co">// le player</span>
+  <span class="va">a</span>.<span class="va">image</span>.<span class="va">style</span>.<span class="at">display</span> <span class="op">=</span> <span class="st">&#39;inline&#39;</span><span class="op">;</span>
+  <span class="va">a</span>.<span class="va">message</span>.<span class="va">parentNode</span>.<span class="at">removeChild</span>(<span class="va">a</span>.<span class="at">message</span>)<span class="op">;</span> <span class="co">// on supprime la</span>
+      <span class="co">//balise d&#39;id=XXXX_message</span>
+  <span class="kw">var</span> play <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span> <span class="co">// on crée un bouton</span>
+  <span class="va">play</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay playBtn&quot;</span><span class="op">;</span> <span class="co">// ajout de classe pour le style</span>
+  <span class="va">play</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;Play&quot;</span><span class="op">;</span> <span class="co">// on y met du texte</span>
+  <span class="va">play</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">true</span><span class="op">;</span> <span class="va">a</span>.<span class="at">rotate</span>(<span class="va">self</span>.<span class="at">a</span>)<span class="op">};</span> <span class="co">// on</span>
+      <span class="co">// associe une fonction JS</span>
+  <span class="co">// on recommence</span>
+  <span class="kw">var</span> stop <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span>
+  <span class="va">stop</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay stopBtn&quot;</span><span class="op">;</span>
+  <span class="va">stop</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;Stop&quot;</span><span class="op">;</span>
+  <span class="va">stop</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">false</span><span class="op">;};</span>
+  <span class="kw">var</span> debut <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span>
+  <span class="va">debut</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay debutBtn&quot;</span><span class="op">;</span>
+  <span class="va">debut</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;Début&quot;</span><span class="op">;</span>
+  <span class="va">debut</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">false</span><span class="op">;</span> <span class="va">a</span>.<span class="at">first</span>(<span class="va">self</span>.<span class="at">a</span>)<span class="op">};</span>
+  <span class="kw">var</span> fin <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span>
+  <span class="va">fin</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay finBtn&quot;</span><span class="op">;</span>
+  <span class="va">fin</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;Fin&quot;</span><span class="op">;</span>
+  <span class="va">fin</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">false</span><span class="op">;</span> <span class="va">a</span>.<span class="at">last</span>(<span class="va">self</span>.<span class="at">a</span>)<span class="op">};</span>
+  <span class="kw">var</span> moins <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span>
+  <span class="va">moins</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay moinsBtn&quot;</span><span class="op">;</span>
+  <span class="va">moins</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;-&quot;</span><span class="op">;</span>
+  <span class="va">moins</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">delai</span> <span class="op">=</span> <span class="va">a</span>.<span class="at">delai</span> <span class="op">&gt;</span> <span class="dv">2000</span> <span class="op">?</span> <span class="dv">2000</span> : <span class="va">a</span>.<span class="at">delai</span> <span class="op">*</span> <span class="fl">1.414</span><span class="op">};</span>
+  <span class="kw">var</span> plus <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span>
+  <span class="va">plus</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay plusBtn&quot;</span><span class="op">;</span>
+  <span class="va">plus</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;+&quot;</span><span class="op">;</span>
+  <span class="va">plus</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">delai</span> <span class="op">=</span> <span class="va">a</span>.<span class="at">delai</span> <span class="op">&lt;</span> <span class="dv">30</span> <span class="op">?</span> <span class="dv">30</span> : <span class="va">a</span>.<span class="at">delai</span> / <span class="fl">1.414</span><span class="op">};</span>
+  <span class="co">// placement des boutons</span>
+  <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(play)<span class="op">;</span>
+  <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(stop)<span class="op">;</span>
+  <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(debut)<span class="op">;</span>
+  <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(fin)<span class="op">;</span>
+  <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(moins)<span class="op">;</span>
+  <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(plus)<span class="op">;</span>
+<span class="op">}</span></code></pre></div>
+<p>Un fois déclaré tout ceci (le mieux étant dans un fichier externe), on associe le <em>player</em> <code>SVGPlayerOne</code> à l'animation de la même façon que le <em>player</em> <code>Controle</code> :</p>
+<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> anim <span class="op">=</span> <span class="kw">new</span> <span class="at">Animation</span>(<span class="st">&#39;anim2&#39;</span><span class="op">,</span><span class="st">&#39;svg/ellipsographe-&#39;</span><span class="op">,</span><span class="dv">1</span><span class="op">,</span><span class="dv">91</span>)<span class="op">;</span>
+<span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
+<span class="kw">var</span> player <span class="op">=</span> <span class="kw">new</span> <span class="at">SVGPlayerOne</span>(anim)<span class="op">;</span>
+<span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span></code></pre></div>
+<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 id="anim3_message" class="message">
+Ellipsographe
+</div>
+<div id="anim3_boutons">
+<button onclick="charge_anim3()">
+Charger l'animation
+</button>
+</div>
+</div>
+<p>Le fichier <code>SVGPlayerOne.js</code> est fourni à la racine du projet SVGAnimation.</p>
 <h2 id="exemples-dutilisation">Exemples d'utilisation</h2>
 </div>
 <div id="TDM" class="tdm">
@@ -175,7 +249,6 @@ Charger l'animation
  </ul></li>
  <li><a href="#les-players">Les <em>players</em></a><ul>
  <li><a href="#svgplayerone.js"><code>SVGPlayerOne.js</code></a></li>
- <li><a href="#svgplayerbuttons.js"><code>SVGPlayerButtons.js</code></a></li>
  </ul></li>
  <li><a href="#exemples-dutilisation">Exemples d'utilisation</a></li>
  </ul>

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