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