STIC Discussion:STIC II - exercice 13 (Stella)

De EduTech Wiki
Version datée du 13 février 2014 à 17:29 par Daniel K. Schneider (discussion | contributions) (Daniel K. Schneider a déplacé la page STIC Discussion:STIC II - exercice 13 vers STIC Discussion:STIC II - exercice 13 (Stella))
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigation Aller à la recherche

doh

SVG et les accents????? -- Jaboulay 13 avril 2011 à 12:18 (CEST)

Gros travail hier sur un fichier SVG, je le sauve et aujourd'hui, en voulant l'ouvrir, Inkscape me fait "error, impossible to open", message d'erreur extrêment clair évidemment. J'ouvre mon fichier dans Firefox, et là, au moins, j'ai un message d'erreur qui me montre que mon document n'est pas valable car les accents produisent des problèmes. Donc, édition en mode texte du fichier SVG, j'enlève les accents, et tout se remet à fonctionner normalement ;-)

Re: SVG et les accents????? -- Daniel K. Schneider 13 avril 2011 à 12:29 (CEST)

Ouais ou mieux: utiliser les bons accents ....

Le problème est simple: Il faut spécifier l'encodage dans le fichier XML ou HTML. Si vous prétendez avoir un jeu UTF-8 mais utilisez ISO Latin ou inversément cela produit des erreurs.

Donc faut choisir: Soit changer l'encodage dans le XML, soit (et ce que je conseille) travailler uniquement en UTF-8 dans vos éditeurs. Si votre éditeur n'en est pas capable, jeter à la poubelle ...

Le défaut dans XML est UTF-8, donc les 2 déclarations sont équivalentes 

<?xml version="1.0" encoding="UTF-8" ?>
  ou
<?xml version="1.0"?>

Lire Encodage de caractères

PS: Parfois une nouvelle technologie ne marche pas, mais XML et SVG ont 10 ans et plus: c'est du standardisé. Dans ce cas, ne faut pas adopter une stratégie de type Word/Windows, tuer des truc au hasard jusqu'à ce que cela marche. Y a tjrs une solution quand il y a un problème d'encodage, genre remplacer vos caractères ISO latin 1 (ISO 8859-1) ou pire du ISO windows obscure en UTF-8.

Attention aux noms des fichiers

Un fichier svg doit s'appeler .svg, sinon le serveur va envoyer un mauvais type MIME (mime type).

petit retour intermédiaire

-- Lucie.Marchon 27 avril 2011 à 18:03 (CEST)Répondre[répondre]


Bonjour! Pouvez-vous me dire si ceci est suffisant pour l'exercice 13 ou si vous me conseiller d'aller un peu plus loin pour avoir une bonne note? Merci

Re: petit retour intermédiaire -- Daniel K. Schneider 27 avril 2011 à 20:00 (CEST)

C'est bon à condition de faire un bon rapport qui abordera aussi les aspets conceptuels (à quoi cela sert etc.)

Petit doute -- Vjollca Ahmeti 28 avril 2011 à 14:51 (CEST)

Juste pour clarifier, parce que j'ai un petit doute en lisant les tutoriels...

  • On ne peut pas implémenter du SMIL dans un document HTML5 ?
  • Si on veut faire du SVG avec du HTML5, il faut nécessairement utiliser du DOM pour animer les images ?

Merci d'avance pour la réponse ! :)

Re: Petit doute -- Daniel K. Schneider 28 avril 2011 à 18:14 (CEST)

Cela dépend de votre navigateur. Cliquez sur l'exemple de Lucie ci-dessus et se cela clignote c'est bon. Sinon, faut faire une mise à jour. Si pour X ou Y raisons, vous ne désirez pas passer de FF 3.x à 4, installez Chrome. Oubliez IE 9 je crois.

Sinon: http://caniuse.com/svg-smil (réponse assez précise pour chaque navigateur)

Alexandre Rocca R2D2 -- Arocca 13 avril 2012 à 16:38 (CEST)

Me voilà bloqué pour un svg que je cherche à relancer. Le svg dure 1 minute, mais j'aimerai qu'il redémarre. Je cherche en vain sur edutechwiki à relancer le svg. 

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

  
 <g transform="translate(0,100)">
 <g transform="rotate(-90)">
  <title>Temps</title>
  
  

