SVG Collaboration Environment

Keywords: web services, collaboration, asynchronous

Mr. Stephen Dawson
PhD Student
The Institute of Electronics, Communications and Information Technology (ECIT) Queen's University of Belfast
Northern Ireland Science Park, Queen's Road, Queen's Island,
Belfast, BT3 9DT,
Northern Ireland
stephen.dason@ee.qub.ac.uk

Biography

Stephen Dawson obtained his honours degree in Electronic and Software Engineering from Queen’s University Belfast, Northern Ireland in 2002. He has been a researcher and Ph.D. candidate since then. His research interests include distributed systems, web services and autonomous agents.

Dr Sakir Sezer
Lecturer
The Institute of Electronics, Communications and Information Technology (ECIT) Queen's University of Belfast
Socam Group

Biography

Sakir Sezer obtained his Dipl. Ing. degree from the University of Technology Aachen, (RWTH), Germany, in 1994, and the Ph.D. degree from Queen’s University Belfast, Northern Ireland, in 2000. From 1995 to 1998 he worked with Nortel Networks on the development of ATM access and SONET/SDH transmission products and with Amphion Semiconductor Ltd. on the development of IP cores. In 1998 he joined Queen’s University Belfast academic staff to lead research and teaching in the areas of communication- and digital systems. Since 1998, Dr Sezer has been involved as a consultant in a number of industrial projects with Nortel Network and Amphion- Semiconductors and contributed to the development of numerous networking products and intellectual properties. His research interests include WEB based services, Quality of Service (QoS) of packet switched networks, configurable network and protocol processing architectures, packet scheduling architectures and communication Systems on a Chip (SoC).


Abstract


Many of the processes in a dynamic design organization are collaborative in nature and require consideration of intra organisational issues. In this paper we present a method of supporting web-based collaboration between teams and individuals within a real-time electronic design enterprise. Our system is based on the MVC architectural pattern with JMS for messaging and SVG for interfacing. In our approach we focus on a service oriented architecture for collaboration that is compatible with emerging web service industry standards based on XML, SOAP, and WSDL.


Table of Contents


1. Introduction
2. Model View Controller Design Pattern
3. System Design
     3.1 View
          3.1.1 Event Classification
          3.1.2 Asynchronous Messaging
4. Centered or Justified Blocks
     4.1 BlockQuotes
     4.2 Program Listing
     4.3 Images
     4.4 Tables
     4.5 Notes
5. Cross Reference
6. Lists
7. Inline Text
Appendix 1. Appendix One Title
     Appendix 1.1 Appendix Subsection Title
Appendix 2. Appendix Two Title
Acknowledgements
Bibliography
Footnotes

1. Introduction

Collaboration over the internet is just in its infancy. Although there are many commercial tools which promise complete collaboration support they truly only scratch the surface of what is possible. The Web has undoubtedly positioned itself as the defacto information resource but offers only rudimentary means of connecting people. Chat, message boards and email are far less sophisticated than even the telephone, which was developed more than a century ago. At its heart, the Web of the future will not be just an information resource; it will be about connecting people to one another, it will be about bringing people into communities to discuss new ideas and about joining forces to solve complex problems. The Web of the future will be about collaboration. Collaboration tools, otherwise known as groupware, allow disparate groups of people to work together. The most common and familiar groupware tool is email; albeit a somewhat stone age method for collaborating with others. In fact, most of the common tools we use every day have some sort of groupware capability built in. Tools such as these are becoming increasingly important as more teams work over networks sometimes half a world apart. The reality of the present work environment is that we are moving away from teams of people working in the same room. As a result, we need to seek out new ways to increase the quality of personal collaboration without effecting individual users work. This is the goal of groupware. The potential of such enhanced collaboration would have wide ranging applications for both industry and academic organisations. Our System on a Chip (SOC) research group at Queen's University Belfast, like many others, involves many inter and intra collaborating entities. Our collaboration consists of file sharing, Intellectual Property(IP) classifying and reuse, email messaging and phone conferencing. A web based system to manage these tasks would vastly increase the efficiency of our collaboration. The project undertaken therefore was to develop a Graphical User Interface (GUI) offering many modular collaborating services. This system allows users to collaborate from within a web browser with other users to increase efficiency in the workplace. The system is based on using Scalable Vector Graphics for the presentation layer, Java script for the client side scripting and the Java Messaging Service (JMS) for communication with collaborating web services. The use of JMS allows for both highly interactive (real time) synchronous messaging which is ideal for such applications as instant messaging and reliable asynchronous messaging for notice boards and calendars. We provide some sample services for testing which when collectively integrated provide a feature rich GUI for collaborating research teams. These services include a whiteboard, multi-lingual messenger, file sharer, calendar, email and application sharer. Finally we present a complete working demonstration system and discuss the effectiveness of our SVG implementation.

