SVG as a tool for Presentation and Communication in Business and Education

Keywords: SVG, Slides, Interactive, Presentation, Multi User, Client-Server

Jan-Klaas Kollhof,


Rostock
Mecklenburg/Vorpommern
Germany

http://jan.kollhof.net

Biography

Jan-Klaas Kollhof is studying at the University of Rostock, Germany. He is currently working towards a Master of Science in Business Informatics. During his studies Jan had the opportunity to teach several courses and seminars at the department of Business Informatics. Jan is the author of the json-rpc [1] protocol and developed the open source JavaScript framework JavaScript o Lait [2] . He is actively involved in the SVG community. Jan mainly focuses on client-server communication and client side scripting. Besides software development he enjoys training and teaching computer science related topics. Jan has given a number of SVG related workshops on an academic and business level.


Abstract


In business as well as in science and education it is very important to communicate information, facts and ideas well; to discuss what is presented.

SVG provides a powerful and rich language to describe presentational content. It allows interaction with the user and with the upcoming SVG 1.2 standard it opens the doors for cross client communication through network sockets. Thus, allowing the SVG applications to share data in real time with other clients or applications, enabling the user besides viewing the presentation also to interact with it in a multi user environment. Such a presentation is more than a simple collection of slides which are only one part of the whole presentation. Other parts are the ability for the viewer to collaborate with others and contribute content to the presentation. This might be simple drawings or written content posted on the presentation. It could also be just annotations used by a viewer for himself for reviewing the presentation at a later point. Another example is an online discussion forum where the users not only write in reply to other posted messages but can actually comment on the presentation, "drawing" graphical and logical connections between what is presented and the posted content. Interaction with the slide by the presenter is another factor. A simple switching from one slide to the next is extended by allowing the presentation to be used as a white-board with features more than just drawing with a pen.

The paper will examine and show the suitability of SVG as a tool for presentation and communication. It will discuss how presentation systems can be build using SVG, where users can interact and collaborate in a multi user environment. The paper will analyze how this interaction can be accomplished and what role SVG plays in it. Furthermore, it will look at the possibilities for using such a tool in education, workshops and online discussion forums.


Table of Contents


1. Introduction
2. Parts of a presentation
     2.1 The Audience
     2.2 The Presenter
     2.3 The Presentation Content
3. Architecture
     3.1 Client Side
         3.1.1 Monitor Component
         3.1.2 User Component
     3.2 Server Side
     3.3 Client - Server communication
4. Use cases
     4.1 presentation
     4.2 lecture and seminars
     4.3 workshops
5. Conclusion
Footnotes

1. Introduction

Many tools exist to create slide shows using SVG. As other presentation tools the results are slides that can be viewed on the display or on the screen using a projector. Besides the multimedia effects they offer and the ability to store them digitally they differ marginal from slides for the overhead or slide projector. For taking notes on the slides participants might receive handouts or maybe even the presentation as a file and if their software allows it they can make annotations. To interact with the slides being displayed is rather difficult. One can use a pointing device to point at items. Using an overhead projector and slides one could even draw on them. Using flip-charts the situation is very similar to the one with the overhead projector. In both cases the information is stored and can be reviewed after the presentation. The problem is that the information is stored using "ink and paper". Would it not be nice to have a tool that has the flexibility of "ink and paper" and yet the advantages a digital slide-show gives us?

During my time teaching seminars and holding lectures in computer science at the University of Rostock I was looking for a tool which aids me in giving presentations. I wanted something more than just being able to display slides. This paper states my ideas of a presentation system addressing the requirements for such a tool. A working prototype will be used for the presentation of this paper at the conference.

2. Parts of a presentation

In this paper a presentation is the process of sharing (visual) content with an audience and consists of three parts: the audience, the presenter and the content to be presented. These parts play an important role in analyzing what requirments a presentation tool has. The requirements shown in the next section are a result of my experiences with holding lectures, teaching seminars and giving presentations using a laptop and a projector, trying to eliminate the use of black-board and overhead projectors.

2.1 The Audience

The most important part of a presentation is the audience. Clearly, the presenter and the content to be shown are of little use if there is no audience. This fact adds the requirments that the presentation tool is not only used by the presenting person but also by the participants.

As a participant one should be able to follow the presentation privately (e.g. on a laptop). One should be able to navigate through the slides or have them synchronized to the ones being shown by the presenter. A participant should be able to make annotations to the slides, that is taking notes, make drawings on the slides and similar. When participating in a discussion one should also be able to submit annotations to the group, meaning the annotations become available to all participants. In a virtual discussion or virtual presentations participants need to be able to communicate with each other. The simplest form is a text-chat. All annotations and state changes of the presentation as well as all communication-logs need to be saved as part of the presentation. When reviewing a presentation at a later point, this becomes an important feature. Not only the slides are viewable but also the annotations that were made during the presentation including the timeline of when they were made and when slides were changed.

2.2 The Presenter

The presenter is very similar to a regular participant. The mere difference is that the presenter is the one being in control of the content being presented. All slides viewed by the audience on their own screens are by default synchronized to the presenter's slides. In a discussion with all members having the same privileges the presenter is not different from the other participants. In addition to the requirements for a participant, a presenter needs to have the ability to set certain privileges for other participants to allow them to to take over the role of a presenter or parts of that role.

2.3 The Presentation Content

The presentational content usually consists of documents being presented on a screen. These documents may contain slides made up of text, charts, drawings, animations and other items. Preferably, any SVG should be usable for presentation content. Any annotations made during the presentation inherently become part of that presentation.

3. Architecture