<rect x="0" y="50" width="10" height="10" stroke="black" fill="black" >  </rect>
<rect x="0" y="60" width="10" height="10" stroke="black" fill="black" >  </rect>

 <rect x="10" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="0s" dur="5s" fill="freeze"  />
  </rect>
 
 <rect x="10" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="5s" dur="5s" fill="freeze"  />
  </rect>
  
  <rect  x="20" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="10s" dur="5s" fill="freeze"  />
  </rect>
  
  <rect x="20" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="15s" dur="5s" fill="freeze"  />
  </rect>
 
 <rect x="30" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="20s" dur="5s" fill="freeze"  />
  </rect>
  
  <rect x="30" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="25s" dur="5s" fill="freeze"  />
  </rect>
  
  <rect x="40" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="30s" dur="5s" fill="freeze"  />
  </rect>
  
  <rect x="40" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="35s" dur="5s" fill="freeze"  />
  </rect>
  
  <rect x="50" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="40s" dur="5s" fill="freeze"  />
  </rect>
  
  <rect x="50" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="45s" dur="5s" fill="freeze"  />
  </rect>
  
  <rect x="60" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="50s" dur="5s" fill="freeze"  />
  </rect>
  
  <rect x="60" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  begin="55s" dur="5s" fill="freeze"  />
  </rect>
  
  <rect x="70" y="50" width="10" height="10" stroke="black" fill="black" >  </rect>
<rect x="70" y="60" width="10" height="10" stroke="black" fill="black" >  </rect>
 
 </g>
 </g>
</svg>

Re: Alexandre Rocca R2D2 -- Daniel K. Schneider 13 avril 2012 à 17:16 (CEST)

A ma connaissance on ne peut pas redémarrer un groupe d'animations avec SMAIL (Avec du JavaScript on peut sans doute). Autrement dit, je ne sais pas et je n'ai pas tout-de-suite le temps pour aller trouver une solution

Ceci dit, il y a bien sûr moyen d'exploiter le fait qu'on puisse faire tourner chaque animation autant de temps qu'on veut. Voici un exemple qui produit à peu près l'effet. Donc on fait tourner chaque animation pendant 60 seconds. Mais au lieu de définir une progression linéaire de 0 1 on indique 12 valeurs (donc des valeurs pour des ségments de 5s). Ceci marche garantie, mais c'est moche conceptuellement: 

 <rect x="10" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" values="0;1;1;1;1;1;1;1;1;1;1;1;1" begin="0s" dur="60s" repeatCount="indefinite" />
  </rect>
 
 <rect x="10" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animate attributeName="opacity" to="1"  values="0;0;1;1;1;1;1;1;1;1;1;1;1" dur="60s" repeatCount="indefinite" />

 ... etc. donc faut indiquer la bonne séquence de 0 et de 1 pour chaque carré...

Voici une piste que je vais explorer si j'ai le temps ce weekend, sinon rapplez moi le problème lundi. On pourrait enchaîner les animations, c-a-d la 2ème commence quand la 1ère a terminé, etc. A la fin du dernier il faudrait créer récupérer le "onend" et ensuite lancer un script qui démarre de nouveau le premier.

Re: Re: Alexandre Rocca R2D2 -- Arocca 13 avril 2012 à 17:43 (CEST)

J'ai copié vos éléments mais cela ne fonctionne pas. J'ai continué à investigué et j'ai trouvé ceci. Cependant le problème est que la relance ce fait tout en même temps après le dernier carré. (regardez animateTransform)
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

  
 <g transform="translate(0,100)">
 <g transform="rotate(-90)">

  <title>Temps</title>
  
  

