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, but a little behind),
- Amaya
(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.
- 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
Using directory /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/Make a ScriptButton Page/Make a ScriptButton Page
adding JmolPopIn.js
...jmolApplet0
...adding MO_8.png
...copying /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/ethane-staggered-3-21G.log to /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/Make a ScriptButton Page/Make a ScriptButton Page/ethane-staggered-3-21G.log
...copying Jmol.js to /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/Make a ScriptButton Page/Make a ScriptButton Page/Jmol.js
...copying JmolApplet.jar to /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/Make a ScriptButton Page/Make a ScriptButton Page/JmolApplet.jar
...adding MO_8.spt
...jmolApplet1
...adding MO_9.png
...copying /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/ethane-staggered-3-21G.log to /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/Make a ScriptButton Page/Make a ScriptButton Page/ethane-staggered-3-21G.log
...copying Jmol.js to /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/Make a ScriptButton Page/Make a ScriptButton Page/Jmol.js
...copying JmolApplet.jar to /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/Make a ScriptButton Page/Make a ScriptButton Page/JmolApplet.jar
...adding MO_9.spt
...jmolApplet2
...adding HOMO_Comparison.png
...copying /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/ethane-staggered-3-21G.log to /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/Make a ScriptButton Page/Make a ScriptButton Page/ethane-staggered-3-21G.log
...copying Jmol.js to /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/Make a ScriptButton Page/Make a ScriptButton Page/Jmol.js
...copying JmolApplet.jar to /Users/jonathan/Documents/Presentations/BCCE 2008/How-To/Make a ScriptButton Page/Make a ScriptButton Page/JmolApplet.jar
...adding HOMO_Comparison.spt
