Doc: Installation, Warning, Principe, Famille d'images

[svganimation.git] / doc / page.md

diff --git a/doc/page.md b/doc/page.md
index 6970e71..a77c386 100644 (file)
--- a/doc/page.md
+++ b/doc/page.md
@@ -1,3 +1,15 @@
+<script type="text/javascript" src="../SVGAnimation.js"></script>
+<script type="text/javascript" src="../SVGPlayerOne.js"></script>
+<script type="text/javascript">
+  function charge(i,p,a,b) {
+    var anim = new Animation(i,p,a,b);
+    anim.loopOnload();
+    var player = new Controle(anim);
+    player.connect();
+  }
+</script>
+
+
 **Participants :** Chupin Maxime, Sarlat Jean-Michel.
 
 **Interface du dépôt Git :** <http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary>
@@ -9,18 +21,71 @@ constitué à partir de l'exploration de différents scénarios de
 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
+dédié. Ceci **n'est pas** le comportement par défaut. 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 XX, le code qui permet de charger
+l'animation sur demande.</p>
+</div>
+
 ## Installation
 
+Le fichier `SVGAnimation.js` (que l'on supposera dans un répertoire nommé `js`) est à charger dans la page `html` en mettant les lignes suivantes :
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+    <script type="text/javascript" src="js/SVGAnimation.js"></script>
+
+La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger cette bibliothèque JavaScript avant.
+
+## Principe
+
+Le principe est simple : on dispose d'un ensemble d'images au format
+SVG qui constituent, par une suite chronologique, une animation à
+visionner. La libraire `SVGAnimation` permet de visionner cette
+animation dans une page HTML.
+
+### La famille d'images
+
+Les différentes images composant l'animation doivent se nommer avec un
+*prefixe* suivit d'un tiret puis d'un nombre (celui-ci pouvant être
+formater de différente façons).
+
+    monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...
+
+ou
+
+    monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...
+
+Nous verrons comment gérer le formatage de l'indice des images dans
+les sections suivantes.
+
+<div class="alert alert-info">
+<p>L'idée d'une telle librairie est venue du fait que le logiciel
+MetaPost permet de produire des images SVG, et nous l'utilisons
+abondamment pour la production d'animations.</p>
+</div>
+
+
 ## L'objet `Animation`
 
-### Les paramètres
+La librairie `SVGAnimation` définit le *prototype* javascript
+`Animation`. Pour l'utiliser il faut déclarer
 
-## Les *players*
+<div id="anim1" style="margin:10px auto;padding:10px;width:350px;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="anim1_message">Ellipsographe</div>
+  <div id="anim1_boutons"><button onclick="charge('anim1','../ellipsographe/svg/ellipsographe-',1,91);">Charger l'animation</button></div>
+</div>
 
-### `SVGPlayerOne.js`
 
-### `SVGPlayerButtons.js`
+### L'utilisation
 
+### Les paramètres
 
+## Les *players*
 
+### `SVGPlayerOne.js`
 
+### `SVGPlayerButtons.js`