Diaporama April

Une animation présentant l'association April

Présentation

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 (Salon Solutions Gnu/Linux), 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).

Mise en place

1. Copiez le fichier http://media.april.org/diapo/April-sgl.svg sur l'ordinateur qui sera utilisé sur le stand.
2. Ouvrez le fichier dans le logiciel Firefox.
3. Vérifiez que l'animation se lance.
4. Créez un second écran

Navigateurs

Ce diaporama a été testé positivement sur les navigateurs suivants :

• Gnu/Linux :
  • Epiphany
  • Firefox 3.6.16
  • Chromium 10.0
• Windows XP Pro :
  • Firefox 3.5.2
  • Chrome 10.0

Navigateurs n'affichant pas l'animation :

• Gnu/Linux :
  • Konqueror 4.4.5
• Windows XP Pro :
  • Internet Explorer 8.0

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.
• Pour éviter les problèmes de polices qui ne sont pas forcément installées sur toutes les machines, il est recommandé de vectoriser les contenus textes (en sélectionnant le contenu et en tapant Maj + Ctrl + C).

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);