Creating Web Pages That Use Jmol To Display Orbitals
by Jonathan Gutow, May 2006


The instructions here are for semi-automatically creating pages that look and work like my chlorine atomic orbital page.  The page contains one Jmol java applet and uses Javascript to allow the user to choose up to 4 orbitals (isosurfaces) to display simultaneously on the atom or molecule in Jmol.  A limited number of options for color and surface type are also provided in the form of user selectable radio buttons.

You will need to be comfortable using the command line interface to use the tools described here.  Eventually, I hope to create a GUI using something reasonably portable like java, but for now you need a computer capable of running perl scripts from the command line.  Essentially all *NIX systems have this capability (LINUX, BSD, MacOS X).  I do not believe perl is normally installed on MS Windows, but can be added.

Step 1: Gather all the files you will need into one directory.
Atom coordinate file:  This file can be any of the formats from which Jmol can read atom coordinates (.pdb, .mol, GAMESS .log, etc...).  To save space on the server and bandwidth these files should be gzipped.
Surface file for each orbital: These files must be in the Gaussian .cube format.  Gaussian can generate these directly.  If you  use GAMESS you will need to do some conversion.  One route for GAMESS is to export the surfaces you want from MacMolPlt and convert them using my perl script MacMolPltgridtocube.pl.  Again, I recommend that all these files should be gzipped.  Choose the names for these files carefully.  The basename of the file will be used as the text for the menu item used to display this orbital.  The script assumes that the best display level is (+/-)0.06 for the isosurface.  Optimize your cube file grid size for this, or edit the resulting page to appropriate levels for your data.

Step 2: Generate the raw page using my orbtohtml.pl script.
A) If you only have a few orbitals skip this step.  Create a text file with one file name per line.  The first line should contain the name of the file with the atom coordinates.  The file names of the .cube files should follow in the order you wish them to appear in the menus.
B) Within the directory containing the files run the orbtohtml.pl perl script.  With the following command:

perl [path to script]/orbtohtml.pl name_of_file_created_in_step_A >name_of_html_file_you_want_created
or
perl [path to script]/orbtohtml.pl name_of_coordinate_file name_of_orb1_file [name_of_orb2_file...] >name_of_html_file_you_want_created

The ">" symbol before the name of the file you want the data to go to is necessary.

Step 3: Edit the .html file created in step 2.
A) Set the relative path to the Jmol installation on your server.  Search for the following lines in the page source and adjust appropriately.
<script src="../../Applets/Java/Jmol/Jmol.js"></script>
jmolInitialize("../../Applets/Java/Jmol");
B) Add explanatory text using your favorite .html editor.
C) If adjustments need to be made to the magnitude of function where the surfaces are drawn, I suggest searching the page source by orbital name and replacing the 0.06 in the isosurface command with an appropriate value.


Step 4: Put your new page and all the .gz files on your server in a single directory.  Make sure it has the proper relative relation to the Jmol installation on your server.
Last Updated: 5/24/06