• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Canvas Based Presentation tool - First Review
 

Canvas Based Presentation tool - First Review

on

  • 1,238 views

 

Statistics

Views

Total Views
1,238
Views on SlideShare
1,234
Embed Views
4

Actions

Likes
0
Downloads
4
Comments
0

2 Embeds 4

http://www.linkedin.com 3
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Canvas Based Presentation tool - First Review Canvas Based Presentation tool - First Review Presentation Transcript

    • 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
    • Outline 1 Recap 2 Exploring Possibilities 3 Using jQuery SVG 4 SVG and jQuery SVG 5 Architecture 6 Implementation 7 References
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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)
    • 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
    • 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
    • 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)’});
    • Architecture
    • Libraries Used jQuery jQuerySVG jQueryUI jQueryContextMenu Panzoom.js
    • Partial Implementation Viewport panning and zooming Elements insertion and drag drop Creation of tiles for canvas background jQueryContextMenu Creation of Text (Preliminary)
    • 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 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
    • 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
    • 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