ViewSpot

ViewSpot is a framework for creating slideshow presentations like LibreOffice Impress, PowerPoint or KeyNote. It it based on the web technologies HTML, CSS and Javascript. This is no WYSIWYG tool, but you have to write the presentation markup and the configuration into a HTML file.

Getting started

To get an impression, view the demo presentation. You can download the project from the project page on github.

Features

Excellent support for math typesetting
The MathJax plugin converts TeX markup between the tags \[ \] or \( \) into MathML.
Great looking themes
Some well-tried LaTeX Beamer themes are provided. CSS 3 supports eye-candy features like shadows, gradients and rounded corners.
Overlays
Show or hide content or even animate your slides using CSS and Javascript callbacks.
Scripting support (JavaScript)
Do whatever you want using scripts – especially powerful in combination with overlays.
Presenter Console
Different views for the presenter and the audience. Notes for every slide are supported.
Customizable
It is very easy to define own themes using CSS or even Javascript.
Support for controls
This extends the LaTeX approach of different elements like the footer, a title, sidebars etc.
No WYSIWYG
This leads to a separation of content and style, which is very practical: One can write the content and style it afterwards. The productivity increases, because one only has to concentrate on one thing at the same time.
Small download and no installation required
An advantage in comparision to LaTeX (hundred of megabytes) and Impress, because no installation is required. However, when using many plugins, the file size is likely bigger that the size of .odf files.
Extensibility and many useful plugins
A plugin interface is provided and there are e. g. plugins for math, plotting.
Disadvantages:
More user experience required
You have to know HTML, CSS and Javascript. Fortunately, the basics of those languages are easy to learn and Javascript knowledge is only necessary when using advances features. Despite the advantages of a non-WYSIWYG approach, some lusers might feel irritated when they cannot point and click around.
The portability is worse than with PDF files
A modern web browser is required to view the presentations.

To Do List

Documentation

A short intruduction

To be able to use this software, you should at least be able to write HTML and CSS code. When you have downloaded and unpacked ViewSpot, you will see a directory called »framework« and the file »vstool«. The vstool is a Python script with a lot of helpful functions, »framework« contains the actual presentation software. For a basic presentation, create an HTML file in the directory containing »framework«. In the head, load the javascript file »core.js« and set your desired charset. The title is optional. Every div element inside the body tag will be turned into a slide.
        <!DOCTYPE html>
        <html>
        <head>
            <title>My first presentation</title>
            <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
            <script type="text/javascript" src="framework/core.js"></script>
        </head>
        <body>
            <div>
                My first slide.
            </div>
            <div>
                My second slide.
            </div>
        </body>
        </html>
    
Edit your presentation and view the result in a browser. The current slide number is saved in a cookie, so just press F5 to update the presentation.

Navigation

Use the left and right key to move to the previous or next slide. Pressing the space key will show a menu with all available functions and how to access them. It is possible to have different views for the audience and the presenter. Press »W« to change the view. Currently, there are the following views:
Normal View
The fullscreen slide visible to the audience
Preview Console
Shows the current slide and the next slide.
Notes Console
Shows the current slides and notes. Press the up/down key to scroll the notes box up and down.
Slide Sorter
Shows all slides in a matrix. You can select a slide using the array keys or the mouse. Press enter to switch to the normal view and go to the selected slide.

Important elements

To assign notes to a slide, create a div with the class »notes« that contains the HTML markup of the notes. Each slide is supposed to contain a <h1></h1> element, which represents the slide title. To create theorem boxes like in LaTeX Beamer, use this structure:
        <div class="theorem">
            <h2>Theorem title</h2>
            Theorem contents.
        </div>
    
There are some predefined CSS styles that can be applied to each slide by setting the respective class name.

Configuration

Javascript is used to configure the presentation. The most important options are the module list and the slide theme. Example:
        <script>
            vs.config.setGlobal({
                modules : ['mathjax', 'jqplot'],
                defaultClass : 'latex warsaw',
                setupSlide : function(slide) { vs.controls.miniframes(slide); }
            });
        </script>
    
Complete list of configuration options:
OptionExplanationValue
modules List of modules to be loaded. Array of strings that specify the module names. Full module list: ['mathjax', 'raphael', 'jqplot', 'flot', 'syntaxhighlighter']. See chapter »Modules«.
format The slide size in pixels. The slide is resized to the browser viewport size, so actually only the side ratio is relevant. Array with two integer items. The first one is the width, the second one is the height. Default value: [1024, 768].
outerColor The background color of the place next to the slides. CSS color string. Default value: 'black'.
cursorHideTimeout Time after the the not moving cursor is hidden. Integer that specifies the time in milliseconds. Default value: 1000.
setupSlide Javascript callback that sets up the slides. The respective slide is given as a function argument. The callback is called on every slide on the presentation at startup time. The callback can be used to add controls like miniframes or a footer to each slide.
defaultClass List of class names that are assigned to each slide at startup time. Already existing class names are preserved. String containing space-separated class names. Example: 'latex warsaw'.

Modules

It is possible to load third party javascript modules. In the framework directory, each module has an own directory and a loader file called »module.[name].js«. There are the following modules:
jqPlot
For plotting, charts and graphs. It is based on the jQuery framework. See http://www.jqplot.com/.
Flot
Another plotting library based on jQuery. See http://code.google.com/p/flot/. Generally, Flot contains more features and jqPlot has a better support for plugins.
MathJax
Typeset math in the presentation. When you put LaTeX code inside those \[\] brackets, it is converted to a MathML formula. See http://www.mathjax.org.
RaphaelJs
A library for creating and animating SVG graphics. See http://raphaeljs.com/.
SyntaxHighlighter
Highlights code and supports many languages. Put code inside <pre class="brush: ??"></pre> and replace ?? by the language abbreviation, for example »js« or »c«. See http://alexgorbatchev.com/SyntaxHighlighter/.
JSXGraph
Library for interactive geometry, plotting, charting and data visualization. It is even possible to display GeoNext files. See http://jsxgraph.uni-bayreuth.de/wp/.

Overlays

Overlays are like animation in Impress/Powerpoint or like overlays in LaTeX Beamer. The overlays are frame based, that means when navigating, whe frame number changes and the respective overlay is loaded. There are both CSS and Javascript overlays.

Javascript API

Python Tool

One can download ViewSpot and unpack it. Without python tools, the ViewSpot directory has to be copied for each presentation. However, it is more pratical to have one complete ViewSpot repository installed. The Python tools can create a working directory and copy only the needed modules to reduce the directory size. It is possible to let the script download the latest git version. For example, the framework could be installed in /usr/share/webslider/... and have the python tool in /usr/share/vstool. To create a new presentation:
        1) vstool new <dir>
              Ask if no directory is specified. Create a new directory with
              the core files.
        2) vstool install-module <module>
              Display available modules if no module is specified.
        3) create the presentation
More functions (not yet available):
        vstool update-repo
        vstool update-repo-modules
        vstool update-local
        vstool update-local-modules
        vstool doc
        vstool store-fonts

Compatibility

ViewSpot is developed for Firefox and Chromium (Gecko and Webkit). Browser bugs:

License

You can do with the code what you want, if you put a reference to me (that means this site). See MIT license.