doc/page.md

   1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
   2 <script type="text/javascript" src="../SVGAnimation.js"></script>
   3 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
   4 <script type="text/javascript">
   5   function charge(i,p,a,b) {
   6     var anim = new Animation(i,p,a,b);
   7     anim.loopOnload();
   8     var player = new Controle(anim);
   9     player.connect();
  10   }
  11   function charge_anim2() {
  12     var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91);
  13     a.loopOnload();
  14     var b = new Controle(a);
  15     b.connect();
  16   }
  17   $(window).load(function() {
  18     anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
  19     anim.loopOnload();
  20     player = new Controle(anim);
  21     player.connect();
  22     });
  23 </script>
  24
  25
  26 **Participants :** Chupin Maxime, Sarlat Jean-Michel.
  27
  28 **Interface du dépôt Git :** <http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary>
  29
  30 L'objectif est de développer, en particulier, du code Javascript afin de
  31 présenter des animations de fichiers SVG produits, en particulier, par
  32 MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera
  33 constitué à partir de l'exploration de différents scénarios de
  34 présentation de ces animations et des modes de construction des fichiers
  35 SVG.
  36
  37 <div class="alert alert-warning">
  38 <p>Les différents exemples se charge en cliquant sur le bouton
  39 dédié. Ceci **n'est pas** le comportement par défaut, c'est du code
  40 JavaScript qui permettra de choisir quand l'animation se charge. Il
  41 s'agit
  42 d'éviter de charger toutes les animations présentes sur cette page,
  43 cela serait bien trop lourd.</p>
  44 <p>Nous présentons, dans la section XX, le code qui permet de charger
  45 l'animation sur demande.</p>
  46 </div>
  47
  48 ## Installation
  49
  50 Le fichier `SVGAnimation.js` (que l'on supposera dans un répertoire
  51 nommé `js`) est à charger dans la page `html` en mettant les lignes
  52 suivantes :
  53
  54     <script type="text/javascript" src="js/SVGAnimation.js"></script>
  55
  56
  57 ## Principe
  58
  59 Le principe est simple : on dispose d'un ensemble d'images au format
  60 SVG qui constituent, par une suite chronologique, une animation à
  61 visionner. La libraire `SVGAnimation` permet de visionner cette
  62 animation dans une page HTML grâce à JavaScript.
  63
  64 ### La famille d'images
  65
  66 Les différentes images composant l'animation doivent se nommer avec un
  67 *prefixe* suivi d'un nombre (indice), celui-ci pouvant être
  68 formater de différente façons :
  69
  70     monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...
  71
  72 ou, autre exemple :
  73
  74     monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...
  75
  76 Nous verrons comment gérer le formatage de l'indice des images dans
  77 les sections suivantes.
  78
  79 <div class="alert alert-info">
  80 <p>L'idée d'une telle librairie est venue du fait que le logiciel
  81 MetaPost permet de produire des images SVG, et nous l'utilisons
  82 abondamment pour la production d'animations.</p>
  83 </div>
  84
  85
  86 ## L'utilisation
  87
  88 ### Côté HTML
  89
  90 La librairie `SVGAnimation` définit le *prototype* javascript
  91 `Animation`. Pour l'utiliser il faut déclarer une balise HTML `div`
  92 avec un identifiant (`id`) unique. Choisissons pour l'exemple `XXXX`.
  93 À l'intérieur de ces balises, il
  94 faut :
  95 * une balise `img` contenant un image `svg` qui servira de vignette à
  96   l'animation;
  97 * une balise `div` avec l'identifiant `id="XXXX_message"` où `XXXX` est
  98   l'identifiant de la balise englobante. Dans cette balise *message*,
  99   on y met, si on le souhaite, un message à afficher avant le
 100   chargement de l'animation;
 101 * une balise `div` avec l'identifiant `id="XXXX_boutons"`.
 102
 103
 104 En supposant que les images SVG se trouvent dans un répertoire nommé
 105 `svg`, voici un exemple d'une telle structure :
 106
 107 ~~~~~~~ { .html }
 108 <div id="anim1">
 109   <img src="svg/ellipsographe-1.svg" alt="animation1"/>
 110   <div class="message" id="anim1_message">Chargement</div>
 111   <div id="anim1_boutons"></div>
 112 </div>
 113 ~~~~~~~
 114
 115 ### Côté JavaScript
 116
 117 Une fois qu'on a la structure HTML présentée ci-dessus, il est
 118 nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation
 119 de se jouer.
 120
 121 #### Construire l'objet `Animation`
 122
 123 Le *constructeur* du prototype JavaScript s'utilise, pour l'exemple
 124 donné à la section précédente, de la façon
 125 suivante :
 126
 127 ~~~~~~~ { .javascript }
 128 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 129 anim.loopOnload();
 130 ~~~~~~~
 131
 132 `XXXX` est l'identifiant de la balise `div` HTML *englobante*,
 133 `svg/ellipsographe-` est le préfixe dont on a parlé plus haut, `1` est
 134 l'indice de la première image à animer, et `91` l'indice de la
 135 dernière.
 136
 137 `anim.loopOnload()` permet le chargement de l'animation.
 138
 139 Une fois celle-ci chargée, il faut en permettre la lecture qui se fait
 140 grâce à un nouvel objet nommé `Controle`. Ce contrôle s'utilise en
 141 fait comme ceci :
 142
 143 ~~~~~~~ { .javascript }
 144 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 145 anim.loopOnload();
 146 var player = new Controle(anim);
 147 player.connect();
 148 ~~~~~~~
 149
 150 Nous verrons par la suite comment personnaliser le contrôle de la
 151 lecture de l'animation.
 152
 153 Tout ceci n'est toujours pas suffisant car il faut exécuter ce code
 154 JavaScript. Ceci peut être fait grâce à `JQuery` par exemple, en
 155 exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
 156
 157 ~~~~~~~ { .javascript }
 158 $(window).load(function() {
 159     var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 160     anim.loopOnload();
 161     var player = new Controle(anim);
 162     player.connect();
 163 });
 164 ~~~~~~~
 165
 166 Bien sûr, ceci nécessite le chargement, dans la page HTML, de la
 167 librairie `JQuery`.
 168
 169
 170
 171
 172
 173 #### Le résultat
 174
 175 Tout ceci donne le code suivant
 176
 177 ~~~~~~~ { .html }
 178 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 179 <script type="text/javascript" src="../SVGAnimation.js"></script>
 180 <script type="text/javascript">
 181 $(window).load(function() {
 182     var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 183     anim.loopOnload();
 184     var player = new Controle(anim);
 185     player.connect();
 186 });
 187 </script>
 188 <!--[...]-->
 189 <div id="XXXX">
 190   <img src="svg/ellipsographe-1.svg" alt="animation1"/>
 191   <div class="message" id="XXXX_message">Chargement...</div>
 192   <div id="XXXX_boutons"></div>
 193 </div>
 194 ~~~~~~~
 195
 196 dont l'affichage est :
 197
 198 <div id="XXXX">
 199   <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
 200   <div class="message" id="XXXX_message">Chargement...</div>
 201   <div id="XXXX_boutons"></div>
 202 </div>
 203
 204
 205 Il est possible de différer le chargement de l'animation en créant une fonction Javascript.
 206
 207 ~~~~~~~ { .javascript }
 208 function charge_anim2() {
 209   var a = new Animation('anim2','svg/ellipsographe-',1,91);
 210   a.loopOnload();
 211   var b = new Controle(a);
 212   b.connect();
 213 }
 214 ~~~~~~~
 215
 216 Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant, à
 217 l'internaute, le chargement de l'animation...
 218
 219 ~~~~~~~ { .html }
 220 <div id="anim2"
 221   style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
 222  <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
 223  <div class="message" id="anim2_message">Ellipsographe</div>
 224  <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
 225 </div>
 226 ~~~~~~~
 227
 228 On peut en profiter pour adapter le *style* des éléments englobants.
 229
 230 <div id="anim2"  style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
 231   <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
 232   <div class="message" id="anim2_message">Ellipsographe</div>
 233   <div id="anim2_boutons"><button onclick="charge_anim2()">Charger l'animation</button></div>
 234 </div>
 235
 236
 237
 238 ### Les paramètres
 239
 240 ## Les *players*
 241
 242 ### `SVGPlayerOne.js`
 243
 244 ### `SVGPlayerButtons.js`
 245
 246 ## Exemples d'utilisation