Ubiquitous Access for Ubiquitous Access for Collaborative Information Collaborative Information

System Using SVGSystem Using SVGJuly 17 2002July 17 2002

Sangmi Lee, Geoffrey Fox, Sunghoon Ko, Sangmi Lee, Geoffrey Fox, Sunghoon Ko, Minjun Wang, Xiaohong QuiMinjun Wang, Xiaohong Qui

http://grids.ucs.indiana.eduhttp://grids.ucs.indiana.eduCommunity Grids Laboratory, Indiana UniversityCommunity Grids Laboratory, Indiana UniversityComputer Science, Syracuse UniversityComputer Science, Syracuse UniversityComputer Science, Florida State UniversityComputer Science, Florida State University

Overview of Garnet SystemOverview of Garnet System Purpose : Support Purpose : Support Education, TrainingEducation, Training and if possible and if possible

Computing as Grid(Web) ServicesComputing as Grid(Web) Services Integrate Integrate SynchronousSynchronous and and AsynchronousAsynchronous collaboration collaboration Support hand held and desktop clients (Support hand held and desktop clients (universal accessuniversal access)-)-

Carousel projectCarousel project NaradaBrokering to implement NaradaBrokering to implement publish/subscribepublish/subscribe model model Uniform Uniform XML eventXML event (message) based architecture (message) based architecture XML Schema GXOSXML Schema GXOS supports supports hierarchical data hierarchical data

structuresstructures Metadata set for resources : user profile, document, Metadata set for resources : user profile, document,

hardware..hardware.. MyXoSMyXoS manages XML information nuggets manages XML information nuggets Support collaborative features : basic interactive Support collaborative features : basic interactive

features (textchat, whiteboard, etc.), shared resources features (textchat, whiteboard, etc.), shared resources (shared display, shared export), AV conferences.(shared display, shared export), AV conferences.

Adapting SVG for Adapting SVG for Shared Export format in Garnet Shared Export format in Garnet

SystemSystem Vector graphics formats for Collaborative Vector graphics formats for Collaborative

systems : SVG (Scalable Vector Graphics) systems : SVG (Scalable Vector Graphics) from W3C, PDF from Adobe Inc.from W3C, PDF from Adobe Inc.

Each client can resize and scroll while Each client can resize and scroll while preserving correct positions of pointers and preserving correct positions of pointers and annotations for their various resolutions.annotations for their various resolutions.

Various browser and converters are now Various browser and converters are now available.available. Adobe Illustrator, OpenOffice.orgAdobe Illustrator, OpenOffice.org converter from PowerPoint, Macro mediaconverter from PowerPoint, Macro media

Benefits of XML/Vector graphicsBenefits of XML/Vector graphics Extended styling – CSS, XSLExtended styling – CSS, XSL Benefits of using DOMBenefits of using DOM

Garnet : Shared Display Garnet : Shared Display Shared display shares the bitmap data defining

display window of the collaborative application.

Major ClientPC users

PDA users

Shared Display in Shared Display in collaborative systemscollaborative systems

Advantage : easy to develop Disadvantage : Shared Display does not allow

significant flexibility. Different clients cannot examine separate viewpoints

of a scientific visualization. Wireless devices need a wide variety of viewpoints

due to their mobile network communication, and limited display systems.

Object or WS

Object or WS

Object or WS

Object or WS display

Object or WS viewer

WS Display

WS DisplayEvent (message) service

More flexible sharing More flexible sharing objects : Shared Exportobjects : Shared Export

In the distributed object technology, objects can have multiple stages in their processing.

Web Service

RFIOUF IO

Web Service

RFIOUF IO

Web Service

RFIOUF IO

Event (Message)

Service

WSViewer

WSViewer

WSViewer

WSDisplay

WSDisplay

WSDisplay

Master

Other participants

Design Issues Shared Design Issues Shared Export with SVG format Export with SVG format

Integrated toolkits : converter from VML, WMF to Integrated toolkits : converter from VML, WMF to SVG – initial effortsSVG – initial efforts

Communication : NaradaBrokering/GMSME Communication : NaradaBrokering/GMSME message types message types

Separate presentation from document and Separate presentation from document and separate user event from document model.separate user event from document model.

Collaborative Events – Collaborative document Collaborative Events – Collaborative document loading, collaborative Zooming, Scrolling, loading, collaborative Zooming, Scrolling, Annotation Annotation

Integrate mobile devicesIntegrate mobile devices Performance issues – compression data for PDAsPerformance issues – compression data for PDAs

Integrated converting Integrated converting toolkittoolkit

