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

[svganimation.git] / doc / page.md

diff --git a/doc/page.md b/doc/page.md
index 0458ea1..a77c386 100644 (file)
--- a/doc/page.md
+++ b/doc/page.md
@@ -1,4 +1,14 @@
-# Documentation du projet SVGAnimation
+<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.
 
 
 **Participants :** Chupin Maxime, Sarlat Jean-Michel.
 


@@ -11,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.
 
 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
 
 ## 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`
 
 ## 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`