doc/page.md

   1 <script type="text/javascript" src="../SVGAnimation.js"></script>
   2 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
   3 <script type="text/javascript">
   4   function charge(i,p,a,b) {
   5     var anim = new Animation(i,p,a,b);
   6     anim.loopOnload();
   7     var player = new Controle(anim);
   8     player.connect();
   9   }
  10   function charge_anim2() {
  11     var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91);
  12     a.loopOnload();
  13     var b = new Controle(a);
  14     b.connect();
  15   }
  16   $(window).load(function() {
  17     anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
  18     anim.loopOnload();
  19     player = new Controle(anim);
  20     player.connect();
  21     });
  22 </script>
  23
  24
  25 **Participants :** Chupin Maxime, Sarlat Jean-Michel.
  26
  27 **Interface du dépôt Git :** <http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary>
  28
  29 L'objectif est de développer, en particulier, du code Javascript afin de
  30 présenter des animations de fichiers SVG produits, en particulier, par
  31 MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera
  32 constitué à partir de l'exploration de différents scénarios de
  33 présentation de ces animations et des modes de construction des fichiers
  34 SVG.
  35
  36 <div class="alert alert-warning">
  37 <p>Les différents exemples se charge en cliquant sur le bouton
  38 dédié. Ceci **n'est pas** le comportement par défaut, c'est du code
  39 JavaScript qui permettra de choisir quand l'animation se charge. Il
  40 s'agit
  41 d'éviter de charger toutes les animations présentes sur cette page,
  42 cela serait bien trop lourd.</p>
  43 <p>Nous présentons, dans la section <a
  44 href="#chargement-différé">Chargement différé</a>, le code qui permet de
  45 charger 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&#8239;:
  95
  96 * une balise `img` contenant un image `svg` qui servira de vignette à
  97   l'animation;
  98 * une balise `div` avec l'identifiant `id="XXXX_message"` où `XXXX` est
  99   l'identifiant de la balise englobante. Dans cette balise *message*,
 100   on y met, si on le souhaite, un message à afficher avant le
 101   chargement de l'animation;
 102 * une balise `div` avec l'identifiant `id="XXXX_boutons"`.
 103
 104
 105 En supposant que les images SVG se trouvent dans un répertoire nommé
 106 `svg`, voici un exemple d'une telle structure :
 107
 108 ~~~~~~~ { .html }
 109 <div id="anim1">
 110   <img src="svg/ellipsographe-1.svg" alt="animation1"/>
 111   <div class="message" id="anim1_message">Chargement</div>
 112   <div id="anim1_boutons"></div>
 113 </div>
 114 ~~~~~~~
 115
 116 ### Côté JavaScript
 117
 118 Une fois qu'on a la structure HTML présentée ci-dessus, il est
 119 nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation
 120 de se jouer.
 121
 122 #### Construire l'objet `Animation`
 123
 124 Le *constructeur* du prototype JavaScript s'utilise, pour l'exemple
 125 donné à la section précédente, de la façon
 126 suivante :
 127
 128 ~~~~~~~ { .javascript }
 129 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 130 anim.loopOnload();
 131 ~~~~~~~
 132
 133 `XXXX` est l'identifiant de la balise `div` HTML *englobante*,
 134 `svg/ellipsographe-` est le préfixe dont on a parlé plus haut, `1` est
 135 l'indice de la première image à animer, et `91` l'indice de la
 136 dernière.
 137
 138 `anim.loopOnload()` permet le chargement de l'animation.
 139
 140 Une fois celle-ci chargée, il faut en permettre la lecture qui se fait
 141 grâce à un nouvel objet nommé `Controle`. Ce contrôle s'utilise en
 142 fait comme ceci :
 143
 144 ~~~~~~~ { .javascript }
 145 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 146 anim.loopOnload();
 147 var player = new Controle(anim);
 148 player.connect();
 149 ~~~~~~~
 150
 151 Nous verrons par la suite comment personnaliser le contrôle de la
 152 lecture de l'animation.
 153
 154 Tout ceci n'est toujours pas suffisant car il faut exécuter ce code
 155 JavaScript. Ceci peut être fait grâce à `JQuery` par exemple, en
 156 exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
 157
 158 ~~~~~~~ { .javascript }
 159 $(window).load(function() {
 160     var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 161     anim.loopOnload();
 162     var player = new Controle(anim);
 163     player.connect();
 164 });
 165 ~~~~~~~
 166
 167 Bien sûr, ceci nécessite le chargement, dans la page HTML, de la
 168 librairie `JQuery`.
 169
 170
 171
 172
 173
 174 #### Le résultat
 175
 176 Tout ceci donne le code suivant
 177
 178 ~~~~~~~ { .html }
 179 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 180 <script type="text/javascript" src="../SVGAnimation.js"></script>
 181 <script type="text/javascript">
 182 $(window).load(function() {
 183     var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 184     anim.loopOnload();
 185     var player = new Controle(anim);
 186     player.connect();
 187 });
 188 </script>
 189 <!--[...]-->
 190 <div id="XXXX">
 191   <img src="svg/ellipsographe-1.svg" alt="animation1"/>
 192   <div class="message" id="XXXX_message">Chargement...</div>
 193   <div id="XXXX_boutons"></div>
 194 </div>
 195 ~~~~~~~
 196
 197 dont l'affichage est :
 198
 199 <div id="XXXX">
 200   <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
 201   <div class="message" id="XXXX_message">Chargement...</div>
 202   <div id="XXXX_boutons"></div>
 203 </div>
 204
 205
 206 #### Chargement différé
 207
 208 On peut laisser le chargement d'une animation à la demande en créant une
 209 fonction Javascript.
 210
 211 ~~~~~~~ { .javascript }
 212 function charge_anim2() {
 213   var a = new Animation('anim2','svg/ellipsographe-',1,91);
 214   a.loopOnload();
 215   var b = new Controle(a);
 216   b.connect();
 217 }
 218 ~~~~~~~
 219
 220 Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant
 221 justement le chargement de l'animation...
 222
 223 ~~~~~~~ { .html }
 224 <div id="anim2"
 225   style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
 226  <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
 227  <div class="message" id="anim2_message">Ellipsographe</div>
 228  <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
 229 </div>
 230 ~~~~~~~
 231
 232 Dans le même temps, le *style* des éléments englobants a été adapté.
 233
 234 <div id="anim2"  style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
 235   <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
 236   <div class="message" id="anim2_message">Ellipsographe</div>
 237   <div id="anim2_boutons"><button onclick="charge_anim2()">Charger l'animation</button></div>
 238 </div>
 239
 240
 241
 242 ### Les paramètres
 243
 244 L'objet `Animation` ne possède que deux propriétés configurables, autres
 245 que celles (4) qui lui sont passées en argument.
 246
 247 &bull; **delai** *(valeur par défaut : 50)* &mdash; C'est la durée, en millisecondes, entre deux images.
 248
 249 ~~~{.javascript}
 250 var a = new Animation('anim','svg/pre',1,100);
 251 a.delai = 200;
 252 a.loopOnload();
 253 ~~~
 254 Ceci fixera le défilement à 5 images/s. Un *player* comme ceux que nous vous proposons ci-dessus peut
 255 modifier cette valeur.
 256
 257 &bull; **pad** *(valeur par défaut : 0)* &mdash; Ce paramètre n'a d'effet
 258 que s'il est supérieur ou égal à 2, il permet de fixer la longueur des
 259 index des images en complétant avec des 0.
 260
 261 ~~~{.javascript}
 262 var a = new Animation('anim','svg/pre',1,100);
 263 a.pad = 3;
 264 a.loopOnload();
 265 ~~~
 266 Les images chargées seront, successivement, `svg/pre001.svg`, `svg/pre002.svg`, ..., `svg/pre100.svg`.
 267
 268 ## Les *players*
 269
 270 ### `SVGPlayerOne.js`
 271
 272 ### `SVGPlayerButtons.js`
 273
 274 ## Exemples d'utilisation