MarvinView Example - Selecting atoms

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

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("atomNumbersVisible",true);
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.

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