Jmol project
From Biomolecules
at Kenyon
Revised
October 15, 2007
. Report corrections or questions to Joan
Slonczewski.
Edit project using Dreamweaver MX.
1. Open My Computer. Click on the
box labeled address: and type the following and
then press Enter:
\\eta\biology\tutorials
When the folder opens, move the
mouse to the jmodel folder. Click and hold the
right mouse button and move the mouse to an empty part of the windrow.
When none of the other files or folders in the window are highlighted,
release the right mouse button and click on the Copy Here
button. A copy of the folder, called "Copy of jmodel",
should appear.
Rename it immediately
with your own molecule name.
·
Keep filenames short, and avoid empty spaces; use underscore instead.
-
index.htm: This file
contains both the JavaScript code to display the molecule
and the text, which you will need to change to your own names,
molecule, references, etc.
-
3gap.pdb: This is the
molecule that is loaded when the tutorial is first opened.
-
1cgp.pdb: This file
contains the DNA complex that is loaded later in the tutorial.
2.
Open and keep open on screen:
Model in Mozilla, Netscape, or IE. Open your
browser and type in the URL of your copy of the model tutorial.
It will be of the form http://www2.kenyon.edu/Local/Depts/Biology/tutorials/Insert
your folder name/. Note: Always open Jmol
tutorials using the web address, i. e. the one that includes www2.kenyon.edu.
Generally the tutorials will not work if you simply drag the file
from Windows Explorer into the browser.
Push the button after the first sentence under II. General
Structure. What does it do? It shows cartoons
and colors chains.
3. Open Dreamweaver.
Define a new Site consisting of your
(renamed) model tutorial folder.
Open index.htm in Dreamweaver. Then click
on the View menu and click :"Code and Design." There should
now be a horizontal bar in the middle of the screen. The code window
is above the bar, and the design window is below the bar.
Editing the code that displays the molecule.
-
Click inside the code window and scroll to the top of the page.
-
Scroll down to the line that starts with JmolApplet.
-
Replace the "pdb"
filename after the word load with
the nameof your own pdb file. Be
sure capitalization is consistent with your own filename.
-
The moveTo command
rotates your molecule a specified number of degrees along a specified
axis (x, y, z) and sets the zoom level and position of your molecule.
Editing the text and buttons.
-
Click in the text pane in the design windrow.
Eventually, you will replace all text with information on your
own molecule.
-
In the design window, find and click at the
end of the first sentence after the heading II. General
Structure. Then, in the code window, click on the word
JmolButton, which should be near
the vertical bar marking the position of the cursor.
-
The following code should be to the right of the :cursor:
<script
language="JavaScript">
jmolButton("select all; labels off; spacefill
off; color cpk; wireframe off; ribbons off; cartoons off; backbone
on; select protein; backbone off;
cartoons on; select *a; color blue; select *b; color
magenta;","");
</script>
Blue text indicates code required for every button,
whereas red text is script code, which will very from one button
to the next. The jmolButton command
creates a button that, when clicked, will execute the script commands
in the first pair of quotes. You'll need to figure out what commands
in the list make what effects, and how to tailor them to your own
molecule. Be sure to terminate each of these commands with
a semicolon (;), and do not press Enter between them.
Command list for first button, with
explanations
| select
all
|
The entire molecule
will be affected by subsequent commands. |
| labels
off
|
Turns off labels
(in case another button turned them on). |
spacefill
off |
Turns off spacefill. |
color
cpk |
Colors all atoms according to the CPK color
scheme. (default) |
| wireframe
off
|
Turns off wireframe,
in order to show other renderings. |
ribbons
off |
Turns off ribbons. |
cartoons
off |
Turns off cartoons. |
backbone
on |
Turns on backbone. |
select
protein |
Only protein atoms will be affected by subsequent
commands. |
backbone
off |
Turns off backbone (so it doesn't interfere
with cartoon). |
| cartoons
on
|
Turns on cartoon
rendering |
| select
*a
|
Only chain a(*=all
of it) will be affected from now on. |
| color
blue
|
Blue color will be
applied (to chain a only). |
| select
*b
|
Only chain b will
be affected. |
| color
purple
|
Purple will be applied(to
chain b). |
Note: Begin each button's list of commands
with select all followed by commands to turn on/off
each of the possible renderings, as shown in the first eight commands
of this example. This way, the reader of your tutorial will not
have to click on each and every button in sequence. For ease of
readability, after each select command, place the
off commands in a group before the on
commands, as in the example.
4. Edit the first button.
Change "color blue" to "color red."
Save file in Dreamweaver.
In Netscape: View, Reload.
Press the button that you edited in Dreamweaver. What happens?
Next Button. In Netscape, push
the second button.What does it do?
Check it out in Dreamweaver.
Command list for the second button (excluding
the first eight commands, which are the same as above):
| select
protein
|
Selects
protein atoms |
| backbone
off
|
|
cartoons
on |
|
color
blue |
|
| select
cmp
|
Selects
cAMP (cyclic monophosphate) [Probably
absent in your own pdb]. |
backbone
off |
|
wireframe
0.6 |
Sets wireframe width to 0.6 angstroms. |
color
lawngreen |
|
select
atomno=1652 or atomno=3325 |
Select the atoms numbered 1652 and 3325 |
label
cAMP |
Labels selected atoms "cAMP." |
| font
label 31
|
Set label font to
31 points. |
| select
130-139
|
Selects residues
130-139 |
| color
red
|
|
| select
140-209
|
Select residues 140-209 |
| color
yellow
|
|
.
New Buttons.
You can copy the above text wherever you want a new button.
More commands:
A good site to find more commands and examples is An
Introduction to Jmol Scripting. For a reference of Jmol commands,
go to Jmol's Interactive
Scripting Documentation. To find out how to create check boxes,
radio buttons, etc. using the <script> tag, see
the JavaScript Library
documentation.
5. Adding reset buttons to your tutorial.
In the design window, find and click on the section heading II.
General Structure. Then, in the code window, find the word
ResetProteinButton, which should be
surrounded by the following code:
<script language="JavaScript">ResetProteinButton();</script>
To insert a reset button anywhere in your tutorial, simply type or
copy/paste this code (in the code window, not the design window) wherever
you want the button to appear. The model tutorial has a reset button
at the top of every numbered section, but this is not essential. If
every button resets the appearance of the molecule before adding new
effects, then it won't be necessary to reset the molecule.
To change the script that is run for the reset buttons, scroll to
the top of the page and find the first function
command in the code window. Then modify the code between the braces
{} to suit your molecule. Most likely,
you will want the reset button's script to be the same as the script
that loads the molecule, except that you should begin it with the
zap command, as shown in the model. Note that the model
uses another JavaScript function to create a different reset button
for the DNA. You can create as many different types of reset buttons
as you want by creating JavaScript functions. (You can also delete
the extra function if you don't need it.)
6. The moveTo command.
The easiest way to set the location, orientation, and zoom level
of a molecule in Jmol is to use the moveTo command, as
follows:
moveTo [time in seconds] [rotation axis x y z] [rotation
angle] [zoom%] [translate x y]
This command moves the molecule [rotation angle] degrees counterclockwise
(to the left) about the specified rotation axis, sets the zoom level,
and translates the molecule so that [zoom%] if it is visible. Positive
values for the transform arguments move the molecule to the right
for the x-axis and up for the y-axis, and negative values reverse
the direction. The zoom and translate arguments are optional, but
everything else is required, and you cannot skip an argument.
While a Jmol applet is running, you can display the moveTo
command that will place the molecule in the current position and orientation.
Move the mouse over the applet and click the right mouse button. Select
Console | Open from the menu.The console window will open, where you
can type commands and execute them to see their effect immediately.
Type show orientation and press Shift+Enter.
The display at the top of the popup window should display a moveTo
command. You can then copy this command to the clipboard by selecting
it with the mouse and pressing Ctrl+C. Now you can paste
the command in a block of script commands in your tutorial. Note that
the first number after the word moveTo is the number
of seconds the molecule will take to move to the new position. Remember
to set this number to 0 if you want the molecule to position itself
instantly.
Troubleshooting
If you run into any problems, please check the Troubleshooting
page before asking for help.
Back to Biomolecules at Kenyon
|