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 Morton N. St, Suite 222, Bloomington IN Community Grids Lab, Indiana University by Xiaohong Qiu

2 Introduction  The research work is founded by NSF.  The work is a part of the blueprint of the Community Grids Lab – building peer-to-peer grid system  The foils are arranged into the following four sections – Background Background introduces key technologies related to my research.introduces key technologies related to my research. Design of collaborative system / applications Design of collaborative system / applications generalgeneral architecture of Collaborative DOM as A Web Service Model. architecture of Collaborative DOM as A Web Service Model. architecture of Collaborative SVG as A Web Service architecture of Collaborative SVG as A Web Service specificspecific architecture of Collaborative SVG Browser architecture of Collaborative SVG Browser Architecture of Collaborative SVG Chess Game Architecture of Collaborative SVG Chess Game (core) Collaborative events(core) Collaborative events Future Work Future Work points out several research directions that worth of further study based on the current results.points out several research directions that worth of further study based on the current results. Demo Demo shows a collaborative SVG Browsershows a collaborative SVG Browser shows a collaborative SVG Chess Gameshows a collaborative SVG Chess Game

3 Background  General area is technology Support for Synchronous and Asynchronous Resource Sharing e-learning e-learning e-science e-science video/audio conferencing etc. video/audio conferencing etc.  Grids manage and share (typically asynchronously) resources or distributed objects (people, computers, data, applications etc.) in a centralized fashion. manage and share (typically asynchronously) resources or distributed objects (people, computers, data, applications etc.) in a centralized fashion.  Web Services Define loosely coupled software components across internet interacting with messages. Define loosely coupled software components across internet interacting with messages.  Peer-to-peer Grids link services, resources and clients in dynamic decentralized fashion link services, resources and clients in dynamic decentralized fashion The system consists of a sea of message-based Services (e.g. shared SVG as a Web Service)The system consists of a sea of message-based Services (e.g. shared SVG as a Web Service) Services linked by publish-subscribe messaging infrastructure (e.g. NaradaBrokering)Services linked by publish-subscribe messaging infrastructure (e.g. NaradaBrokering)

4 Classic Grid Architecture Database Netsolve Computing Security Collaboration Composition Content Access Resources ClientsUsers and Devices Middle Tier Brokers Service Providers Middle Tier becomes Web Services

5 Peer to Peer Grid Database Peers Peer to Peer GridA democratic organization User Facing Web Service Interfaces Service Facing Web Service Interfaces Event/ Message Brokers

6 Our Goals  Build a collaborative SVG browser Collaborative SVG browser is a real application (SVG content, hyperlink, interactivity and animation with JavaScript binding) Collaborative SVG browser is a real application (SVG content, hyperlink, interactivity and animation with JavaScript binding) An example of a collaborative DOM model An example of a collaborative DOM model A test bed for the general principles above A test bed for the general principles above Batik SVG browser Batik SVG browser a java open source project from Apachea java open source project from Apache a client side program like Microsoft PowerPointa client side program like Microsoft PowerPoint  Building a collaborative SVG chess game as the first step to SVG Arena Key features of the collaborative system (synchronization and interactivity) can be well presented by multiplayer games Key features of the collaborative system (synchronization and interactivity) can be well presented by multiplayer games Chess game represents a type of game with round-robin event sequence Chess game represents a type of game with round-robin event sequence It involves two players while multiple observers watching the game It involves two players while multiple observers watching the game The ultimate version (e.g. integration with XGSP fully) allows dynamic changing roles between players and observers The ultimate version (e.g. integration with XGSP fully) allows dynamic changing roles between players and observers  Research ways of building collaborative Web Services Building collaborative system is non trivial Building collaborative system is non trivial Share SVG, share Audio/Video, share PowerPoint?, share Word? …… Share SVG, share Audio/Video, share PowerPoint?, share Word? ……  Research approaches to build applications as Web Services specifically W3C DOM based applications specifically W3C DOM based applications

7 Related Technologies I  DOM (W3C specifications for Document Object Model) Programmatic interfaces for access and manipulate structured document object Programmatic interfaces for access and manipulate structured document object All modern browsers (approximately) support the W3C DOM All modern browsers (approximately) support the W3C DOM  SVG (W3C specifications for Scalable Vector Graphics) A language for describing 2D vector and mixed vector/raster graphics in XML. A language for describing 2D vector and mixed vector/raster graphics in XML.  XML (W3C specifications for Extensible Markup Language) A markup language for structured information A markup language for structured information A mechanism to identify structure in a document A mechanism to identify structure in a document  JavaScript (A scripting language) JavaScript can access and manipulate structured documents – in our case SVG DOM JavaScript can access and manipulate structured documents – in our case SVG DOM We will make this collaborative We will make this collaborative