<rect x="0" y="50" width="10" height="10" stroke="black" fill="black" >  </rect>
<rect x="0" y="60" width="10" height="10" stroke="black" fill="black" >  </rect>

 <rect x="10" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim1" attributeName="opacity" to="1" attributeType="XML" begin="0s; anim12.end" dur="5s" fill="freeze"/>    
  </rect>
 
 <rect x="10" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim2" attributeName="opacity" to="1" attributeType="XML" begin="5s; anim12.end" dur="5s" fill="freeze"/>    
  </rect>
  
  <rect  x="20" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim3" attributeName="opacity" to="1" attributeType="XML" begin="10s; anim12.end" dur="5s" fill="freeze"/>    

  </rect>
  
  <rect x="20" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim4" attributeName="opacity" to="1" attributeType="XML" begin="15s; anim12.end" dur="5s" fill="freeze"/>    

  </rect>
 
 <rect x="30" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim5" attributeName="opacity" to="1" attributeType="XML" begin="20s; anim12.end" dur="5s" fill="freeze"/>    

  </rect>
  
  <rect x="30" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animateTransform id="anim6" attributeName="opacity" to="1" attributeType="XML" begin="25s; anim12.end" dur="5s" fill="freeze"/>    

  </rect>
  
  <rect x="40" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animateTransform id="anim7" attributeName="opacity" to="1" attributeType="XML" begin="30s; anim12.end" dur="5s" fill="freeze"/>    

  </rect>
  
  <rect x="40" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animateTransform id="anim8" attributeName="opacity" to="1" attributeType="XML" begin="35s; anim12.end" dur="5s" fill="freeze"/>    

  </rect>
  
  <rect x="50" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim9" attributeName="opacity" to="1" attributeType="XML" begin="40s; anim12.end" dur="5s" fill="freeze"/>    

  </rect>
  
  <rect x="50" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
   <animateTransform id="anim10" attributeName="opacity" to="1" attributeType="XML" begin="45s; anim12.end" dur="5s" fill="freeze"/>    

  </rect>
  
  <rect x="60" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim11" attributeName="opacity" to="1" attributeType="XML" begin="50s; anim12.end" dur="5s" fill="freeze"/>    

  </rect>
  
  <rect x="60" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
   <animateTransform id="anim12" attributeName="opacity" to="1" attributeType="XML" begin="55s; anim12.end" dur="5s" fill="freeze"/>    

  </rect>
  
  <rect x="70" y="50" width="10" height="10" stroke="black" fill="black" >  </rect>
<rect x="70" y="60" width="10" height="10" stroke="black" fill="black" >  </rect>



 </g>
 </g>
</svg>
Re: Re: Re: Alexandre Rocca R2D2 -- Daniel K. Schneider 13 avril 2012 à 17:51 (CEST)

Mon code marche, je l'ai testé. Sans doute vous avez mal copié ou encore laissé vos anciennes définitions. Faut remplacer toutes !

Mhh par contre, si c'est vrai qu'on peut indiquer une chaine d'opérations possibles pour les begin, c'est presque bon.

Simplement il faut enchainer les opérations les unes après les autres et ne pas mettre 12 fois anim12.end dans le begin de chacune. Autrement dit, faut juste relancer la première avec la dernière. Donc pour la 2ème anime vous faites juste begin="anim2.end" (DEUX, pas DOUZE) et non pas begin="20s; anim12.end". Cela n'a pas de sens de coder deux sortes de débuts. Faut juste utiliser begin="0s; anim12.end" pour la PREMIERE !

Pas testé .... car je dois finir rapidement un truc.

Re: Re: Re: Re: Alexandre Rocca R2D2 -- Daniel K. Schneider 13 avril 2012 à 18:01 (CEST)

Voici un peu de doc pour ce truc que je ne connaissais pas :) http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists 

Examples

Example 1: In the following example, the 2 animations define begin times that are mutually dependent. There is no way to resolve these, and so the animations will never begin.

<animate id="foo" begin="bar.begin" .../>
<animate id="bar" begin="foo.begin" .../>

Example 2: In the following example, the 3 animations define a less obvious cycle of begin and end times that are mutually dependent. There is no way to resolve these. The animation "joe" will begin but will never end, and the animations "foo" and "bar" will never begin.

<animate id="foo" begin="joe.end" .../>
<animate id="bar" begin="foo.begin" dur="3s" .../>
<animate id="joe" begin="0" end="bar.end" .../>

Example 3: In the following example, the 2 animations define begin times that are mutually dependent, but the first has multiple begin conditions that allow the cycle to propagate forwards. The animation "foo" will first be active from 0 to 3 seconds, with the second animation "bar" active from 2 to 5 seconds. As each new current interval of "foo" and "bar" are created, they will add a new instance time to the other element's begin list, and so the cycle keeps going forward. As this overlapping "ping-pong" behavior is not otherwise easy to author, these types of cycles are not precluded. Moreover, the correct behavior will fall out of the model described above.

