SVG Slides Interactive Presentation Multi User Client-Server Jan-Klaas Kollhof

Rostock Mecklenburg/Vorpommern Germany jan@kollhof.net http://jan.kollhof.net

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 protocol and developed the open source JavaScript framework JavaScript o Lait. 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. 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.

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.

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. 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. 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. 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.

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 json-rpc is a remote procedure call protocol. See is used. 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 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 is used. 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. 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:

A viewer component for viewing the slides as part of a private screen. This component will be synchronized by default to the active content. It can also be used to view the slides independently (not synchronized) from the active content or to load new slides into the view for previewing. Currently viewed material can be made active, i.e. having all clients synchronized to the content made active, if the user has privileges to do so. This will allow the presenter to privately load a new set of slides into the viewer, navigate to a certain position in the slides if desired and then have the content displayed on all synchronized client components. If multiple preview components are used a presenter could prepare a presentation with multiple slide documents beforehand and then during the presentation switch between these documents.

Navigation tool for navigating through the slides. These will be keyboard handlers and buttons as part of a navigation toolbar.

Annotation tool to allow the presenter to draw and take notes on the slides. This tool will also allow the presenter to make annotations before the presentation. The notes taken on the slides will then be visible only to the presenter and can aid during the presentation.

Reviewing tools for reviewing presentations. It will allow loading annotations made privately or submitted by other participants following certain criteria: for example only displaying annotations made by user1 or annotations that where made between 11:05 and 11:10 o'clock or all annotations made on a certain item on a slide. It may also allow the replay of a presentation showing all states of the presentation including annotations as they were made.

Privilege tools to grant participants certain rights. For example annotation or navigation rights on the slides being presented so that a participant can take over control to make public annotations or navigate to a different slide.

A communication tool for virtual discussions or virtual presentations. When participating in an online discussion a tool to enable communication is needed. A simple tool would be a text based chat application.

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. All components communicate with each other using an RPC protocol called json-rpc 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 Batik (see ) 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 and ). Motjuvie, windows application for viewing SVG, also supports createConnection (see ). . When a client component is loaded it creates a remote service object using the json-rpc implementation: 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: 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): 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: 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.

In the following section a few use cases will be presented. 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. 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. 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.

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.