Canvas Based Presentation tool - First Review


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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 ={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) [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 [5] Apache Batik, Java classes for manipulating SVG [6] Prezi, a cloud based SaaS presentation software
  21. 21. References [7] jQuery, a JavaScript library to simplify scripting in HTML [8] jQuery Plugins [9] jQuery UI, a jQuery user interface library [10] jQuery ContextMenu, a jQuery plugin for context menus [11] jQuery SVG, a jQuery plugin to interact with SVG