Diashow.html

Main Page

Description

Diashow.html allows to produce and view a Slide-Show with a modern Browser.

With provided viewer the photos will only be showed sequencially without sorting. Furteher more such viewer will not allows to insert title or sound. Diashow.html allows to order the photos, to add title and sub title which can also cover the pictures. Sound files can be played and there start time is synchronized by a picture or a text.

With diashow.html you don't need a specialized program and there is no need to produce a film as often done.

Google-chrome and Firefox 4 work very well. Opera 11 work but at the begin of the show some flickering may appear.
Safari should work, but the sound files must, probably, been provided as mp3 or a Plugins must be installed.
The Internet Explorer 9 should mostly work this browser is not as compliant as the manufacturer pretend. Sound file must be mp3. The Google WebM plugin may allow playing ogg file.

The picture, if there to big, are automatcally scaled in order to fit to the output window. Small photo will not be scaled up. Photos and/or texte are centered on the screen.
The time between two consecutive photos or text is set to 4 seconds. After this delay the next photo / text will be showed. This time can be modified within the diashow.html file.

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

Lauching the Browser

    opera -fullscreen diashow.html

Opera will be started in full screen mode with this command. Google-chrome, and Firefox don't knowm similar options. You must press the [F11] key in order to enter the full screen mode.

Diashow.html Known some commands via teh keyboard:
r
Reload
The Show start again.
m
Mute
The sound will be muted.
n
Name
The picture and text file name will be (un)displayed.
v
Volume
The loudness will be decreased.
V
Volume
The loudness will be increased.
t
Time
The wait time between pictures will be decreased (min 2 sec.).
T
Tempo
the wait time will be increased (max 60 sec.).
p
Pause
The show will be pause. Some other commands are provided for the pause mode.
[->]
Cursor Right
Choose the next picture / title.
[<-]
Cursor Left
Choose the previous picture / title.
g
Goto
Interactif choice of the next picture / title.

Some key stroke are reserved by the browser so that a command with the [alt] key pressed will not work as expected. If this happen you can use the [Shift] or [Ctrl] key instead.

Configuration file list.js

In order to work, diashow,html must known what is to do. This is contained within a little javascript file. Damit diashow.html sein Werk verrichtet, muss eine kleine Javascript Datei erzeugt werden. The file list.js look as follow:

// PICTURE              HTML-Text             SOUND                 TIME
var fileList = [
[ '',                   'html/title-1.html', 'music/piece-1.ogg',   ''   ],
[ 'images/image-1.jpg', '',                  '',                    '.5' ],
[ 'images/image-2.jpg', 'html/tile-2.html',  '',                    '2'  ],
[ 'images/image-3.jpg'  '',                  'audio/comment-3.ogg', ''   ],
];

A line beginning with '[' and terminated by '], tell diashow.html which picture is to be show (1. field, the text (html) file to be displayed (2. field) and the sound to be played (3. field).
The lines will be processed according to there order. If the sound field is '-', the sound will be cancelled.

The last field allows you to modify the wait time for the given ohoto / text. This parameter is an multiplier: '.5' mean 4*.5 = 2 seconds, '2' mean 8 seconds.

A line containing ['reload','','',''], restart the show.

Html files

It is easy to write such a file, since the text(es) will be very small.

<!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>

You must only copy the above to a file and correct the title (Titel) and or (Sub Titel). Removing the line <h2>Sub Title</h2>) is possible (and recommended) if you don't want to provide a sub title.

Folder

diashow.html and list.js must reside within the same folder.. Pictures may reside within the same folder or a sub folder. The same apply for the text (html) files.
You may. also. enter an absolute path into the file list.js ('/media/cdrom/diashow/photos/image.jpg').

Sound Files

Google-chrome can play ogg and mp3 files. Firefox and Opera require ogg files.

Internet Explorer 9 and Safari don't known any things about the ogg format, mp3 files will be played. You may install the necessary codec in order to get both working with ogg files. In order to get sound even if the necessary plugins are not installed, the FOggPlayer.swf ist provided. Some possibilities are not available with this flash player.

The neverending story

Internet Explorer 9 seem not to like html files on the local file system. If the html code is got via a server (http) Internet Explorer 9 will work!
The http server mongoose (http://code.google.com/p/mongoose/) is the right tool for us. mongoose is to be started from the directory containing diashow.html and you must enter the URL http://localhost:8080/diashow.html within the browser and the show will work.
You must stop the http server at the end of the show and before ejecting the device containiing the show. You will find within the task bar a symbol with a m which allow to terminate the server.

Remarks

The pciture are not automatically rotated. You must do this manually id necessary.

Some commands are only foreseen as help while producing the show.

Yo may convert mp3 on windows or Mac OS with free tools as for example fre:ac (http://www.freac.org). fre:ac is available for Linux, Windows and Mac OS X.

Lizence

The Author, Jean-Jacques Sarton, allows to use and distrbure diashow.html whithout any restrictions.

Main Page