8 Related Technologies II  Web Services (W3C working group) Programmatic interfaces for application to application communication. Programmatic interfaces for application to application communication. XML specified distributed objects. XML specified distributed objects.  MVC (Model-View-Control) A design architecture that separate an application into Model-View-Control triads A design architecture that separate an application into Model-View-Control triads  NaradaBrokering (Message passing infrastructure) Provide performance driven transport and intelligent routing of all messages Provide performance driven transport and intelligent routing of all messages  XGSP (Collaborative Session Controller) Support collaboration as a Web service defining sessions and their make-up Support collaboration as a Web service defining sessions and their make-up

9 Demo  Collaborative SVG Browser Teacher-Students scenario Teacher-Students scenario Static Shared SVG contents Static Shared SVG contents Dynamic Share SVG contents Dynamic Share SVG contents HyperlinkHyperlink Interactivity and animation (JavaScript binding)Interactivity and animation (JavaScript binding)  Collaborative SVG Chess game Two players-multiple observers scenario Two players-multiple observers scenario Complex interactivity with game intelligence Complex interactivity with game intelligence

10 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 Architecture of collaborative SVG browser on PC

11 Collaborative SVG Chess Game Players Observers

12 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 Architecture of multiplayer game with SVG

13 Games with private information

14 Virtual SVG Community  Find latest development info at Community Grids Project  Building virtual SVG community that has applications such as Collaborative SVG meeting Collaborative SVG meeting SVG recorder SVG recorder infrastructure for supporting different types of games written in JavaScript infrastructure for supporting different types of games written in JavaScript “SIMD”“SIMD” “MIMD”“MIMD”  Provide a robust system re-join re-join late-join late-join

15 Why W3C DOM is important?  DOM (Document Object Model) In the most general sense, everything is an object In the most general sense, everything is an object Data ─ A text file, a graph, an , a MP3 …Data ─ A text file, a graph, an , a MP3 … Hardware ─ A computer, a printer, a fax machine, a sensor, …Hardware ─ A computer, a printer, a fax machine, a sensor, … Software ─ SVG Viewer and proprietary software likeSoftware ─ SVG Viewer and proprietary software like Microsoft Word(?), PowerPoint(?) Microsoft Word(?), PowerPoint(?) Adobe Illustrator/Photoshop(?) Adobe Illustrator/Photoshop(?) Macromedia Flash(?)… Macromedia Flash(?)… defines the object-structure of a general document defines the object-structure of a general document allows documents to be accessed as distributed objects – especially as a Web service allows documents to be accessed as distributed objects – especially as a Web service  DOM has a particular tree-like specification of Document Object Model  It defines an application programming interface (API) for documents (e.g. HTML, XML documents) an application programming interface (API) for documents (e.g. HTML, XML documents) the logical structure of documents the logical structure of documents the way a document is accessed and manipulated the way a document is accessed and manipulated  DOM has a generic event model

16 MVC Paradigm

17 Web Service DOM

18 Collaborative Web Service

19 Why using SVG ?  SVG is An Application of DOM Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG) a new XML-based language for describing two-dimensional vector and mixed vector/raster graphics from W3C.a new XML-based language for describing two-dimensional vector and mixed vector/raster graphics from W3C. SVG 1.0 specification becomes a W3C recommendation at September 4 th, 2001SVG 1.0 specification becomes a W3C recommendation at September 4 th, 2001 SVG includes a complete (DOM) and conforms to the DOM core and events Recommendation [DOM1]. SVG includes a complete (DOM) and conforms to the DOM core and events Recommendation [DOM1].DOM1 DOM is just an interface that defines Document Object Model and Events Model. DOM is just an interface that defines Document Object Model and Events Model. SVG is a complete implementation of DOM. SVG is a complete implementation of DOM. SVG DOM SVG DOM has a high level of compatibility and consistency with the HTML DOM that is defined in the DOM Level 1 specification.has a high level of compatibility and consistency with the HTML DOM that is defined in the DOM Level 1 specification. builds upon and is compatible with the Document Object Model (DOM) Level 2 Specification [DOM2].builds upon and is compatible with the Document Object Model (DOM) Level 2 Specification [DOM2].DOM2  SVG is An Application of XML SVG is compatible with the "Extensible Markup Language (XML) 1.0" Recommendation [XML10] SVG is compatible with the "Extensible Markup Language (XML) 1.0" Recommendation [XML10]XML10 SVG is compatible with the "Namespaces in XML" Recommendation [XML-NS] SVG is compatible with the "Namespaces in XML" Recommendation [XML-NS]XML-NS SVG's syntax for referencing element IDs is a compatible subset of the ID referencing syntax in "XML Pointer Language (XPointer)" [XPTR]. SVG's syntax for referencing element IDs is a compatible subset of the ID referencing syntax in "XML Pointer Language (XPointer)" [XPTR].XPTR SVG content can be styled by either CSS (see "Cascading Style Sheets (CSS) level 2" specification [CSS2]) or XSL (see "XSL Transformations (XSLT) Version 1.0" [XSLT]). SVG content can be styled by either CSS (see "Cascading Style Sheets (CSS) level 2" specification [CSS2]) or XSL (see "XSL Transformations (XSLT) Version 1.0" [XSLT]).CSS2XSLTCSS2XSLT

