The introduction to Canvas Based Presentation and its features compared to Slide-ware presentations

1. Canvas Based Presentation
Using SVG and Javascript
S.Srikrishnan
Final Year, CSE ‘B’
V.Vishal Gautham
Final Year, CSE ‘B’
(Arvind Krishnaa J)
(Final Year CSE ‘A’)
Guided by
R. S. Milton, Ph.D.

2. Presentation Paradigms
Slide • Information is organized into slides.
• Each slide typically consists of a list
of bulleted points.
Based • Eg., Microsoft PowerPoint,
OpenOffice Impress etc.,
Canvas • The material to be presented is laid
out in a large canvas without any
page (slide) boundaries.
Based • View can change orientation to suit
the information to be presented.

3. Why not the Slide Based Paradigm?
• Features can be
complicated to use.
• Tendency to skip slides
– leads to distract the
audience.
• Single pre-set path.
• Presence of content
creator is not critical
during the presentation.

4. Edward Tufte’s Views
Edward Tufte
• Slide-ware reduces the
analytical quality of
presentations.
• Bullets are just raw facts
listed point-wise.
• Abuse of graphical
technique.
He is noted for his writings
• Suggests the use of web
on information design and as a browser as a
pioneer in the field of data presentation tool.
visualization.

5. Why Canvas Based Paradigm?
• Tweaked to the • Animations and other
level of detail the rich form of
presenter wants multimedia
to express • Presentation never
Flexibility Attractive seems monotonous
Focus Flow
• Emphasis more on • Reflects the
the central idea. presenter’s flow of
• Audience thought process.
concentrate better

6. Prezi – A Canvas Presentation Tool
• Canvas based
presentation software
developed using Flash™.
• Ideas explored on a
virtual canvas.
• Zooming in and out of
presentation media (ZUI).
• Text, images, videos can
be grouped together as
frames.

7. LandScape – Our Canvas Presentation
Tool
• Animates the presentation
elements.
SVG
• Open standard
• Supported by modern browsers.
• Programmatically manipulate the
JavaScript
components of the presentation.

8. Scalable Vector Graphics (SVG)
• Language for describing two-
dimensional graphics in XML.
• Three types of graphic objects
– Vector graphic shapes
– Images
– Text
• Objects can be grouped, styled,
transformed and composited
SVG Viewers
Web
Applications
Browsers
Inkscape
“Vector graphics is more flexible Batik Squiggle
than raster graphics”

9. Inkscape – An SVG Editor
• Allows drag and drop
creation of SVG.
• Full fledged editor with
advanced image
processing support.
• Animation toolbox
allows individual
elements to be
animated.
• JessyInk extension to
Inkscape allows the
creation of basic
canvas presentations

10. Features and Drawbacks of
JessyInk
(a) Create both slide- (a) Limited set of
based as well as canvas- features with respect to
based presentations. animation, transition
(b) Light-weight effects etc.,
extension to Inkscape (b) Poor performance in
most browsers.
(c) Not suitable for the
common man to create.

11. LandScape User Interface
Plugin for Inkscape
Integrating a plugin
using Python
Raphaël.js Apache Batik
Raphaël is a small JavaScript Creating/ Java-based toolkit for applications or
library that should simplify
your work with vector graphics Editing the applets that want to use images in
the SVG format for various purposes,
on the web presentation such as display, generation or
manipulation

12. Features
Features
Dynamic Importing
Multi-
control of multiple
Exporting Templates Platform
Presentati media
support
on formats
Text
Motion
Pan, zoom Exporting Export as outline as
path for
and rotate as SVG PDF notes for
transitions
presenter

13. Scope and Goal
• Will be used to create attractive
canvas based presentations.
• Requires some level of expertise
to create content.
• May not have all features of
commercially available software.
• Useful for teacher to create
lecture slides.
• Presentation not too dependent
on features of the viewer.
• Browser requirements are quite
nominal.
• Integration of JavaScript layer
over SVG.

14. References
*1+ Edward R. Tufte, “The Visual Display of Quantitative Information”,
Second Edition, Graphics Press LLC, 2001.
*2+ W3C Recommendations, “Scalable Vector Graphics (SVG) 1.1”
(Second Edition)
http://www.w3.org/TR/SVG/
[3] Raphael.js, a cross-browser JavaScript library for drawing vector
graphics on websites
http://www.raphaeljs.com
[4] Apache Batik, Java classes for manipulating SVG
http://xmlgraphics.apache.org/batik/javadoc/
[5] Prezi, a cloud based SaaS presentation software
http://www.prezi.com
[6] Taymjong Bah, “Inkscape guide to a vector drawing program”, Third
Edition, Prentice Hall