Web browsers are a much-desired environment for the deployment of electronic manuals and catalogs.

1 Situation

The software is affordable or free and easy to understand. However, most companies have difficulties to publish their documents and keep them up to date. In most cases a programmer or web specialist will design the catalog and build the links between graphics and text. He will also create hotspots on the graphics.

Apart from the effort to create the first instance of the catalog there is a significant workload in case of revisions. Graphic changes are not reflected automatically in the catalog and hotspots or links need to be updated manually.

This paper talks about how an electronic parts catalog can be built from existing illustrations and database information. The approach uses graphic objects inside CGM files to identify and hotspot illustrations. It demonstrates the usage of hotspots inside CGM files compliant to the ATA profile and the benefits in comparison with standard overlay techniques.

2 Basics

2.1 How overlays work

The classic approach to handle interactivity on graphics is to use the overlay technique. The illustration is provided as a separate file, often using the TIFF format. Hotspots and links are then defined on top of this illustration, e.g. as a picture map in HTML or as an SGML/XML overlay. As a consequence the hotspots are not logically connected to the underlying graphics. If the illustration changes the hotspot information needs to be controlled and amended manually.

This disadvantage becomes more apparent if the catalog is undergoing revisions. Every time a graphical change is performed the overlays need to be checked and partially changed. This consumes a lot of time and requires highly skilled people. As a result the timely delivery of revisions may become a problem.

2.2 What is a graphic object?

There is only one way to remove the problem described above. The hotspot and link information needs to be connected logically to the graphical information. This ensures that the hotspot information is up to date if the illustration changes.

The easiest way to do this is to create so-called graphic objects (grobjects). In simple words this is a group of graphical primitives like lines or ellipses which have an identification tag attached to them. They also can carry information about the hotspot region. The illustrator will group the lines and ellipses and enter the ID. Then he will check the object as a hotspot. Other information is not required in the CGM file.

Graphic objects have been defined in the latest revision of the ATA GREXCHANGE profile, version 2.4, for CGM. The usage of ID's and region is thus standardized and the recognition of objects is possible for every application supporting this version of the ATA profile. The new WebCGM profile proposed by the CGM Open Consortium is also based on the principle of grobjects.

2.3 Links and communication

The catalog discussed in this example does not store any link information inside graphic files. Everything that resides inside a graphic file is much harder to maintain than a database or text based information.

The links are contained in the HTML part. The CGM viewer reports the ID of an object to the HTML environment as soon as the mouse enters that object. By means of simple Java scripts the jump to the parts list entry is performed.

The links back to the graphic object are written in Java, too. The viewer is called using the object's ID to show or highlight the object.

3 Preparing the content

3.1 Overview

A parts catalog consists of individual pages showing an illustration and a corresponding parts list. To be able to link this information together the list must be provided in a processable way. The easiest way is to generate an ASCII file for each illustration which is no big challenge from within any mainstream database.

To minimize the work on the illustration side all valid callout numbers will be converted into graphic objects with an ID attached to them. This allows for dynamic linking at runtime. Objects which already exist on the illustration will allow for added functionality.

3.2 The parts list

Most companies keep their parts related data in some kind of database, sometimes even in an Excel spreadsheet. A single part number may come with lots of information attached to it. In most cases this is more information than you want to display in a parts catalog. Also there are probably lots of parts in your database which will never make it into the catalog, e.g. raw materials or components of riveted assemblies.

To be able to generate a parts catalog in an automated way the database needs to store the following information with every part that will appear in the parts list:

• Part number - the number used to identify the part
• Callout - the callout number on the illustration
• Page - the catalog page on which this part will be shown

The database will generate plain ASCII files for every single catalog page. They contain all the information that will show up in the browser in tab-delimited fields. Some additional files will be created holding information about column headers and widths.

3.3 The illustrations

Users want to click on a callout number and/or a part itself to navigate to the detailed information about this part. This requires the presence of so-called hotspots on the illustration. These are areas which are "clickable", i.e. the user can click into it and an action will be triggered. The action is typically a jump into the right parts list location. The most common wish is to make the callout numbers interactive. This can be automated in a way that any vector illustration can be used for this catalog. Preferably you might want to use CGM as the file format but the original data may as well have been generated by a CAD system.

The compiling process opens every illustration, converts all text elements into graphic objects with hotspot property and saves them as CGM files. The file names correspond to the names of the ASCII files.

4 Building the catalog

4.1 Required software

Microsoft Internet Explorer is required as a browser for the HTML pages. To view the CGM files IsoView is used. To keep the processing as simple as possible no server-side processing is required.

IsoDraw is used as the technical illustration tool processing the illustrations and building the catalog.

4.2 Compilation

The actual compilation of the catalog pages is preformed by a custom plug-in written for IsoDraw. IsoDraw is a technical illustration solution with extended CGM support allowing for generation of graphic objects (grobjects). The plug-in has been developed for a customer and is not an off-the-shelf product. It just shows one of several ways how this technology can be used to automate catalog production.

The plug-in is launched from within IsoDraw. IsoDraw will open the illustrations and convert the text elements into graphic objects. An ID will be assigned. At the same time the corresponding ASCII list will be parsed. The results of this process will be written into a CGM file and a corresponding HTML file.

Further user interaction is not required. The plug-in deals with revised information automatically.

5 Functionality

The catalog produced by the IsoDraw plug-in provides basic functionality. This functionality depends on customer requirements and may be extended. Apart from vertical and horizontal navigation through the pages direct links go from callout numbers and graphic objects on the illustration to the respective entries in the parts list section. A click on the part number in the list will highlight and/or center the corresponding graphic object in IsoView.

The catalog provides an index page to search for part numbers in the entire catalog. Users can add items to a purchase list which may be printed and/or sent back to the server. Introductory and help pages complete the fully functional catalog.

6 Additional functionality

This implementation has been kept simple to show the easiest way to create an electronic parts catalog. Based on this users can add functionality to the individual HTML pages or change the design. For larger projects the lists may come from a database directly at runtime. This may also be advantageous if the catalog is accessed over a network rather than a local CD drive.

Other additions include direct links into the descriptive part of the documentation, e.g. the maintenance manual. There are lots of ways how IsoView can be used to enhance the functionality and provide support for links at runtime.

7 Revisions

One of the biggest benefits becomes apparent as soon as a revision of the catalog is coming up. The classic overlay hotspots and links caused a lot of headaches and even more repetitive work. In our example the underlying data changes, i.e. the database provides a new set of ASCII list files and the illustrations are changed as well.

Existing objects on the illustrations will retain their properties and carry hotspot information with them. Newly added objects will be recognized automatically if there is a corresponding entry in the list file.

8 Conclusion

This paper should give you a feeling for what is required to generate a fully functional parts catalog based on available web technologies. Most companies do have the required information available or can make it available with not too much effort.

The big benefit of the approach discussed here is ease of use. You need to be able to handle your database (which is what you are doing right now). Apart from this you only need to work with illustrations that contain callouts as text elements. This is possible even if you are using scanned raster images right now.

The major headache of most companies is removed by the fact that the actual web pages including links are generated automatically. This makes frequent revisions easy and fast. No programming skills or HTML/CGM knowledge is required to generate a new version of the catalog.

The functionality provided in this example covers the basic needs of a parts catalog user. This may easily be extended.

The catalog shown in this study has been developed for a customer in Germany. The company related information has been removed intentionally.