20 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 Reformulation of SVG to message based MVC in a Web Service Model

21 Collaborative SVG As A Web Service

22 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 Three among the different ways of decomposing SVG between client and Web Service component

23  Two major systems for representing graphics Raster Raster 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.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. A bitmap is consisting of such series of pixels and usually stored in a compressed format.A bitmap is consisting of such series of pixels and usually stored in a compressed format. Most modern display devices are raster devices - uncompress the bitmap and transfer it to the screen.Most modern display devices are raster devices - uncompress the bitmap and transfer it to the screen. Examples: JPEG, GIF, PNG and BMP.Examples: JPEG, GIF, PNG and BMP. Vector Vector In vector graphics, an image is described as a series of geometric shapes rather than receiving a finished set of pixels.In vector graphics, an image is described as a series of geometric shapes rather than receiving a finished set of pixels. Vector objects can change their shape and color by redrawing. Scalability - being scaled without loss of resolution.Vector objects can change their shape and color by redrawing. Scalability - being scaled without loss of resolution. Examples: Adobe Postscript, Macromedia Flash file ".fla" and SVG.Examples: Adobe Postscript, Macromedia Flash file ".fla" and SVG. Shared SVG browser shares input port Shared SVG browser shares input port Share Display browser shares output port Share Display browser shares output port  Different content format SVG is XML format and can be processed as ordinary text SVG is XML format and can be processed as ordinary text Raster files are program generated data Raster files are program generated data Shared SVG Browser vs. Shared Display

24 DOM Event Model  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 Collaboration involves sharing state changes Collaboration involves sharing state changes Events represent the changing of DOM Events represent the changing of DOM We capture and distribute events to participating clients We capture and distribute events to participating clients  W3C DOM Supplies a generic event system which allows registration of event handlers and provides basic contextual info for each event  DOM gives a standard suite of events for UI control and document mutation notifications.

25 Definition of Collaborative SVG Events  A collaborative event an object that wraps original SVG events an object that wraps original SVG events provides additional context information for collaboration and Web service model. provides additional context information for collaboration and Web service model.  The context information helps to guide the events through the NaradaBrokering system to reach other clients (subscribers in the same session).  The receivers un-wrap the collaborative event and get an SVG event that defines detailed actions on the SVG DOM.  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).

26 Structure of Collaborative Events  An event contains information such as follows:  An original UIEvent or selected semantic events as generated by the DOM Some events are local, not for sharing Some events are local, not for sharing  Event types master/non-master master/non-master major/minor type major/minor type global/local global/local  Context information of the collaboration client ID client ID session/topic session/topic windows name in a multi-SVG viewer application windows name in a multi-SVG viewer application event sequence number event sequence number  Context information of the Web services specifying application and collaboration session.

27 Types of Collaborative Events  UIEvents vs. semantic events view and model view and model  Master events vs. non-master events One master client at all times One master client at all times  Major events vs. minor events late clients join in late clients join in computer crushes, clients rejoin in computer crushes, clients rejoin in replay replay  Global events vs. local events e.g. history list on master client vs. on participating client e.g. history list on master client vs. on participating client  Collaboration as a Web Service (XGSP) Events Session control (client name, session topic) Session control (client name, session topic)

28 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) Collaborative SVG Event processing chart

29 Future Work  Packaging the following products and put core modules into the public domain Collaborative SVG Viewer Collaborative SVG Viewer Collaborative SVG Chess game Collaborative SVG Chess game  Provide a product of SVG recorder to support replay The same technology also provides robustness of the system (e.g. late join and rejoin) The same technology also provides robustness of the system (e.g. late join and rejoin)  Integrate the work with PDA group Collaborative SVG applications cross platforms - PC, Pocket PC, Cellular phone, … Collaborative SVG applications cross platforms - PC, Pocket PC, Cellular phone, …  Building more Internet collaborative SVG Games to exploit the capabilities and detailed design trade- offs of the collaborative system to exploit the capabilities and detailed design trade- offs of the collaborative system