Showing Proof Animations in Web Browsers

Transcription

1 Showing Proof Animations in Web Browsers Steffen Masik Cathrin Prahl Verena Lommatzsch Otto-von-Guericke-Universität Magdeburg 1 Introduction Proof Animation is a widely accepted 2D Animator. Layout and trace files are a quasi standard interfaces for simulators to Proof Animation. But Proof Animation is proprietary software. It uses DirectX and runs under Windows (older versions under DOS) only. Also, Proof Animation must be installed on a system to view animations that have been created with it. This requires at least a few basic skills to operate Proofs user interface. The simulation engineer and the users of the simulation are usually not in the same location. The communication between both will mostly be done using the Internet. Also the results of the simulation, visualized in a Proof animation, will often be submitted using the Internet and it would be convenient to show the animations directly within the Web browser. Unfortunately, there are no good solutions until today, although showing simulation results as animation in a Web-browser could be important for Web-based simulation and for simulation service providing using the Web. 2 Possibilities to submit and present animations within the Internet Today, there are many possibilities to show animations with Internet browsers. But most of them are rather movies than interactive animation formats. There are two groups: movie-like formats and content related interactive animation formats. Animated-Gifs or streaming video formats like RealMedia, ASF or WindowsMedia are examples for movie-like formats. These formats use a set of single images (frames) and display them one after another with a fixed delay between each frame (frame-rate). They differ in the level of the compression and the compression related loss of quality of the images. If a high image quality is required, the level of compression (quality factor) should be small such that the file size and the loading time will be larger, which is bad for Internet technologies.

2 Figure 1: A Real Media Movie of an animation originally made with Proof Animation - the loss of quality is significant For displaying animations of a simulated system made with Proof Animation on a website using one of these formats, a movie can be made by the animation system (Proof Animation has this ability), choosing a quality factor for the conversion and converting it into the chosen format with a (most likely) commercial software-tool to embed it into the Web-site. This must be done for each and every possible input data configuration of the simulation, if the Web-site user is supposed to be able to request an animation with a special input data configuration. This may be automated, but that is nearly impossible. Trying different input data configurations and looking for the best configuration is a goal of the system simulation. The quality factor and resolution have to be chosen such that the points of interest in the animation are still visible and not distorted. On the other hand the file sizes must not be too large. Also, when the file-sizes are small enough for Internet broadcasting then the quality of animations of these formats is most-likely too bad for system simulation.

3 Figure 2: SVG, SWF, VRML contra streaming video formats It is hard or impossible to make these movies for each and every input configuration. That is why these solutions are not really useful for system simulation and visualization purposes. Three different Internet animation formats (Scalable Vector Graphics, Macromedia Shockwave Flash and Virtual Reality Modeling Language) were analyzed and compared for their potential usability for system simulation/animation in Web-browsers. Proof Animation as the most common used animator worldwide was chosen, to represent the standard in graphics quality and performance and to have a comparison to the Web-based solutions. It was not the original goal to develop converters for Proof Animation. The goal is, to evaluate the usability of these three Web-based formats. This work is not finished yet. 3 Skopeo Animation experience A first attempt to make a general purpose 2D animation system suitable for showing Proof Animation in a Web browser has been the Skopeo system presented by K. C. Ritter in 1997 ([KCR97]). It consists of a set of static and dynamically constructed Java classes, which are loaded as applets into a Web page. Skopeo directly uses Proof layouts and a trace file format that is similar to Proof. A separate tool

