Final presentation

Canvas–Based Presentation ToolUsing Scalable Vector Graphics and

JavaScript

S. Srikrishnan, V. Vishal Gautham31508104099, 31508104120

Guided By

Dr. R. S. MiltonProfessor

Department of Computer ScienceSSN College of Engineering

Final Review – 16th April, 2012

Outline

1 Introduction

2 Literature Survey

3 Proposed Methodology

4 Design and Implementation

5 Evaluation and Results

6 Conclusion

7 References

Presentation Paradigms

The model and tool used for presenting information is criticalto effective pedagogy

Two popular paradigms for presenting information areSlide–Based Paradigm

Information is organized into slidesEach slide typically consists of a list of bulleted pointsTools: Microsoft PowerPoint, OpenOffice Impress etc.

Canvas–Based Paradigm

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

Why not the Slide–Based Paradigm?

Reduces the analytical quality of presentations— EdwardTufte’s views

Forces us to split the information into parts in multipleslides— Obstructs perception

Tendency to skip and hop between the slides— Distracts theaudience

Static navigation path— Creator loses control over thepresentation

Listeners tend to focus on the slide, rather than on thepresenter

Canvas–Based Paradigm

The entire content is laid out on a boundary-less view area,called a ‘canvas’

Information laid out freely and naturally

Reflects creator’s thought process

In addition to a two-dimensional space, it has depth and timeas third and fourth dimension respectively

Pan, zoom and rotate— provides continuity and smoothtransitions

Pan— Shift focus from one region to other in the same level

Zoom— View finer details of a level

Rotate— Reveal information in a different orientation

Existing Work

JessyInk

An extension to Inkscape editorSaved as a SVG file— Can be opened in browserAllows zooming in and out in a layer— Still remains slide-based

Prezi

Flash-based implementation— presentation is black-boxOnly raster images can be added— pixelation occurs onzoomingLimits its use in mobile devices with no flash player

Ahead

Implementation almost similar to PreziFew additional functionalities such as layers, spaces etc.Has the same disadvantages as Prezi

Building Canscape— Our Canvas–BasedPresentation Tool

Scalable Vector Graphics (SVG)Animates the presentation elementsFree Open standardSupported by modern browsers

Figure: Raster vs SVG Graphics

JavaScriptProgrammatically manipulate the components of thepresentation

W3 Compliant web browserEditing tool as well as presenting medium

Organization of information in the canvas

Zoom

In

Main

Topic

Sub

Topic 1Sub

Topic 2

Sub

Topic 3Sub

Topic 4

Sub

Topic 5

Sub

Topic

1.1

Sub

Topic

1.2

Sub

Topic

3.1

Sub

Topic

5.1

Sub

Topic

5.2

Pan Pan

Zoom

Out

Figure: Organization of information in the canvas

Abstraction of Canscape’s functionalities

Presentation Editor

Insertion,Rotation,Drag andDrop of

Lines, Shapesand Images

NavigationPaths,

ViewportTransforma-tion, Panningand Zooming

Canvas

TextInsertion,

Editing andFormatting

GraphicsEditor

TransitionEditor

Text Editor

Figure: Components of presentation tool

Implementation Framework

jQuery SVG

Ellipse Rectangle Circle Text Image

image.php

CANVAS

index.htmlUser

Interface

Pan

Zoom

Rotate

NavigationPath Layout

JavaScriptUtilities

save.php export.php

Snapshot ofindex.html

Currentcontents andtransforma-

tionsintact

Export thefinal

presentation asan HTML file

Figure: Architecture Diagram

Workflow

Editing

Saved

Presentation ExitSet

PresentationPath

Create Export Close

Save Edit / Open

Edit

Close

Figure: Workflow Diagram

Screenshot - Canscape UI

Figure: Canscape– User Interface

Screenshot - Adding Text, Shapes, Hotspots

Figure: Adding content

Screenshot - Exported Presentation

Figure: Exported Presentation

Comparison with existing work

Free and open standards

Multi-platform support

Ability to import SVG images (including animated ones)

Very less file size— occupies only a few KBs

Impact on pedagogy

Refreshingly different way of organizing content

A better, innovative teaching aid

Ability to import animated images— Makes the understandingclear

Productive lecturer–audience interaction

Future Enhancements

Animation editor— to create simple animations for varioususe-cases

Layers— Event-triggered mechanism; piecewisetime-sequenced manner to toggle between canvas content

Multiple workspaces— Allows user to shift the working areafrom one location to another

Exporting the presentation as TEXformat— To preparehandouts to the audience

Inserting tables, charts, graphs, templates etc. into the canvas

References

[1] E. R. Tufte, The Cognitive Style of PowerPoint: Pitching OutCorrupts Within, 2nd ed. Graphics Press, 2006.

[2] J. Locke, An essay concerning human understanding: With thenotes and illustrations of the author, and an analysis of his doctrineof ideas. Also, questions on Lockes essay. W. Tegg and co., 1879.

[3] K. Zvelebil, Companion studies to the history of Tamilliterature, ser. Handbuch Der Orientalistik: Indien.Erganzungsband. Brill, 1992.

[4] I. Parker, Absolute powerpoint: Can a software package editour thoughts? 2001.

References

[5] C. Lindley, jQuery Cookbook, 1st ed. OReilly Media, 2009.

[6] S. Powers, Learning JavaScript, 1st ed. OReilly Media, 2009.

[7] A. T. H. III, Ajax: The Definitive Guide, 1st ed. OReilly Media,2008.

[8] J. D. Eisenberg, Producing Scalable Vector Graphics with XML:SVG Essentials, 1st ed. OReilly Media, 2002.

[9] Alexander Kolesnikov, Java Drawing With Apache Batik: ATutorial, 1st ed. Brainy Software, 2007.

References

[10] T. Teatro, “A tutorial introduction to jessyink: Presentationsin inkscape, 2010. [Online]. Available:http://code.google.com/p/jessyink/wiki/Publications

[11] P. A. Adam Somlai-Fischer, Peter Halacsy, “Prezi thezooming presentation editor, 2012. [Online]. Available:http://www.prezi.com/

[12] K. Wood, “jQuery SVG, 2007. [Online]. Available:http://keithwood.name/svg.html