Date post: | 30-Apr-2015 |
Category: |
Technology |
Upload: | nirmala-last |
View: | 1,157 times |
Download: | 1 times |
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
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
Event/MessageBrokers
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
Control to/from XGSP
Data from master client
Control to/from XGSP
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
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
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
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 UIDisplay
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
SemanticHigh Level UI
Raw UIDisplay
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 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
Collaborative Events and Web Service messages
Collaborative Events and Web Service messages
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