Page principale

Diashow.html

Description

Diashow.html permet la projection de diaporama à l'aide des navigateurs récents.

Les logiciels de visualisation offrent généralement un mode de fonctionnement en diaporama, mais les possibilités sont restreintes. Il n'est pas possible d'influer sur l'ordre des images. L'ajout de titres et sous-titre n'est pas possible, un accompagnement sonore est impossible. Diashow.html permet tout ceci et les titres peuvent être affiché seul ou en surimpression d'une image. Le lancement de l'accompagnement sonore est synchronisé sur les photos ou textes affichés.

Ainsi il n'est pas nécessaire d'utiliser d'un logiciel spécial ou de produire un film, bien sur à l'aide d'un logiciel adéquat. Il est cependant possible d'utiliser un éditeur graphique basé sur HTML (éditeur graphique), ceci nécessite l'installation de certains composants.

Google-chrome et Firefox 4 fonctionnent parfaitement. Opera 11 fonctionne également, cependant au début du diaporama, des scintillements peuvent être produits lors du changement des images ou des textes.
Safari devrait fonctionner, Le fichiers sonores doivent être au format mp3. Firefox et Opera ne traitent que les fichiers ogg. D'après des recherches sur le réseau, il doit être possible d'installer les codecs nécessaires pour le traitement des fichiers ogg.
Internet Explorer 9 fonctionne, cependant, comme Safari, il n'est pas apte à reproduire les fichiers ogg si le plugin WebM de Google n'est pas installé. De plus certaines choses comme les ombres pour les textes manquent.

Les photos sont automatiquement misent à l'échelle si leur dimensions dépassent celle de la fenêtre d'affichage. Les photos de taille réduite sont automatiquement centrées. Les Textes peuvent être superposés aux images, ils sont également centrés sur l'écran.
Le changement de photos ou de textes est effectué automatiquement toutes les 5 secondes. Il est possible de modifier la temporisation dans le fichier diashow.html.

    var waitTime=5000; // delay between changes 5 seconds

La synchronisation de l'accompagnement sonore est géré par les changements d'image ou de texte.

Lancement du navigateur

    opera -fullscreen diashow.html

Opera est lancé em Mode plein écran. Google-chrome , und Firefox ne connaissent pas d'option équivalentes. La touche [F11] permet de passer en mode plein écran.

Diashow.html répond à certaines commandes du clavier:
r
Recharger
Le diaporama recommence.
m
Muet
La sortie audio est désactivée
n
Nom
Le nom des fichiers est activé/désactivé
v
Volume
Diminue le volume.
V
Volume
Augmente le volume.
t
Tempo
Diminue le temps de pause (min 2 sec).
T
Tempo
Augmente le temps de pause (max 60 sec)..
p
Pause
Le passage automatiques d'une image à l'autre est interrompu. Les commandes suivantes sont accessibles.
[->]
Curseur vers la droite
Image/texte suivant.
[<-]
Curseur vers la gauche
Image/texte précédent.
g
Goto
Choix interactif de L'image ou du texte.

Certaines combinaisons de touches sont reservée par le navigateur et ne peuvent pas toujours être utilisées. Au lieu de la touche [Alt] utiliser les touches [Ctrl] ou [Maj].

Fichier de configuration list.js

Pour que diashow.html fasse son travail, un petit fichier JavaScript doit être créé. Ce fichier list.js est structuré comme suit:

// Photos               Texte-HTML            Musique                  Temps
var fileList = [
[ '',                   'html/titre-1.html', 'musique/morceau-1.ogg',   ''   ],
[ 'images/image-1.jpg', '',                  '',                        '.5' ],
[ 'images/image-2.jpg', 'html/titre-2.html', '',                        '2'  ],
[ 'images/image-3.jpg'  '',                  'audio/commentaire-3.ogg', ''   ],
];

