Page 3: Tables with Embedded Jmol Images and Control Elements

Page 3: Using Tables to Display Embedded Jmol Images
and Using Control Elements to Modify Jmol Images

[Home] [Page 1] [Page 2] [Page 3] [Page 4] [Page 5] [Page 6] [Page 7]

Tables

Tables can be used to lay out objects on a page. Below is an example for using a 2-column, 1-row table to display a Jmol image along with text:

Structure of 3-isopropylmalate dehydrogenase in complex with 3-isopropylmalate at 2.0 A resolution: the role of Glu88 in the unique substrate-recognition mechanism.

Imada K, Inagaki K, Matsunami H, Kawaguchi H, Tanaka H, Tanaka N, Namba K.

International Institute for Advanced Research, Matsushita Electric Industrial Co., Ltd., Seika, Japan. kimada@npn.jst.go.jp

BACKGROUND: 3-Isopropylmalate dehydrogenase (IPMDH) and isocitrate dehydrogenase (ICDH) belong to a unique family of bifunctional decarboxylatingsdehydrogenases. Although the ICDH dimer catalyzes its reaction under a closed conformation, known structures of the IPMDH dimer (without substrate) adopt as fully open or a partially closed form. Considering the similarity in the catalytic mechanism, the IPMDH dimer must be in a fully closed conformation during this reaction. A large conformational change should therefore occur upon substrate binding.

To insert a table:

Drag the Table button from Basic tab of the the Object palette:

This will place a 3 x 3 table on the page.

To select a cell within the table, click on the bottom border of a cell. To select the entire table, click on the upper border of the table. The Inspector palette will change depending on what is selected. The Inspector palette can be used to set the number of rows and columns in the table. It can also be used the set the width of the borders and the padding between the borders and the cell contents.

If the border is set to 0, then the table grid will not be seen:

When using tables to layout Jmol images and text, it is best to set the width of the column that will hold the Jmol script icon to the width that the Jmol image will be; this will give you a layout that approximates what will be seen when the table if viewed with a browser.

Below is what the table above looks like in GoLive in the Layout view. The left-hand cell is selected and below that the Inspector is shown with the Cell tab selected to show that the cell width is set to 250 pixels, the same width that the jmolAppet is set to.

In this example, the left-hand cell was used to hold the Jmol image. This was done by dragging a JavaScript icon the Basic tab of the Objects pallet, just as was done on Page 2 of this tutorial. To make this work, the page also requires the JavaScript icon in the <HEAD> region of the page, which points to the Jmol.js file, and the JavaScript icon at the top of the <BODY> region of the page, which contains the jmolInitialize function that provides the path to the location of the jmolApplet#.jar files in the web site.

Buttons and other Control Elements to Modify Jmol Images

Buttons and other control elements can be used to send RasMol script commands to embed Jmol images. The Jmol.js library contains functions for embedding control elements. A description of the functions contained in the Jmol.js library can be found here. Below are some examples of some of the control elements included in the Jmol.js library:

Button:

Checkbox:

Radio button group:

Menu:
color by

Creating Jmol buttons and other control elements works similarly to creating a Jmol image; drag a JavaScript icon from the Basic tab of the Object pallet to the location where you want the control element located, then enter the JavaScript function from the Jmol.js library that will produce the desired control element.

In order for a Jmol control element to work, it must be contained within form tags, <FORM>...</FORM>. The form tag can be found on the Form tab of the Object pallet. The easiest way to do this is to this to enclose the entire contents of a web that is going to contain Jmol control elements within a single set of form tags.

Below is a figure showing the layout used to produce the table shown above, which contains the Jmol image and control elements. To produce this table, all of content of the page was placed within form tags, which are represented by the large box with the little F in its upper left-hand corner. The Jmol.js library functions associated with each of the JavaScript icons can be viewed by placing the cursor over each of the JavaScript icons.

jmolInitialize("..")

jmolButton("RasMol script","Button label")

jmolApplet(size,"RasMol script")

jmolCheckbox("RasMol script when checked",
"RasMol script when unchecked",
"Label for checkbox")

jmolRadioGroup([
["RasMol script for 1st Item","Label for 1st item","isChecked"],
["RasMol script for 2nd Item","Label for 2nd item"],
["RasMol script for 3rd Item","Label for 3rd item"],
[...]],
"<br>")

jmolMenu([
["RasMol script for 1st Item","Label for 1st item","isChecked"],
["RasMol script for 2nd Item","Label for 2nd item"],
["RasMol script for 3rd Item","Label for 3rd item"],
[...]],
number of items displayed)

Resource for Button Scripts

And excellent resource for learning Rasmol script commands is the Online Macromolecular Museum Site, which was created by David Marcey at California Lutheran University. This site contains, among other things, examples of buttons along with the scripts that they execute. Many of the exhibits at the Online Macromolecular Museum Site still use the Chime plugin; for these you will need to use a Netscape 4.x browser the the Chime plugin installed. Below are a couple of links to exhibits in the museum, which use Jmol:

An Introduction to Immunoglobulin Structure

Influenza Hemagglutinin

[Home] [Page 1] [Page 2] [Page 3] [Page 4] [Page 5] [Page 6] [Page 7]