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

Newer Software Available here.

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.

These java applications replace the perl scripts that I provided previously.  They are still accessible here.  Be aware that the perl script for converting MacMolPlt grid files to cube files does not correct a scaling error that the java application does. The grid origin and increment was a factor of 1.88973 too small in the perl script, because I was working in Angstroms instead of Bohr.

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 java application MacMolPlt_Surface_to_Gaussian_Cube.jar (link should download zip archive).  Again, I recommend that all these files should be gzipped (the java application does this automatically).  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 Orbitals_to_Web.jar (link should download zip archive) java application.
A) Set the relative path to the Jmol installation on your server.  The default is shown in the text box.
B) Choose the file that contains the atom coordinates.
C) Choose the rendering mode: small dot for just one atom, wireframe for molecules.  There are other options but you will have to modify the javascript in the .html document by hand.
D) Choose the page format.  At this point it is just the number of orbitals that may be simultaneously displayed on the atom or molecule.  Four is the maximum possible.
E) Add the files containing the orbital surfaces to the Orbital Files list.  Drag them to the order you wish them to appear in the menus.  If you pick incorrect files they may be deleted by selecting them and then clicking on the "Delete Selected" button.
F) To generate the .html file click on the "Save .html as ..." button.  You will get to choose the file name and save location.

Step 3: Edit the .html file created in step 2.
A) Add explanatory text using your favorite .html editor. (look for text between < and > for suggested places to add stuff.
C) If adjustments need to be made to the magnitude of the 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: 7/21/06