1. Canvas Based Presentation using
Scalable Vector Graphics and
JavaScript
(Arvind Krishnaa .J) S.Srikrishnan, V.Vishal Gautham
(31508104017),31508104099, 31508104120
Guided By
Dr. R.S.Milton
Professor
Department of Computer Science and Engineering
SSN College of Engineering
First Review - 19th January, 2012

2. Outline
1 Recap
2 Exploring Possibilities
3 Using jQuery SVG
4 SVG and jQuery SVG
5 Architecture
6 Implementation
7 References

3. Recap
Slide based paradigm
Information is organized into slides
Each slide typically consists of a list of bulleted points
Disadvantage
Might distract the audience
Single pre-set path
Edward Tufte’s views
Canvas based paradigm
The material to be presented is laid out in a large canvas
without any page (slide) boundaries
View can change orientation to suit the information to be
presented
Advantages
Reflects the presenter’s flow of thought process
Tweaked to the level of detail the presenter wants to express

4. Technological Aspects
Scalable Vector Graphics (SVG)
Animates the presentation elements.
Open standard
Supported by modern browsers
JavaScript
Programmatically manipulate the components of the
presentation
W3 Compliant web browser as presentation tool

5. Upto Zeroth Review
Work done till Zeroth review:
Collection of background data
Exploring design possibilities
Work done till First review:
Decision on design technique
Study of various JavaScript libraries
Implementation

6. Possibility 1 : Extension to Inkscape
Inkscape - Free and Open Source Vector Graphics Editor
Use the extension subsystem of Inkscape to add functionality -
Bridge Design Pattern
Advantages
Allows programmers to implement their extension in a number
of ways
Disdvantages
SVG code generated is too long; Uses namespaces such as
sudopodi etc.
Parsing of SVG code takes a longer time

7. Possibility 2 : Using Apache Batik
A Java-based toolkit used for applications or applets that
want to use images in SVG format for various purposes, such
as display, generation or manipulation
Advantages
Very standard compliant
SVG generator module to export an applet’s graphics to SVG
SVG viewing component to very easily integrate SVG viewing
and interaction capabilities
Disdvantages
Batik archive is quite big
Some browsers, notably mobile browsers running Apple iOS or
Android do not run Java applets at all
Often has high execution time

8. Possibility 3 : Using JavaScript Libraries
Raphael JS
JavaScript library that simplifies the work with vector graphics
on the web
Advantages
Simple to use framework for creating graphics
Has an extensible architecture - Plugins can be added
Disdvantages
Creates a layer over the actual SVG markup
Difficult to use in complex applications
jQuery SVG
Yahoo User Interface (YUI)

9. Using jQuery SVG
Written as a plugin to jQuery library
Lets you interact with an SVG canvas
Advantages
Provides native access to the elements - what we wanted!
Has an extensible architecture - Plugins can be added
Suitable for complex implementations
Code can be easily written if SVG elements and its attributes
are known

10. More on jQuery SVG
Main package for drawing primitives : jquery.svg.js
Many extensions also available jQuery SVG
jquery.svgadmin.js
jquery.svgfilter.js
jquery.svggraphs.js
Using jQuery plugin is simple
Include the CSS and the Javascript file
Add any extension package needed
Attach a SVG canvas to div using its selector
Once loaded, retrieve the SVG instance to use it
Additional parameters may be passed to the initial attachment
call - Supports overloading

11. SVG and jQuerySVG
SVG
<rect x="20" y="50" width="100" height="50"
fill="yellow" stroke="navy" stroke-width="5">
<g transform="translate(175 220)>"
jQuery SVG
svg.rect(20, 50, 100, 50,{fill: ’yellow’,
stroke: ’navy’, strokeWidth: 5});
var g = svg.group({transform: ’translate(175 220)’});

12. Architecture

13. Libraries Used
jQuery
jQuerySVG
jQueryUI
jQueryContextMenu
Panzoom.js

14. Partial Implementation
Viewport panning and zooming
Elements insertion and drag drop
Creation of tiles for canvas background
jQueryContextMenu
Creation of Text (Preliminary)

15. Screenshot - User Interface

16. Screenshot - SVG Drag and Drop

17. Screenshot - Text manipulation

18. Screenshot - Tiles, Context Menu

19. Implementation issues to be resolved
Animation Editor’s selected functionalities
Creation of Motion Paths
Translating and scaling the viewport
Text editor’s selected functionalities
Adding text objects
Edit the existing text objects
Aligning the text contents
Formatting text contents
Nesting of frames and text SVG objects

20. 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] Taymjong Bah, Inkscape guide to a vector drawing program?,
Third Edition, Prentice
[4] Raphael.js, a cross-browser JavaScript library for drawing vector
graphics on websites http://www.raphaeljs.com
[5] Apache Batik, Java classes for manipulating SVG
http://xmlgraphics.apache.org/batik/javadoc/
[6] Prezi, a cloud based SaaS presentation software

21. References
[7] jQuery, a JavaScript library to simplify scripting in HTML
http://www.jquery.com/
[8] jQuery Plugins http://archive.plugins.jquery.com/
[9] jQuery UI, a jQuery user interface library
http://www.jqueryui.com/
[10] jQuery ContextMenu, a jQuery plugin for context menus
http://medialize.github.com/jQuery-contextMenu/
[11] jQuery SVG, a jQuery plugin to interact with SVG
http://keith-wood.name/svg.html