Jmol project
From Biomolecules at Kenyon
Revised November 5, 2012 . Report corrections or questions to Joan Slonczewski.
Edit project using Nvu.

1. Open My Computer. Click on the box labeled address: and type the following and then press Enter:

\\parana.kenyon.edu\bio-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 window.
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. 

The Model consists of:

  • 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: Mozilla or IE.

Open your browser and type in the URL of your copy of the model tutorial. It will be of the form:

https://internal.kenyon.edu/biology//tutorials/MyMolecule/index.htm

Note: Always open Jmol tutorials using the web address (with https:). The tutorials will not work if you simply drag the filename into the browser.

Push the button after the first sentence under II. General Structure. What does it do? It shows cartoons and colors the peptide chains

3A. Copy your PDB file into your own model folder.
Never change the name of the PDB file, as its filename provides the reference for instant access in the Protein Databank. Your PDB file should be at the same level as "3gap.pdb" and "1cgp.pdb".

3B. Open Nvu (either from the desktop or the Start menu).
The departmental laptops have Nvu installed. If your PC does not have Nvu, download here.

Open index.htm in Nvu.

Editing the code that displays the molecule.

  • Click on the View menu and select HTML Source. This will display the HTML code that produces the tutorial.
  • Scroll to the line that starts with JmolApplet (should be about line 66).
  • Replace the "pdb" filename after the word load 3gap.pdb with the name of your own pdb file. **Be sure capitalization is consistent with your own filename. (Note: Later, another line (about line 15) also needs 3gap.pdb replaced.)
  • 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.

  • Find the first line within the text content of your page that begins with the word JmolButton, which should be at about line 150. The following code should be in the vicinity of this line:

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>

In the code above, blue text indicates code required for every button in the tutorial. 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 Nvu.

In Mozilla: View, Reload.
Press the button that you edited in Nvu. What happens?

Next Button. In Mozilla, push the second button.What does it do?
Check it out in Nvu.

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.

Go to the line (about line 139), which contains 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 (about line 13). 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