This page refers to the usage of my Molecular Viewer Plugin which worked with all major browsers. This is no longer supported, but please get in touch if you would like more information.
Basic Syntax
The html syntx is very simple. If you are familiar with adding images to web pages, using <img src=”filename.ext” … /> then you will recognize the similarity, with <object data=”filename.ext” … />
Here is a simple example:
<object data="water.xyz" type="chemical/x-xyz" width="640" height="480" />
Obviously, the complete html page will have other stuff. Here is a minimalist complete html page containing one molecule:
<html>
<body>
<object data="water.xyz" type="chemical/x-xyz" width="640" height="480" />
</body>
</html>
Where to find Chemical Files
You may well be wondering where that water.xyz file comes from in the above examples. To go back to our image analogy, it is like an image file such as a gif or jpeg image. If you wanted an image file of, say, a seagull – you could either fire up your favorite image editor and draw one, or you could simply search on Google and save the image file to disc.
In the same way, you will probably not wish to use a chemical editor every time you need a particular molecule. Instead you can usually find the molecule you need on the web.
Incidentally, so as not to cause unnecessary suspense, here is what that water.xyz file actually looks like:
3 Water O 4.013 0.831 -9.083 H 4.941 0.844 -8.837 H 3.750 -0.068 -9.293
There is an alternative to the data= attribute, if you wish to embed the data directly into the html page. Here is that same example with the data embedded ( and thus no need for an external file ):
<object type="chemical/x-xyz" width="640" height="480" >
<param name="inline" value="3

Water

O 4.013 0.831 -9.083

H 4.941 0.844 -8.837

H 3.750 -0.068 -9.293

"/>
</object>
You will notice that the only difference to the data are the 
 at the end of each line. They are there to indicate end of line as html does not preserve line endings, or other white space.
Depending on the type of molecule that you are looking for, there are different places to find them. They are dealt with in separate sections below. You may wish to skip straight to the section that applies to your particular molecule now. If you are not sure, you might try looking up the chemical that you are interested in in Wikipedia.
Protein Molecules
The main database to search for proteins is the Protein Data Bank. You can save the file locally, or you can simply reference the PDB database by structure id. Please see Sample x-pdb for details and examples.
Genetic Sequences
If you know the DNA or RNA gene sequence, you can simply embed it straight into the html page. Here is the DNA sequence GATTACA:
<object type="chemical/x-fasta" width="640" height="480" >
<param name="inline" value=">seq1 Sample DNA

GATTACA

"/>
You can find gene sequences in the National Center for Biotechnology Information (NCBI) databases and you can reference them by id directly in your html code. See Sample x-fasta for more details.
Small Molecules
As you can see above, there are specific databases for various macromolecules. Smaller everyday molecules are another matter, and the data are more scattered.
You might try searching the PubChem Database first. If you find the molecule that you want, then click the “XML” button ( Download XML -> 3D XML ) which gives the file CID_<number>.xml which can be renamed to a .pc file. Please see Sample x-ncbi-asn1-xml for details and examples.
Another good place to find molecular data links is Wikipedia.
Below is a list of sites which maintain catalogues of molecules catagorized in various ways:
- Visualisation of Chemical Processes
- Molecule of the Month
- The Online Macromolecular Museum
- Teaching Resources in Biochemistry
- Molecular Visualization Resources
- The Virtual Museum of Minerals and Molecules
You might also try searching Google for the molecule in question. The plugin supports twenty-seven different file formats, but the key ones for searching purposes ( the most likely that you will find ) are .pdb, .xyz and .cml. Therefore a good Google search for a caffeine molecule file is: caffeine AND (xyz OR pdb OR cml). Substitute your desired molecule for the word caffeine in the search.
Reactions and Animation
Animations of reactions or vibration modes are simply molecular data files which contain not one, but a series of molecule snapshots. The plugin then displays these sequentially. Although there are some of these available on-line, they are less common and you are more likely to need to create the data yourself, using a chemical editor. However, there are some examples amongst the links above, and on this web site, such as: Carbon Dioxide Dissociation.
Converting Formats
If you have found the molecule that you are looking for, but it is not in the file format that you want, then you can convert it with the command-line utility babel from the package:
Download and install OpenBabel for your operating system, and then run babel -H for details on how to convert files. If the files have the correct extensions, it is simply a case of typing babel <from-file-name.from-ext> <to-file-name.to-ext> e.g. to convert water.xyz to cif format, type:
babel water.xyz water.cif
Adding the molecule to your html page
Once you have found a file for the molecule, you include it in your html page using the <object … /> tag, as demonstrated above. Unless you are embedding the data, or referencing a public database ( see above ) then you will need to put the file somewhere that the html file can refer to, perhaps in the same directory as the html file, or in the same directory that you keep your image files. You will also need to set the type=”chemical/x-XXXXXXXX” tag to indicate the file type of the chemical data. You can look up the MIME types on this page: Scarlet Line Chemical MIME Types.
That’s it. Hopefully you now have what you wanted. If you create a publicly accessible web page that you think might be useful to others, please e-mail me a link so that I can reference it from these pages.
