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
71 lines (56 loc) • 2.87 kB
HTML
<html>
<head>
<script type="text/javascript" language="javascript" src="jsme/jsme.nocache.js"></script>
<script>
function atomHighLight(jsmeEvent) {
document.getElementById("atomHighLightTextAreaOut").value = jsmeEvent.atom;
logEvent(jsmeEvent)
}
function bondHighLight(jsmeEvent) {
document.getElementById("bondHighLightTextAreaOut").value = jsmeEvent.bond;
logEvent(jsmeEvent);
}
function atomClicked(jsmeEvent) {
document.getElementById("atomClickedTextAreaOut").value = jsmeEvent.atom;
logEvent(jsmeEvent);
}
function bondClicked(jsmeEvent) {
document.getElementById("bondClickedTextAreaOut").value = jsmeEvent.bond;
logEvent(jsmeEvent);
}
function logEvent(jsmeEvent) {
document.getElementById("eventTextAreOut").value = jsmeEvent.action + " " + jsmeEvent.atom + " " + jsmeEvent.bond + "\n" + document.getElementById("eventTextAreOut").value;
}
//this function will be called after the JavaScriptApplet code has been loaded.
function jsmeOnLoad() {
jsmeApplet = new JSApplet.JSME("jsme_container", "180px", "140px", {
"options" : "depict depictAction star"
});
jsmeApplet.setCallBack("AtomHighlight", atomHighLight);
jsmeApplet.setCallBack("BondHighlight", bondHighLight);
jsmeApplet.setCallBack("AtomClicked", atomClicked);
jsmeApplet.setCallBack("BondClicked", bondClicked);
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);
//alert(jsmeApplet.getAlldefinedCallBackNames());
var actionMarked = 105;
jsmeApplet.setAction(actionMarked);
//atom clicked will be highligh
jsmeApplet.setAfterStructureModifiedCallback(function(jsmeEvent) {jsmeEvent.src.setAction(actionMarked);});
}
</script>
</head>
<body bgcolor="#E6E6FA">
<h2>Depict mode with the callback "AtomHighLight" and the star option enabled</h2>
<div id="jsme_container"></div>
<br>
Atom highlighted by mouse over:<textarea id="atomHighLightTextAreaOut" rows="1" cols="3"></textarea>
Bond highlighted by mouse over:<textarea id="bondHighLightTextAreaOut" rows="1" cols="3"></textarea>
<br>
Atom clicked:<textarea id="atomClickedTextAreaOut" rows="1" cols="3"></textarea>
Bond clicked:<textarea id="bondClickedTextAreaOut" rows="1" cols="3"></textarea>
<hr>
<br>
Event:<textarea id="eventTextAreOut" rows="10" cols="30"></textarea>
</body>
</html>