Canvas Based Presentation tool - First Review

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 Reﬂects the presenter’s ﬂow 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 simpliﬁes 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 Diﬃcult 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.svgﬁlter.js jquery.svggraphs.js Using jQuery plugin is simple Include the CSS and the Javascript ﬁle 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

Canvas Based Presentation tool - First Review

by Arvind Krishnaa on Feb 04, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Canvas Based Presentation tool - First Review — Presentation Transcript