Main Page

A slide show editor within the browser

Handling of text files with a simple text editor is probably not the best for some people, I have in order to allows to build slide show via a graphical interface.

Browser have not the right to write on the file system. Web server have this possibility so that the slide show editor consist of the GUI (the browser) and an HTTP with PHP interpreter and some PHP scripts.

The web server I recommend is mongoose (http://code.google.com/p/mongoose/). Mongoose is a simple server which don't need to be installed, a copy of the binary within the slide show build directory is sufficient. launching the web server can be done with user right and a complicate configuration is not necessary.

Server as Apache which are commonly provided on open source systems are great but the configuration is not easy and there may be problems with rights and so on.

Installing PHP

Unixoid (Linux,...)

PHP is normally provided by the distribution and can be installed with the specific installations tools.

On Ubuntu 11.04 we need php-cgi and php-gd. For Fedora we have to install php-cli and php-gd.

While launching the mongoose HTTP server we have to pass parameters which tell where the php-cgi file is located.

./mongoose -I `which php-cgi`

You may start the server and the browser via a little shell script.

#!bin/sh
./mongoose -I `which php-cgi` &
firefox http://localhost:8080/edit.php
pkill mongoose
With these few lines we start mongoose as background process and the the browser (Firefox here). After we terminate the browser, the http server will automatically be stopped. This script must be put to the slide show directory and can be started by click within the file manager. Please don't forget to set the execute rights for this script

Windows

On windows we need only a fews files from the php zip archive VC9 x86 Thread Safe (http://windows.php.net/download/). The following files are necessary.
Folgende Dateien werden benötigt:

The file php.ini-production must be renamed as php.ini and a line must be inserted at the begin after:
[PHP]
You have to insert this:
extension=.\php_gd2.dll

The web server must be launched as follows:

mongoose-3.0.exe -I php-cgi.exe
You may also put this into a batch file, eg. mongoose.cmd.

Files and directories

The main file edit.php muss be copied to the slide show directory.

The files needed by edit.php are located within the data directory which must also be copied to the slide show main directory.

The text files (html) will be stored within the textes folder Text-Dateien (Html) werden im Verzeichnis textes. Font files (*.woff) are to be placed within the durectory textes/fonts.

Picture are to be copied within sub folders of the slide show. The name is not important but shal not be data, doc, textes or music.

Sound files (ogg) are to be provided within the music directory.

Bedienung von edit.php

Im Browser ist die Adresse: http://localhost:8080/edit.php einzugeben.

The GUI contain 3 main area. On the top area you may display the text (html) files and pictures from the selected directory.

The middle area contain a trash and a clipboard

The bottom area contain all pictures and texte for the slide show. You may also add a sound file or a text to a picture by double clic on the wanted element. With the rigth mouse button you have the possibility to modify the textes and there appearance and also to modify the projections time for a particular element.

Pictures and textes are moved to the wanted place by drag and drop. The placement is always (within the slide show area) before the element where you drop the picture.

Text files can be modified by pressing the rigth mouse button.

With double clic you will access a panel which allows to set some parameters for the show.

New text files can be created by pressing the button below the slide show area. The slide show is also saved by clic on the corredponding button.

Browser Kompatibilityt und Problems

There is no perfect browser. Google-chrome seem to contain a very good artificial intelligence module, some error are not taken into account and the results are as expected by the programmers but not as to be done accordimg to the code. The other browser (Firefox and Opera) to the job correctly and don't correct internaly the buggy code.

Opera don't have support for drag and drop as defined by W3C. Due to this a special script operaDragAndDrop.js (gitHub.com) what used.

Opera don't work with sizes bigger than 32764px and therefore the different area are to small in order to display the content of a directory or the whole slide show. With opera, if the available width is reached, the element will be arranged within multiple lines.

Opera hat ein sehr aggressives Caching, Änderungen von Javascript Dateien werden ignoriert wenn Opera nicht entsprechend konfiguriert wird. Um das Laden der Datei 'list.js' zu erzwingen wird diese Datei per Javascript eingelesen.

There are also errors for some style attribute within opera, this has made some modifiaction of the first code necessary.

Firefox drag all selected elements, this may produce errors. In order to get firefox working. an eventual (unwanted) selection is cleared before the drag an drop operation.

Html 5 made provision for extended input elements, the implementation is not OK, at this time, for all browser. We had to use special javascript: fd-slider.js (gitHub.com) and jscolor.js in order to provide an easy input interface.

Main Page