Diaporama April
Il était question depuis un certain temps d'essayer les possibilités offertes par svg animé par un peu de javascript.
Comme l'occasion fait le laron, nous avons fait pour SGL, un petit diaporama qui boucle sur 1 minute 30 pour tester la faisabilité de la chose.
Il s'agit d'une version hackée du script Sozi, qui est très simple et très agréable à utiliser (pour un geek). Le hack consiste simplement à programmer les changement de vues au bout d'un temps donné.
Le résultat est ici : http://media.april.org/diapo/April-sgl.svg (utiliser de préférence un navigateur basé sur une version récente de webkit, comme Epiphany).
Comment ça fonctionne ?
La version originale de Sozi
Le site original de l'auteur nous enseigne :
« Le document SVG est organisé en trois calques (techniquement, ce sont trois « groupes » SVG, qui sont considérés comme des calques par Inkscape) :
- Le calque "Controls" contient les boutons de navigation (avancer, reculer, début, fin).
- Le calque "Content" contient les éléments de la présentation, disposés sur une grande page.
- Le calque "Views" définit les points de vue successifs à afficher.
Toute la magie de Sozi réside dans l'utilisation du calque « Views ».
Dans ce calque vous dessinerez de simples rectangles pour délimiter les zones sur lesquelles il faudra zoomer. Ces rectangles peuvent avoir n'importe quelle taille et n'importe quelle orientation. Le script d'animation s'occupera d'effectuer les translations, les rotations et les mises à l'échelle nécessaires pour que le contenu de chaque rectangle apparaisse maximisé et sans déformation dans la fenêtre du navigateur.
L'ordre de création des rectangles définit l'ordre de parcours dans la page. En cas d'erreur, l'éditeur XML incorporé à Inkscape permet de les réordonner sans trop d'effort.
Naturellement, vous prendrez soin de rendre le calque « Views » invisible lorsque vous souhaiterez visionner la version définitive de votre présentation. »
La version utilisée à l'April
Le fichier SVG
- Le fichier SVG est édité avec Inkscape.
- Vous pouvez faire apparaitre la fenêtre des calques avec Maj + Ctrl + L : vous y verrez les calques Controls, Views et Content.
- Le calque Controls, est laissé invisible étant donné que le diaporama à pour objectif d'être autonome.
- Le calque Views est invisible par défaut, il faut le rendre visible si vous souhaitez modifier les vues et le repasser invisible pour la mise en prod.
- La façon la plus simple d'ajouter des vues est de dupliquer (Ctrl + D) une vue existante, et de la modifier (déplacer, tourner, redimensionner).
- La principale difficulté de Sozi réside dans l'ordre des vues : celles-ci dépendent de leur ordre de création. Vous ne pouvez changer cet ordre (à l'heure actuelle) qu'en déplaçant les noeuds XML dans l'éditeur proposé (disponible avec Maj + Ctrl + X).
- Pour faire des temporisations, il suffit de répéter des vues identiques.
Le JavaScript
Disclaimer : ceci est le premier code de JS que je n'ai jamais écrit, et je n'y connais rien en techno web. ;-) Polux 22 juillet 2010 à 15:53 (CEST)
Par défaut, le script appelle la méthode moveToFirst(); et laisse l'exécution au gré des contrôles.
Pour créer un diaporama, la méthode la plus simple que j'ai trouvé consiste à programmer par des setTimeout une séquence de moveToNext() à déclencher. Ceci lance un cycle complet de visualisation. Pour rendre l'application autonome, en fin de cycle on la recharge. C'est le début du mouvement perpétuel. :-)
Un patch :
20,21c20,22
< const SOZI_STEPS = 25;
< const SOZI_TIME_STEP = 10;
---
> const DELAY = 2;
> const SOZI_STEPS = 20;
> const SOZI_TIME_STEP = 050;
53c54,59
< this.moveToFirst();
---
> var that = this;
> that.moveToFirst();
> for(i = 1 ; i < that._views.length ; i++){
> setTimeout(function(){that.moveToNext();}, i*DELAY*1000);
> }
> setTimeout("window.location.reload()", that._views.length*DELAY*1000);
