Collaborative Svg As A Webservice

11

Collaborative SVG Collaborative SVG as a Web Serviceas a Web Service

Ph.D. student of EECS department, Syracuse UniversityPh.D. student of EECS department, Syracuse UniversityResearch work is performed at Community Grids Lab, Indiana UniversityResearch work is performed at Community Grids Lab, Indiana University

[email protected], [email protected]@syr.edu, [email protected]

501 Morton N. St, Suite 222, Bloomington IN 47404501 Morton N. St, Suite 222, Bloomington IN 47404

CommunityCommunity Grids Lab, Indiana UniversityGrids Lab, Indiana University

by Xiaohong Qiuby Xiaohong Qiu

22

IntroductionIntroduction The research work is founded by NSF.The research work is founded by NSF. The work is a part of the blueprint of the Community Grids Lab – The work is a part of the blueprint of the Community Grids Lab – building peer-to-peer grid building peer-to-peer grid

systemsystem. . http://grids.ucs.indiana.edu/ptliupages/http://grids.ucs.indiana.edu/ptliupages/

The foils are arranged into the following four sections –The foils are arranged into the following four sections – BackgroundBackground

• introduces key technologies related to my research.introduces key technologies related to my research. Design of collaborative system / applicationsDesign 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 Servicearchitecture of Collaborative SVG as A Web Service

• specificspecific architecture of Collaborative SVG Browserarchitecture of Collaborative SVG Browser Architecture of Collaborative SVG Chess GameArchitecture of Collaborative SVG Chess Game

• (core)(core) Collaborative events Collaborative events Future WorkFuture Work

• points out several research directions that worth of further study based on the points out several research directions that worth of further study based on the current results.current results.

DemoDemo

• shows a collaborative SVG Browsershows a collaborative SVG Browser

• shows a collaborative SVG Chess Game shows a collaborative SVG Chess Game

http://grids.ucs.indiana.edu/ptliupages/

33

BackgroundBackground General area is technology Support for General area is technology Support for Synchronous and Synchronous and

Asynchronous Resource SharingAsynchronous Resource Sharing e-learninge-learning e-science e-science video/audio conferencing etc.video/audio conferencing etc.

GridsGrids manage and share (typically asynchronously) resources or manage and share (typically asynchronously) resources or

distributed objects (people, computers, data, applications etc.) in a distributed objects (people, computers, data, applications etc.) in a centralized fashion. centralized fashion.

Web ServicesWeb Services Define loosely coupled software components across internet Define loosely coupled software components across internet

interacting with messages. interacting with messages.

Peer-to-peer GridsPeer-to-peer Grids link services, resources and clients in dynamic decentralized link services, resources and clients in dynamic decentralized

fashionfashion• The system consists of a sea of message-based Services (e.g. shared SVG The system consists of a sea of message-based Services (e.g. shared SVG

as a Web Service)as a Web Service)

• Services linked by publish-subscribe messaging infrastructure (e.g. Services linked by publish-subscribe messaging infrastructure (e.g. NaradaBrokering)NaradaBrokering)

44

Classic Grid ArchitectureClassic Grid Architecture

Database Database

Netsolve

Computing

SecurityCollaboration

CompositionContent Access

Resources

Clients Users and Devices

Middle TierBrokers Service Providers

Middle Tier becomes Web Services

55

Peer to Peer GridPeer to Peer Grid

DatabaseDatabase

Peers

Peers

Peer to Peer GridA democratic organization

User FacingWeb Service Interfaces

Service FacingWeb Service Interfaces

Event/MessageBrokers



66

Our GoalsOur Goals Build a collaborative SVG browserBuild a collaborative SVG browser

