Canvas Based Presentation usingScalable Vector Graphics and

JavaScript

S. Srikrishnan, V. Vishal Gautham31508104099, 31508104120

Guided By

Dr. R. S. MiltonProfessor

Department of Computer Science and EngineeringSSN College of Engineering

Second Review - 23rd February, 2012

Outline

1 Recap

2 Using jQuery SVG

3 Architecture

4 Implementation

5 Future enhancements

6 References

Recap

Slide based paradigm

Information is organized into slidesEach slide typically consists of a list of bulleted pointsDisadvantage

Single pre-set pathTendency to skip slides – distracts the audience

Edward Tufte’s views

Canvas based paradigm

The material to be presented is laid out in a large canvaswithout any page (slide) boundariesAdvantages

Reflects the presenter’s flow of thought processEmphasis more on the central idea

Technological Aspects

Scalable Vector Graphics (SVG)

Animates the presentation elementsOpen standardSupported by modern browsers

JavaScript

Programmatically manipulate the components of thepresentation

W3 Compliant web browser as presentation tool

Upto Second 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

Work done till Second review:

Further implementation

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 implementation

Code can be easily written if SVG elements and theirattributes are known

More on jQuery SVG

Main package for drawing primitives: jquery.svg.js

Many extensions also available for jQuery SVG

jquery.svganim.js

jquery.svgfilter.js

jquery.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)’});

Building Canscape

The presentation editor is a combination of the followingGraphics Editor: To add shapes, perform operations on it suchas rotate, resize etc.Text Editor: To add text, perform formatting operations suchas styling, aligning, bulleting, etc.Animation Editor: To pan and zoom the viewport to focus onthe region of interest

Libraries Used

jQuery

jQueryUI

Panzoom

jQuerySVG

jQuery SVG anim

jWYSIWYG

Farbtastic

Architecture Diagram

Workflow Diagram

Implementation

Viewport panning and zooming

Shapes and lines insertion and drag and drop

Adding text by WYSIWYM

Adding color picker to change shapes/text color

Viewport transformation required during presentation

Server side scripting

Adding image to the canvasExporting presentation

Screenshot - User Interface

Screenshot - Element Insertion, Color picker

Screenshot - Adding text to canvas

Screenshot - Adding image to canvas

Screenshot - Adding image to canvas

Screenshot - Rotating elements

Screenshot - Presentation Paths

Screenshot - Exporting presentation

Screenshot - Exported presentation

Future enhancements

Text popups on images

Grouping of elements

Inserting graphs and charts

Inserting tables

Export as PDF

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] Raphael.js, a cross-browser JavaScript library for drawing vectorgraphics, http://www.raphaeljs.com

[4] Apache Batik, Java classes for manipulating SVG,http://xmlgraphics.apache.org/batik/javadoc/

[5] Prezi, a cloud based SaaS presentation software,http://www.prezi.com

References

[6] jQuery, a JavaScript library to simplify scripting in HTML,http://www.jquery.com/

[7] jQuery UI, a jQuery user interface library,http://www.jqueryui.com/

[8] jQuery SVG, a jQuery plugin to interact with SVG,http://keithwood.name/svg.html

[9] Farbtastic, a jQuery plugin for color picker,http://acko.net/blog/farbtasticjquery-color-picker-plug-in/

[10] jWysiwyg, a jQuery plugin for inline content editor,http://akzhan.github.com/jwysiwyg/