4 allows converting Proof ATF to the Skopeo trace format. The Java applet and a data stream have to be sent to the client for showing the animation. The waiting times for the data transfer (applet and data stream) have been annoying and might have been the main reason for discontinuing the Skopeo development. 4 Animation in the B2B Simulation Initiative Within the B2B Simulation Initiative, started by the IFF/FhG and the University of Magdeburg ([LS01]), there is a strong request for presenting animations in a Web browser. B2B Simulation Members (C.Prahl, S. Masik and V. Lommatzsch) are currently analyzing three different approaches and developing prototypes for showing Proof animations in a Web browser: 1. Using the Macromedia Shockwave Flash technology (proof2swf) 2. Using the Scalable Vector Graphics(SVG), a standard of the World Wide Web Consortium [W3C01] (proof2svg), 3. Using VRML (proof2vrml) These solutions need plug-ins for the Web browser. Plug-ins for Shockwave Flash and SVG have already been included in recent versions of different browsers. There are also Shockwave, VRML and SVG enabled browsers for other platforms than Windows. Also, if a specific browser version does not support SWF or SVG formats, nevertheless the browser will most-likely be able to download the necessary files to view the animation. The idea is that the simulation engineer uploads the Proof Animation files to a Web server. The Web server has to convert the Proof Animation into a Shockwave, Scalable Vector Graphics or VRML animation. Then the customer will be able to visit a Web site to view the animation. 5 Proof Animation A Proof ([Wol92]) animation consists of at least two parts: the layout and the trace. The static background, definitions of paths, definitions of classes are all stored in the layout file. Objects of these classes can later be moved on the defined paths. The trace is the history from birth until destruction for every object. Trace files are usually created by simulators like GPSS/H or Extend. These trace-files can easily become very large, when a system is simulated over a longer time.

5 Figure 3: Animation of an Amusement Park, with Proof Animation 5.1 The Proof2SVG Converter Proof2SVG [Mas02] does not convert the Proof files into a binary file like Shockwave. Scalable Vector Graphics (SVG) [Ado02, W3C01] is a XML [W3C01] extension made to standardize Web based graphics and animation, but it is not really made for animations of simulated systems. So it is not easy to find solutions for all requirements of this kind of animation in SVG. XML and SVG are text based, so the text based Proof animations will be converted into text based Internet-enabled animations. The size of the SVG animation file is similar to the size of the Proof Animation trace and layout files and the SVG standard also offers the possibility to compress the SVG file. The Converter consists of three main parts: Layout-file-parsing routines, Trace-fileparsing-routines and SVG-compute-and-output-routines. Initially, layout and trace-files have to be parsed completely. Although, this is memory intensive and not very efficient the converter needs to know the whole history of an object before computing the SVG. While a Proof trace-file is time-related, a SVG animation created with this converter is object-related. That means that every object in a SVG animation knows all its events and the event-times from its birth until its destruction. This method has some advantages, e.g. smaller file-sizes, but it also has some disadvantages, e.g. it is not suitable for streamed transmission.

6 The requirements for the converting tool include platform independence and very short computing times. Platform independence is needed because Web-servers may have different operating systems and the converter should work anywhere. Small converting times are required because the Web-server will convert the Proof files when an user requests the animation, so it should only take seconds. The converter prototype presented here uses PHP to run the converter and to embed the SVG animation dynamically into a Web-site. The requirements for the Web browser plugin are platform independence, good performance and perfect animation-time/real-time control. Figure 4: A SVG Animation of an Amusement Park, originally made with Proof Animation, in an Internet Explorer Browser Window with Adobe SVGViewer context menu

7 There are some SVG plugins available. The most common used plugin on Windows and Mac platforms is the SVGViewer by Adobe. The Adobe SVGViewer is distributed with the Internet Explorer 6.0 and also available for Netscape on Adobe s homepage. Also, the Mozilla Browser Project offers SVG for nearly every platform, but in an earlier stage of development than the Adobe SVGViewer. The Adobe SVGViewer will adjust the frames per second instead of changing the speed or distorting the animation-time. The performance is still a big problem. At some point, for every plugin on every platform the frames per second sink below a bearable level. It happens mostly when too many moving objects are in the view-box at the same time or when the whole animation is too large. Ways to solve these problems are e.g.: decreasing the size of the view-box, focusing on a hotspot in the animation, making multiple animations out of one, clipping and maybe streaming transmission of the animation from the Web-server to the SVG plugin. The latest version of the Adobe SVGViewer supports some performance-improving features, e.g. it is now possible to turn off the antialiasing for the whole or different parts of the animation. Turning off the antialiasing for all moving objects, for example, results in a significant performance improvement. The loss of quality might be acceptable in many cases. The Proof2SVG Converter is command-line-based. A graphic user interface is not necessary. It is planned, that the converter runs on Web-servers and will be executed by scripts like PHP. Prototypes of Proof2SVG are currently running on the Proof2SVG Homepage and in the Web Based Simulation Center (WBSC, [Ost01]), a project by Stefan Osterburg that combines all efforts of the B2B Simulation Initiative. 5.2 The Proof2Swf Converter The Proof2SWF ([Pra02]) Converter is based on Macromedia s Shockwave Flash. It was created by Cathrin Prahl. It uses the SDK (software development kit) from Macromedia to create the files based on the Flash 4 format standard. The SDK consists of an open source library of C++ files. With the file SDK it is possible to create swf-files directly. Normally swf-files are created with the Flash editor from Macromedia. The first working files (fla-files) created by this editor are similar to the source code of a program. It is not possible to play these files without the flash editor. To present these flash files they must be transformed. This is done by exporting the fla-files into swf-files. The Flash editor allows exporting to many different formats, e.g. jpg, gif or, pict. The resulting swf-files are usually very small. As they are often used on the Internet, the file size is an advantage. The small size means that fast transmissions are possible. As already mentioned the file SDK allows creating the file directly. As a result, there is no need to transform the created files.

