Canvas Based Presentation usingScalable Vector Graphics and

JavaScript

(Arvind Krishnaa .J) S.Srikrishnan, V.Vishal Gautham(31508104017),31508104099, 31508104120

Guided By

Dr. R.S.MiltonProfessor

Department of Computer Science and EngineeringSSN 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 paradigmInformation is organized into slidesEach slide typically consists of a list of bulleted pointsDisadvantage

Might distract the audienceSingle pre-set path

Edward Tufte’s viewsCanvas based paradigm

The material to be presented is laid out in a large canvaswithout any page (slide) boundariesView can change orientation to suit the information to bepresentedAdvantages

Reflects the presenter’s flow of thought processTweaked to the level of detail the presenter wants to express

Technological Aspects

Scalable Vector Graphics (SVG)

Animates the presentation elements.Open standardSupported by modern browsers

JavaScript

Programmatically manipulate the components of thepresentation

W3 Compliant web browser as presentation tool

Upto Zeroth Review

Work done till Zeroth review:

Collection of background dataExploring design possibilities

Work done till First review:

Decision on design techniqueStudy of various JavaScript librariesImplementation

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 numberof ways

Disdvantages

SVG code generated is too long; Uses namespaces such assudopodi etc.Parsing of SVG code takes a longer time

Possibility 2 : Using Apache Batik

A Java-based toolkit used for applications or applets thatwant to use images in SVG format for various purposes, suchas display, generation or manipulation

Advantages

Very standard compliantSVG generator module to export an applet’s graphics to SVGSVG viewing component to very easily integrate SVG viewingand interaction capabilities

Disdvantages

Batik archive is quite bigSome browsers, notably mobile browsers running Apple iOS orAndroid do not run Java applets at allOften has high execution time

Possibility 3 : Using JavaScript Libraries

Raphael JS

JavaScript library that simplifies the work with vector graphicson the webAdvantages

Simple to use framework for creating graphicsHas an extensible architecture - Plugins can be added

Disdvantages

Creates a layer over the actual SVG markupDifficult 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 addedSuitable for complex implementations

Code can be easily written if SVG elements and its attributesare known

More on jQuery SVG

Main package for drawing primitives : jquery.svg.js

Many extensions also available jQuery SVG

jquery.svgadmin.jsjquery.svgfilter.jsjquery.svggraphs.js

Using jQuery plugin is simple

Include the CSS and the Javascript fileAdd any extension package neededAttach a SVG canvas to div using its selectorOnce loaded, retrieve the SVG instance to use itAdditional parameters may be passed to the initial attachmentcall - 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 PathsTranslating and scaling the viewport

Text editor’s selected functionalities

Adding text objectsEdit the existing text objectsAligning the text contentsFormatting text contents

Nesting of frames and text SVG objects

References

[1] Edward R. Tufte, The Visual Display of QuantitativeInformation, 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 vectorgraphics on websites http://www.raphaeljs.com

[5] Apache Batik, Java classes for manipulating SVGhttp://xmlgraphics.apache.org/batik/javadoc/

[6] Prezi, a cloud based SaaS presentation softwarehttp://www.prezi.com

References

[7] jQuery, a JavaScript library to simplify scripting in HTMLhttp://www.jquery.com/

[8] jQuery Plugins http://archive.plugins.jquery.com/

[9] jQuery UI, a jQuery user interface libraryhttp://www.jqueryui.com/

[10] jQuery ContextMenu, a jQuery plugin for context menushttp://medialize.github.com/jQuery-contextMenu/

[11] jQuery SVG, a jQuery plugin to interact with SVGhttp://keith-wood.name/svg.html