Make a ScriptButton Page

Once the molecule file is fully loaded the image at right will become live. At that time the "activate 3-D" icon will disappear.

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:

Download the data file ethane-staggered-3-21G.log.
Open this file in the Jmol application.
Open the Jmol Web Page Maker dialog by clicking on the "Export to Web Page..." icon or by selecting "Export to Web Page..." within the "Export" submenu of the "File" menu.
Select the ScriptButton template by clicking on the ScriptButton tab.
Enter the necessary information into the fields on the left hand side of the dialog(see general set up)

Make the first button:

Open the scripting console (right mouse button, control-click on one button mouse, > Console).
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).
Turn on spinning (right mouse button > Spin > On).
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)
Add the annotation at the bottom using the echo command: "set echo bottom center; echo "MO #8 one of two degenerate HOMOs"".
Save this view by clicking on the "Add Present Jmol State as Instance..." button near the bottom right of the dialog.
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:

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)
Change the annotation to reflect the change in orbital using the command: "echo "MO #9 one of two degenerate HOMOs"".
Save this view by clicking on the "Add Present Jmol State as Instance..." button.
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:

Turn off the display of MO #9 with the command: "mo off".
Create the cyan display of MO #8 with following commands:

"isosurface homoa mo 8 mesh nofill;"
"color isosurface cyan;"

Create the yellow display of MO #9 with the equivalent commands:

"isosurface homob mo 9 mesh nofill;"
"color isossurface yellow;"

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.
Save this view by clicking on the "Add Present Jmol State as Instance..." button.
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:

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

KompoZer (open source, not recommended as of version 0.8 because bugs damage javascript),
SeaMonkey (Open source. You must check "Preserve original source formatting" in Preferences > Composer. This is the author's favorite editor),
Amaya (open source, complete, but harder to use).

Be careful when editing not to do anything to the picture of Jmol at right or the buttons. It is possible to damage the javascript so that the page will not work. Note you can safely change the name of the buttons.

Once the page is the way you want it copy everything in the directory containing this file to your web server except for the jsmol directory. Make sure to put it in the appropriate directory on your server.

You're done!

You may look at any of these intermediate views again by clicking on the appropriate button.

Based on template by A. Herráez as modified by J. Gutow

Page skeleton and JavaScript generated by export to web function using Jmol 14.1.5 2014-01-09 20:04: on Jan 22, 2014.

Using directory /Users/gutow/Desktop/Make a ScriptButton Page
  adding JmolPopIn.js
  ...jmolApplet0
      ...adding MO_8.png
copying and unzipping jsmol.zip directory into /Users/gutow/Desktop/Make a ScriptButton Page
      ...copying
file:/Users/gutow/Documents/Web Pages/Jmol_Web_Page_Maker/How-To/Make a ScriptButton Page/ethane-staggered-3-21G.log
         to
/Users/gutow/Desktop/Make a ScriptButton Page/ethane-staggered-3-21G.log
      ...adding MO_8.spt
  ...jmolApplet1
      ...adding MO_9.png
copying and unzipping jsmol.zip directory into /Users/gutow/Desktop/Make a ScriptButton Page
      ...adding MO_9.spt
  ...jmolApplet2
      ...adding Comparison.png
copying and unzipping jsmol.zip directory into /Users/gutow/Desktop/Make a ScriptButton Page
      ...adding Comparison.spt

This will be the viewer still of jmol image

If your browser/OS combination is Java capable you will get snappier performance if you use Java.