jsme
Version:
JSME is a free molecule editor written in JavaScript. JSME is a direct successor of the JME Molecule Editor applet. JSME supports drawing and editing of molecules and reactions on desktop computer, as well as on handheld devices including iPhone, iPad and
132 lines (81 loc) • 3.69 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- -->
<script type="text/javascript" language="javascript" src="jsme/jsme.nocache.js"></script>
<script>
function atomHighLight(molIndex, atomIndex) {
//index must start at 1
document.getElementById("atomHighLightTextAreaOut").value = atomIndex;
}
//this function will be called after the JavaScriptApplet code has been loaded.
function jsmeOnLoad() {
var startingStructure = "13 14 C 15.94 -11.45 C 15.94 -10.05 C 14.72 -9.35 C 13.51 -10.05 C 13.51 -11.45 C 14.72 -12.15 C 17.34 -11.45 C 17.34 -10.05 O 18.33 -9.06 C 18.33 -12.44 C 17.96 -13.79 C 19.68 -12.07 N 21.03 -11.71 1 2 1 2 3 -1 3 4 1 4 5 1 5 6 1 1 6 -1 7 8 1 2 8 1 1 7 1 8 9 2 7 10 -1 10 11 2 10 12 1 12 13 3";
//Instantiate a new JSME:
//arguments: HTML id, width, height (must be string not number!)
jsmeApplet = new JSApplet.JSME("appletContainer", "380px", "340px", {
//optional parameters
"options" : "query,hydrogens,nocanonize",
"jme" : startingStructure,
"atombg" : "1,2,2,2,3,2,4,2,5,2,6,2"
});
jsmeApplet.setNotifyAtomHighLightChangeJSfunction("atomHighLight");
}
</script>
</head>
<body>
<h1>JSME atom highlight</h1>
<table align="center">
<tr>
<td id="appletContainer"></td>
</tr>
</table>
<table align="center">
<tr>
<td>
<textarea id="atomHighLightTextArea" rows="1" cols="3">7</textarea>
<button type="button" onclick='var index = document.getElementById("atomHighLightTextArea").value; jsmeApplet.setAtomToHighLight(1, Number(index));'>Highlight atom</button>
</td>
</tr>
<tr>
<td>
Atom highlighted by mouse over:<textarea id="atomHighLightTextAreaOut" rows="1" cols="3"></textarea>
</td>
</tr>
</tr>
</tr>
<td>
Atom colors: <textarea id="atomHighLightTextArea2" rows="1" cols="35">7,3,8,3,9,3,10,3,11,3,12,3,13,3</textarea>
<button type="button" onclick='var atColorCsv = document.getElementById("atomHighLightTextArea2").value; jsmeApplet.setAtomBackgroundColors(1, atColorCsv);'>Set atom background color</button>
<button type="button" onclick='jsmeApplet.resetAtomColors(1);'>Reset Atom colors</button>
</td>
</tr>
</table>
<H3>Atom background color</H3>
There are 6 predefined pastel colors available: numbered 1 to 6. The color specification is character string containing a comma separated list of atom number and color index.<BR>
Example: 1,2 : color atom #1 with color # 2<BR>
Example: 1,2,10,4 : color atom #1 with color # 2 and color atom #10 with color #4<BR>
<H3>Bond background color</H3>
API not implemented yet.
<H2>API</H2>
<p>
Note: All atom and molecule indices start at 1.
</p>
<p>
<b>public void setAtomToHighLight(int molIndex, int atomIndex)</b><br>
The hightlight is temporary.
</p>
<p>
<b>public void setNotifyAtomHighLightChangeJSfunction(String notifyAtomHighLightJSfunction)</b><br>
Receive a notification when JSME detects a mouse over one atom. The argument is the name of a JavaScript function that receives two arguments: the molecule index and the atom index.<br>
To cancel, set the argument to null.
</p>
<p>
<b>public void setAtomBackgroundColors(int molIndex, String atomAndColorCSV) </b><br>
atomAndColorCSV must be an integer between 0 and 6. 0 means no background color.
</p>
<p>
<b>public void resetAtomColors(int molIndex) </b>
</p>
</body>
</html>