feklee/presvg

pres/v/g presentation tool for the web: present, annotate, print

Introduction

pres/v/g is a tool for giving presentations and making them accessible on the web, together with annotations.

Download on GitHub. For a demo, see below.

What's in it for you

• Create modern, engaging presentations with information laid out graphically on a virtual canvas.

• Annotate presentations so that they can be viewed unattended. Or create notes to assist you when giving a presentation.

• Print presentations.

• Host presentations anywhere you like. Your data belongs to you!

• View presentations with any modern HTML5 web browser. No plugins such as Flash are required.

• Author presentations with the tools of your choice. All graphics programs that export well-formatted SVG are supported.

• Use the pres/v/g API to create your own user interface for presentations.

• Open Source

Similar tools

• Prezi: Popularized presentation using a virtual canvas. Proprietary cloud-based software with integrated editor. Strong vendor lock-in. Requires Flash to view presentations on the web.

• Sozi: A plugin for Inkscape to create presentations in SVG. Open Source.

Demo

Try it live on GitHub. Details:

• Start page: demo.html

• The demo needs to be hosted on a web server.

  Suggestion for users of Dropbox: Just put the current directory into your Public folder, and then open the public URL of demo.html in a browser.

• Keyboard navigation:

  • right arrow, page down: next frame

  • left arrow, page up: previous frame

Authoring presentations

Suggested steps

1. Create SVG: presentation.svg

   See below for example steps on how to create the SVG.

2. Create directory for texts: presentation_texts

3. For each frame ID, create a text file:

   • Name: frame ID + .md

   • File format: Markdown

   • Character encoding: UTF-8

4. Copy demo.html to: presentation.html

5. Edit settings at the top of: presentation.html

Suggested steps to create SVG in Inkscape 0.48

1. Create graphics.

2. Convert text into outlines via menu: Path / Object to Path

3. Create frames. For each frame:

   1. From demo.svg copy a frame border, which is a rectangle with a hole.

   2. Transform the frame border into place.

   3. Set a frame ID via menu: Object / Object Properties... / Id

4. Save as Plain SVG via menu: File / Save a Copy...

Suggested steps to create SVG in Illustrator CS5

1. Set in preferences:

   Units / Identify Objects by: XML ID

   Then XML IDs of frames are the same as the labels of the corresponding objects in Illustrator.

2. Create graphics.

3. Create frames. For each frame:

   1. From demo.svg copy a frame border, which is a rectangle with a hole.

   2. Transform the frame border into place.

   3. In the layers panel, give the frame border a name. This name is the ID of the corresponding frame in the presentation. Note that spaces are not allowed in the ID.

4. Export as SVG via menu: File / Save a Copy...

   Suggested options:

   • SVG Profiles: SVG 1.1

   • Fonts / Type: Convert to outline

   • Images / Location: Link

   • CSS Properties: Presentation Attributes

   • Decimal Places: 7 (for deep zooming with high precision)

   • Encoding: Unicode (UTF-8)

FAQ – Frequently Asked Questions

• My SVG doesn't load into pres/v/g – what to do?

  Try loading the SVG directly into the browser, and look out for error messages. If there are none, then double check your pres/v/g settings.

• Why not use a closed retangle as a frame border?

  The frame border needs to be assymetric in order to preserve rotation, at least in Illustrator CS5. Suppose you draw a 10×5 px rectangle and rotate it by 90°. Then Illustrator CS5 will create a 5×10 px rectangle, thereby removing information about the rotation.

• What are the requirements when draing a frame border?

  Use a poly line with at least two segments, joined in a right angle. The minimum frame border looks as follows, with the first point in the upper left corner:

  1-----2
        |
        3
  

  All other line segments are ignored, meaning that you can as well draw the frame border as follows:

  1-----2
  5     |
  |     |
  4-----3
  

• What can I do if images that I linked from my SVG are not loaded?

  Make sure that the SVG is in the same directory as the HTML file of the presentation. The reason is that image paths are interpreted as relative to the HTML file, not as relative to the SVG.

  If that does not solve the problem, then load the SVG directly into the browser and check for error messages.

• Why doesn't my SVG render or print correctly?

  As of February 2012, browser support for SVG is still not perfect. Make sure that your browser is at the latest version. Also try with another browser.

  Comparing Chrome 17.0, Opera 11.61, and Firefox 10.0: Firefox produces the best printout of the demo.

The pres/v/g API

With the pres/v/g API you can embed presentations into your web-site. The user interface can be freely designed. Usage:

• Include:

  • js/presvg.js

  • jQuery 1.7 or compatible

  • jQuery SVG 1.4.4 or compatible: jquery.svg.css, jquery.svg.js, jquery.svgdom.js

  • jQuery Footnote Links: footnote-links.js

  • Pagedown: Markdown.Converter.js, Markdown.Sanitizer.js

• Use the functions presvg.interactive() and presvg.print().

