From bb8183de3ce11f4e748684fc8346dd39c5793628 Mon Sep 17 00:00:00 2001 From: "Maxime Chupin (Ceremade)" Date: Tue, 15 Nov 2016 17:17:30 +0100 Subject: [PATCH] Doc: Explications pour exemple de player (SVGPlayerOne) --- doc/page.html | 79 +++++++++++++++++++++++++++++++++++++-- doc/page.md | 100 +++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 174 insertions(+), 5 deletions(-) diff --git a/doc/page.html b/doc/page.html index ae62e50..ddd3932 100644 --- a/doc/page.html +++ b/doc/page.html @@ -27,7 +27,7 @@

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.

-Les différents exemples se charge 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. +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.

Nous présentons, dans la section 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.

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 :

+
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.

+
// 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 :

+
var anim = new Animation('anim2','svg/ellipsographe-',1,91);
+anim.loopOnload();
+var player = new SVGPlayerOne(anim);
+player.connect();
+ +
+animation1 +
+Ellipsographe +
+
+ +
+
+

Le fichier SVGPlayerOne.js est fourni à la racine du projet SVGAnimation.

Exemples d'utilisation

@@ -175,7 +249,6 @@ Charger l'animation
  • Les players
  • Exemples d'utilisation
    • diff --git a/doc/page.md b/doc/page.md index 9f57802..d227dad 100644 --- 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.
    -

    Les différents exemples se charge en cliquant sur le bouton +

    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(); +~~~~~~~ + + + +

    + animation1 +
    Ellipsographe
    +
    +
    + +Le fichier `SVGPlayerOne.js` est fourni à la racine du projet SVGAnimation. + + ## Exemples d'utilisation -- 2.20.1