Controling Jmol Images

One of the most powerful features of Jmol images is the ability to modify them after they are created by using buttons, radio buttons, checkboxes and menus. These control devices are used to send RasMol scripts to the Jmol image.

One of easiest ways of embedding these objects into web pages is using the Javascripts found in the Jmol.js library. These included:

jmolButton

jmolCheckbox

jmolRadioGroup

jmolMenu

jmolLink

For these Javascripts to work on a web page, the must be included within <FORM>...</FORM> tags. The best way to do this is to place the entire content of the page within a single set of <FORM>...</FORM> tags.

Building on the web page that you created in the last section, add the following HTML code to incorporate these control objects and to have them control the aspartame model:

<HTML>

<HEAD>

<TITLE>My Page</title>

<SCRIPT SRC="./Jmol.js"></SCRIPT>

</HEAD>

<BODY>

<FORM>

<SCRIPT>
jmolInitialize(".")
</SCRIPT>

Sugar is sweet,<P>

But Nutrasweet is sweeter.<P>

<SCRIPT>
jmolApplet(300,"load aspartame.pdb;select *;
spacefill on;color cpk")
</SCRIPT>

<SCRIPT>
jmolButton(
"rotate y 90","rotate by 90°")
</SCRIPT>

<SCRIPT>
jmolCheckbox(
"set spin y 45;spin on",
"spin off",
"Turn spin on/off")
</SCRIPT>

<SCRIPT>
jmolRadioGroup(
[["select *;color cpk","cpk","isChecked"],
["select *;color green","green"],
["select *;color red","red"]],"<br>")
</SCRIPT>

<SCRIPT>
jmolMenu(
[["select *;spacefill on",
"spacefill","isChecked"],
["select *;spacefill off;spacefill 100;wireframe 50",
"ball and stick","isChecked"],
["select *;spacefill off;wireframe 50",
"sticks"],
["select *;spacefill off;wireframe on",
"wireframe"]],1)
</SCRIPT>

<SCRIPT>
jmolLink(
"moveto 1.0 { 1000 21 11 72.0} {-0.123 -0.348 -0.303} 6.2;
delay 0.5;
moveto 1.0 {0 0 1 0} {-0.123 -0.348 -0.303} 6.2",
"Take a bow!°")
</SCRIPT>

</FORM>

</BODY>

</HTML>

Save this page as "fifthshot.html" and try opening it with your browser. If you have done this properly it should look like this.

Click here to find a more detailed description of the Javascripts available in the Jmol.js library.

This site will open in its own window

Click here to for a description of the Jmol script commands that can be used with Jmol.

This site will open in its own window

Previous:Embedding Jmol The End

Updated:Fri, Nov 10, 2006