Hauptseite

Diashow.html

Beschreibung

Diashow.html erlaubt es Dia-Show mit einen modernen Browser zu erstellen und zu zeigen.

Vorhandene Bildbetrachtern erlauben nur die sequentielle Wiedergabe des Bildmaterials und es ist auch nicht möglich die Reihenfolge der Bilder zu beeinflussen. Diashow.html erlaubt dies und noch dazu einzelne Texte oder Bilder mit überlagerten Text zu wiedergeben. Darüber hinaus können Audio-Dateien synchron zu den Bilder geladen und abgespielt werden.

Die Verwendung ein speziellen Programm oder das Herstellen einen Film ist somit nicht notwendig. Ein auf HTML basierenden graphischen Editor wurde realisiert, dies bedarf der Installation von einige Komponenten (Editor).

Google-chrome und Firefox 4 funktionieren perfekt. Opera 11 funktioniert aber beim Übergang zwischen die verschiedenen Bilder/Texte kann es zur Flackern kommen.
Safari sollte funktionieren, allerdings müssen die Sound-Dateien vermutlich im mp3 Format vorliegen oder ein Plugins muss installiert werden.
Der Internet Explorer 9 sollte, wenn er Normkonform ist (Microsoft behauptet es!) auch sein Dienste verrichten, tut es aber nicht ohne weiteres!

Bilder werden, sofern sie größer als das Ausgabefenster sind, automatisch skaliert. Kleine Bilder werden zentriert dargestellt. Bilder und Texte können auch gleichzeitig ausgegeben werden.
Bilder und Texte werden, Zeit gesteuert, automatisch gewechselt. Die Zeit ist auf 5 Sekunden gestellt, kann aber in der Datei diashow.html angepasst werden.

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

Es ist auch möglich eine, mit den Bildern synchronisierte, Begleitmusik wieder zu geben.

Aufruf des Browsers

    opera -fullscreen diashow.html

Opera wird im Vollbildschirm Modus gestartet. Google-chrome , und Firefox kennen leider keine äquivalenten Option, Die Taste [F11] erlaubt das Wechseln im Vollbildmodus.

Diashow.html reagiert auf einige Tastaturbefehle:
r
Reload
Die Show beginnt wieder von vorne.
m
Mute
Die Soundausgabe wird abgeschaltet.
n
Name
Schaltet die Namensanzeige der Bild/Text Dateien ein/aus..
v
Volume
Erniedrigt die Lautstärke.
V
Volume
Erhöht die Lautstärke.
t
Tempo
Erniedrigt die Pausenzeit (min 2 sek.).
T
Tempo
Erhöht die Pausenzeit (max 60 sek.).
p
Pause
Das automatisches Bildwechsel ist unterbunden, nachstehende Tastenbefehle sind in diesem Modus erreichbar.
[->]
Kursor Rechts
Nächsten Bild/Text auswählen.
[<-]
Kursor Links
Vorgehenden Bild/Text anzeigen.
g
Goto
Nächsten Bild/text auswählen.

Manche Tastenkombinationen sind von den Browser belegt und können nicht immer verwendet werden. Anstelle der [Alt] können auch die Taste [Strg] und die [ SHift] verwendet werden.

Konfigurationsdatei list.js

Damit diashow.html sein Werk verrichtet, muss eine kleine Javascript Datei erzeugt werden. Diese Datei list.js ist wie folgt aufgebaut:

// PICTURE              HTML-Texte            MUSIC                  TIME
var fileList = [
[ '',                   'html/titel-1.html', 'musik/stueck-1.ogg',   ''   ],
[ 'images/image-1.jpg', '',                  '',                     '.5' ],
[ 'images/image-2.jpg', 'html/tile-2.html',  '',                     '2'  ],
[ 'images/image-3.jpg'  '',                  'audio/kommentar-3.ogg', ''  ],
];

Jede Zeile die mit '[' beginnt und '],' endet gibt an welches Bild oder HTML-Dokument angezeigt wird (erstes Feld) und welche Sound-Datei abgespielt werden soll. Die Sound-Dateien sollen im ogg Format sein.
Die Zeilen werden nacheinander verarbeitet. Wenn der Inhalt einen Argument "-" ('-') ist wird kein Bild angezeigt, B.z.w. das Ton abgeschaltet.

Das letztes Parameter steuert die Wiedergabezeit, es ist ein Multiplikator. '.5' bedeutet 4*.5 = 2 Sekunden, '2' ergibt 8 Sekunden.

Eine Zeile ['reload','','',''], erlaubt es die Dia-Show neu zu starten.

html Dateien

Solche Dateien können leicht erstellt werden, zumal sie in der Regel nur aus wenig Text bestehen.

<!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();" onresize="setValues();">
    <div id="container">
        <div id="marginTop" style="margin-top:0px;visibility:hidden;">
            <h1>Main Title</h1>
            <h2>Sub Title</h2>
        </div>
    </div>
</body>
</html>

Das Kopieren der Vorlage und das Anpassen des Titels (Titel) ist normalerweise ausreichend.

Ordner

diashow.html und list.js müssen im gleichen Ordner liegen. Bilder können im selben Ordner oder in ein Unterordner sein.
Eine absolute Pfadangabe kann auch in der list.js Datei erfolgen ('/media/cdrom/diashow/photos/image.jpg').

Sound Dateien

Google-chrome kann ogg sowie mp3 Dateien wiedergeben. Firefox und Opera verlangen ogg Dateien.

Internet Explorer 9 und Safari kennen vom Haus aus kein ogg Format, dafür werden Dateien in mp3 Format abgespielt. Ein Nachrüsten beide Browser ist, soweit aus dem Internet entnehmbar möglich. Damit beide Browser auch ogg Dateien, falls keine passenden Plugin vorhanden ist, wurde FOggPlayer.swf integriert (flash plugin notwendig). Einige Funktionalitäten sind aber mit der Flash Player nicht vorhanden.

Die unendliche Geschichte

Internet Explorer 9 mag es offenbar nicht Inhalte direkt von der Festplatte darzustellen. Wenn die Show über das "lokale Intranet" abgerufen wird, funktioniert es. Dazu ist es notwendig ein HTTP Server aufzusetzen, dies ist aber sehr einfach. Der mongoose Server (http://code.google.com/p/mongoose/) ist die Lösung, er muss nicht installiert werden und kann direkt (per Klick) vom Diashow Verzeichnis aufgerufen werden. Danach muss in der URL Leiste des Internet Explorer 9 die Adresse http://localhost:8080/diashow.html angegeben werden und die Diashow läuft!
Nach Beendigung der Show und vor allen vor das Entfernen des Mediums muss der Http-Server beendet werden. In der Taskleiste ist als Symbol ein kleines m eingeblendet, hier lässt sich der Server beenden.

Bemerkungen

Eine automatische Rotation de Bilder wurde nicht realisiert. Dementsprechend müssen die Bilder gegebenfalls angepasst werden.

Manche Befehle sind als Hilfe bei der Zusammenstellung der Diashow bestimmt.

die Konvertierung von mp3 Dateien im ogg Format kann mit z.B. fre:ac (http://www.freac.org) erfolgen. fre:ac ist sowohl für Linux wie für Windows oder Mac OS X erhältlich. Firefox, Google-chrome und Opera können auch Dateien in wav Format abspielen. Die Dateigröße ist aber wesentlich größer (ca. 5 MB anstelle von ca. 500 KB pro Minute)

Lizenz

Der Autor, Jean-Jacques Sarton, erlaubt es diashow.html ohne jegliche Restriktionen zu verwenden oder weiter zu geben.

Hauptseite