MarvinView Example 6

This example demonstrates how to color sets of atoms and bonds in the molecule using JavaScript.

Select atom or bond and its color
Atom Number:
Bond Endpoints:
Right click, then choose Misc -> Atom Numbers to see the atom numbers

Molecule loading is explained in the previous example.

The atom selection is handled by the following JavaScript functions:

<script LANGUAGE="JavaScript1.1" SRC="../../marvin.js"></script>
<script LANGUAGE="JavaScript1.1">
<!--
function selectAllAtoms() {
	if(document.MView != null) {
		var set = document.SelForm.AtomColor.selectedIndex + 1;
		for (var i = 0; i < document.MView.getAtomCount(0); i++) {
		    document.MView.setAtomSetSeq(0, i, set);
		}
	} else {
		alert("Cannot select atoms:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}

function unselectAllAtoms() {
	if(document.MView != null) {
		for (var i = 0; i < document.MView.getAtomCount(0); i++) {
		    document.MView.setAtomSetSeq(0, i, 0);
		}
	} else {
		alert("Cannot unselect atoms:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function selectAtom() {
	if(document.MView != null) {
		var set = document.SelForm.AtomColor.selectedIndex + 1;
		var atom = document.SelForm.AtomNumber.value - 1;
		document.MView.setAtomSetSeq(0, atom, set);
	} else {
		alert("Cannot select atom:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function unselectAtom() {
	if(document.MView != null) {
		var atom = document.SelForm.AtomNumber1.value - 1;
		document.MView.setAtomSetSeq(0, atom, 0);
	} else {
		alert("Cannot unselect atom:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function selectAllBonds() {
	if(document.MView != null) {
		var set = document.SelForm.BondColor.selectedIndex + 1;
		document.MView.setBondSetSeqAll(0, set);
	} else {
		alert("Cannot select bonds:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}

function unselectAllBonds() {
	if(document.MView != null) {
		document.MView.setBondSetSeqAll(0, 0);
		}
	} else {
		alert("Cannot unselect bonds:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function selectBond() {
	if(document.MView != null) {
		var set = document.SelForm.BondColor.selectedIndex + 1;
		var atom1 = document.SelForm.AtomNumber1.value - 1;
		var atom2 = document.SelForm.AtomNumber2.value - 1;
		document.MView.setBondSetSeq(0, atom1, atom2, set);
	} else {
		alert("Cannot select bond:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function unselectBond() {
	if(document.MView != null) {
		var atom1 = document.SelForm.AtomNumber1.value - 1;
		var atom2 = document.SelForm.AtomNumber2.value - 1;
		document.MView.setBondSetSeq(0, atom1, atom2, 0);
	} else {
		alert("Cannot unselect bond:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
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.

In the applet tag, we specify the initial molecule, the coloring scheme, the colors of the three different atom and bond sets (red, greeen, blue) and the initial atom set for the red color:

mview_name = "MView";
mview_begin("../..", 200, 200);
mview_param("colorScheme", "mono");
mview_param("background", "#ffffff");
mview_param("molbg", "#ffffff");
mview_param("atomSetColor1", "#ff0000");
mview_param("atomSetColor2", "#00ff00");
mview_param("atomSetColor3", "#0000ff");
mview_param("bondSetColor1", "#ff0000");
mview_param("bondSetColor2", "#00ff00");
mview_param("bondSetColor3", "#0000ff");
mview_param("atomSet0.1", "0,1,3,8,9");
mview_param("mol", "../../mols-2d/caffeine.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 COLSPAN=5>Select atom or bond and its color<td>
</tr>
<tr>
<td><input TYPE=BUTTON VALUE="Select All" onClick="selectAllAtoms()"></td>
<td><input TYPE=BUTTON VALUE="Unselect All" onClick="unselectAllAtoms()"></td>
<td><SELECT name="AtomColor">
       <OPTION>Red
       <OPTION>Green
       <OPTION>Blue
</SELECT></td>
<td>Atom Number:</td>
<td><input TYPE=TEXT SIZE=4 VALUE="" NAME="AtomNumber"></td>
<td></td>
<td><input TYPE=BUTTON VALUE="Select" onClick="selectAtom()"></td>
<td><input TYPE=BUTTON VALUE="Unselect" onClick="unselectAtom()"></td>
</tr>
<tr>
<td><input TYPE=BUTTON VALUE="Select All" onClick="selectAllBonds()"></td>
<td><input TYPE=BUTTON VALUE="Unselect All" onClick="unselectAllBonds()"></td>
<td><SELECT name="BondColor">
       <OPTION>Red
       <OPTION>Green
       <OPTION>Blue
</SELECT></td>
<td>Bond Endpoints:</td>
<td><input TYPE=TEXT SIZE=4 VALUE="" NAME="AtomNumber1"></td>
<td><input TYPE=TEXT SIZE=4 VALUE="" NAME="AtomNumber2"></td>
<td><input TYPE=BUTTON VALUE="Select" onClick="selectBond()"></td>
<td><input TYPE=BUTTON VALUE="Unselect" onClick="unselectBond()"></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 visualize chirality in the viewer.