Workflow of Shared SVG Workflow of Shared SVG BrowserBrowser Collaborative Event handlerCollaborative Event handler

DOM tree GeneratorDOM tree Generator SVG Image RendererSVG Image Renderer Collaborative BrowserCollaborative Browser

Collaborative SVG Event Collaborative SVG Event Processing : collaborative Processing : collaborative

document loadingdocument loading Application Invocation : The most initial event of Application Invocation : The most initial event of

shared SVG Browser processed when the shared SVG Browser processed when the presenter open their shared browser and loads presenter open their shared browser and loads new SVG documents.new SVG documents.

Collaborative document loading : When presenter Collaborative document loading : When presenter loads new SVG document, the other participants loads new SVG document, the other participants load new document into local machine.load new document into local machine.

Event message : header( user, device, application Event message : header( user, device, application information, event type) + new uri information, event type) + new uri

Collaborative SVG Event Collaborative SVG Event Processing : collaborative Processing : collaborative

zoomingzooming Resolution Customization Resolution Customization

If the presenter zooms in or out, other If the presenter zooms in or out, other participants’ shared SVG browser will render participants’ shared SVG browser will render graphics based on the resolution from the graphics based on the resolution from the presenter.presenter.

The independent zooming event is processed The independent zooming event is processed in every shared browser in every shared browser

Every rendering is from the replica of Every rendering is from the replica of document initially loaded.document initially loaded.

Event Message : message header + Event Message : message header + zooming rate zooming rate

Collaborative SVG Event Collaborative SVG Event Processing : collaborative Processing : collaborative

annotationannotation Annotation : The presenter’s annotation is shared Annotation : The presenter’s annotation is shared in participants’ browser.in participants’ browser. The event annotation will contain the (x , y) 2D The event annotation will contain the (x , y) 2D

graphical positions on the current bitmap and graphical positions on the current bitmap and annotation type : event is captures in user interface annotation type : event is captures in user interface level (bitmap-wise)level (bitmap-wise)

Each event converted to SVG documents and rendered Each event converted to SVG documents and rendered dynamically on each client application via DOM dynamically on each client application via DOM interface for replica of SVG document.interface for replica of SVG document.

Event Message : message header + X,Y position Event Message : message header + X,Y position in user device + annotation type + annotation in user device + annotation type + annotation messagemessage

Converted event : SVG documentConverted event : SVG document X,Y position in original SVG coordinate systemX,Y position in original SVG coordinate system Annotation described in SVG located in local system for Annotation described in SVG located in local system for

each users. (editable)each users. (editable)

Garnet : Shared ExportGarnet : Shared ExportPCs PDAs

My_ProfesMy_Professor : sor :

integrated integrated GUI for GUI for PDAs PDAs

Development Development EnvironmentEnvironment

Desktop application Desktop application modify Batik browser to be able to collaborate modify Batik browser to be able to collaborate

(supporting message services, and event (supporting message services, and event handling).handling).

Integrate collaborative browser as a Java Integrate collaborative browser as a Java sharedlet. sharedlet.

Access DOM tree via Batik DOM interfaceAccess DOM tree via Batik DOM interface Windows 2000Windows 2000

PDA applicationPDA application Rendering image with Batik rendering APIs.Rendering image with Batik rendering APIs. J2ME Personal Java1.1J2ME Personal Java1.1 Wireless communication IEEE 802.11bWireless communication IEEE 802.11b WinCE 3.0WinCE 3.0

Experimental ResultsExperimental Results GMSME : iPaq H3650, WinCE 3.0, Personal-Java1.1GMSME : iPaq H3650, WinCE 3.0, Personal-Java1.1 Wireless 11 Mbit/s IEEE 802.11bWireless 11 Mbit/s IEEE 802.11b

0.1

1

10

100

1000

10000

Message Size (bytes)

milli-s

econ

ds

GMSMEGMS

Total Latency

Conclusions and Future Conclusions and Future workwork

Future WorkFuture Work SVG Shared export as a collaborative Web SVG Shared export as a collaborative Web

Services.Services. Port to Palm OS based devices/HTTP protocolPort to Palm OS based devices/HTTP protocol Storing Annotated documentsStoring Annotated documents

SVG provided high-quality display system for SVG provided high-quality display system for heterogeneous devices and clear interfaces heterogeneous devices and clear interfaces for other document based resources. for other document based resources.

We integrated PDAs into conventional We integrated PDAs into conventional collaborative system and implemented collaborative system and implemented event systems for various stages on object event systems for various stages on object pipeline.pipeline.