Jmol/JSmol projects

On-campus work: Many students access the server directly using their personal laptops. In that case, you will want to install the Pinegrow web editor, (available for both Mac and Windows). It has features that can be super helpful, especially for beginning coders.

Off-campus work:  Not possible at this time.  I will amend these instructions and let you know if LBIS-IT is able to set this up.

Note: JSmol is a version of Jmol that can run without Java.  "Jmol" and "JSmol" are essentially the same program, and these names are sometimes used interchangeably.

From Biomolecules at Kenyon

Report corrections or questions to Daniel Barich.

Edit project using Pinegrow.

  1. Windows: Open the Run dialog, either by choosing Start -> Run or by holding down the Windows logo key and pressing R.  Then type the following address: \\parana.kenyon.edu\bio-tutorials\2023

    Mac:  Map the following drive:  smb://parana.kenyon.edu/bio-tutorials/2023.

  2. After gaining access to the relevant folder on the bio-tutorials server, create a copy of the Jmodel folder. (You may get a security warning and have to click Yes). Rename the copy immediately with your tutorial name, which should be as follows: the authors' first and last initials, all capital letters, in the same order you will use on your main page (i. e., Jane Doe and John Smith would use JDJS). Then open the folder.  DO NOT rename, delete or otherwise alter the original Jmodel folder.

  3. Your folder should contain the following files:

    • index.htm: This file contains both the tutorial text and the JavaScript code to display the molecule. You will need to change them 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.
  4. Open a browser and type in the URL of your folder. It will be of the form:
  5. https://internal.kenyon.edu/biology/tutorials/2023/<your folder Name>/index.htm
    

    Note: Always open JSmol tutorials using the web address (with https:). This enables viewing over the internet, via the web server.  The molecule will not be visible if you simply drag the filename into the browser.

  6. Explore button functionality.  Push the button after the first sentence under "II. General Structure." What does it do? It shows cartoons and colors the peptide chains. (We are doing this step now because later we will be looking at the code for it, but we will have replaced the structure with your own at that point.)
  7. Download your structure.  Find your structure in the RCSB protein data bank. There are often many different structures for the same protein. Make sure you know what you're getting (you can click on the pubmed link to find the paper where this structure was originally reported.) Download the correct PDB as a PDB file (text). The file extension needs to be .PDB
  8. Copy your PDB file into your own tutorial 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. Usually when you initially download the PDB file it goes into a downloads folder. Move into your folder.

  9. Set up Pinegrow, a WYSIWYG web editor.  Open Pinegrow (either from the desktop or the Start menu).  Installation instructions are on moodle (behind firewall; not for public sharing).
  10. Edit the tutorial.  Open index.htm in Pinegrow, (do this by choosing File | Open file, then typing \parana.kenyon.edu\bio-tutorials into the dialog box then clicking on your molecule, then the index file, then Open.
  11. Press Control (Command) + E to show the web page's source code. Scroll to the line that starts with var loadScript (should be about line 11).
  12. Replace the PDB extension in load 3gap.pdb with the name of your own PDB file. **Be sure capitalization is consistent with your own filename.
  13. At around lines 109-112 change the name of the molecule and the authors. This can also be changed on the Pinegrow editor screen instead of in the source code.
  14. Save the tutorial. Note if the file is saved as an .htm or .html file.
  15. If not already up, open your tutorial in a browser window to see how your changes affect the page. You will need to wait a moment for your changes to take effect, after which you can press Control + Shift + R to reload the page and override the cache. You can also try refreshing the browser multiple times. Chrome oftten works well as a browser, but Safari or Firefox may also function adequately.

Editing the text and buttons.

To show or hide the source code window, hold down Control (or Command) and press E. You can also edit the code for the selected element by showing the Element code window from the Windows | Show / Hide Panels menu option.

  1. Find the following code which should start at about line 152:
    <script language="JavaScript">
    Jmol.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> 
    
  2. In the code above, the code that is not in italics is required for every button in the tutorial, whereas text in italics is script code, that will vary from one button to the next. The jmolButton command creates a button that, when pressed, 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 separate these commands with semicolons (;), and do not press Enter between them.
  3. 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 by changing "color blue" to "color red." Save file in Pinegrow.

  5. Reload the page, usually by pressing Control + Shift + R (Pressing Control + R may not work due to browser caching).

  6. Press the button that you edited in Pinegrow. What happens?

Next Button

  1. Push the second button.What does it do?

  2. Check out the code in Pinegrow.

    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 code from an existing button to wherever you want to put a new button.

More commands

For a reference of Jmol commands, go to JSmol's Interactive Scripting Documentation. To find out how to create check boxes, radio buttons, etc. using the <script> tag, see the Jmol JavaScript Object documentation).

Adding reset buttons to your tutorial.

Go to the line (about line 147) which contains the following code:

<script language="JavaScript">ResetProteinButton();</script>

This code creates a reset button that, when pressed, will reset the molecule view to its original state.  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. Note also that the model uses a 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.

The moveTo command.

The easiest way to set the location, orientation, and zoom level of a molecule in JSmol 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.

Whenever a JSmol molecule is displayed, you can generate a moveTo command that, when executed, will place the molecule in the current position and orientation. Move the mouse over the applet, click the right mouse button, and Select Console.  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 (you may first need to click on editor) 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 for common problems.