The document describes the development of a canvas-based presentation tool called Canscape that uses Scalable Vector Graphics (SVG) and JavaScript. It outlines the limitations of traditional slide-based tools and advantages of canvas-based presentation. Canscape allows adding text, images, and shapes to a canvas and manipulating the view through pan, zoom, and rotation. It was implemented using SVG, jQuery, and JavaScript and allows creating and exporting interactive presentations. Future enhancements mentioned include animation editor and ability to export to other formats.

1. Canvas–Based Presentation Tool
Using Scalable Vector Graphics and
JavaScript
S. Srikrishnan, V. Vishal Gautham
31508104099, 31508104120
Guided By
Dr. R. S. Milton
Professor
Department of Computer Science
SSN College of Engineering
Final Review – 16th April, 2012

2. Outline
1 Introduction
2 Literature Survey
3 Proposed Methodology
4 Design and Implementation
5 Evaluation and Results
6 Conclusion
7 References

3. Presentation Paradigms
The model and tool used for presenting information is critical
to effective pedagogy
Two popular paradigms for presenting information are
Slide–Based Paradigm
Information is organized into slides
Each slide typically consists of a list of bulleted points
Tools: Microsoft PowerPoint, OpenOffice Impress etc.
Canvas–Based Paradigm
The material to be presented is laid out on a large canvas
without any page (slide) boundaries
View can change orientation to suit the information to be
presented

4. Why not the Slide–Based Paradigm?
Reduces the analytical quality of presentations— Edward
Tufte’s views
Forces us to split the information into parts in multiple
slides— Obstructs perception
Tendency to skip and hop between the slides— Distracts the
audience
Static navigation path— Creator loses control over the
presentation
Listeners tend to focus on the slide, rather than on the
presenter

5. Canvas–Based Paradigm
The entire content is laid out on a boundary-less view area,
called a ‘canvas’
Information laid out freely and naturally
Reflects creator’s thought process
In addition to a two-dimensional space, it has depth and time
as third and fourth dimension respectively
Pan, zoom and rotate— provides continuity and smooth
transitions
Pan— Shift focus from one region to other in the same level
Zoom— View finer details of a level
Rotate— Reveal information in a different orientation

6. Existing Work
JessyInk
An extension to Inkscape editor
Saved as a SVG file— Can be opened in browser
Allows zooming in and out in a layer— Still remains slide-based
Prezi
Flash-based implementation— presentation is black-box
Only raster images can be added— pixelation occurs on
zooming
Limits its use in mobile devices with no flash player
Ahead
Implementation almost similar to Prezi
Few additional functionalities such as layers, spaces etc.
Has the same disadvantages as Prezi

7. Building Canscape— Our Canvas–Based
Presentation Tool
Scalable Vector Graphics (SVG)
Animates the presentation elements
Free Open standard
Supported by modern browsers
Figure: Raster vs SVG Graphics
JavaScript
Programmatically manipulate the components of the
presentation
W3 Compliant web browser
Editing tool as well as presenting medium

8. Organization of information in the canvas
Zoom
In
Main
Topic
Sub
Topic 1
Sub
Topic 2
Sub
Topic 3
Sub
Topic 4
Sub
Topic 5
Sub
Topic
1.1
Sub
Topic
1.2
Sub
Topic
3.1
Sub
Topic
5.1
Sub
Topic
5.2
Pan Pan
Zoom
Out
Figure: Organization of information in the canvas

9. Abstraction of Canscape’s functionalities
Presentation Editor
Insertion,
Rotation,
Drag and
Drop of
Lines, Shapes
and Images
Navigation
Paths,
Viewport
Transforma-
tion, Panning
and Zooming
Canvas
Text
Insertion,
Editing and
Formatting
Graphics
Editor
Transition
Editor
Text Editor
Figure: Components of presentation tool

10. Implementation Framework
jQuery SVG
Ellipse Rectangle Circle Text Image
image.php
CANVAS
index.html
User
Interface
Pan
Zoom
Rotate
Navigation
Path Layout
JavaScript
Utilities
save.php export.php
Snapshot of
index.html
Current
contents and
transforma-
tions
intact
Export the
final
presentation as
an HTML file
Figure: Architecture Diagram

11. Workflow
Editing
Saved
Presentation Exit
Set
Presentation
Path
Create Export Close
Save Edit / Open
Edit
Close
Figure: Workflow Diagram

12. Screenshot - Canscape UI
Figure: Canscape– User Interface

13. Screenshot - Adding Text, Shapes, Hotspots
Figure: Adding content

14. Screenshot - Exported Presentation
Figure: Exported Presentation

15. Comparison with existing work
Free and open standards
Multi-platform support
Ability to import SVG images (including animated ones)
Very less file size— occupies only a few KBs

16. Impact on pedagogy
Refreshingly different way of organizing content
A better, innovative teaching aid
Ability to import animated images— Makes the understanding
clear
Productive lecturer–audience interaction

17. Future Enhancements
Animation editor— to create simple animations for various
use-cases
Layers— Event-triggered mechanism; piecewise
time-sequenced manner to toggle between canvas content
Multiple workspaces— Allows user to shift the working area
from one location to another
Exporting the presentation as TEXformat— To prepare
handouts to the audience
Inserting tables, charts, graphs, templates etc. into the canvas

18. References
[1] E. R. Tufte, The Cognitive Style of PowerPoint: Pitching Out
Corrupts Within, 2nd ed. Graphics Press, 2006.
[2] J. Locke, An essay concerning human understanding: With the
notes and illustrations of the author, and an analysis of his doctrine
of ideas. Also, questions on Lockes essay. W. Tegg and co., 1879.
[3] K. Zvelebil, Companion studies to the history of Tamil
literature, ser. Handbuch Der Orientalistik: Indien.
Erganzungsband. Brill, 1992.
[4] I. Parker, Absolute powerpoint: Can a software package edit
our thoughts? 2001.

19. References
[5] C. Lindley, jQuery Cookbook, 1st ed. OReilly Media, 2009.
[6] S. Powers, Learning JavaScript, 1st ed. OReilly Media, 2009.
[7] A. T. H. III, Ajax: The Definitive Guide, 1st ed. OReilly Media,
2008.
[8] J. D. Eisenberg, Producing Scalable Vector Graphics with XML:
SVG Essentials, 1st ed. OReilly Media, 2002.
[9] Alexander Kolesnikov, Java Drawing With Apache Batik: A
Tutorial, 1st ed. Brainy Software, 2007.

20. References
[10] T. Teatro, “A tutorial introduction to jessyink: Presentations
in inkscape, 2010. [Online]. Available:
http://code.google.com/p/jessyink/wiki/Publications
[11] P. A. Adam Somlai-Fischer, Peter Halacsy, “Prezi the
zooming presentation editor, 2012. [Online]. Available:
http://www.prezi.com/
[12] K. Wood, “jQuery SVG, 2007. [Online]. Available:
http://keithwood.name/svg.html