From: Maxime Chupin (escudo) <chupin@fougeriens.org>
Date: Sun, 13 Nov 2016 12:58:08 +0000 (+0100)
Subject: Doc: test de chargement d'animation à la demande
X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=commitdiff_plain;h=6bfcc0f719cbb35a9126bb408e510ba09daf7d70;p=svganimation.git

Doc: test de chargement d'animation à la demande
---

diff --git a/doc/page.html b/doc/page.html
index 39eba33..3c45799 100644
--- a/doc/page.html
+++ b/doc/page.html
@@ -1,9 +1,33 @@
 <div>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+<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,t) {
+    var anim = new Animation(i,p,a,b,t);
+    anim.loopOnload();
+  }
+</script>
 <p><strong>Participants :</strong> Chupin Maxime, Sarlat Jean-Michel.</p>
 <p><strong>Interface du d&#233;p&#244;t Git :</strong> <a href="http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary" class="uri">http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary</a></p>
 <p>L'objectif est de d&#233;velopper, en particulier, du code Javascript afin de pr&#233;senter des animations de fichiers SVG produits, en particulier, par MetaPost. Ce d&#233;veloppement n'&#233;tant pas tout &#224; fait pr&#233;d&#233;termin&#233;, il sera constitu&#233; &#224; partir de l'exploration de diff&#233;rents sc&#233;narios de pr&#233;sentation de ces animations et des modes de construction des fichiers SVG.</p>
 <h2 id="installation">Installation</h2>
+<p>Le fichier <code>SVGAnimation.js</code> (que l'on supposera dans le r&#233;pertoire <code>js</code>) est &#224; charger dans la page <code>html</code> en mettant les lignes suivantes :</p>
+<pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;js/SVGAnimation.js&quot;&gt;&lt;/script&gt;</code></pre>
+<p>La librairie <code>SVGAnimation.js</code> d&#233;pend de <code>JQuery</code>, il faut donc charger charger cette biblioth&#232;que JavaScript avant.</p>
 <h2 id="lobjet-animation">L'objet <code>Animation</code></h2>
+<div id="anim1" style="margin:10px auto;padding:10px;width:660px;border:2px solid #AAA;border-radius:4px">
+<img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:660px;height:480px"/>
+<div id="anim1_message" class="message">
+Ellipsographe
+</div>
+<div id="anim1_boutons">
+<button onclick="charge('anim1','../ellipsographe/svg/ellipsographe-',1,91,'boutons');">
+Charger l'animation
+</button>
+</div>
+</div>
 <h3 id="les-param&#232;tres">Les param&#232;tres</h3>
 <h2 id="les-players">Les <em>players</em></h2>
 <h3 id="svgplayerone.js"><code>SVGPlayerOne.js</code></h3>
diff --git a/doc/page.md b/doc/page.md
index 6970e71..b9faf2c 100644
--- a/doc/page.md
+++ b/doc/page.md
@@ -1,3 +1,14 @@
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+<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,t) {
+    var anim = new Animation(i,p,a,b,t);
+    anim.loopOnload();
+  }
+</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>
@@ -11,8 +22,23 @@ SVG.
 
 ## Installation
 
+Le fichier `SVGAnimation.js` (que l'on supposera dans le répertoire `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 charger cette bibliothèque JavaScript avant. 
+
 ## L'objet `Animation`
 
+<div id="anim1" style="margin:10px auto;padding:10px;width:660px;border:2px solid #AAA;border-radius:4px">
+  <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:660px;height:480px"/>
+  <div class="message" id="anim1_message">Ellipsographe</div>
+  <div id="anim1_boutons"><button onclick="charge('anim1','../ellipsographe/svg/ellipsographe-',1,91,'boutons');">Charger l'animation</button></div>
+</div>
+
+
+
 ### Les paramètres
 
 ## Les *players*