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
130 lines (101 loc) • 4.32 kB
HTML
<html>
<head>
<title>Structure modified and atom mark demo</title>
<script type="text/javascript" language="javascript" src="jsme/jsme.nocache.js"></script>
<style>
em {background-color:rgb(102,255,255);}
</style>
<script>
//this function will be called after the JavaScriptApplet code has been loaded.
function jsmeOnLoad() {
jsmeApplet = new JSApplet.JSME("jsme_container", "380px", "340px", {
"options" : "oldlook,star"
});
jsmeApplet.setAfterStructureModifiedCallback(showEvent);
document.getElementById("log").value = "";
}
var patt=/\[([A-Za-z][a-z]?)H?\d*:\d+\]/g; //regexp pattern for numbered atom
function showEvent(event) {
var log = document.getElementById("log");
log.value = event.action + " at: " + event.atom + " b: " + event.bond + " m: " + event.molecule + " origin: " + event.origin + " smiles:" + event.src.smiles() + "\n" + log.value;
}
function readMolecule() {
var jme = "16 17 C 7.37 -8.99 C 7.37 -7.59 C 6.16 -6.89 C 4.95 -7.59 C 4.95 -8.99 C 6.16 -9.69 N 8.58 -6.89 C 8.58 -5.49 C 7.37 -4.79 O 6.16 -5.49 C 9.80 -7.59 O 9.80 -8.99 C 11.01 -6.89 Cl 12.22 -7.59 Cl 11.01 -5.49 C 9.80 -4.79 1 2 1 2 3 2 3 4 1 4 5 2 5 6 1 6 1 2 7 8 1 8 9 1 9 10 1 3 10 1 2 7 1 7 11 1 11 12 2 11 13 1 13 14 1 13 15 1 8 16 1";
jsmeApplet.readMolecule(jme); // or document.JME.readMolecule(jme);
}
function readMultipart() {
var jme = "9 9 C 6.68 -7.15 C 5.47 -6.45 C 4.26 -7.15 C 4.26 -8.55 C 5.47 -9.25 C 6.68 -8.55 C 5.47 -5.05 O- 6.68 -4.35 O 4.26 -4.35 1 2 1 2 3 2 3 4 1 4 5 2 5 6 1 6 1 2 2 7 1 7 8 1 7 9 2|1 0 Na+ 30 100";
jsmeApplet.readMolecule(jme) // or document.JME.readMolecule(jme
}
function readReaction() {
var jme = "3 2 C:1 1.41 -7.12 O:2 1.41 -5.72 Cl 2.63 -7.82 1 2 2 1 3 1|3 2 N:3 5.72 -6.78 C:4 7.12 -6.78 H:5 5.02 -7.99 1 2 1 1 3 1 >> 5 4 C:1 13.51 -6.40 O:2 13.51 -5.00 N:3 14.72 -7.10 C:4 15.94 -6.40 H:5 14.71 -8.50 1 2 2 1 3 1 3 4 1 3 5 1";
jsmeApplet.readMolecule(jme);
}
function readMolFile() {
var mol ="heade 123458r\n" +
"JME\n" +
"\n" +
" 4 3 0 0 0 0 0 0 0 0999 V2000\n" +
" 0.0000 2.1000 0.0000 C 1 0 0 0 0 0 0 0 0 0 0 0\n" +
" 1.2124 1.3999 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n" +
" 2.4248 2.1000 0.0000 C 1 0 0 0 0 0 0 0 0 0 0 0\n" +
" 1.2124 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n" +
" 1 2 1 0 0 0 0\n" +
" 2 3 1 0 0 0 0\n" +
" 2 4 1 0 0 0 0\n" +
"M ISO 1 1 13\n" +
"M ISO 1 3 13\n" +
"M END\n"
jsmeApplet.readMolFile(mol);
}
</script>
</head>
<body>
<H1>Structure modified and atom mark demo</H1>
<p>
Draw a structure, click on the star icon of the editor and click on one or more atoms
</p>
<div id="jsme_container"></div>
<button type="button" id="clear_but" onclick='document.getElementById("log").value=""'>Clear log</button>
<BR>
After structure changed event:
<BR>
<textarea id = "log" rows="15" cols="80"> </textarea>
<BR>
<table >
<tr>
<td style="font-weight:bold;" colspan="4" >Import predefined chemical structure to applet:</td>
</tr>
<tr>
<td id= "readReactionButton">
<button type="button" onclick='readMolFile();'>Read MOL</button>
</td>
<td>
<button type="button" onclick='readMolecule();'>Read JME String</button>
</td>
<td id= "readMultipartButton">
<button type="button" onclick='readMultipart();'>Read Multipart Structure</button>
</td>
<td id= "readReactionButton">
<button type="button" onclick='readReaction();'>Read reaction</button>
</td>
</tr>
</table>
<BR>
<table>
<tr>
<td style="font-weight:bold;">Set options:</td>
</tr>
<tr>
<td>
<textarea id="optionsTextArea", rows="1" cols="50">reaction,nostar</textarea>
</td>
<td >
<button type="button" id="optionsButton" onclick='var options = document.getElementById("optionsTextArea").value; jsmeApplet.options(options);'>Set options</button>
</td>
</tr>
</table>
<BR>
<BR>
</body>
</html>