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