2. Model View Controller Design Pattern

There are countless problems that can arise when applications and systems include a fusion of data access, business logic and presentation code. Such applications become difficult to maintain when change is required due to the interdependencies commonly coded into the constituent components. This can result in a ripple effect of change throughout the system. This high coupling results in classed being almost impossible to reuse as they depend on many other classes. The Model-View-Controller (MVC) design pattern solves these problems by decoupling data access, business logic, and data presentation and user interaction [sun patterns ref]. Model-View-Controller (MVC) is a fundamental paradigm for interactive applications, which includes almost all modern graphics user interface (GUI) design and has become a popular design pattern of object-oriented programming (OOP) [Cox+Novobilski]. The general architecture described by this pattern (see figure X MVC Architecture) involves three main actors/constituents which logically separate processes they are model (Data access), view (presentation) and controller (application logic). What follow is a brief description of each entity and also a sample interaction model.

mvc.png

Figure 1: Figure X MVC Architecture

To demonstrate the interaction and dependency amongst the 3 components here is a sample interaction. 1. It starts with a user input event (e.g. mouse click or key stroke). 2. The Controller receives and interprets the event and then authorizes the Model to change. 3. The Model updates its state through modification of its data structure and broadcast its completion to both Controllerl and View. Note that in different implementations, the View can obtain the updated rendering information directly from the notification in step 4. Or request from the Model after being notified of the change by the Controller. 5. Or through the Controller as in step 5. The MVC model embodies a system design principle, namely, dividing a complex system into smaller subsystems. The separation of MVC produces a coherent triad: Model, View, and Controller, which follow the disciplines of software programming for modularity. Inherently, it promotes component reusability of the Model and helps good system development and maintenance of these modules.

3. System Design

3.1 View

The view in our project is provided by a HTML page which has a SVG document embedded which in turn is linked to a Java script file. The SVG is charged with the responsibility of visually representing data to the user. The java script file handles events i.e. mousedown(evt) which are triggered from within the SVG using registered listeners see code snippet X.

