Collaborative Svg As A Webservice


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Collaborative Svg As A Webservice

  1. 1. Collaborative SVG as a Web Service Ph.D. student of EECS department, Syracuse University Research work is performed at Community Grids Lab, Indiana University [email_address] , [email_address] 501 Morton N. St, Suite 222, Bloomington IN 47404 Community Grids Lab, Indiana University by Xiaohong Qiu
  2. 2. Introduction <ul><li>The research work is founded by NSF. </li></ul><ul><li>The work is a part of the blueprint of the Community Grids Lab – building peer-to-peer grid system . </li></ul><ul><ul><li> </li></ul></ul><ul><li>The foils are arranged into the following four sections – </li></ul><ul><ul><li>Background </li></ul></ul><ul><ul><ul><li>introduces key technologies related to my research. </li></ul></ul></ul><ul><ul><li>Design of collaborative system / applications </li></ul></ul><ul><ul><ul><li>general </li></ul></ul></ul><ul><ul><ul><ul><li>architecture of Collaborative DOM as A Web Service Model. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>architecture of Collaborative SVG as A Web Service </li></ul></ul></ul></ul><ul><ul><ul><li>specific </li></ul></ul></ul><ul><ul><ul><ul><li>architecture of Collaborative SVG Browser </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Architecture of Collaborative SVG Chess Game </li></ul></ul></ul></ul><ul><ul><ul><li>(core) Collaborative events </li></ul></ul></ul><ul><ul><li>Future Work </li></ul></ul><ul><ul><ul><li>points out several research directions that worth of further study based on the current results. </li></ul></ul></ul><ul><ul><li>Demo </li></ul></ul><ul><ul><ul><li>shows a collaborative SVG Browser </li></ul></ul></ul><ul><ul><ul><li>shows a collaborative SVG Chess Game </li></ul></ul></ul>
  3. 3. Background <ul><li>General area is technology Support for Synchronous and Asynchronous Resource Sharing </li></ul><ul><ul><li>e-learning </li></ul></ul><ul><ul><li>e-science </li></ul></ul><ul><ul><li>video/audio conferencing etc. </li></ul></ul><ul><li>Grids </li></ul><ul><ul><li>manage and share (typically asynchronously) resources or distributed objects (people, computers, data, applications etc.) in a centralized fashion. </li></ul></ul><ul><li>Web Services </li></ul><ul><ul><li>Define loosely coupled software components across internet interacting with messages. </li></ul></ul><ul><li>Peer-to-peer Grids </li></ul><ul><ul><li>link services, resources and clients in dynamic decentralized fashion </li></ul></ul><ul><ul><ul><li>The system consists of a sea of message-based Services (e.g. shared SVG as a Web Service) </li></ul></ul></ul><ul><ul><ul><li>Services linked by publish-subscribe messaging infrastructure (e.g. NaradaBrokering) </li></ul></ul></ul>
  4. 4. Classic Grid Architecture Netsolve Computing Security Collaboration Composition Content Access Resources Clients Users and Devices Middle Tier Brokers Service Providers Middle Tier becomes Web Services Database Database
  5. 5. Peer to Peer Grid Peers Peers Peer to Peer Grid A democratic organization User Facing Web Service Interfaces Service Facing Web Service Interfaces Database Database Event/ Message Brokers Event/ Message Brokers Event/ Message Brokers
  6. 6. Our Goals <ul><li>Build a collaborative SVG browser </li></ul><ul><ul><li>Collaborative SVG browser is a real application (SVG content, hyperlink, interactivity and animation with JavaScript binding) </li></ul></ul><ul><ul><li>An example of a collaborative DOM model </li></ul></ul><ul><ul><li>A test bed for the general principles above </li></ul></ul><ul><ul><li>Batik SVG browser </li></ul></ul><ul><ul><ul><li>a java open source project from Apache </li></ul></ul></ul><ul><ul><ul><li>a client side program like Microsoft PowerPoint </li></ul></ul></ul><ul><li>Building a collaborative SVG chess game as the first step to SVG Arena </li></ul><ul><ul><li>Key features of the collaborative system (synchronization and interactivity) can be well presented by multiplayer games </li></ul></ul><ul><ul><li>Chess game represents a type of game with round-robin event sequence </li></ul></ul><ul><ul><li>It involves two players while multiple observers watching the game </li></ul></ul><ul><ul><li>The ultimate version (e.g. integration with XGSP fully) allows dynamic changing roles between players and observers </li></ul></ul><ul><li>Research ways of building collaborative Web Services </li></ul><ul><ul><li>Building collaborative system is non trivial </li></ul></ul><ul><ul><li>Share SVG, share Audio/Video, share PowerPoint?, share Word? …… </li></ul></ul><ul><li>Research approaches to build applications as Web Services </li></ul><ul><ul><li>specifically W3C DOM based applications </li></ul></ul>
  7. 7. Related Technologies I <ul><li>DOM (W3C specifications for Document Object Model) </li></ul><ul><ul><li>Programmatic interfaces for access and manipulate structured document object </li></ul></ul><ul><ul><li>All modern browsers (approximately) support the W3C DOM </li></ul></ul><ul><li>SVG (W3C specifications for Scalable Vector Graphics) </li></ul><ul><ul><li>A language for describing 2D vector and mixed vector/raster graphics in XML. </li></ul></ul><ul><li>XML (W3C specifications for Extensible Markup Language) </li></ul><ul><ul><li>A markup language for structured information </li></ul></ul><ul><ul><li>A mechanism to identify structure in a document </li></ul></ul><ul><li>JavaScript (A scripting language) </li></ul><ul><ul><li>JavaScript can access and manipulate structured documents – in our case SVG DOM </li></ul></ul><ul><ul><li>We will make this collaborative </li></ul></ul>
  8. 8. Related Technologies II <ul><li>Web Services (W3C working group) </li></ul><ul><ul><li>Programmatic interfaces for application to application communication. </li></ul></ul><ul><ul><li>XML specified distributed objects. </li></ul></ul><ul><li>MVC (Model-View-Control) </li></ul><ul><ul><li>A design architecture that separate an application into Model-View-Control triads </li></ul></ul><ul><li>NaradaBrokering (Message passing infrastructure) </li></ul><ul><ul><li>Provide performance driven transport and intelligent routing of all messages </li></ul></ul><ul><li>XGSP (Collaborative Session Controller) </li></ul><ul><ul><li>Support collaboration as a Web service defining sessions and their make-up </li></ul></ul>
  9. 9. Demo <ul><li>Collaborative SVG Browser </li></ul><ul><ul><li>Teacher-Students scenario </li></ul></ul><ul><ul><li>Static Shared SVG contents </li></ul></ul><ul><ul><li>Dynamic Share SVG contents </li></ul></ul><ul><ul><ul><li>Hyperlink </li></ul></ul></ul><ul><ul><ul><li>Interactivity and animation (JavaScript binding) </li></ul></ul></ul><ul><li>Collaborative SVG Chess game </li></ul><ul><ul><li>Two players-multiple observers scenario </li></ul></ul><ul><ul><li>Complex interactivity with game intelligence </li></ul></ul>
  10. 10. Architecture of collaborative SVG browser on PC Figure 3 Architecture of collaborative SVG browser on PC XGSP Session control Server NaradaBrokering Event (Message) Service Infrastructure • • • Master client SVG browser 1 F I R O Other client SVG browser 2 F I R O Other client SVG browser n F I R O Control to/from all SVG browsers in the collaborative session Data from master client Control to/from XGSP Data to other clients Control to/from XGSP Data from master client Control to/from XGSP
  11. 11. Collaborative SVG Chess Game Players Observers
  12. 12. Architecture of multiplayer game with SVG Figure 4 Architecture of collaborative Web Services drawn for particular case of Internet multiplayer game with SVG NaradaBrokering Event (Message) Service Infrastructure • • • XGSP Session control Server SVG WS 1 Internet Game SVG WS 2 SVG WS n • • • SVG display 1 SVG display 2 SVG display n Control to/from SVG WS1,2, …, n Control to/from XGSP, SVG display 2 Rendering to SVG display 2 Control to/from SVG WS1,2, …, n Rendering from SVG WS 2 Control to/from SVG display 2
  13. 13. Games with private information
  14. 14. Virtual SVG Community <ul><li>Find latest development info at Community Grids Project http:// / </li></ul><ul><li>Building virtual SVG community that has applications such as </li></ul><ul><ul><li>Collaborative SVG meeting </li></ul></ul><ul><ul><li>SVG recorder </li></ul></ul><ul><ul><li>infrastructure for supporting different types of games written in JavaScript </li></ul></ul><ul><ul><ul><li>“ SIMD” </li></ul></ul></ul><ul><ul><ul><li>“ MIMD” </li></ul></ul></ul><ul><li>Provide a robust system </li></ul><ul><ul><li>re-join </li></ul></ul><ul><ul><li>late-join </li></ul></ul>
  15. 15. Why W3C DOM is important? <ul><li>DOM (Document Object Model) </li></ul><ul><ul><li>In the most general sense, everything is an object </li></ul></ul><ul><ul><ul><li>Data ─ A text file, a graph, an email, a MP3 … </li></ul></ul></ul><ul><ul><ul><li>Hardware ─ A computer, a printer, a fax machine, a sensor, … </li></ul></ul></ul><ul><ul><ul><li>Software ─ SVG Viewer and proprietary software like </li></ul></ul></ul><ul><ul><ul><ul><li>Microsoft Word(?), PowerPoint(?) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Adobe Illustrator/Photoshop(?) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Macromedia Flash(?)… </li></ul></ul></ul></ul><ul><ul><li>defines the object-structure of a general document </li></ul></ul><ul><ul><li>allows documents to be accessed as distributed objects – especially as a Web service </li></ul></ul><ul><li>DOM has a particular tree-like specification of Document Object Model </li></ul><ul><li>It defines </li></ul><ul><ul><li>an application programming interface (API) for documents (e.g. HTML, XML documents) </li></ul></ul><ul><ul><li>the logical structure of documents </li></ul></ul><ul><ul><li>the way a document is accessed and manipulated </li></ul></ul><ul><li>DOM has a generic event model </li></ul>
  16. 16. MVC Paradigm
  17. 17. Web Service DOM
  18. 18. Collaborative Web Service WS Display WS Viewer WS Display WS Viewer Event (Message) Service Master WS Display WS Viewer Web Service F I U O F I R O Shared Input Port (Replicated WS) Collaboration Other Participants Web Service F I U O F I R O Web Service F I U O F I R O Collaboration as a WS Set up Session with XGSP Resource Facing Port NaradaBrokering
  19. 19. Why using SVG ? <ul><li>SVG is An Application of DOM </li></ul><ul><ul><li>Scalable Vector Graphics (SVG) </li></ul></ul><ul><ul><ul><li>a new XML-based language for describing two-dimensional vector and mixed vector/raster graphics from W3C. </li></ul></ul></ul><ul><ul><ul><li>SVG 1.0 specification becomes a W3C recommendation at September 4 th , 2001 </li></ul></ul></ul><ul><ul><li>SVG includes a complete (DOM) and conforms to the DOM core and events Recommendation [ DOM1 ]. </li></ul></ul><ul><ul><li>DOM is just an interface that defines Document Object Model and Events Model. </li></ul></ul><ul><ul><li>SVG is a complete implementation of DOM . </li></ul></ul><ul><ul><li>SVG DOM </li></ul></ul><ul><ul><ul><li>has a high level of compatibility and consistency with the HTML DOM that is defined in the DOM Level 1 specification. </li></ul></ul></ul><ul><ul><ul><li>builds upon and is compatible with the Document Object Model (DOM) Level 2 Specification [ DOM2 ]. </li></ul></ul></ul><ul><li>SVG is An Application of XML </li></ul><ul><ul><li>SVG is compatible with the &quot;Extensible Markup Language (XML) 1.0&quot; Recommendation [ XML10 ] </li></ul></ul><ul><ul><li>SVG is compatible with the &quot;Namespaces in XML&quot; Recommendation [ XML-NS ] </li></ul></ul><ul><ul><li>SVG's syntax for referencing element IDs is a compatible subset of the ID referencing syntax in &quot;XML Pointer Language (XPointer)&quot; [ XPTR ]. </li></ul></ul><ul><ul><li>SVG content can be styled by either CSS (see &quot;Cascading Style Sheets (CSS) level 2&quot; specification [ CSS2 ]) or XSL (see &quot;XSL Transformations (XSLT) Version 1.0&quot; [ XSLT ]). </li></ul></ul>
  20. 20. Reformulation of SVG to message based MVC in a Web Service Model Model View Controller a. MVC Model Controller View Display Model Messages contain control information Decomposition of SVG Browser b. Three-stage pipeline High Level UI Raw UI Display Rendering as messages Events as messages Semantic Events as messages Rendering as messages Figure 1 Reformulation of SVG to message based MVC in a Web Service Model Input port Output port
  21. 21. Collaborative SVG As A Web Service
  22. 22. Three among the different ways of decomposing SVG between client and Web Service component Shared SVG Browser on PDA b. Decomposed WS optimized for thin clients Rendering as messages Events as messages Messages contain control information Semantic High Level UI R F I O U F I O Web Service Event (Message) Service Raw UI Display Shared SVG Browser on PC a. Non-decomposed collaborative SVG requiring minimal changes to the original source code Messages contain control information Event (Message) Service R F I O SVG Browser Semantic High Level UI Raw UI Display Collaborative Events and Web Service messages Internet Game c. Decomposed WS optimized for performance Messages contain control information Semantic R F I O U F I O Web Service Event (Message) Service High Level UI Raw UI Display Figure 2 Three among the different ways of decomposing SVG between client and Web Service component Input port Output port Rendering as messages Events as messages Input port Output port Collaborative Events and Web Service messages Collaborative Events and Web Service messages
  23. 23. <ul><li>Two major systems for representing graphics </li></ul><ul><ul><li>Raster </li></ul></ul><ul><ul><ul><li>In raster graphics, an image is represented as a rectangular array of picture elements or pixels. Each pixel is represented either by its RGB color values or as an index into a list of colors. </li></ul></ul></ul><ul><ul><ul><li>A bitmap is consisting of such series of pixels and usually stored in a compressed format. </li></ul></ul></ul><ul><ul><ul><li>Most modern display devices are raster devices - uncompress the bitmap and transfer it to the screen. </li></ul></ul></ul><ul><ul><ul><li>Examples: JPEG, GIF, PNG and BMP. </li></ul></ul></ul><ul><ul><li>Vector </li></ul></ul><ul><ul><ul><li>In vector graphics, an image is described as a series of geometric shapes rather than receiving a finished set of pixels. </li></ul></ul></ul><ul><ul><ul><li>Vector objects can change their shape and color by redrawing. Scalability - being scaled without loss of resolution. </li></ul></ul></ul><ul><ul><ul><li>Examples: Adobe Postscript, Macromedia Flash file &quot;.fla&quot; and SVG. </li></ul></ul></ul><ul><ul><li>Shared SVG browser shares input port </li></ul></ul><ul><ul><li>Share Display browser shares output port </li></ul></ul><ul><li>Different content format </li></ul><ul><ul><li>SVG is XML format and can be processed as ordinary text </li></ul></ul><ul><ul><li>Raster files are program generated data </li></ul></ul>Shared SVG Browser vs. Shared Display
  24. 24. DOM Event Model <ul><li>An event describes changes in state of some Grid component – in our case the SVG application or more generally a (W3C-DOM) defined web service </li></ul><ul><ul><li>Collaboration involves sharing state changes </li></ul></ul><ul><ul><li>Events represent the changing of DOM </li></ul></ul><ul><ul><li>We capture and distribute events to participating clients </li></ul></ul><ul><li>W3C DOM Supplies a generic event system which allows registration of event handlers and provides basic contextual info for each event </li></ul><ul><li>DOM gives a standard suite of events for UI control and document mutation notifications. </li></ul>
  25. 25. Definition of Collaborative SVG Events <ul><li>A collaborative event </li></ul><ul><ul><li>an object that wraps original SVG events </li></ul></ul><ul><ul><li>provides additional context information for collaboration and Web service model. </li></ul></ul><ul><li>The context information helps to guide the events through the NaradaBrokering system to reach other clients (subscribers in the same session). </li></ul><ul><li>The receivers un-wrap the collaborative event and get an SVG event that defines detailed actions on the SVG DOM. </li></ul><ul><li>The Model part of Web service application analyses the SVG event based on its type and then delivers the resultant rendering information to the associated View (s). </li></ul>
  26. 26. Structure of Collaborative Events <ul><li>An event contains information such as follows: </li></ul><ul><li>An original UIEvent or selected semantic events as generated by the DOM </li></ul><ul><ul><li>Some events are local, not for sharing </li></ul></ul><ul><li>Event types </li></ul><ul><ul><li>master/non-master </li></ul></ul><ul><ul><li>major/minor type </li></ul></ul><ul><ul><li>global/local </li></ul></ul><ul><li>Context information of the collaboration </li></ul><ul><ul><li>client ID </li></ul></ul><ul><ul><li>session/topic </li></ul></ul><ul><ul><li>windows name in a multi-SVG viewer application </li></ul></ul><ul><ul><li>event sequence number </li></ul></ul><ul><li>Context information of the Web services specifying application and collaboration session. </li></ul>
  27. 27. Types of Collaborative Events <ul><li>UIEvents vs. semantic events </li></ul><ul><ul><li>view and model </li></ul></ul><ul><li>Master events vs. non-master events </li></ul><ul><ul><li>One master client at all times </li></ul></ul><ul><li>Major events vs. minor events </li></ul><ul><ul><li>late clients join in </li></ul></ul><ul><ul><li>computer crushes, clients rejoin in </li></ul></ul><ul><ul><li>replay </li></ul></ul><ul><li>Global events vs. local events </li></ul><ul><ul><li>e.g. history list on master client vs. on participating client </li></ul></ul><ul><li>Collaboration as a Web Service (XGSP) Events </li></ul><ul><ul><li>Session control (client name, session topic) </li></ul></ul>
  28. 28. Collaborative SVG Event processing chart Figure 5 Collaborative SVG Event processing chart Raw UI events (e.g. Mouse and key events) High Level UI events (e.g. SVG/DOM events) Semantic events (e.g. Application events such as “capture” in chess game) Collaborative events (e.g. Master Events which has context information of collaboration and information from previous stages)
  29. 29. Future Work <ul><li>Packaging the following products and put core modules into the public domain http:// / </li></ul><ul><ul><li>Collaborative SVG Viewer </li></ul></ul><ul><ul><li>Collaborative SVG Chess game </li></ul></ul><ul><li>Provide a product of SVG recorder to support replay </li></ul><ul><ul><li>The same technology also provides robustness of the system (e.g. late join and rejoin) </li></ul></ul><ul><li>Integrate the work with PDA group </li></ul><ul><ul><li>Collaborative SVG applications cross platforms - PC, Pocket PC, Cellular phone, … </li></ul></ul><ul><li>Building more Internet collaborative SVG Games </li></ul><ul><ul><li>to exploit the capabilities and detailed design trade-offs of the collaborative system </li></ul></ul>