First review presentation

1. Canvas Based Presentation
Using SVG and JavaScript
First Review
19-01-2012
S.Srikrishnan , V.Vishal Gautham
Final Year, CSE ‘B’
Guided by
R. S. Milton, Ph.D.

2. Progress Made
• Work done till Zeroth Review:
– Collection of background date
– Exploring design possibilities
• Work done till First Review:
– Decision on design technique
– Study of various JavaScript libraries
– Partial Implementation

3. Possibility 1 : Extension to
Inkscape
• Use the extension subsystem of Inkscape to
add functionality - Bridge Design Pattern
• Allows programmers to implement their
extension in a number of ways
• SVG code generated is too long – Uses
namespaces such as sudopodi, Interpreting
takes time

4. Possibility 2 : Apache Batik
• Java-based toolkit for applications or applets
that want to use images in the SVG format for
various purposes, such as display, generation
or manipulation
• Object Orientation features can be employed
• Few Performance issues

5. Possibility 3 : Raphael JS
• JavaScript library that simplifies the work with
vector graphics on the web
• Has an extensible architecture, works good
with animation
• Disadvantages
– Creates a layer over the actual SVG markup
– Native access to elements not possible
– Difficult to implement complex things

6. Possibility 4 : jQuery SVG
• A jQuery plugin that lets you interact with an
SVG canvas
• Provides native access to the elements
• Suitable for complex implementations
• Most suitable for our project

7. More on jQuery SVG
• Code can be easily written if SVG elements
and attributes are known
• Many extensions are available for jQuery SVG
: jquery svg graphs, jquery svg anim,
jquery.svgfilter.js etc.
• Loading is done by attaching the SVG canvas
to a <div> element and using it to retrieve
SVG instance

8. Comparison of SVG and jQuery
SVG code
• <rect x="20" y="50"
width="100"
height="50"
fill="yellow"
stroke="navy"
stroke-width="5" />
• <g
transform="translate(
175 220)">
• svg.rect(20, 50, 100,
50,{fill: 'yellow',
stroke: 'navy',
strokeWidth: 5});
• var g =
svg.group({transfor
m: 'translate(175
220)'});

9. Overall Architecture

10. Libraries in use
• jQuery
• jQuerySVG
• jQueryUI
• jQueryContextMenu
• Panzoom.js

11. Partial Implementation
• Viewport
• Drag & drop of elements
• Tiling the canvas
• Text

12. Future challenges
• Motion paths for presenting
• Nesting of frames and text
• Text editor's selected functionalities

13. 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 http://www.prezi.com

14. 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