When looking at the requirements in the previous chapter one can see that the tool to be developed is not a simple slide presentation tool. It is a tool where application to display the content to be presented is only one part of the complete application. The presentation system will also need to handle the annotations made by the participants, the timeline data of the changes that where made on the content and any communication data between the participants. The architecture of such a tool mainly comprises of two parts: the client side and the server side. On the server side the system provides a central point for sharing and exchanging data. The client side consists of a number of modules participants can use as a front-end to the server components. For communication between the client modules and the server, json-rpc is used.

3.1 Client Side

The client side is the visual part of the application. It serves as a front-end to the server. The client component only use standard SVG and JavaScript allowing them to be as platform independent as possible using SVG. For implementation of the presentions loginc in JavaScript the open source JavaScript framework jsolait is used.

3.1.1 Monitor Component

The monitor is used to display the presentation slides and annotations. It is synchronized to the current state of the active content (the current slides and annotations set by the presenter). Multiple monitors may be used at the same time to display the same or different content on different screens. A monitor component will mainly be used to display content in fullscreen on a projector or large presentation screen. It is not bound to the presenter's tools and can be used on any machine in the network, thus allowing the presenter to be independent from the machine used to display the content.

3.1.2 User Component

The user component is used by participants and the person giving the presentation. It is a collection of tools to allow interaction with the presentation content, mainly consisting of:

3.2 Server Side

A json-rpc server is used to handle client-server communication. The server's responsibility is to handle authentication and authorization of connected users and components as well as to deliver and accept data to and respectively from the clients. All data for presentations is stored on the server. This data includes the slides, annotation data, timelines, communication logs and authentication/authorization data. In addition the server may handle document exports, for example to print slides including a set of annotations.

3.3 Client - Server communication

All components communicate with each other using an RPC protocol called json-rpc [1] over a TCP connection. This is a simple peer to peer protocol enabling any side to invoke methods provided by a service on the other peer. The implementation makes remote method calling form SVG as simple as calling any other JavaScript method. The only requirement for the client's SVG viewer is to support SVG 1.2 network connections .

When a client component is loaded it creates a remote service object using the json-rpc implementation:

...
syncService = new jsonrpc.ServiceProxy("jsonrpc:://synchost:9999", ["setState", ... ], localService);
...         

After this object has connected to the server providing the synchronization service, the client can invoke methods of that remote service. For example, to have all slides synchronized to the presenter's active slide the following code is run by the presenter's component after he has advanced to the next item on the slide:

...
syncService.notify.setState(activeDocument.getState());
...        

Now, the synchronization service knows about the state change. To let all connected clients know that the state has changed it will call a method provided by a service running on the client side. Each client component must provide a service with a number of methods known to the synchronization service. See the localService object that was passed to the constructor of the syncService object. For the example above the synchronization service would inform all connected clients by invoking a method e.g. as follows (python notation):

...
for client in connectedClients:
    client.notify.stateChanged(state);
...                    

The client service's stateChanged method, that has been invoked, will update the current view by loading the document to be shown if needed and displaying the slide and it's items as defined in the state object:

...
localService.stateChanged=function(state){
    activeDocument.setState(state);
}
...                    

The rest of the client server communication is handled similarly.

Authorization and authentication is handled by the synchronization service. If a connected client cannot authenticate itself positively the connection will be closed. Unauthorized method invocations (e.g. resetting the current state by a participant that is only allowed to view the presentation) are simply ignored. Thus they will not generate any further notifications to any other client connected nor will they change data on the server.

4. Use cases

In the following section a few use cases will be presented.

4.1 presentation

The tool described in this paper can be used to present slides for example during a conference or a meeting. Participants may not only view the slides on the presentation screen, but may also use their own equipment to view them privately and make annotations if they like.

4.2 lecture and seminars

One can also use the tool to hold lectures. During a lecture slides from a number of documents can be presented and interacted with. This way students may actively be involved with the slides presented. After a lecture the content including all annotations is still available to the students and the lecturer for reviewing and discussion purposes.

4.3 workshops

Workshop generally involve a lot of interaction. Usually flip charts are used to draw on or post paper notes. This form of interaction is used in various situations. These include decision making, mind mapping, evaluating and other processes. The flipcharts are then used for more analysis at a later point. Using the tool described in this paper one could eliminate the need of paper flipcharts. Automated analysis tools can aid in the process of reviewing and evaluation. Additional tools will help in a simpler creation of workshop specific content, for example a mindmap annotation tool specifically designed to add content to mindmaps. This will allow the user to interact during the workshop the same way as using classic paper : tools but now with the aid and advantages a digital tool offers.

5. Conclusion

This paper only gives a small impression of the complete presentation tool in mind. SVG does provide a very rich language to describe two dimensional content. With its scripting ability and the ability to create network connections it is very much suitable for a presentation tool described in this paper. A user would only require an SVG viewer application or plug-in leaving no need to install additional presentation software. The tool not only allows users to view slides but also enables them to work with the content presented.

Footnotes

  1. json-rpc is a remote procedure call protocol. See http://json-rpc.org

  2. jsolait is a JavaScript library/framework, developed to ease modularization and OOP in JavaScript and comes with a growing list of module containing a number of reusable components. See http://jsolait.net

  3. Batik (see http://xml.apache.org/batik) supports network connections through scripting Java. There is a rudamentary SVG1.2 createConnection() implementation to be used with Batik as part of the jsolait project.(see http://jsolait.net and http://jan.kollhof.net/projects/svg/playground/). Motjuvie, windows application for viewing SVG, also supports createConnection (see http://jan.kollhof.net/projects/svg/motjuvie/).

XHTML rendition created by gcapaper Web Publisher v2.0, © 2001-3 Schema Software Inc.