• For an example on using the API, see: js/page.js

Development

Tests

Regularly check:

• Demo: Do rotations work? Are scroll bars in long text OK? Does video playback work? Are bitmap graphics displayed? etc.

• If a text file is missing, a corresponding message should be displayed in the text box. There should be no fatal error.

• Error messages should appear when:

  • SVG cannot be loaded,

  • settings contain a frame that doesn't exists in SVG,

  • required settings are missing.

Versioning

The version of releases is structured as:

major.minor.bugfix

Coding conventions

Maximum line length: 79 characters

JavaScript:

• Files need to validate with JSLint.

• Identifiers are written in camel case. The first character is in lower case, except for constructors where it is in upper case.

Git:

• Tag every release with the version prefixed by a v. Example:

  v1.2.3

• Adhere to the model commit message from the article A Note About Git Commit Messages. That message contains a summary on the first line, with maximally 50 characters. It is followed by an optional empty line plus body, with a maximum line length of 72 characters.

• For branches related to versions, prefix version numbers with a b. This is to avoid ambiguity with GIT commands such as "checkout" that accept tags and branches in the same parameter position. Example:

  b1.2.3

Legal

Copyright 2012 Felix E. Klee

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

presvg's Issues

Support playback of SVG animations

Fix Opera, Firefox issue: Navigation fails after closing other window

How to replicate:

1. Load the presentation.
2. Open SVG window.
3. Close SVG window.
4. Click on the slider. It will jump to the selected position but then go all the way back to the previous position.

The problem is that in step 4, the script tries to also update the path position in the other window. This fails when calling $('#slider').slider('value', pathPos); for that window. Due to the error, script execution is stopped, and consequently for the current window not all code is executed.

Make it possible to zoom the virtual canvas

… for example by adding loupe buttons to the navigation bar at the bottom. Or create a navigation control like on Google Maps or Earth, which would allow panning, zooming, and rotating.

Consider using one HTML file for several presentations

Possible example URL: index.html#presentation=demo&pathPos=5&view=default

Then also put settings in a separate file, such as settings.js in the same location as the SVG file.

Make it possible to pan the virtual canvas

… simply by dragging it.

Tweak documentation

Just some tweaks.

Test with IE9

Preload videos

… so that they show up quicker. The probably means using the YouTube iframe API. Could mean more resource use, though.

Consider rendering animations using SMIL

SVG supports animation by a technology called SMIL. Using SMIL may be a good idea because then the SVG renderer knows explicitly that it should animate. Thereby the renderer is possibly able to display resource friendly and smooth animations.

Offer minimized version of: presvg.js

Support IE7 and IE8 via svgweb

About svgweb: http://code.google.com/p/svgweb/

Consider showing warning when connection to synchronized SVG view is lost

Scenario: User opens SVG view, which shows the presentation in a separate window. This view is synchronized with the default view: Any changes in the position within the presentation path are mirrored. However, if the user reloads either the default or the SVG view, then the connection between the windows is lost. They are not in sync anymore.

SVG appears clipped in Firefox

Only the upper left hand part of the SVG is visible.

Implement initial feature set

Provide: default view, SVG view (for presentation), and print view.

Perhaps get rid of setOtherInteractiveWindow

There seems to be a simpler alternative: https://developer.mozilla.org/en/DOM/window.opener

Make it possible to put SVG outside HTML file path

Currently, the SVG file has to have the same base URL as the HTML file into which it is included. See README.md.

Once the SVG file can be positioned anywhere:

• Use new structure for demo:

  demo.html
  demo/presentation.ai
  demo/presentation.svg
  demo/texts/...
  demo/images/...
  

• Update README.md.

Make printouts nicer

Perhaps by default print each frame on one page. Example HTML code which I hacked into a specific presentation to achieve that effect:

<style type="text/css" media="print">
    html.printView div.frame, html.printView div.footnoteLinks {
        page-break-after: always;
        page-break-inside: avoid;
        margin-bottom: 20cm;
    }
</style>

Also, consider offering a remove-duplicates option.

Don't show duplicate frames in print view

Some presentations contain one frame several times, for example to repeatedly show "the big picture". However, in print mode, showing the same frame several times appears superfluous. Instead the following system could be used:

• Attache numbers to frames.
• Reference existing frames by number.

Sample printout structure:

+--(1)
|   |
+---+

  ↓

+--(2)
|   |
+---+

  ↓

 (1)

  ↓

+--(3)
|   |
+---+

SVG doesn't load in Chrome 19.0

In Chrome 19.0, the SVG doesn't appear. Yet there is no error message in the developer tools console.

Style text scroll bar

Possibilities:

• CSS (webkit): Take a look at Google mail's scroll bar in Chrome.
• JavaScript: jScrollPane looks interesting.

In any case: The most important is that the scroll bar works smoothly in all supported browsers and on all devices, including tablets and perhaps mobile phones.