Second review presentation
-
Upload
srikrishnan-suresh -
Category
Technology
-
view
129 -
download
2
description
Transcript of Second review presentation
![Page 1: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/1.jpg)
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
![Page 2: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/2.jpg)
Outline
1 Recap
2 Using jQuery SVG
3 Architecture
4 Implementation
5 Future enhancements
6 References
![Page 3: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/3.jpg)
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
![Page 4: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/4.jpg)
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
![Page 5: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/5.jpg)
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
![Page 6: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/6.jpg)
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
![Page 7: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/7.jpg)
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
![Page 8: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/8.jpg)
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)’});
![Page 9: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/9.jpg)
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
![Page 10: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/10.jpg)
Libraries Used
jQuery
jQueryUI
Panzoom
jQuerySVG
jQuery SVG anim
jWYSIWYG
Farbtastic
![Page 11: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/11.jpg)
Architecture Diagram
![Page 12: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/12.jpg)
Workflow Diagram
![Page 13: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/13.jpg)
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
![Page 14: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/14.jpg)
Screenshot - User Interface
![Page 15: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/15.jpg)
Screenshot - Element Insertion, Color picker
![Page 16: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/16.jpg)
Screenshot - Adding text to canvas
![Page 17: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/17.jpg)
Screenshot - Adding image to canvas
![Page 18: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/18.jpg)
Screenshot - Adding image to canvas
![Page 19: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/19.jpg)
Screenshot - Rotating elements
![Page 20: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/20.jpg)
Screenshot - Presentation Paths
![Page 21: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/21.jpg)
Screenshot - Exporting presentation
![Page 22: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/22.jpg)
Screenshot - Exported presentation
![Page 23: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/23.jpg)
Future enhancements
Text popups on images
Grouping of elements
Inserting graphs and charts
Inserting tables
Export as PDF
![Page 24: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/24.jpg)
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
![Page 25: Second review presentation](https://reader033.fdocuments.us/reader033/viewer/2022052822/554f783eb4c905435d8b458c/html5/thumbnails/25.jpg)
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/