Canvas Based PresentationUsing SVG and JavaScript

First Review19-01-2012

S.Srikrishnan , V.Vishal GauthamFinal Year, CSE ‘B’

Guided byR. S. Milton, Ph.D.

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

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

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

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

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

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

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({transform: 'translate(175 220)'});

Overall Architecture

Libraries in use

• jQuery• jQuerySVG• jQueryUI• jQueryContextMenu• Panzoom.js

Partial Implementation

• Viewport• Drag & drop of elements• Tiling the canvas • Text

Future challenges

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

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

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