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
Top Related