The MDL plugin Chime allows for visualization of 2D and 3D molecular structures within the browser window. Previously we have discussed how to include molecular strutures (hypermolecules) within a web document, but these methods end up with the visualization occuring with a helper application. This helper application has its own window. With Chime the visualization occurs within the same page (and therefore same window) as the rest of the document.

Outside of this, there are two other significant advantages to using the Chime approach. Chime is very powerful, allowing for fast manipulation of complicated structures. Chime is scriptable which means that authors can significantly enhance the presentation of the molecule, for example, by highlighting regions within a molecule.

In the next section we will discuss how to use Chime and show a few examples. Following that, we will describe how to prepare a web page that includes a molecule displayed with Chime and will detail how the examples were created.

How to use Chime

What is Chime?

With Netscape 2.0 came the ability to directly add third-party features to the browser. This is accomplished through the use of plug-in architecture. A plug-in is a program that operates as if it were a direct part of the original program itself. In a sense, one can view the plug-in as an enhancement to the browser itself. Plug-ins are available for a variety of functions and you might be familar with, for example, the Adobe Acrobat Reader plugin that enables the direct viewing of pdf documents and the RealAudio plugin which provides audio capability to the browser.

Plug-ins must be obtained by the user before they can be used to access anything on the web. Plugins are generally downloaded from the developer's site and then installed into the browser's directory. When the browser is started, it takes stock of all plug-ins so that it can make use of them during the session.

Plug-ins are written specifically for a particular computer platforms. Therefore, you must obtain the proper version for your computer. One advantage of the plug-in approach is that the code is specifically written for each platform and can take advantage of its particular features. Also, you need to obtain the plug-in once, install it on your hard drive and it is available whenever you need it in the future - no need to retrieve it every time you wish to use it.

Chime is a plug-in that allows for the visualization of molecular strucutres. It is a product of MDL Incorporated and is based on the RasMol program written by Roger Sayle. MDL has enhanced the program along with creating this plug-in version, but the essential features (the 3D renderer and script language) is common to both Chime and RasMol. While Internet Explorer offers some plug-in support, the implementation of plugins is not as full-featured as with Netscape Navigator. This means that you cannot use Chime with Internet Explorer and you are encouraged to use the most recent version of Netscape Navigator to insure that all the features work properly.

Obtaining Chime

Chime is available for free from the MDL web site. Download the correct version for your system; Chime is available (as of April 1997) for the Macintosh and Power Macintosh, Windows 95, Windows NT, Windows 3.1 and SGI computers. Follow the instructions provided on the Chime pages for installing the plug-in correctly on your platform. After the plug-in has been installed, you are ready to use it. Simply launch your browser and take a look at the following examples.

Working with Chime

Below this paragraph is a working example of Chime; it shows the structure of toluene. (This of course assumes that you have properly installed Chime on your computer.) We will now discuss how to use Chime to visualize and manipulate a structure.

Rotating a molecule

Molecules can be rotated within Chime simply by clicking and dragging the mouse over the structure. On a Windows or SGI computer, click with the left mouse button. Experiment using the example above.

Changing the size of a molecule

Molecules can be resized by holding down the shift key while clicking and dragging the mouse; Windows and SGI users use the left mouse button. Dragging to the upper right causes the molecule to move away from you (the molecule shrinks in size), while dragging to the bottom left causes the molecule to approach you (the molecule enlarges).

Translating a molecule

Molecules can be translated vertically and/or horizontally by holding down the control key while clicking and dragging the mouse; Windows and SGI users use the right mouse button.

Altering the display type

The toluene molecule is displayed here in the familiar ball-and-stick representation, but Chime offers other possibilities. To change the display type, place the mouse somehwere in the Chime display area and click and hold down the right mouse button (Mac user should simply hold down the mouse button). A pop-up menu will appear. Move down to the Display selection and a new menu will appear to the side. Drag the mouse to one of these display options, such as stick or spacefill and notice the changes.

Other Menu Selections

The pop-up menu affords you some additional features. The rotation selection will start/stop automatic rotation of the molecule, a sort of animation of the molecule. The options selection provides the ability to remove hydrogens, disulfide bonds, add a dot surface representing the van der Waals radii, etc. The color selection allows one to change the colors of the atoms. It is best just to play with these features and see what happens.

2-D Representation

Chime can convert back and forth from a 3D to 2D representation, as long as the molecular coordinates have been stored in the MDL MOL format. Use the 2D Rendering options to convert the toluene example into the standard 2-dimensional representation.

In the example below of testosterone, we show how Chime can be used to highlight regions of the molecule and also made to change some of its display options. Simply click on the button to the left of the feature you wish to enable. Note that the we have supressed the display of hydrogens but you can add them back in if desired using the pop-up menu.

Highlighting Display Options
Show oxygen atoms red background
Show A ring white background
Show B ring black background
Show C ring label atoms labels off
Show D ring dim lights brighten lights
Show all atoms show surface remove surface

Creating Pages with Chime Objects

In order to create a page with a Chime object you must first have a file that contains the 3-dimensional structure of a molecule. Chime supports the following file formats only:
File Types MIME type File extension
MDL Molfile chemical/x-mdl-molfile .mol
Brookhaven Protein Databank chemical/x-pdb .pdb
IEMBL Nucleotide Format chemical/x-embl-dl-nucleotide .emb,.embl
XMol XYZ chemical/x-xyz .xyz
Gaussian Input File chemical/x-gaussian-input .gau
Mopac Input File chemical/x-mopac-input .mop
MDL RxnFile chemical/x-mdl-rxnfile .rxn

Plugins are activated with the <EMBED> tag. The minimum information that must be included within this tag is the source file name (this is the coordinate file) and the size of the object in pixels:

<EMBED SRC="{input file URL}" height={x} width={y}>

Below are some example pages with full details of how the Chime object is constructed. Each example will appear in the left hand frame with the html code presented on the right hand side. The specific code dealing with the Chime plug-in is highlighted in red.

Examples of Chime Pages

  1. Simple page with one molecule
  2. Two molecules non-default settings
  3. Using Scripts to alter the start-up view
  4. Using buttons to control the view
  5. Animated .xyz files

One last little trick. When a page which includes an embedded Chime object is requested by a browser which does not have Chime installed, a warning alert window will appear informing the user that the plugin is not available and directs the user to a page with information on downloading the Chime plugin. Authors can change this referenced page from the Netscape site to any other web page they desire. Just include the option
pluginspage=" any_valid_URL" within the embed tag, such as the example below:

<embed src="testmol.mol" height=200 width=200 pluginspage="chimereference.html">

Further information on the use of Chime can be found at the MDL site. The RasMol manual, which completely documents the scripting language, can also be consulted.

on to Other Resources on Creating Enhanced Web Pages for Chemistry

© Steven M. Bachrach and Internet Journal of Chemistry