Collaborative SVG browser is a real application (SVG content, hyperlink, interactivity Collaborative SVG browser is a real application (SVG content, hyperlink, interactivity and animation with JavaScript binding)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 aboveA 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 aBuilding a collaborative SVG chess game as the first step to SVG Arenacollaborative SVG chess game as the first step to SVG Arena Key features of the collaborative system (synchronization and interactivity) can be Key features of the collaborative system (synchronization and interactivity) can be

well presented by multiplayer gameswell presented by multiplayer games Chess game represents a type of game with round-robin event sequenceChess game represents a type of game with round-robin event sequence It involves two players while multiple observers watching the gameIt involves two players while multiple observers watching the game The ultimate version (e.g. integration with XGSP fully) allows dynamic changing roles The ultimate version (e.g. integration with XGSP fully) allows dynamic changing roles

between players and observersbetween players and observers

Research ways of Research ways of building collaborative Web Servicesbuilding collaborative Web Services Building collaborative system is non trivialBuilding 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 Research approaches to build applications as Web Servicesbuild applications as Web Services specifically W3C DOM based applicationsspecifically W3C DOM based applications

77

Related Technologies IRelated Technologies I

DOMDOM (W3C specifications for Document Object Model)(W3C specifications for Document Object Model) Programmatic interfaces for access and manipulate structured Programmatic interfaces for access and manipulate structured

document objectdocument object All modern browsers (approximately) support the W3C DOMAll modern browsers (approximately) support the W3C DOM

SVGSVG (W3C specifications for Scalable Vector Graphics)(W3C specifications for Scalable Vector Graphics) A language for describing 2D vector and mixed vector/raster A language for describing 2D vector and mixed vector/raster

graphics in XML.graphics in XML. XMLXML (W3C specifications for Extensible Markup Language)(W3C specifications for Extensible Markup Language)

A markup language for structured informationA markup language for structured information A mechanism to identify structure in a documentA mechanism to identify structure in a document

JavaScriptJavaScript (A scripting language)(A scripting language) JavaScript can access and manipulate structured documents – JavaScript can access and manipulate structured documents –

in our case SVG DOM in our case SVG DOM We will make this collaborativeWe will make this collaborative

88

Related Technologies IIRelated Technologies II Web ServicesWeb Services (W3C working group)(W3C working group)

Programmatic interfaces for application to application Programmatic interfaces for application to application communication. communication.

XML specified distributed objects.XML specified distributed objects. MVC MVC (Model-View-Control)(Model-View-Control)

A design architecture that separate an application into A design architecture that separate an application into Model-View-Control triadsModel-View-Control triads

NaradaBrokeringNaradaBrokering (Message passing infrastructure)(Message passing infrastructure) Provide performance driven transport and intelligent Provide performance driven transport and intelligent

routing of all messagesrouting of all messages XGSPXGSP (Collaborative Session Controller)(Collaborative Session Controller)

Support collaboration as a Web service defining Support collaboration as a Web service defining sessions and their make-upsessions and their make-up

99

DemoDemo Collaborative SVG BrowserCollaborative SVG Browser

Teacher-Students scenarioTeacher-Students scenario Static Shared SVG contents Static Shared SVG contents Dynamic Share SVG contentsDynamic Share SVG contents

• HyperlinkHyperlink• Interactivity and animation (JavaScript binding)Interactivity and animation (JavaScript binding)

Collaborative SVG Chess gameCollaborative SVG Chess game Two players-multiple observers scenarioTwo players-multiple observers scenario Complex interactivity with game intelligenceComplex interactivity with game intelligence

10

Figure 3 Architecture of collaborative SVG browser on PC

XGSP

Session control Server

Nar

ad

aB

roke

rin

g

Eve

nt

(Me

ssa

ge

) S

erv

ice

In

fra

str

uc

ture

• • •

Master client SVG browser 1F

I

R

O

Other client SVG browser 2F

I

R

O

Other client SVG browser nF

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


Data from master client


Architecture of collaborative SVG browser on PC

1111

Collaborative SVG Chess GameCollaborative SVG Chess Game

Players

Observers

12

Figure 4 Architecture of collaborative Web Services drawn for particular case of Internet multiplayer game with SVG

Nar

ad

aB

roke

rin

g

Eve

nt

(Me

ssa

ge

) S

erv

ice

In

fra

str

uc

ture

• • •

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

1414

Virtual SVG CommunityVirtual SVG Community

Find latest development info at Community Grids Project Find latest development info at Community Grids Project http://grids.ucs.indiana.edu/ptliupages/http://grids.ucs.indiana.edu/ptliupages/

Building Building virtual SVG communityvirtual SVG community that has applications that has applications such as such as

Collaborative SVG meetingCollaborative SVG meeting SVG recorderSVG recorder infrastructure for supporting different types of games written in infrastructure for supporting different types of games written in

JavaScriptJavaScript• ““SIMD” SIMD” • ““MIMD”MIMD”

Provide Provide a robust systema robust system re-joinre-join late-joinlate-join

1515

Why W3C DOM is important?Why W3C DOM is important? DOM DOM (Document Object Model)(Document Object Model)

In the most general sense, everything is an objectIn the most general sense, everything is an object• Data Data ─ ─ A text file, a graph, an email, a MP3 …A text file, a graph, an email, a MP3 …• Hardware Hardware ─ A computer, a─ A computer, a printer, a fax machine, a sensor, … printer, a fax machine, a sensor, …• Software Software ─ ─ SVG Viewer and proprietary software like 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 objectsallows documents to be accessed as distributed objects – especially as a – especially as a

Web serviceWeb service

DOM has a particular tree-like specification of Document Object Model DOM has a particular tree-like specification of Document Object Model It definesIt defines

an application an application programming interfaceprogramming interface (API) for documents (e.g. HTML, XML (API) for documents (e.g. HTML, XML documents)documents)

the the logical structure of documentslogical structure of documents the way a document is accessed and manipulatedthe way a document is accessed and manipulated

DOM has a generic event modelDOM has a generic event model

1616

MVC ParadigmMVC ParadigmModel View Controller

Model

Controller

ViewMouse eventKeyboard events

Figure MVC Model

Display

1717

Web Service DOMWeb Service DOM

User Facing Ports

Web Service Application (Model)DOM Application as a Web service

W eb Service Application (Model)DOM Application as a W eb service

Remaining W 3C DOM semantic events

Control

Data

Web Service DOM

Resource Facing Ports

W eb Service Application (V iew)

W 3C DOM User Interface

Selected W 3C DOM semantic eventsW 3C DOM UIEvents

Figure 2 DOM Application as a Web Service

Rendering asMessages

Events asMessages

1818

Collaborative Web ServiceCollaborative Web Service

WSDisplay

WSViewer

WS Display

WS ViewerEvent

(Message)Service

Master

WSDisplay

WS Viewer

WebService

F

I

U

O

F

I

R

O

Shared Input Port (Replicated WS) Collaboration

OtherParticipants

WebService

F

I

U

O

F

I

R

O

WebService

F

I

U

O

F

I

R

O

Collaboration as a WS

Set up Session with XGSP

ResourceFacing Port

NaradaBrokering

1919

Why using SVG ? Why using SVG ? SVG is An Application of DOMSVG 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 a new XML-based language for describing two-dimensional vector and mixed

vector/raster graphics from W3C.vector/raster graphics from W3C.• SVG 1.0 specification becomes a W3C recommendation at September 4SVG 1.0 specification becomes a W3C recommendation at September 4 thth, 2001, 2001

SVGSVG includes a complete (DOM) and conforms to the DOM core and events includes a complete (DOM) and conforms to the DOM core and events Recommendation [DOM1]. Recommendation [DOM1].

DOM is just an interfaceDOM is just an interface that defines Document Object Model and Events Model. that defines Document Object Model and Events Model. SVG is a complete implementation of DOMSVG is a complete implementation of DOM.. SVG DOMSVG DOM

• has a high level of compatibility and consistency with the HTML DOM that is defined in has a high level of compatibility and consistency with the HTML DOM that is defined in the DOM Level 1 specification. the DOM Level 1 specification.

• builds upon and is compatible with the Document Object Model (DOM) Level 2 builds upon and is compatible with the Document Object Model (DOM) Level 2 Specification [DOM2]. Specification [DOM2].

SVG is An Application of XMLSVG is An Application of XML SVG is compatible with the "Extensible Markup Language (XML) 1.0" SVG is compatible with the "Extensible Markup Language (XML) 1.0"

Recommendation [XML10] Recommendation [XML10] SVG is compatible with the "Namespaces in XML" Recommendation [XML-NS] 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 SVG's syntax for referencing element IDs is a compatible subset of the ID

referencing syntax in "XML Pointer Language (XPointer)" [XPTR]. referencing syntax in "XML Pointer Language (XPointer)" [XPTR]. SVG content can be styled by either CSS (see "Cascading Style Sheets (CSS) SVG content can be styled by either CSS (see "Cascading Style Sheets (CSS)

level 2" specification [CSS2]) or XSL (see "XSL Transformations (XSLT) Version level 2" specification [CSS2]) or XSL (see "XSL Transformations (XSLT) Version 1.0" [XSLT]). 1.0" [XSLT]).

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


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

2121

Collaborative SVG As A Web ServiceCollaborative SVG As A Web Service

Application as a Web serviceApplication as a Web service

Participating Client

RenderingRendering

User Interface

W3C DOM Events

From Master

FromCollaborationAs a WS

Events

Application as a Web serviceApplication as a Web service

Master Client

RenderingRendering

User Interface

W3C DOM Events

To Collaborative Clients

FromCollaborationAs a WS

Events

Control flow for collaborative SVG clients

Figure 3 Control flow for collaborative SVG clients

22

Shared SVG Browser on PDA

b. Decomposed WS optimized for thin clients


Events as messages


Semantic

High Level UI

R F I O

U F I O

Web Service

Event (Message) Service

Raw UIDisplay

Shared SVG Browser on PC

a. Non-decomposed collaborative SVG requiring minimal changes to the original source code



R F I O

SVG Browser

SemanticHigh Level UI

Raw UIDisplay

Collaborative Events and Web Service messages

Internet Game

c. Decomposed WS optimized for performance


Semantic

R F I O

U F I O

Web Service


High Level UIRaw UIDisplay

Figure 2 Three among the different ways of decomposing SVG between client and Web Service component

Input port Output portRendering as messages

Events as messages

Input port Output port



Three among the different ways of decomposing SVG between client and Web Service component

2323

Two major systems for representing graphicsTwo major systems for representing graphics RasterRaster

• In raster graphics, an image is represented as a rectangular array of picture 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 elements or pixels. Each pixel is represented either by its RGB color values or as an index into a list of colors. or as an index into a list of colors.

• A bitmap is consisting of such series of pixels and usually stored in a A bitmap is consisting of such series of pixels and usually stored in a compressed format. compressed format.

• Most modern display devices are raster devices - uncompress the bitmap Most modern display devices are raster devices - uncompress the bitmap and transfer it to the screen. 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 In vector graphics, an image is described as a series of geometric shapes rather than receiving a finished set of pixels. rather than receiving a finished set of pixels.

• Vector objects can change their shape and color by redrawing.Vector objects can change their shape and color by redrawing.Scalability - being scaled without loss of resolution. 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 portShared SVG browser shares input port Share Display browser shares output portShare Display browser shares output port

Different content formatDifferent content format SVG is XML format and can be processed as ordinary textSVG 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 DisplayShared SVG Browser vs. Shared Display

2424

DOM Event ModelDOM Event Model An event describes changes in state of some An event describes changes in state of some

Grid component – Grid component – in our case the SVG in our case the SVG application or more generally a (W3C-DOM) application or more generally a (W3C-DOM) defined web servicedefined web service Collaboration involves Collaboration involves sharing state changessharing state changes Events represent the changing of DOMEvents represent the changing of DOM We capture and distribute events to participating We capture and distribute events to participating

clientsclients W3C DOM Supplies a generic event systemW3C DOM Supplies a generic event system

which allows registration of event handlers and which allows registration of event handlers and provides basic contextual info for each eventprovides basic contextual info for each event

DOM gives a standard suite of eventsDOM gives a standard suite of events for UI for UI control and document mutation notifications.control and document mutation notifications.

2525

Definition of Collaborative SVG EventsDefinition of Collaborative SVG Events

A collaborative eventA collaborative event an object that wraps original SVG events an object that wraps original SVG events provides additional context information for collaboration and provides additional context information for collaboration and

Web service model. Web service model. The context informationThe context information helps to guide the events helps to guide the events

through the NaradaBrokering system to reach other through the NaradaBrokering system to reach other clients (subscribers in the same session). clients (subscribers in the same session).

The receiversThe receivers un-wrap the collaborative event and get an un-wrap the collaborative event and get an SVG event that defines detailed actions on the SVG SVG event that defines detailed actions on the SVG DOM. DOM.

The The ModelModel part part of Web service application analyses the of Web service application analyses the SVG event based on its type and then delivers the SVG event based on its type and then delivers the resultant rendering information to the associated resultant rendering information to the associated ViewView(s). (s).

2626

Structure of Collaborative EventsStructure of Collaborative Events An event contains information such as follows:An event contains information such as follows: An original UIEvent or selected semantic events An original UIEvent or selected semantic events

as generated by the DOMas generated by the DOM Some events are local, not for sharingSome events are local, not for sharing

Event types Event types master/non-mastermaster/non-master major/minor typemajor/minor type global/localglobal/local

Context information of the collaboration Context information of the collaboration client IDclient ID session/topicsession/topic windows name in a multi-SVG viewer applicationwindows name in a multi-SVG viewer application event sequence numberevent sequence number

Context information of the Web services Context information of the Web services specifying application and collaboration session.specifying application and collaboration session.

2727

Types of Collaborative EventsTypes of Collaborative Events UIEventsUIEvents vs. vs. semantic eventssemantic events

view and modelview and model Master eventsMaster events vs. vs. non-master eventsnon-master events

One master client at all timesOne master client at all times Major eventsMajor events vs. vs. minor eventsminor events

late clients join inlate clients join in computer crushes, clients rejoin in computer crushes, clients rejoin in replay replay

Global eventsGlobal events vs. vs. local eventslocal events e.g. history list on master client vs. on participating e.g. history list on master client vs. on participating

clientclient Collaboration as a Web Service Collaboration as a Web Service (XGSP) Events(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

2929

Future WorkFuture Work Packaging the following products and put core Packaging the following products and put core

modules into the public domainmodules into the public domain http://grids.ucs.indiana.edu/ptliupages/http://grids.ucs.indiana.edu/ptliupages/ Collaborative SVG ViewerCollaborative SVG Viewer Collaborative SVG Chess gameCollaborative SVG Chess game

Provide a product of SVG recorder to support Provide a product of SVG recorder to support replayreplay The same technology also provides robustness of the The same technology also provides robustness of the

system (e.g. late join and rejoin)system (e.g. late join and rejoin) Integrate the work with PDA groupIntegrate the work with PDA group

Collaborative SVG applications cross platforms - PC, Collaborative SVG applications cross platforms - PC, Pocket PC, Cellular phone, …Pocket PC, Cellular phone, …

Building more Internet collaborative SVG GamesBuilding more Internet collaborative SVG Games to exploit the capabilities and detailed design trade-to exploit the capabilities and detailed design trade-

offs of the collaborative systemoffs of the collaborative system

Collaborative Svg As A Webservice

Technology

Transcript of Collaborative Svg As A Webservice