MarvinView Example 5

This example demonstrates how to change the applet's contents using JavaScript calls, and how to highlight atoms in the molecules.

Atom Number:
Right click, then choose Misc -> Atom Numbers to see the atom numbers

Molecule loading is handled by the following JavaScript function and HTML form: 

<script LANGUAGE="JavaScript1.1" SRC="../../marvin.js"></script>
<script LANGUAGE="JavaScript1.1">
<!--
function showM(s) {
	if(document.MView != null) {
		document.MView.selectAllAtoms(0, false); // clear selection
		document.MView.setM(0, "../../mols-2d/" + s + ".csmol");
	} else {
		alert("Cannot set molecule:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
//-->
</script>

<form onSubmit="return false">
<table CELLSPACING=5 CELLPADDING=0 BORDER=0>
<tr>
<td><input TYPE=BUTTON VALUE="Caffeine" onClick="showM('caffeine')"></td>
<td><input TYPE=BUTTON VALUE="Adrenaline" onClick="showM('l-adrenaline')"></td>
<td><input TYPE=BUTTON VALUE="Aspirin" onClick="showM('aspirin')"></td>
<td><input TYPE=BUTTON VALUE="Vitamin C" onClick="showM('vitaminc')"></td>
</tr>
</table>
</form>

Atom selection is handled by two JavaScript functions: 

<script LANGUAGE="JavaScript1.1" SRC="../../marvin.js"></script>
<script LANGUAGE="JavaScript1.1">
<!--
function selectAll(b) {
	if(document.MView != null) {
		document.MView.selectAllAtoms(0, atom-1, b);
	} else {
		alert("Cannot select atoms:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function selectAtom(b) {
	if(document.MView != null) {
		var atom = document.SelForm.AtomNumber.value;
		document.MView.selectAtom(0, atom-1, b);
	} else {
		alert("Cannot select atom:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
In the applet tag, we specify the initial molecule and the selected atoms: 
mview_name = "MView";
mview_begin("../..", 200, 200);
mview_param("background", "#ffffff");
mview_param("molbg", "#ffffff");
mview_param("mol", "../../mols-2d/caffeine.csmol");
mview_param("selection0", "1,2,3");
Note that the atom indices are in the 0, ..., n-1 range, where n is the total number of atoms. So an atom index is one less than the atom number (1, ..., n) that the user sees when (s)he selects View -> Misc -> Atom Numbers.

To make molecule changes (the showM method) fast, we preload all the molecules into the Marvin's cache: 

mview_param("loadMols",
 "../../mols-2d/caffeine.csmol,"
+"../../mols-2d/l-adrenaline.csmol,"
+"../../mols-2d/aspirin.csmol,"
+"../../mols-2d/vitaminc.csmol");
mview_end();

Finally, the form used to select atoms is the following: 

<form onSubmit="return false" NAME="SelForm">
<table CELLSPACING=5 CELLPADDING=0 BORDER=0>
<tr>
<td><input TYPE=BUTTON VALUE="Select All" onClick="selectAll(true)"></td>
<td><input TYPE=BUTTON VALUE="Unselect All" onClick="selectAll(false)"></td>
<td><input TYPE=BUTTON VALUE="Select" onClick="selectAtom(true)"></td>
<td><input TYPE=BUTTON VALUE="Unselect" onClick="selectAtom(false)"></td>
<td>Atom Number:</td>
<td><input TYPE=TEXT VALUE="" NAME="AtomNumber"></td>
</tr>
<tr>
<td COLSPAN=5><small>Right click, then choose Misc -> Atom Numbers
    to see the atom numbers</small><td>
</tr>
</table>
</form>

The next example shows how to color atomsets in the viewer.