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