Chaque ligne commençant par '[' et se terminant '].' indique quelle image (champs 1) ou document HTML (champ 2 est affiché et quel fichier audio doit être jouer (champ 3). Les fichiers audio doivent être au format ogg.
Les lignes sont traitées consécutivement. Si dans le contenu d'un champ est - ('-') aucune image n'apparaît, respectivement le son est interrompu.

Le dernier paramètre contrôle la temporisation, c*est un multiplicateur: '.5' donne 4 x 0,5 = 2 secondes, '2' donne 8 secondes de temps de pause pour l'avancement sur la ligne suivante.

Une ligne contenant ['reload','','',''], autorise la relance du diaporama.

Fichiers HTML

Ces fichiers peuvent être facilement créés, d'autant plus que peu de choses différentes.

<!DOCTYPE html> 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
    <!-- Bind own font for standard complient browser  -->
    <!-- The font file must reside in the folder fonts -->
    <!-- which shall be an folder within the html file -->
    <!-- direcrory.  The fonts must be free fonts!     -->
    @font-face {
        font-family: YanoneKaffeesatz;
        font-weight:normal;
        src: url("fonts/YanoneKaffeesatz-Regular.woff") format("woff");
    }
    @font-face {
        font-family: YanoneKaffeesatz;
        font-weight:bold;
        src: url("fonts/YanoneKaffeesatz-Bold.woff") format("woff");
    }
    </style>
    <style type="text/css">
    /* Declare some css values foe the used elements */
    body {  margin:0; border:0; padding:0; background-color:transparent;
            text-align: center; font-size:100%; line-height:1.3;
            font-family:YanoneKaffeesatz, Verdana, sans-serif;
            overflow:hidden; text-align: center;
    }
    /* Set font-size, color,... here  */
    h1 {
        color:red; font-size:9em;
        /* make text shadows, dont'T work for IE 9! */
        text-shadow: .05em .05em .05em #ffaa66;
        /* rotate the text */
        -webkit-transform: rotate(-15deg);
        -moz-transform: rotate(-15deg);
        -o-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    h2 { 
        color:lime;
        font-size:5em;
        margin-top: .5em;
    }
    </style>
    <script>
        // center vertically
        function setValues() {
            var container = document.getElementById("container");
            var marginTop = document.getElementById("marginTop");
            var h = window.innerHeight;
            var i = marginTop.offsetHeight;
            container.height = h+'px';
            marginTop.style.marginTop = ((h-i)/2)+'px';
            marginTop.style.visibility = 'visible';
        }
    </script>
</head>
<body onload="setValues();">
    <div id="container">
        <div id="marginTop" style="margin-top:0px;visibility:hidden;">
            <h1>Titre</h1>
            <h2>Sous-titre</h2>
        </div>
    </div>
</body>
</html>

En règle générale il est possible de copier le si dessus et de modifier les titres <h1>Titre</h1> et sous-titres <h2>Sous-titre</h2>. Supprimer le sous-titre correspondant simplement à l'écrasement de la ligne décrivant celui ci.

Dossiers

diashow.html et list.js doit résider dans le même dossier. Les images peuvent être dans le même dossier ou dans un sous-dossier.
Un chemin absolu peut également être placé dans le fichier list.js ('/media/cdrom/diashow/photos/image.jpg').

Fichiers audios

Google-chrome peu jouer les fichiers ogg et mp3. Firefox et Opera imposent de fichiers au format ogg.

Internet Explorer 9 et Safari ne connaissent pas le format ogg.Il esr cependant possible d'installer des codec leurs permettant d'opérer avec les fichiers ogg. Si les Plugins requis ne sont pas présents, FOggPlayer.swf permet la reproduction sonores des fichiers au format ogg. Ceci impose des restrictions de la fonctionnalité.

L'histoire sans fin

Internet Explorer 9 ne semble pas accepter les fichiers comme le font ses collègues. Il est nécessaire de passer par un serveur http! Heureusement le serveur mongoose (http://code.google.com/p/mongoose/) permet sans installation de créer l'environnement requis. Un simple clic sur le logiciel qui doit résider dans le répertoire contenant diashow.html permet de lancer ce serveur. Après ceci ils suffit de lancer Internet Explorer 9 et d'entrer http://localhost:8080/diashow.html dans le champs des adresses et le diaporama tourne!
Il est nécessaire d' arrêter le serveur http après le diaporama et surtout avant d'éjecter le disque ou la clef USB.

Remarques

Une rotation automatique des photos n'est pas réalisée. De ce fait il est nécessaire de faire ceci manuellement.

La conversion des fichiers mp3, ... au format ogg peu être effectuée par exemple à l'aide de fre:ac (http://www.freac.org). Fre:ac est disponible pour Linux, Windows et Mac OS X.

Licence

L'auteur, Jean-Jacques Sarton, autorise, sans aucune restrictions, l' utilisation et la distribution de diashow.html.

Page principale