<animate id="foo" begin="0; bar.begin+2s" dur="3s" .../>
<animate id="bar" begin="foo.begin+2s" dur="3s" .../>
Re: Re: Re: Re: Re: Alexandre Rocca R2D2 -- Arocca 13 avril 2012 à 18:05 (CEST)
Nouveau progrès je regarde le suite dimanche. Merci pour la doc !
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

 <g transform="translate(0,100)">
 <g transform="rotate(-90)">

  <title>Temps</title>

<rect x="0" y="50" width="10" height="10" stroke="black" fill="black" >  </rect>
<rect x="0" y="60" width="10" height="10" stroke="black" fill="black" >  </rect>

 <rect x="10" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim1" attributeName="opacity" to="1" attributeType="XML" begin="0s; anim12.end+1s" dur="5s" fill="freeze"/>    
  </rect>
 
 <rect x="10" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim2" attributeName="opacity" to="1" attributeType="XML" begin="5s; anim12.end+6s" dur="5s" fill="freeze"/>    
  </rect>
  
  <rect  x="20" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim3" attributeName="opacity" to="1" attributeType="XML" begin="10s; anim12.end+11s" dur="5s" fill="freeze"/>    
  </rect>
  
  <rect x="20" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim4" attributeName="opacity" to="1" attributeType="XML" begin="15s; anim12.end+16s" dur="5s" fill="freeze"/>    
  </rect>
 
 <rect x="30" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim5" attributeName="opacity" to="1" attributeType="XML" begin="20s; anim12.end+21s" dur="5s" fill="freeze"/>    
  </rect>
  
  <rect x="30" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animateTransform id="anim6" attributeName="opacity" to="1" attributeType="XML" begin="25s; anim12.end+26" dur="5s" fill="freeze"/>    
  </rect>
  
  <rect x="40" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animateTransform id="anim7" attributeName="opacity" to="1" attributeType="XML" begin="30s; anim12.end+31" dur="5s" fill="freeze"/>    
  </rect>
  
  <rect x="40" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
    <animateTransform id="anim8" attributeName="opacity" to="1" attributeType="XML" begin="35s; anim12.end+36" dur="5s" fill="freeze"/>    
  </rect>
  
  <rect x="50" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim9" attributeName="opacity" to="1" attributeType="XML" begin="40s; anim12.end+41" dur="5s" fill="freeze"/>    
  </rect>
  
  <rect x="50" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
   <animateTransform id="anim10" attributeName="opacity" to="1" attributeType="XML" begin="45s; anim12.end+46" dur="5s" fill="freeze"/>    
  </rect>
  
  <rect x="60" y="50" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
<animateTransform id="anim11" attributeName="opacity" to="1" attributeType="XML" begin="50s; anim12.end+51" dur="5s" fill="freeze"/>    
  </rect>
  
  <rect x="60" y="60" width="10" height="10" stroke="black" fill="#1591B9" opacity="0">
   <animateTransform id="anim12" attributeName="opacity" to="1" attributeType="XML" begin="55s; anim12.end+56" dur="5s" fill="freeze"/>    
  </rect>
  
  <rect x="70" y="50" width="10" height="10" stroke="black" fill="black" >  </rect>
<rect x="70" y="60" width="10" height="10" stroke="black" fill="black" >  </rect>
 </g>
 </g>
</svg>

Re: Alexandre Rocca R2D2 -- Daniel K. Schneider 14 avril 2012 à 20:27 (CEST)

Solutions (la mienne proposée au départ, plus la votre qui permettrait de faire des trucs plus complexe, corrigée à plusieurs niveaux ...):

Re: Re: Alexandre Rocca R2D2 -- Arocca 15 avril 2012 à 13:24 (CEST)

Je vous remercie. Je pense contribuer sur le wiki par rapport à cette animation. Je vais encore la modifier étant donné que ce qui me sert à présent c'est une chaine de 60 carrés d'une secondes chacun afin d'avoir une minute d'animation. La solution simple j'aurais pu le trouver en y repensant. Par contre la solution avec chaine je pense pas. Je n'avais justement pas bien compris ce à quoi servait la variable set.
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC_Discussion:STIC_II_-_exercice_13_(Stella)&oldid=34060 »