8 The file format gives the user a few example classes to start with. There are examples for creating circles, rectangles or polygons. These examples were a good starting point for the transformation from proof-files to swffiles. For the transformation the layout- and the animation trace file are handled separately. First the layout files have to be created as a base for the swf files. Ideally the layout of the swf-files should exactly match the Proof layout. The resulting problems will be discussed below. A parser was written which looks at the lay-file. If for example a Proof ARC statement is found then the converter creates a Flash circle object. The properties of the arc are assigned to the new circle object. Other objects are handled in a similar way. The objects are stored in lists. There are lists for every type of object. The problem with the file SDK is that it does not contain lines originally. This problem could be solved by taking a polygon just with two points as a line. Another problem was encountered in the transformation of circles. The SDK requires all circles to be larger than a certain minimum radius. So if the value in the Proof layout file was below a certain value, it was automatically replaced by the minimal value. Furthermore, the SDK only supports full circles. With Proof on the other hand it is possible to create partial circles or arcs. As a work-around Bezier curves could be used instead. By considering the trace files animation can be added to the swf-files. Another parser was implemented that works in similar way as the layout converter. Finally, the data from both Proof files were combined. The file SDK has a sorting algorithm which puts the objects together. Unfortunately, this procedure takes a very long time if there are many objects. The size of the created swf-files also grows with more objects. The SDK is divided into two sections. The low level section was closely follows the SWF structure. To make the usage of the SDK easier, the high level section was created. With the high level functions it is possible to generate SWF files much easier and faster. For example to draw a circle only the center and the radius of the circle must be specified For Proof2swf both sections were used.

9 5.3 The Proof2VRML Converter There are a lot of different languages to create simulation models but not all can be embedded into html documents as easily as VRML (Virtual Reality Modeling Language). This argument and the high performance could be the reason why VRML has become something like a standard for communication between businesses. First there was the idea of not only converting the files but giving the models a new look by adding a third dimension to 2D Proof animations. Soon the impossibility of this approach had to be recognized because of the inadequate information. After four month of work a Java based program has been developed which asks for the lay and atf file of the project which should be converted. Figure 5: Proof2VRML GUI The background of the VRML model is created by the information of the lay file. Following the idea of GPSS/H every single object is observed over its whole lifetime and a special path for it is created instead of working with separated paths. Although VRML is very flexible there are a lot of problems with special features in Proof Animation. It is very difficult to implement accumulating paths and to fill objects with colors. The problems start with the two different strategies of the two languages. Proof Animation allows dynamic changes during the animation run time, for example "Messages". The content of a Message could be changed so that changing data can be displayed during the runtime. It is very difficult to convert these features to VRML because this requires the use of scripts, which assign different values to the variables. During the start of the wrl file VRML creates all objects and variables. If a variable is assigned a certain value at the end of simulation, only this value would be displayed because VRML does not have a timemanager similar to Proof Animation. That means it does not show the values of the variable during the runtime. Therefore special scripts are required. Every time the value of a "message" is changed, a new one must be created for VRML, which is very memory intensive.

