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
- more themes
- improve menu
- implement Python tools
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:
Option | Explanation | Value |
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:
- Firefox renders scaled fonts twice, which makes letters to dance.
Before presenting, one should scroll through the slides, because
the bug only appears once for each scale.
- Firefox does not render scaled borders and box shadows correctly. A complex workaround is used
to make it look properly.
- Chromium does not support MathML, that is why the HTML-CSS output is used in MathJax.
- Chromium fires the mousemove event when the cursor shape changes. There is an easy workaround.
- Chromium does not support local cookies by default.
- Chromium does not support local ajax requests, because it thinks this would be
a cross origin request.
License
You can do with the code what you want, if you put a reference to me (that means this site).
See MIT license.