//SVG
<rect width=canvasWidth height=canvasHeight
style="fill:rgb(0,0,0);stroke-width:1; stroke:rgb(0,0,0)" onmousedown="mouseDown(evt)" onmouseup="mouseUp(evt)"/>
///////////////////////////////////////////////////////////////////
//Java Script
function mouseUp(evt){
if(getOptionSelected() == "cirlce"){
    var shape = svgDocument.createElementNS(svgns, circle");
    shape.setAttributeNS(null, "cx", getX());
    shape.setAttributeNS(null, "cy", getY();
    shape.setAttributeNS(null, "r",  getRad());
    shape.setAttributeNS(null, "fill", colour);
    svgDocument.documentElement.appendChild(shape);
}

3.1.1 Event Classification

The SVG standard provides a fine grained event capturing model which allows the programmer to catch document, graphical and animation events see table 6.1. Although this fine grained model allows for superior handling of events on a single machine, replication of every single one of these events between two or more collaborating parties would lead to excessively high processing and network transmission costs. An example of this would be in our whiteboard scenario, if a user decides to draw a rectangle, they select the appropriate tool and then proceed to drag and drop using the mouse to define the corners of the rectangle this would clearly trigger many mouse events (i.e. mousedown, mouseup, mousemove) within the SVG plugin. The second remote collaborator only needs to know the position, colour and size of the rectangle so that a replica can be rendered in their view. With this in mind we had to design an event classification which declared two classes of events those which are transmitted to all collaborators (semantic) and those which are kept local . In figure xxx we can see an example of how fine grained events are grouped into semantic events which are then transmitted to all collaborating entities/parties. Our scenario begins with the user selecting the rectangle tool, they then select the dimension and position by dragging and dropping this triggers a drawRectangle() event in the javaScript which is then forwarded to all collaborators. A different user then clicks on the rectangle to select it and clicks to select a different fill which triggers a changeFill() semantic event which is again passed to all collaborators.

Sample SVG Supported Events
mousedownOccurs when the pointing device button is pressed over an element.Atomic
mouseupOccurs when the pointing device button is released over an element.Atomic
mouseoverOccurs when the pointing device is moved onto an element.Atomic
mousemoveOccurs when the pointing device is moved while it is over an element.Atomic
mouseoutOccurs when the pointing device is moved away from an element.Atomic
keypressed(char)Occurs when a key is pressed, the code for the key pressed is passed in.Atomic
clickOccurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is: mousedown, mouseup, click. If multiple clicks occur at the same screen location, the sequence repeats with the detail attribute incrementing with each repetition.Collective

Table 1

events.png

Figure 2: Event Scenario

3.1.2 Asynchronous Messaging

The semantic events which occur within the users’ view which need to be disseminated amongst collaborators need to be distributed without affecting the usability of the native interface. Therefore an asynchronous model for fire and callback server invocations was required. In figure X we can see the model used for this architecture and the stages that are involved in a common interaction.

ajax.png

Figure 3: HTTP Callback Model

1. A client event occurs. JavaScript technology functions are called as the result of an event. In this case, the function 'checkUpdates () may be linked to a timer to run in this case every 5000ns.

setTimeout('checkUpdates()',5000);

2. The checkUpdates method contained in the linked java script file is then called. This creates a getURL method which defines the URL of the servlet with the parameters to be passed appended on the end and creates a callback object which is the used handle the return from the servlet.

function checkUpdates() {
 getURL("servletURL?userID=value",pollingCallback);
    
 }

3. The window object makes a getURL call. Once this method is called and the information is sent the processing resumes on the client side. By firing the request and forgetting about until a response is returned the UI will not lock up, this is vital to maintain the user friendliness of the interface. The HTTP POST method is used when sending data to the server that will affect the server-side application state. In the case of this example, the data (id) that is passed in the get request is included as a URL parameter.

4. The request is processed by the Servlet. A servlet mapped to the URI "whiteboard" checks whether the user identified by the user ID has any uncollected messages. A servlet processes an HttpRequest just as it would any other HTTP request. The following example show a server extracting the id parameter from the request and checking whether the user with this id has any messages. In this example, a simple HashMap is used to contain the users data

5. The Servlet returns a string containing the results. The servlet then returns a representation of the result. This is set by giving a value to the CONTENT_TYPE variable an example is CONTENT_TYPE = text/html.

    response.setContentType(CONTENT_TYPE);
        PrintWriter out = response.getWriter();    
        out.println(userMessage);
        out.close();

6. The callback() function processes the result. The callbackHandler object was configured to call the callback() function when a reply arrives and pass it the returned object. The javascript then process this returned object which in this case is a string and alters the users view via the DOM.

function pollingCallback(obj){
	if(dataReturned(!obj.content)){
      display(obj.content);
}

4. Centered or Justified Blocks

4.1 BlockQuotes

blockquote doesn’t preserve white space.

But you can get newlines by using multiple para within blockquotes

— anonymous

literallayout preserves white

space and is in the same font as para .

4.2 Program Listing

enum Whitespace { DEFAULT, PRESERVE };
void display(Element &programlisting){	
	XMLFragment code = programlisting.load(PRESERVE);	
	code.draw();
}

Example 1: C++ code to Display Program Listing

4.3 Images

mvc.png

Caption giving a longer explanation of the figure than the title, such as the meaning of labels in the figure, or a sequence of steps shown in the figure

Figure 4: Figure Title

4.4 Tables

Unit to Pixel conversion at 96 dpi[1]

Length Unit

Pixels

inch

96px

cm

38px

mm

4px

For a complete list you should look elsewhere

Table 2

Table

4.5 Notes

NOTE: Something worth noticing.

5. Cross Reference

Reference to Section 4.4 , Appendix 1.1 and Appendix 1 . Note that “Appendix” is part of the Appendix number, but “Section” is not. Explicitly include the word “Section” and apply the “Link” character style to the entire reference.

Reference to Figure 4 (Use “Only label and number” when inserting).

Reference to Example 1 .

Reference to Paragraph 35 .

Bibliographic reference to [BOOK1] . (Use “Number Item” and “all paragraph text”).

6. Lists

  1. Item one
  2. Title of bulleted list
  3. Title of Ordered List
    1. Item One
    2. Item Two
    3. Item Three
      1. Item 3.a
      2. Item 3.b

7. Inline Text

There are inline text elements named emphasis (default), emphasis (role=“bold”), emphasis (role=“big”), emphasis (role=“small”), code , command , filename , literal , “ “quote” ”, sgmltag, superscript and subscript , and acronym .

Appendix 1. Appendix One Title

Appendix one text

Appendix 1.1 Appendix Subsection Title

Appendix subsection text

Appendix 2. Appendix Two Title

Appendix two text

Acknowledgements

Thanks to those who made significant contributions but are not listed as authors.

Bibliography

[BOOK1]
Book Title and other bibliographic entry text.

Footnotes

  1. Pixel values are rounded up to a whole number

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.