10 Another problem is missing information in the lay file. For example it is very hard to translate the order "FILL" because only one seed point but no borders for the filling procedure are specified. A possibility to solve this problem is an interaction with the user. However this does not seem useful because not every user of a model knows everything about its context. Another problem is the declaration of different views in Proof. But probably they are not necessary because of the interactive motion control in VRML viewers The most important orders are translated to VRML, such that some animations can be demonstrated to work. Fig. 6 shows the presentation of a wrl file which was created with the Proof2VRML converter. It can easily be run in most browsers. Figure 6: Proof model (left) and VRML result (right) VRML opens a new world of simulation via Internet. The user gets the opportunity not only to zoom into an animation, he can even walk through the model without any loss of performance. It is no problem to show more than a hundred parallel movements or to show models of an enormous size. After all converting Proof to VRML is very useful not only because of the support by the standardized plugins and the good performance.

11 6.1 Supported features Feature Proof2SVG Proof2SWF Proof2VRML Current Version User Interface Shell Shell GUI Platform independence Programming Languages and SDKs Special Features Yes All Unix platforms, Windows with problems, because of a sorting problem in visual studio Yes C++ C++ & Flash SDK Java - Can be executed by scripts - Can create log files - Creates for every view a different swffile, with the name of the Proof- View -Execution in a script does not work yet Layout Views Home -View is used All views are created Home -View is used Colors Yes Yes Foreground Colors Lines Yes Yes Yes Arcs/Pies Yes Yes Yes Fills Not yet (workaround implemented) Not yet Not yet Text Yes yes, but no rotated Yes text Messages Yes Almost complete Not yet Bars Yes Yes Not yet Plots Yes No Not yet Design Elements Yes Yes Not yet Path Definitions Yes Yes Yes Class Definitions Yes Yes Yes

12 Feature Proof2SVG Proof2SWF Proof2VRML Trace Time/DT Yes Yes Yes Create Yes Yes Yes Destroy Yes Yes Yes Write Yes Not yet Yes Set Bar Yes Yes Not yet Plot Yes Not yet Not yet Place at Yes Yes Yes Place on Yes Yes Yes Place on at At End only Not yet Not yet Place in Yes Not yet Not yet Move Yes Yes Yes Rotate Yes Yes Yes Set Class Yes Yes Not yet Set Color Not yet Yes Not yet Set Travel Yes Yes Yes Set Speed Yes Yes Not yet Set Dir Not yet Yes Not yet Set Nondir Not yet Yes Not yet Sound Not possible Not yet Not yet Layout- Statements in trace-files some Not yet Not yet 6.2 Performance Proof2SVG Proof2SWF Proof2VRML Trace Average Converting/ Very short Long Medium Computing Time File Sizes Small Large Medium Possibility to compress files Plugin Performance GZIP Medium - Adobe SVG Viewer 3 Bad - Mozilla Bad -IBM SVGView GZIP (Netscape) Great Good, for most plugins

13 Summary As mentioned above, this work is not completely done. All three languages have proven useful for animations of simulated systems. Most VRML plugins have a very good performance because they make use of 3D acceleration of the client computer. Shockwave Flash has also a very good performance. The best Scalable Vector Graphics plugin, that is currently available and representing the SVG standard (Adobe SVGViewer3.0), has the poorest performance of all, but it is still mediocre. At least Proof animations can be nearly completely converted into SVG,VRML and SWF without loosing any detail. References [Ado02] Adobe System Inc.; Adobe SVG Zone; [LR97] P. Lorenz, K.-C. Ritter: Skopeo: Platform-Independent System Animation for the W3 in Proc. Simulation und Animation '97, SCS European Publishing House San Diego/Erlangen/Ghent/Budapest 1997, pp ISBN [LS01] P. Lorenz, M. Schenk: Die B2B Simulation Initiative/ Simulationsdienstleistungen im Web. In Tagungsband des 46. Internat. Wissenschaftlichen Kolloquiums der TH Ilmenau September 2001, S [Mas02] S. Masik; Visualization of simulated systems using Scalable Vector Graphics; [Ost01] Stefan Osterburg; A Portal of B2B Simulation; [Pra02] C. Prahl; Studienarbeit [W3C01] World Wide Web Consortium; XML and SVG; ; 2001 [Wol92] Wolverine Software Corp.; Using Proof Animation; 1992 Proof Animation and GPSS/H are Trademarks of the Wolverine Software Corporation. Extend is a Trademark of Imagine That, Inc. Adobe SVG Viewer is a Trademark of Adobe Systems, Inc. Internet Explorer is a Trademark of Microsoft, Corp. Real Player is a Trademark of RealNetworks, Inc. Flash and Shockwave Flash are Trademarks of Macromedia, Inc.

14