Canvas Based Presentation using Scalable Vector Graphics and          JavaScript   (Arvind Krishnaa .J) S.Srikrishnan, V.V...
Outline  1   Recap  2   Exploring Possibilities  3   Using jQuery SVG  4   SVG and jQuery SVG  5   Architecture  6   Imple...
Recap    Slide based paradigm        Information is organized into slides        Each slide typically consists of a list o...
Technological Aspects     Scalable Vector Graphics (SVG)         Animates the presentation elements.         Open standard...
Upto Zeroth Review    Work done till Zeroth review:        Collection of background data        Exploring design possibili...
Possibility 1 : Extension to Inkscape     Inkscape - Free and Open Source Vector Graphics Editor     Use the extension sub...
Possibility 2 : Using Apache Batik     A Java-based toolkit used for applications or applets that     want to use images i...
Possibility 3 : Using JavaScript Libraries     Raphael JS         JavaScript library that simplifies the work with vector g...
Using jQuery SVG    Written as a plugin to jQuery library    Lets you interact with an SVG canvas    Advantages        Pro...
More on jQuery SVG    Main package for drawing primitives : jquery.svg.js    Many extensions also available jQuery SVG    ...
SVG and jQuerySVG  SVG  <rect x="20" y="50" width="100" height="50"         fill="yellow" stroke="navy" stroke-width="5"> ...
Architecture
Libraries Used     jQuery     jQuerySVG     jQueryUI     jQueryContextMenu     Panzoom.js
Partial Implementation     Viewport panning and zooming     Elements insertion and drag drop     Creation of tiles for can...
Screenshot - User Interface
Screenshot - SVG Drag and Drop
Screenshot - Text manipulation
Screenshot - Tiles, Context Menu
Implementation issues to be resolved     Animation Editor’s selected functionalities          Creation of Motion Paths    ...
References  [1] Edward R. Tufte, The Visual Display of Quantitative  Information, Second Edition, Graphics Press LLC, 2001...
References  [7] jQuery, a JavaScript library to simplify scripting in HTML  http://www.jquery.com/  [8] jQuery Plugins htt...
Upcoming SlideShare
Loading in...5
×

Canvas Based Presentation tool - First Review

1,052

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,052
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Canvas Based Presentation tool - First Review

  1. 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. 2. Outline 1 Recap 2 Exploring Possibilities 3 Using jQuery SVG 4 SVG and jQuery SVG 5 Architecture 6 Implementation 7 References
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. Architecture
  13. 13. Libraries Used jQuery jQuerySVG jQueryUI jQueryContextMenu Panzoom.js
  14. 14. Partial Implementation Viewport panning and zooming Elements insertion and drag drop Creation of tiles for canvas background jQueryContextMenu Creation of Text (Preliminary)
  15. 15. Screenshot - User Interface
  16. 16. Screenshot - SVG Drag and Drop
  17. 17. Screenshot - Text manipulation
  18. 18. Screenshot - Tiles, Context Menu
  19. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×