still of jmol image
Making a Jmol ScriptButton Page
This tutorial will step you through making this page, which compares the shapes of the degenerate pair of HOMOs found for ethane.  If you started on the main tutorial page you have probably completed the preparation steps.

Preparation:
  1. Download the data file ethane-staggered-3-21G.log.
  2. Open this file in the Jmol application.
  3. Open the Jmol Web Page Maker dialog by clicking on the "Export to Web Page..." icon export to web page icon or by selecting "Export to Web Page..." within the "Export" submenu of the "File" menu.
  4. Select the ScriptButton template by clicking on the ScriptButton tab.
  5. Enter the necessary information into the fields on the left hand side of the dialog(see general set up)
Make the first button:
  1. Open the scripting console (right mouse button, control-click on one button mouse, > Console).
  2. Navigate to the last frame of the file. Use either the command "frame 1.9" or the pop-up menu (right mouse button > model > 1.9).
  3. Turn on spinning (right mouse button > Spin > On).
  4. Display MO #8.  Use either the command "mo 8" or the pop-up menu (right mouse button > Surfaces > Molecular Orbitals > 1..25 > 8 -0.4773)
  5. Add the annotation at the bottom using the echo command: "set echo bottom center; echo "MO #8 one of two degenerate HOMOs"".
  6. Save this view by clicking on the "Add Present Jmol State as Instance..." button near the bottom right of the dialog.
  7. Enter the text you want to appear in the button in the small dialog that pops up.  I suggest "MO 8".  Click "OK".  This will add this instance to the list in the large window on the right side of the dialog box.
Make the second button:
  1. Display MO #9.  Use either the command "mo 9" or the pop-up menu (right mouse button > Surfaces > Molecular Orbitals > 1..25 > 9 -0.4773)
  2. Change the annotation to reflect the change in orbital using the command: "echo "MO #9 one of two degenerate HOMOs"".
  3. Save this view by clicking on the "Add Present Jmol State as Instance..." button.
  4. Enter the text you want to appear in the button in the small dialog that pops up.  I suggest "MO 9".  Click "OK".  You should now have two instances in your instance list.
Make the third button:
  1. Turn off the display of MO #9 with the command: "mo off".
  2. Create the cyan display of MO #8 with following commands:
    • "isosurface homoa mo 8 mesh nofill;"
    • "color isosurface cyan;"
  3. Create the yellow display of MO #9 with the equivalent commands:
    • "isosurface homob mo 9 mesh nofill;"
    • "color isossurface yellow;"
  4. Change the annotation to reflect what is now displayed using the command: "echo "Cyan (MO#8)|Yellow (MO#9)"".  The line right before the word "yellow" is a vertical line, usually found as the shift character for the backslash "\".  This vertical line causes everything after it to appear on a new line.
  5. Save this view by clicking on the "Add Present Jmol State as Instance..." button.
  6. Enter the text you want to appear in the button in the small dialog that pops up.  I suggest "HOMO Comparison".  Click "OK".  You should now have three instances in your instance list.
Create the web page:
  1. Double check your entries in the text boxes on the left side of the dialog box (you may not have reset them since making a different web page).
  2. Click on the "Save .html as ..." button near the bottom left.  Choose a location and name for the page.  A directory of that name will be created in the location you choose.  It will contain many files.
  3. Check that your page is OK. If necessary move a copy of the whole directory just created to your test directory (see instructions on testing locally).  Open the .html file.  It should look like thisExternal Website, Opens in New Window.
  4. Add the descriptive text that appears in this left hand scrolling window.  You only need to edit the .html document.  
    • Open the .html document in your favorite WYSIWYG Web page editor.  Some suggestions are: 
      • KompoZerExternal Website, Opens in New Window (open source, reasonably good),
      • SeaMonkeyExternal Website, Opens in New Window (open source, but a little behind),
      • AmayaExternal Website, Opens in New Window (open source, complete, but harder to use).
    • Be careful when editing not to do anything to the picture of Jmol at right or inside the boxes (tables) that will contain the buttons.  It is possible to damage the javascript so that the page will not work.
    • There is a known problem with some of these editors messing up the javascript in the headers created by Jmol 11.4.4.  This can be fixed by manually editing the source code.   Search for the text "one file;" near the top of the file.  It will probably be at line 38 or so.  Replace the ";" with a <return> and make sure that the next line is:
      • var dataDir = ".";  //some comments.
  5. Once the page is the way you want it copy the whole directory containing the file to your web server in the appropriate directory.
You're done!
Based on template by A. Herráez as modified by J. Gutow
Page skeleton and JavaScript generated by export to web function of (Jmol 11.4.4 2007-12-20 06:37) on Jul 17, 2008.